從jQuery到avalon

1、從jQuery到avalon未來(lái)前端編程思路的轉(zhuǎn)變 jQuery: write less, do moreAvalon: 能將Jquery寫的代碼再精簡(jiǎn)50%, 邏輯更清晰, 更易維護(hù)其他選擇:angular(2000綁定限制) jQuery的運(yùn)作流程衛(wèi)星城市模式以DOM為中心選擇器引擎貫通所有操作 代碼量的比較 jQuery對(duì)象的能耐2022-6-13 jQuery的API原生對(duì)象被jQuery對(duì)象這層厚厚的水泥所包裹，屏蔽各種煩人的兼容性與陷阱 jQuery的貢獻(xiàn)與缺憾 解放了生產(chǎn)力，讓我們騰出時(shí)間研究更多高效的東西：加載器，前端模板，異步列隊(duì)，事件代理，路由系統(tǒng)，各種UI組件 沒(méi)有流程控

2、制，業(yè)務(wù)代碼與展示邏輯混淆在一起，流程被分割在各種事件回調(diào)中蒸汽朋克，脫離了刀耕火種但還沒(méi)有進(jìn)入大工業(yè) 永無(wú)止境的追求快速的開發(fā)、可控的維護(hù)、更高的性能。2022-6-13 模塊，組件，層2022-6-13 MVC2022-6-13The View is connected to the users eyes;the Controller is connected to the users hands;and the Model is connected to the users mind. - Don Dwiggins MVC時(shí)代(照搬后端) MVC的變種與進(jìn)化 thin controlle

3、r, fat model思潮http:/ 切斷View和Model的聯(lián)系,減少在需求變化中需要維護(hù)的對(duì)象的數(shù)量 MVVM時(shí)代（雙向綁定） MVVM的工作流程定義VM添加綁定自動(dòng)或手動(dòng)描掃視圖 分層架構(gòu) 根據(jù)職責(zé)分層，其實(shí)就是分工。收集展現(xiàn)是一層，加工處理流轉(zhuǎn)是一層，存儲(chǔ)是一層。2022-6-13ViewModel大致上就是MVP的Presenter和MVC的Controller了，而View和ViewModel間沒(méi)有了MVP的界面接口，而是直接交互，用數(shù)據(jù)“綁定”的形式讓數(shù)據(jù)更新的事件不需要開發(fā)人員手動(dòng)去編寫特殊用例，而是自動(dòng)地雙向同步。數(shù)據(jù)綁定你可以認(rèn)為是Observer模式或者是Publi

4、sh/Subscribe模式，原理都是為了用一種統(tǒng)一的集中的方式實(shí)現(xiàn)頻繁需要被實(shí)現(xiàn)的數(shù)據(jù)更新問(wèn)題。比起MVP，MVVM不僅簡(jiǎn)化了業(yè)務(wù)與界面的依賴關(guān)系，還優(yōu)化了數(shù)據(jù)頻繁更新的解決方案 如何綁定 VM的職責(zé) 加工數(shù)據(jù) 保持中間量 放置事件回調(diào) 同步View 同步Modelhttp:/ View的職責(zé) 將頁(yè)面變成模板 通過(guò)VM進(jìn)行交互 隱形的jQuery 各種綁定 內(nèi)容填充ms-html, ms-text,prop,prop|html 樣式處理ms-class,ms-css 事件綁定ms-click, ms-keyup, ms-on-* 屬性操作ms-attr,ms-checked,ms-href,

5、ms-src 顯示隱藏ms-visible 移除插入ms-if 批量生成ms-repeat,ms-each,ms-with 各種綁定 模板引用ms-include 數(shù)據(jù)緩存ms-data CSS3動(dòng)畫ms-animationend 組件掛載ms-widget 作用域圈定ms-controller,ms-important 忽略掃描ms-skip 雙向通信ms-duplex2022-6-13 摒棄繼承，擁抱組合早在20世界80年代初期，也就是面向?qū)ο蟀l(fā)展的初期，人們就非常看重繼承這個(gè)概念。繼承關(guān)系蘊(yùn)涵的意義是非常深遠(yuǎn)的。使用繼承我們可以基于差異編程，也就是說(shuō)，對(duì)于一個(gè)滿足我們大部分需求的類，可以

6、創(chuàng)建一個(gè)它的子類，重載它個(gè)別方法來(lái)實(shí)現(xiàn)我們所要的功能。只要繼承一個(gè)類，就可以重類該類的代碼！通過(guò)繼承，我們可以建立完整的軟件結(jié)構(gòu)分類，其中每一個(gè)層都可以重用該層次以上的代碼。這是一個(gè)美麗新世界。2022-6-13 面向?qū)ο笳Z(yǔ)言與生俱來(lái)的問(wèn)題就是它們與生俱來(lái)的這一整個(gè)隱性環(huán)境。你想要一根香蕉，但你得到的是一頭手里握著香蕉的大猩猩，以及整個(gè)叢林。 - Joe Armstrong父類總會(huì)有某些部分是你不想繼承的。子類允許你覆蓋父類的屬性，但它不允許你選擇哪些屬性是你想繼承的。2022-6-13 CSS式作用域的設(shè)計(jì)就近原則ms-controller優(yōu)先級(jí)調(diào)整ms-importanthttp:/rubylouvre.github.io/mvvm/avalon.important.html 專注于VM的設(shè)計(jì)抽取問(wèn)題域的概念（屬性）與操作（方法）適當(dāng)放置表示各種開關(guān)或狀態(tài)的中間量減少監(jiān)控屬性（性能）數(shù)據(jù)扁平化（性能）$watch回調(diào)（校檢） 有關(guān)視圖的注意點(diǎn) 不要在視圖放置太多邏輯 抽象更多可復(fù)用組件ms-widget 組件重復(fù)掃描無(wú)法銷毀的問(wèn)題 清楚一個(gè)元素內(nèi)各種綁定的掃描順序 ms-checked與ms-duplex不能共存 在網(wǎng)速慢被暴露的問(wèn)題2022-6-13 其他 現(xiàn)應(yīng)用于百度無(wú)線，金山，邊鋒，搜狐，去哪兒 公司內(nèi)部