为什么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 发过来

Nuclear开始的更多相关文章

  1. 漫谈Nuclear Web组件化入门篇

    目前来看,团队内部前端项目已全面实施组件化开发.组件化的好处太多,如:按需加载.可复用.易维护.可扩展.少挖坑.不改组件代码直接切成服务器端渲染(如Nuclear组件化可以做到,大家叫同构)... 怎 ...

  2. 基于Nuclear的Web组件-Todo的十一种写法

    刀耕火种 刀耕火种是新石器时代残留的农业经营方式.又称迁移农业,为原始生荒耕作制. var TodoApp = Nuclear.create({ add: function (evt) { evt.p ...

  3. zepto/jQuery、AngularJS、React、Nuclear的演化

    写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...

  4. Codechef Nuclear Reactors 题解

    There are K nuclear reactor chambers labelled from 0 to K-1. Particles are bombarded onto chamber 0. ...

  5. MicroRNA in Control of Gene Expression: An Overview of Nuclear Functions 微RNA控制基因表达：核功能概述

    MicroRNA in Control of Gene Expression:An Overview of Nuclear Functions微RNA控制基因表达:核功能概述 抽象:小的非编码RNA( ...

  6. Nuclear Power Plant ZOJ - 3840 树形dp

    There are N (1 ≤ N ≤ 105) cities on land, and there are N - 1 wires connecting the cities. Therefore ...

  7. C语言 · Anagrams问题

    问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相同的.例如,"Unclear"和"Nuclear ...

  8. POJ2175 Evacuation Plan

    Evacuation Plan Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4617   Accepted: 1218   ...

  9. 【原创】开源Math.NET基础数学类库使用(07)常用的数学物理常数

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 1.前 ...

随机推荐

  1. HA 高可用软件系统保养指南

    又过了一年 618,六月是公司一年一度的大促月,一般提前一个月各系统就会减少需求和功能的开发,转而更多去关注系统可用性.稳定性和管控性等方面的非功能需求.大促前的准备工作一般叫作「备战」,可以把线上运 ...

  2. 邻接矩阵的深度优先遍历(java版)

    这是一个有向边带权的图 顶点数组:[v0, v1, v2, v3, v4] 边数组: v0 v1 v2 v3 v4 v0 6 v1 9 3 v2 2 5 v3 1 v4 package com.dat ...

  3. javascript中的变量作用域以及变量提升

    在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解. 变量作用域 “一个变量的作用域表示这个变量存在的上 ...

  4. Yeoman 学习笔记

    yoeman 简介:http://www.infoq.com/cn/news/2012/09/yeoman yeoman 官网: http://yeoman.io/ yeoman 是快速创建骨架应用程 ...

  5. 监督学习 VS 无监督学习

    监督学习 就是人们常说的分类,通过已有的训练样本(即已知数据以及其对应的输出)去训练得到一个最优模型(这个模型属于某个函数的集合,最优则表示在某个评价准则下是最佳的),再利用这个模型将所有的输入映射为 ...

  6. 转-基于NodeJS的14款Web框架

    基于NodeJS的14款Web框架 2014-10-16 23:28 作者: NodeJSNet 来源: 本站 浏览: 1,399 次阅读 我要评论暂无评论 字号: 大 中 小 摘要: 在几年的时间里 ...

  7. 架构设计：负载均衡层设计方案（3）——Nginx进阶

    版权声明:欢迎转载,但是看在我辛勤劳动的份上,请注明来源:http://blog.csdn.net/yinwenjie(未经允许严禁用于商业用途!) 目录(?)[-] Nginx继续进阶 1gzip ...

  8. 使用Newtonsoft.Json.dll(JSON.NET)动态解析JSON、.net 的json的序列化与反序列化（一）

    在开发中,我非常喜欢动态语言和匿名对象带来的方便,JSON.NET具有动态序列化和反序列化任意JSON内容的能力,不必将它映射到具体的强类型对象,它可以处理不确定的类型(集合.字典.动态对象和匿名对象 ...

  9. python多行字符串

    Python中如何处理长代码格式化问题,如何提高格式化输出的长字符串的可读性? 当我们需要格式化输出一个很长的字符串的时候,都写在一行显得很难看,而且可读性也很差:当我们使用链式的语法写代码的时候常常 ...

  10. Python标准模块--threading

    1 模块简介 threading模块在Python1.5.2中首次引入,是低级thread模块的一个增强版.threading模块让线程使用起来更加容易,允许程序同一时间运行多个操作. 不过请注意,P ...