MMVM 模式構建,RegularJS 0.4.1 發布下載

jopen 10年前發布 | 8K 次閱讀 RegularJS

RegularJS 0.4.1 發布下載:

https://github.com/regularjs/regular/archive/v0.4.1.zip

看到 regular 的名字就能感受到撲面而來的山寨味,在開始前,我還是要說明下regularjs出現絕對不僅僅是作者的造輪子情緒泛濫的結果

Angularjs的火爆以及它的小伙伴們

Angularjs從12年開始開始火爆起來, 數據驅動的業務實現方式也由此深入人心, 它的數據更新策略基于臟檢查,在明確內部的生命周期后在數據綁定的使用上是最為靈活的(即這種方式不介意是何種方式促使數據改變,而只關心數據改變的結果),作者本人以及周圍的小伙伴也開始為之著迷. 隨著使用的深入, 發現angularjs的強大特性也引出了一些無法攻克的不足:

  1. 由于本身生命周期的強約束,難以與其它框架公用

  2. 入門容易,深入難 —— 想想directive一個feature就涉及到的 postlink prelink controller compile scope等等概念.

  3. 模板的邏輯實現依賴的是directive(ng-repeat, ng-if etc..),即最小邏輯顆粒是節點, 與常規的模板自由度上還是有較大差異.

  4. FOUC(Flash of unstyled content), 因為angular是先通過瀏覽器(innerHTML)生成了dom,再后置link來產生真正需要的元素,所以會導致內容閃動.regular也沒有完美的解決問題(因為內容仍然是前端render的),但是可以保證進入文檔的節點就是預期的節點

除此之外,Angularjs的核心是scope對象, 業務的實現大部分都是在scope上動態添加函數或屬性. 也有人提出整個controller的寫法缺乏約束性,這個時候angular-classy出現, 它將原本因掛載在scope上的業務邏輯轉移到構造函數原型的形式, 減少了靈活度,但是更有約束性, 這也給了regular很大靈感.

在angular大行其道的時期也激勵產生了很多框架,比如vue.jsavalon.jsreactive等等優秀的框架,它們解決了一些問題, 比如avalon.js利用defineProperty實現了數據get-set的代理 并利用VB實現了ie6的兼容(當然數組還是wrap), 但總體來講基于dom實現的新秀們還是缺少足夠的差異化(代碼量的減少并不是最核心的部分)

新思維的出現——react ractive

與此同時,react的出現讓這個百花齊放但缺少差異化的階段注入了一些不一樣的味道,它可以實現了另一種內建的生命周期(lifecycle), 在不依賴數據層面的臟檢查的同時,建立了ui與數據之間的連接. 它將diff職責放到了一個dom結構的抽象virtual dom上,通過臟檢查兩次render之間virtual-dom發生的變化來更新ui.不過如果移除了jsx的依賴,手動通過嵌套函數的方式創建virtual-dom(如下例)簡直不可忍,并且它的組件展現中的邏輯控制完全依賴與js的語言能力, 往往不像利用模板構建那么清晰(當然react的作者有它自己的說法,仁者見仁了)。

render: function() { return (
    React.DOM.div(null, 
      React.DOM.h3(null, "TODO"),
      TodoList( {items:this.state.items} ),
      React.DOM.form( {onSubmit:this.handleSubmit}, 
        React.DOM.input( {onChange:this.onChange, value:this.state.text} ),
        React.DOM.button(null, 'Add #' + (this.state.items.length + 1))
      )
    )
  );
}

同期ractive也悄然出世, 幾乎就是作者需要的那個菜了. 可惜ractive的ui事件系統是通過代理事件的形式,你仍需要在init里去處理,這樣一是弱化了聲明式的意味,二是必然要雜糅進dom操作. 并且數據更新上是采用的提取依賴關系的方式并提供set函數, 這種方式對于習慣了angular的臟檢查的人來講無疑會帶來很多不利。

由于react在使用上邏輯上可以幾乎理解為'full-refresh'對使用者有巨大的吸引力,最初版本的regular也是旨在替換掉react的js+jsx而是與ractive一樣定義一種模板語言來描述結構, 在diff策略上沿用virtual-dom的思想.在實現的過程漸漸發現,雖然基于virtual-dom的策略無需去綁定大量的watcher, 但仍然引入了一些實現上和使用上的難題

  1. 一次digest中virtual-dom的diff只需一次,但是會隨著ui的復雜度,性能損耗嚴重,virtual-dom與原dom的對應也更難(如果angular的臟檢查的性能取決與watcher的數量,那react則是取決與ui規模)

  2. virtual-dom的內部結構變化是不可預知的

    比如

    var MyComponent = React.createClass({
     render: function() { if (this.props.first) { return <div className="first"><span>A Span</span></div>; } else { return <div className="second"><p>A Paragraph</p></div>; }
     }
    });

    在props.first發生改變時, 發生的其實僅僅只是同一個節點的className在first和second的切換. 由于這種未知性,永遠無法在react中出現類似directive的節點增強或包裝器,所有事件也必須以數據代理的形式

regular的產生和取舍

regular正是在這種百花齊放的時候產生, 最終在實現上采取了angular的數據更新策略(但是提取了表達式的依賴關系以便在Object.observe正式到來時切換到臟檢查+observe的形式)提倡極致的聲明式和裸數據操作, 依賴于基于字符串的模板描述結構結合更規范性的類式繼承的組件體系來定義數據層的業務邏輯.

這也是框架取名 regular = react(ractive) + angular的由來


 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!