Nuclear開始

jopen 9年前發布 | 9K 次閱讀 Nuclear 前端技術

為什么Nuclear

這里列舉Nuclear在競品中的優勢：

  • 借助瀏覽器本身的機制，無任何代碼約定和入侵

  • 放心使用HTML+CSS+JS

  • observejs替代EventLoop、requestAnimationFrame、Ticker等定時循環

  • 解決MV*無法構建復雜特效的難題，隨意構建超復雜交互特效，自由地大展拳腳

  • 支持Dom和Canvas組件，未來支持SVG和WebGL.

  • SVG庫Sword已經整裝待發： https://github.com/AlloyTeam/Sword

  • WebGL庫pixeljs正在全力推進 https://github.com/kmdjs/pixeljs
    • </ul>

    獲取Nuclear

    Nuclear網站 http://alloyteam.github.io/Nuclear/ .

    Github https://github.com/AlloyTeam/Nuclear

    你也可以通過npm安裝Nuclear

    • npm install alloynuclear

    </td> </tr> </tbody> </table> </div>

    使用Nuclear

    js文件可以在這里找到最新版的: nuclear.js or nuclear.min.js

    你可以直接在頁面引用

  • <script src = "nuclear.js" > </script>

    </td> </tr> </tbody> </table> </div>

    也可在AMD環境同步 require

    define ( function ( require ) {

    var Nuclear = require ( 'nuclear' ) ;

    } ) ;

    </div> </td> </tr> </tbody> </table> </div>

    或者異步 require：

    require ( [ 'nuclear' ] , function ( Nuclear ) {

    } ) ;

    </div> </td> </tr> </tbody> </table> </div>

    在CommonJS 環境：

    var Nuclear = require ( 'nuclear' ) ;

    </td> </tr> </tbody> </table> </div>

    Nuclear直接暴露

    下面是暴露給AMD/CommonJS和Root的代碼。

    • ; ( function ( root , factory ) {

    if ( typeof define === 'function' && define . amd ) {

    define ( [ ] , factory ) ;

    } else if ( typeof exports === 'object' ) {

    module . exports = factory ( ) ;

    } else if ( typeof define === "function" && define . cmd ) {

    define ( function ( require , exports , module ) {

    module . exports = factory ( ) ;

    } ) ;

    }

    root . $ = root . Nuclear    = factory ( ) ;   

    } ( this , function ( ) {

    </div> </td> </tr> </tbody> </table> </div>

    所以，只要你加載了nuclear.js文件，你就能直接子啊root/window下直接訪問到Nuclear。

    那么為什么要暴露在root/window?

    因為，為了支持聲明式事件綁定，即讓事件調用自身組件定義的方法。如下面render方法中的模板：

    </div>

    < form onsubmit = "add(event)" >

    </td> </tr> </tbody> </table> </div>

    到了dom里面，進過Nuclear的處理會變成：

  • < form onsubmit = "Nuclear.instances[0].add(event)" >

    </td> </tr> </tbody> </table> </div>

    所以add不會去訪問全局的add，而是訪問自身組件定義的add方法。關于這點后面教程再詳細說明這么設計的好處。先看簡單的例子。

    簡單例子

    < ! DOCTYPE html >

    < html >

    < head >

    < title > Hello , Nuclear ! < / title >

    < / head >

    < body >

    < div id = "container" > < / div >

    <script src = "../dist/nuclear.js" > </script>

    <script type = "text/javascript" >

    var HelloMessage = Nuclear . create ( {

    render : function ( ) {

    return '<div>Hello , {{name}} !</div>' ;

    }

    } )

    new HelloMessage ( { name : "Nuclear" } , "#container" ) ;

    </script>

    < / body >

    < / html >

    </div> </td> </tr> </tbody> </table> </div>

    new HelloMessage的第一個參數會賦給this.option，render的模板使用的數據源就是this.option。所以，直接通過 {{name}}就能得到option的name的值。new HelloMessage的第二個參數是組件的容器。

    原文 http://www.alloyteam.com/2015/07/nuclear-kai-shi/

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

    相關經驗

    相關資訊

    相關文檔

  •
    • sesese色