• 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

    获取Nuclear

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

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

    你也可以通过npm安装Nuclear

    npm install alloynuclear
    

    使用Nuclear

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

    你可以直接在页面引用

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

    也可在AMD环境同步 require

    define(function (require) {
        var Nuclear = require('nuclear');
    });
    

    或者异步 require:

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

    在CommonJS 环境:

    var Nuclear = require('nuclear');
    

    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 () {
    

    所以,只要你加载了nuclear.js文件,你就能直接子啊root/window下直接访问到Nuclear。
    那么为什么要暴露在root/window?
    因为,为了支持声明式事件绑定,即让事件调用自身组件定义的方法。如下面render方法中的模板:

      <form onsubmit="add(event)" >
    

    到了dom里面,进过Nuclear的处理会变成:

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

    所以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>
    

    new HelloMessage的第一个参数会赋给this.option,render的模板使用的数据源就是this.option。所以,直接通过 {{name}}就能得到option的name的值。
    new HelloMessage的第二个参数是组件的容器。

    Q&A

    任何问题可以留言回复或者issues 发过来

  • 相关阅读:
    vue后台模板推荐
    Webstorm的一些常用快捷键
    dataTables 插件学习整理
    js阻止事件冒泡
    vscode常用快捷键
    VScode插件以及配置
    今日笔记2
    ES6中的import()函数
    ES6之class 中 constructor 方法 和 super 的作用
    JS设计模式一:单例模式
  • 原文地址:https://www.cnblogs.com/iamzhanglei/p/4642572.html
Copyright © 2020-2023  润新知