js框架上新了，自己写的一个框架，欢迎各位大神前来测试指导

weixin_46521444 2021-05-21 02:05:18

直接到我的博客原文地址来看吧，这里写不下太多

https://blog.csdn.net/weixin_46521444/article/details/117118592

　　第一章、页面渲染runYus：

　　runYus只专注两部分数据的渲染，第一：px pt em等像素数据，使用us-指令方法开头；第二：#fff #000等颜色数据，使用uc-指令方法开头。

　　1、us-指令(us-key-num-dom)：专注于支持像素属性的渲染，支持的属性key列表对应如下：

"w":"width",
"h":"height",
"t":"top",
"r":"right",
"b":"bottom",
"l":"left",
"p":"padding",
"m":"margin",
"pt":"padding-top",
"pr":"padding-right",
"pb":"padding-bottom",
"pl":"padding-left",
"mt":"margin-top",
"mr":"margin-right",
"mb":"margin-bottom",
"ml":"margin-left",
"bo":"border",
"bt":"border-top-width",
"br":"border-right-width",
"bb":"border-bottom-width",
"bl":"border-left-width",
"ra":"border-radius",
"bw":"border-width",
"fs":"font-size",
"lh":"line-height",
"ls":"letter-spacing",
"ti":"text-indent",
"ws":"word-spacing",
"ol":"outline",
"ow":"outline-width",
"oo":"outline-offset",
"xw":"max-width",
"nw":"min-width",
"xh":"max-height",
"nh":"min-height",
"va":"vertical-align",

　　例子：us-w-500即表示宽度为500px，不指定单位的情况下，默认使用px像素；us-w-100vw即表示宽度为整个屏幕，vw是单位；us-w-100pr，这个也表示宽度100%，其中pr就代表%，当然你也可以直接写成us-w-100%；us-mt-5代表上边距为5像素，us-mt-^5或us-mt-ms5代表上边距为负5像素，ms或^上尖号代表负数(-)
　　一般情况下，us-指令控制的是当前节点，可有的时候也要考虑下面的感受，所以加入了子元素控制参数。例如：us-w-80-1代表第一层children子元素宽度80像素，同理us-w-80-3代表第三层子元素宽度80

　　同时，us-指令也支持几种无单位css属性，如：us-z-8代表层的z-index值为8；us-fw-700代表字体为粗；us-opa-0.2代表透明度为0.2
"z":"z-index",
"fw":"font-weight",
"opa":"opacity",

　　2、uc-指令(uc-key-color-dom)：专注于支持颜色属性的渲染，支持的属性key列表对应如下：

"c":"color",
"bg":"background",
"bgi":"background-image",
"bgc":"background-color",
"bdc":"border-color",
"btc":"border-top-color",
"brc":"border-right-color",
"bbc":"border-bottom-color",
"blc":"border-left-color",

　　例如：us-c-fff即代表字体颜色为白，其中不需要#号，与us-指令同理uc-bg-f00-1代表子级dom背景色为红色，其它不做过多的解释了．

　　3、css指令扩展支持：例如想设置padding属性为：5px 8px 6px 8px，这样直接使用us-p-5px 8px 6px 8px是不可以的，需要把属性扩起来，即us-p-[5px 8px 6px 8px]，同理设置一个背景颜色过渡样式，使用uc-bg-[linear-gradient(to bottom,rgba(56,121,217,0.6),rgba(13,109,190,1))]即可以实现。

　　但是，yus不推荐这种使用方法，这样会使html代码看起来很臃肿，很复杂，但是如果你坚持这样用，那也没有问题。

　　另外，需要注意的是，如上例中的[linear-gradient(to bottom,rgba(56,121,217,0.6),rgba(13,109,190,1))]，其中to bottom因为中间有空格的原因，恰巧你又定义了一个bottom的class，那么这个class就会生效，为避免这种情况空格可以用下划线“_”代替，同理其中linear-gradient的短横线，也可以用竖线“|”代替。当然，你也可以不代替，如果没产生问题的话。

　　4、rotate-指令(rotate-deg)：这个很好理解了，就是旋转角度，rotate-45就代表元素顺时针旋转45度，同样的rotate也支持扩展，例如：rotate-[matrix(1.8,-0.5,1.2,0.5,0.2,-0.2)]

　　5、shadow-指令(shadow-px1-px2-px3-color)：这是生成阴影的指令，例如：shadow-3-3-3-666生成一个向右向下偏移3的灰色阴影，其中数值可以使用ms或^来代表负数，同样的，如果你感觉shadow指令不够用，也可以使用扩展[]支持，即shadow-[属性样式]

　　6、filter-指令(filter-key-val)：这个指令是对滤镜的支持，对应的属性key列表如下：

　　blur、huerotate、saturate、brightness、contrast、grayscale、invert、opacity、sepia

　　例如：filter-blur-20、filter-huerotate-80或filter-saturate-30，其中都是不需要带单位的，yus自动判断并附加单位，即filter-saturate-30与filter-saturate-0.3的效果是一样的，yus自动给没小数点的值附加%百分比

　　7、nl-指令(nl-cls-obj)：这个是给子级children添加class样式，或是给指定obj添加样式的，注明一下，在yus中是凡涉及到样式的大多情况下obj对应的是class名，而涉及到数据交互时，obj对应的名称是data-name标签，数据对应存在data("val")中，这点请记清，以后会用到，至于为什么不用class或是id，既然做自己的东西，总要与别人有区别的，不是吗？下面直接给例子。

<ul class="nl-block nl-fl nl-bgred nl-white">
<li>item 1</li>
<li>item 1</li>
</ul>

　　上面的例子依次代表着，子级块为display:block; float:left; 背景颜色红，字体颜色white。

　　至于其中的block、fl、bgred、white是事先定义好的内置class，yus预先定义并支持数种常用class，这些class在yus加载之前就已经存在了，不需要单独书写，对应列表如下：

.b { font-weight: bold; } \
.arial { font-family: \"Arial\"; } \
.i { font-style: italic; } \
.vm { vertical-align: middle; } \
.fl { float: left !important; } \
.fr { float: right !important; } \
.al { text-align: left !important; } \

　　　等等…………

　　另外，上面nl-指令写得有些复杂，所以nl-指令也支持扩展，简化后的写法是这样的，即用[]将所有class框起来即可，同样这样的写法也存在一个问题，如上文提到的，因为block fl bgred white中间存在空格，所以这几个样式除了对子级dom产生影响，对ul本身也生效，如果想避免这种情况，用下划线代替空格<ul class="nl-[block_fl_bgred_white]">，这样就不会产生任何问题了。

<ul class="nl-[block fl bgred white]">
<li>item 1</li>
<li>item 1</li>
</ul>

　　那么，有些童鞋会提出问题，nl-指令可以不可以包含us-、uc-、rotate-等指令呢？作者的回答是肯定的，上面的例子完全可以这样书写。

<ul class="nl-[block_fl_bgred_white_ac_us-w-80_us-h-20_us-lh-20_us-fs-12]">
<li>item 1</li>
<li>item 1</li>
</ul>

　　然后一运行，你们会骂我，喂，这是骗人的好不好，完全没有生效。确实是这样子的，nl-指令的嵌套渲染确实有些弱，你至少要在子级dom中添加一条us-或uc-指令才能产生影响，例如下面这样。

<ul class="nl-[block_fl_bgred_white_ac_us-w-80_us-h-30_us-lh-30_us-fs-12]">
<li class="us-m-6">item 1</li>
<li class="us-m-6">item 1</li>
</ul>

　　当然了，还有其它解决方案，用户只需在自己书写的js文件中runYus()即可实现渲染

$(document).ready(function(event) {
runYus();
});

　　nl-cls-obj中的obj是一个class名称，即nl-指令除了可以影响子级dom，还可以影响其它dom，例如下面的代码，就可以给所有含nav这个class名的元素添加样式：

　　<div class="nl-[block_fl_bgred_white]-nav"></div>
　　<span class="nav">item 1</span>
　　<span class="nav">item 2</span>
　　<span class="nav">item 3</span>

　　并且不知道各位童鞋有没有注意到，上面的rotate-、shadow-、filter-三个指令是没有向下延伸属性参数的，那它们怎么去影响子级元素呢。

　　作者说，写一个css去控制就完了呗，童鞋可能会说这也太弱智了吧，用yus就不能完全实现吗，于是group-指令就来了，对了先等一等，我还得先说下另外一个指令。

　　8、rl-指令(rl-cls-obj)：还用上面的例子说事，其中的item 2需要去掉红色背景，并且改变字体颜色为蓝色，那么rl-bgred就可以去除bgred这个样式了。

　　<div class="nl-[block_fl_bgred_white]-nav"></div>
　　<span class="nav">item 1</span>
　　<span class="nav rl-bgred uc-c-00f">item 2</span>
　　<span class="nav">item 3</span>

　　9、group-指令(group-classname-createCss)，及pull-指令(pull-classname)：group可以生成一组样式集，pull指令提取group生成的样式，还是直接上例子吧。

<span class="solid hand unpick us-ra-4 uc-bdc-999 us-bw-1 us-p-[5px 8px 6px 8px] uc-bg-[linear-gradient(to bottom,rgba(241,241,241,0.3),rgba(220,220,220,1))] group-button-1 hidden"></span>

<span class="pull-button us-fs-18">pull指令提取button全部样式</span>
<span class="button us-fs-18">调用group指令生成的css样式</span>

　　上面的代码涉及到几个部分，第一、group-指令会将它之前的所有class生成一个css集合，而group之后的则不做处理，如忽略hidden。第二、group-button-1，最后面的参数1代表生成一条真实的css样式append在style里面，在页面存续期间，都可以直接调用这个css名。第三、group指令生成真实的css只对us、uc、rotate、shadow、filter、nl六个指令起作用，对上例中的solid hand unpick等不产生作用，这点需要记住，童鞋们也可以自己做对比。

　　说句实话，作者的表达能力是有问题的，所以有没有文字功底不错的童鞋，来帮着一起写个说明文档啊，吼吼……，runYus样式渲染层面暂时结束，继续下一部分。

　　第二章：组件

　　1、select选择组件(select-cls)

　　例子：

//预先生成active、item样式
<span class="uc-c-0000E3 uc-bdc-0000E3 group-active-1 hidden"></span>
<span class="us-ml-10 us-p-5-1 us-pl-15-1 us-pr-15-1 us-bw-1-1 uc-c-999-1 uc-bdc-999-1 nl-solid nl-hand group-item-1 hidden"></span>

<ul class="select-active pull-item" data-name="sex" data-sort="asc" data-multi="1">
<li>男</li>
<li>女</li>
<li>鸟</li>
</ul>

　　给当前元素的子级dom添加class样式，子级dom需要被忽略的添加.skip，data-multi参数控制选择数量，0或1代表单选，2-n代表最大选取数量，点选后子级dom中，如果设置有data-val标签，取其值生成数组存入select-元素的data-val中，如果没有data-val则取其中的文本，记住data-name="sex"元素获取的数值是一个数组。

　　之前的例子获取的是文本，如：男、女。再看看下面的例子，获取的是数值：0,1,2,3,4，至于其中的data-sort="desc"代表的是数组按倒序排列，asc是正序，不设置则按点选顺序排列

<ul class="select-active pull-item" data-name="job" data-sort="desc" data-multi="3" id="thisjob">
<li data-val="0">战士</li>
<li data-val="1">法师</li>
<li data-val="2">道士</li>
<li data-val="3">刺客</li>
<li data-val="4">精灵</li>
</ul>

　　至于怎么提取这个数组的值？使用ajax命令可全自动获取了，无需关注，毕竟这些组件存在的意义就是为了post提交数据到后台，至于ajax命令的使用，在后面介绍。

　　当然了，如果您非要自己亲自看看，那么使用var obj = getDom("名称")，然后console.log(obj)就可以查看了。

　　说明一下getDom中的名称，不需要特别记忆书写方式，你怎么写都可以，比如上面的两个例子，你只需要写getDom("sex")和getDom("job")就可以获取到元素的对象了，当然了，如果用getDom("thisjob")也是一样的，或者getDom("#thisjob")，抑或getDom("select-active")及getDom(".select-active")也可以，只不过因为sex以及job两个都存在select-active，所以获取的是两个dom元素对象，getDom的具体用法下文介绍。

　　2、check选择器组件(check-dataName-width)

　　dataName：拥有相同dataName命名的check组件归组，你可以预先放置一个<input data-name="work">用于接收所有同名dataName的数据。当然如果不放置也可以，yus会自动生成一个input并且隐藏起来。
　　width：组件的大小，默认12，单位是px
　　data-multi: 1单选，2或其它值多选，多选时toggle默认可切
　　data-toggle: 切换val，0不可切换，1可以(默认)
　　data-style: 形状，0(radio)圆圆，1(checkbox)方勾(默认)，2(square)方方

　　上面介绍的select组件，有包裹性的限制，只能影响到子级dom元素，同时其中的cls样式也需要提前设置好，而check组件就不需要了，你把check扔到任何可能存在的位置，都是可以的，只要他们拥有共同的dataName名称就行了，直接上例子：

<span class="us-ml-10 us-mr-8 group-m10-1 hidden"></span>
<div class="check-work-13 m10" data-multi="1" data-val="神"></div>神
<div class="check-work-13 m10" data-multi="1" data-val="鬼"></div>鬼
<div class="check-work-16 m10" data-multi="2" data-style="2" data-val="人"></div>人
<div class="check-work-18 m10" data-multi="1" data-toggle="0" data-style="0" data-val="妖"></div>妖
<input type="text" class="box vm us-w-100 us-h-30 us-ml-15" data-name="work" data-sort="desc" value="" />

　　3、switch开关组件

　　4、swiper轮播组件

　　5、clock时钟组件

　　6、count计数器组件

　　7、picker联动选择器组件

　　8、movable挂件组件

　　第三章：命令

　　1、drop下拉菜单命令

　　2、setcls设置样式命令

　　3、setval设置数据命令

　　4、getval获取及赋值命令

　　5、click、change、hover点击、数值变量、悬停命令

　　6、disable组件静默命令

　　7、setsum、setadd

　　8、syn同步命令

　　9、scroll滚动命令

　　10、ajax数据提交命令

　　第四章：函数

　　1、getDom获取dom元素

　　2、setfor从后台拉取数据并生成列表

　　3、setData给组件设置数据

　　4、setDom操控dom，几乎可以实现yus框架的一切功能

　　5、ani动画函数，与jquery中的animate函数用法一致，在其基础上增加了颜色动画控制，旋转角度，动画每秒帧数质量等

　　6、layer弹层函数

　　7、load加载函数

　　第五章：杂项

　　1、unpick、catch、passive标签指令

　　2、框架iframe操作

　　3、data-show、data-demo、data-sort、data-json、.skip、.skip-end

　　4、link数据联动

　　5、指令组合生成一个select下拉框

　　6、指令组合生成一个百分子滑动条

...全文