直接到我的博客原文地址來看吧，這里寫不下太多
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、指令組合生成一個百分子滑動條
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/284735.html
標籤：JavaScript
上一篇：有關UpdatePanel的問題
下一篇：請問一下，這種情況下怎么打開圖?