導航:首頁 > 凈水問答 > avalonjs過濾器

avalonjs過濾器

發布時間:2021-10-27 09:54:07

1. 哪些優點是vue有而avalonjs沒有的

快速:非同步批處理方式更新 DOM。
組合:用解耦的、可復用的組件組合你的應用程序。
緊湊:~18kb min+gzip,且無依賴。
強大:表達式 & 無需聲明依賴的可推導屬性 (computed properties)。
對模塊友好:可以通過 NPM、Bower 或 Duo 安裝,不強迫所有的代碼都遵循 Angular 的各種規定,使用場景更加靈活。

2. avalon.js怎麼把變數添加到屬性

avalon中的數組具有以下變數:
$index:用於指明當前數組中的指針所在索引值,即指向數組中第幾個元素(索引值從0開始)
示例代碼:
[plain] view plain
<!DOCTYPE html>
<html>
<head>
<span style="white-space:pre"> </span><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
array: ["aaa","bbb","ccc"]
})
</script>
</head>
<body ms-controller="test">
<ul>
<li ms-repeat="array">{{el}} --- {{$index}}</li> <!---通過{{$index}}在頁面上顯示出了遍歷時數組的索引值0,1,2。---->
</ul>
</body>
</html>
$last:判斷當前指向的是否為數組中的最後一個元素
$first:判斷當前指向的是否為數組中的第一個元素
$remove:刪除當前指向的數組中的元素

示例代碼:
[html] view plain
<body ms-controller="test">
<ul>
<li ms-repeat="array"
ms-click="$remove">{{xx}}:{{$index}}</li> <!----點擊標簽內容時,觸發$remove,即刪除當前標簽中所指向的元素----->
</ul>
</body>

$outer:指向外圍數組元素。

[html] view plain
<body ms-controller="test">
<table border="1">
<tr ms-repeat-el="array"> <!---1、array為一個3行4列的數組 2、ms-repeat-XX="數組名",表示遍歷指定數組,遍歷得到的數組元素,用XX表示。3、哪個標簽需要多次出現,就在哪個標簽中定義ms-repeat。比如想讓數組A在一行表示出來,也就是說需要出現多次出現td標簽,則需要在td標簽中定義ms-repeat="A",而非在tr標簽定義---->

<td ms-repeat-elem="el">{{elem}} 它位於第<b style="color:orchid">{{$outer.$index}}</b>行</td> <!---此處$outer指向的就是上層遍歷所指向的元素,即外圍數組元素,該元素是一個1X4的數組---->
</tr>
</table>
</body>
avalon中的數組具有以下方法:
every方法。
該方法可用於判斷布爾類型的數組中,是否所有元素都為真,若是,返回true,否則返回false(該方法可能也有其他功能,但目前本人只使用該方法實現過這一個功能)。該方法通常用於對於全選checkbox功能的實現。使用格式為:數組名.every(function(el){return el})。代碼示例:
vm定義代碼:

[javascript] view plain
var model=avalon.define({
$id:"test",
single_checkbox_array:[{checked:false},{checked:false},{checked:false}],
all_select:false,
single_checkbox_changed:function(){
model.all_select=model.single_checkbox_array.every(function(el){
return el.checked
})
}<!---當single_checkbox_array數組中所有元素皆為true時,all_select為true,否則為false---->
})

forEach方法

該方法用於迭代循環依次對數組中的所有元素執行某一操作。比如,以下代碼的作用為給數組中每個元素賦值:

[javascript] view plain
var model=avalon.define({
$id:"test",
single_checkbox_array:[{checked:false},{checked:false},{checked:false}],
all_select:false,
all_select_changed:function(){
model.single_checkbox_array.forEach(function(el){
el.checked=model.all_select<!----將數組中每個元素賦值為all_select的值---->

})

}
})
其使用格式為數組名.forEach(function(el){......對元素所進行操作的代碼})
sort方法
通過名字就可以猜到,該方法用於對數組中的元素進行排序。對於該方法的使用分為兩種:不帶參數的排序和帶參數的排序。
不帶參數的排序:數組名.sort()。則該方法將數組中的對象按照字母表中的順序進行排序。
示例代碼:
[javascript] view plain
var a=[33,4,1111,222];
a.sort();<!---則排序的結果為:1111,222,33,4--->

帶參數的排序:使用方法為數組名.sort(function(a,b){.....})其中a和b分別表示進行比較的兩個數組中的元素。當返回值為負數時,a排在b的後面,否則a排在b的前面。
示例代碼:

[javascript] view plain
var a=[33,4,1111,222];
a.sort(function(a,b){return a-b;});<!--從小到大排序--->
a.sort(function(a,b){return b-a;});<!--從大到小排序--->
更多相關資料可參考http://www.viiboo.cn

3. 如何通過 Vue+Webpack 來做通用的前端組件化架構設計

angular:
我覺得angularjs的學習上手周期比較長,可能遇到問題,都無法立刻解決,而且編碼的質量明顯的很差,如果團隊沒有制定規范,那寫出來的代碼就沒法看。對於一個選用angularjs的團隊來說,我認為編碼規范是很重要的,否則對編碼能力是沒有提升的。
avalon:
avalonjs文檔資料沒有那麼全,我感覺一些開源支持的力量不夠多。不過,如果有項目需求,需要去做IE瀏覽器的支持話,我建議選擇avalonjs
vue:
vuejs 文檔比較齊全,vue吸取了angularjs 的一些優點,規避了一些缺點,至少編碼規范上有了一個質的飛躍,學習上手的周期比較短。vue起初只是一個輕量級的類庫,用來做類似於react的事情,同時vue也是可以拿來做前端架構設計的,比如:vueify + vue-router(spa框架)。

4. vue,angular,avalon這三種MVVM框架之間有什麼優缺點

Vue.js
優點:

簡單:官文檔清晰比 Angular 簡單易
快速:非同步批處理式更新 DOM
組合:用解耦、復用組件組合應用程序
緊湊:~18kb min+gzip且依賴
強:表達式 & 需聲明依賴推導屬性 (computed properties)
模塊友:通 NPM、Bower 或 Duo 安裝強迫所代碼都遵循 Angular 各種規定使用場景更加靈

缺點:

新:Vue.js新項目20143月20發布0.10.0 Release Candidate版本目前github面新0.11.4版本沒angular熟
影響度:google關於Vue.js性或者說豐富性少於其些名庫
支持IE8:哈哈AngularJS 1.3拋棄IE8支持avalon支持IE6+應該努力優化點於些需要支持IE8項目web前端發趨勢像IE低版本應該退歷史舞台通改變我前端思維順應些使用版本升級

AngularJS
優點:

態視圖:前沒想js擴展HTML屬性AngularJs做替我靜態HTML加擴展性功能種讓HTML由死變覺
完善:比較完善前端MVW框架包含模板數據雙向綁定路由模塊化服務依賴注入等所功能模板功能強豐富並且聲明式自帶豐富 Angular 指令
Google維護:AngularJSGoogle維護疑強台於推廣維護明顯比Vue.jsavalon優勢社區非潑能夠促進發展
AngularJS & Ionic:Ionic: Advanced HTML5 Hybrid Mobile App Framework倆基友Ionic通用AngularJS創建框架適合發豐富強應用程序
缺點:

全:習起難度於我講習曲線曲折比較難理解些
推翻重寫:前段候逛社區發現AngularJS2.0前推翻重寫兩框架改變基本兩框架等於說等2.0需要始支持IE8貌似2.0變支持移端等再看吧

Avalon.js
優點

使用簡單HTML添加綁定JS用avalon.define定義ViewModel再調用avalon.scan能
兼容 IE6 (其MVVM框架KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) )另avalon.mobile更高效運行於IE10等新版本瀏覽器
沒任何依賴5000行壓縮50KiB
支持管道符風格濾函數便格式化輸
局部刷新顆粒度已細化文本節點特性節點
要操作節點第掃描與視圖刷新函數相綁定並緩存起沒選擇器場余
讓DOM操作代碼近乎絕跡
使用類似CSS重疊覆蓋機制讓各ViewModel區交替渲染頁面
節點移除智能卸載應視圖刷新函數節約內存
操作數據即操作DOMViewModel操作都同步View與Model
自帶AMD模塊載入器省與其載入器進行整合
缺點
1數組濾沒angular面avalon濾器能用於ms-text, ms-html
2沒英文文檔宣傳受限制(許誤我博客園入門教程官網)
3OniUI皮膚夠看許說要配合boostrap社區沒主站做事

5. avalonjs為什麼在ie8不支持json.stringfiy

可能進入了非標准文檔模式。為了保險起見,可以引入 JSON2.js,防止瀏覽器不支持

6. angularjs和avalon哪個好實際工作中主要用哪個

看項目規模。
angularjs由Google維護,名氣和使用人數要多一些,學習的人也多,項目大,參與的人多,建議還是選名氣大的。
avalon小巧輕快,學習成本也低,中小型項目可以考慮這個。

7. avalon checkbox選中值怎麼獲取

avalon是通過ms-repeat實現對一組數據的批量輸出。這一組數據可以是一個數組,也可以是一個哈希(或叫對象)。我們先從數組說起吧。
第二節就說,凡是定義在VM中的數組,如果沒有以$開頭或者沒放在$skipArray數組里,都會轉會監控數組。監控數組其實就是一個被重寫了push、unshift、shift、pop、 splice、sort、reverse方法的普通數組。當然它也添加了其他一些方法,如set、 pushArray、remove、removeAt、removeAll、clear、ensure、 contains、size。我們只要操作這些方法就能同步視圖。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
array: ["aaa","bbb","ccc"]
})

</script>
</head>
<body ms-controller="test">
<ul>
<li ms-repeat="array">{{el}} --- {{$index}}</li>
</ul>
</body>
</html>

8. avalon.js 被拋棄了嗎

1,對數組的過濾沒有angular那麼方面,avalon的過濾器只能用於ms-text, ms-html

2,沒有英文文檔,宣傳受到限制(許多人也誤把我在博客園的入門教程當成官網)
3,OniUI的皮膚不夠好看,許多人說要配合boostrap,但社區還沒有人主動站出來做這事

avalon現在在BAT都有部門在使用,網路還是3個部門,因此所有這些都會慢慢得到解決的。

9. 如果去除avalon前端框架中的使用"#"的超鏈接標識,可從哪些方面入手

Vue.js優點:簡單:官方文檔很清晰,比Angular簡單易學。快速:非同步批處理方式更新DOM。組合:用解耦的、可復用的組件組合你的應用程序。緊湊:~18kbmin+gzip,且無依賴。強大:表達式&無需聲明依賴的可推導屬性(computedproperties)。對模塊友好:可以通過NPM、Bower或Duo安裝,不強迫你所有的代碼都遵循Angular的各種規定,使用場景更加靈活。缺點:新生兒:Vue.js是一個新的項目,2014年3月20日發布的0.10.0ReleaseCandidate版本,目前github上面最新的是0.11.4版本,沒有angular那麼成熟。影響度不是很大:google了一下,有關於Vue.js多樣性或者說豐富性少於其他一些有名的庫。不支持IE8:哈哈不過AngularJS1.3也拋棄了對IE8的支持,但是avalon是支持IE6+的,應該下了很多努力去優化。這一點對於那些需要支持IE8的項目就不好了,不過這也是web前端開發的一個趨勢,像IE低版本就應該退出歷史舞台了,通過改變我們的前端思維,而不是順應那些使用老版本而不去升級的人。AngularJS優點:動態視圖:以前從來沒有想過js可以如此擴展HTML的屬性,但是AngularJs做到了,它替我們靜態的HTML加了很多擴展性功能,有一種讓HTML由死變活的感覺。完善:是一個比較完善的前端MVW框架,包含模板,數據雙向綁定,路由,模塊化,服務,依賴注入等所有功能,模板功能強大豐富,並且是聲明式的,自帶了豐富的Angular指令。Google維護:AngularJS有Google來維護,無疑有了一個強大的後台,對於推廣和維護明顯比Vue.js和avalon有優勢,社區也非常活潑,能夠很好促進它的發展。AngularJS&Ionic:Ionic:,這倆就是一個好基友,Ionic通過用AngularJS為了創建一個框架,最適合開發的豐富和強大的應用程序。缺點:大而全:學習起來有難度,對於我來講學習曲線很曲折,比較難理解一些。推翻重寫:前段時候逛社區發現AngularJS2.0會把之前的推翻重寫,兩個框架的改變很大,基本是兩個框架了,等於是說等到2.0出來後又需要從頭開始,不支持IE8以下,貌似2.0變得只支持移動端了,等到出來後再看吧。Avalon.js優點使用簡單,在HTML中添加綁定,在JS中用avalon.define定義ViewModel,再調用avalon.scan方法,它就能動了!兼容到IE6(其他MVVM框架,KnockoutJS(IE6),AngularJS(IE9),EmberJS(IE8),WinJS(IE9)),另有avalon.mobile,它可以更高效地運行於IE10等新版本瀏覽器中沒有任何依賴,不到5000行,壓縮後不到50KiB支持管道符風格的過濾函數,方便格式化輸出局部刷新的顆粒度已細化到一個文本節點,特性節點要操作的節點,在第一次掃描就與視圖刷新函數相綁定,並緩存起來,因此沒有選擇器出場的餘地。讓DOM操作的代碼近乎絕跡使用類似CSS的重疊覆蓋機制,讓各個ViewModel分區交替地渲染頁面節點移除時,智能卸載對應的視圖刷新函數,節約內存操作數據即操作DOM,對ViewModel的操作都會同步到View與Model去自帶AMD模塊載入器,省得與其他載入器進行整合。缺點1,對數組的過濾沒有angular那麼方面,avalon的過濾器只能用於ms-text,ms-html2,沒有英文文檔,宣傳受到限制(許多人也誤把我在博客園的入門教程當成官網)3,OniUI的皮膚不夠好看,許多人說要配合boostrap,但社區還沒有人主動站出來做這事

10. avalon.js怎麼遍歷json

<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var array = [1,2,3,4,5,6,7,8,9];
var filterarray = $.grep(array,function(value){
return value > 5;//篩選出大於5的
});
for(var i=0;i<filterarray.length;i++){
alert(filterarray[i]);
}
for (key in filterarray){
alert(filterarray[key]);
}
}
);
</script>

閱讀全文

與avalonjs過濾器相關的資料

熱點內容
城鎮污水排水管網證可證申請表 瀏覽:978
一三款本田雅閣空氣濾芯怎麼換 瀏覽:340
龍頭凈水機的水質情況如何 瀏覽:235
1765凱氏微量定氮蒸餾器 瀏覽:471
學生帶餅干回學校用什麼東西裝好 瀏覽:514
四平回公主嶺用隔離嗎 瀏覽:389
高純水有什麼用 瀏覽:445
ro膜廢水參數 瀏覽:785
超純水用什麼儀器能測定合格 瀏覽:208
純水注射會怎麼樣 瀏覽:499
高壓鍋改裝蒸餾器工藝 瀏覽:221
纖維濾芯屬於什麼類目 瀏覽:787
飲水機燒開了的水是多少度的 瀏覽:605
中水回用設施工藝流程 瀏覽:130
發動機冷卻液濾芯是什麼 瀏覽:448
怎麼讓倉鼠去飲水機 瀏覽:315
凈化器加入過濾桶後怎麼處理 瀏覽:506
用針壓安全閥回位修復 瀏覽:241
凈水機為什麼選擇實體店 瀏覽:440
海信洗衣機過濾網拆卸圖解 瀏覽:436