为什么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开始的更多相关文章

漫谈Nuclear Web组件化入门篇
目前来看,团队内部前端项目已全面实施组件化开发.组件化的好处太多,如:按需加载.可复用.易维护.可扩展.少挖坑.不改组件代码直接切成服务器端渲染(如Nuclear组件化可以做到,大家叫同构)... 怎 ...
基于Nuclear的Web组件-Todo的十一种写法
刀耕火种刀耕火种是新石器时代残留的农业经营方式.又称迁移农业,为原始生荒耕作制. var TodoApp = Nuclear.create({ add: function (evt) { evt.p ...
zepto/jQuery、AngularJS、React、Nuclear的演化
写在前面因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...
Codechef Nuclear Reactors 题解
There are K nuclear reactor chambers labelled from 0 to K-1. Particles are bombarded onto chamber 0. ...
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( ...
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 ...
C语言 · Anagrams问题
问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相同的.例如,"Unclear"和"Nuclear ...
POJ2175 Evacuation Plan
Evacuation Plan Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4617 Accepted: 1218 ...
【原创】开源Math.NET基础数学类库使用(07)常用的数学物理常数
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 1.前 ...

随机推荐

PLSql Oracle配置
1.安装Oracle客户端或者服务端 2.配置环境变量 <1>.一般如果安装了Oracle客户端或者服务端的话,在环境变种的Path中有Oracle的安装路径(计算机-属性-高级系统设置- ...
BZOJ 1597: [Usaco2008 Mar]土地购买 [斜率优化DP]
1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4026 Solved: 1473[Submit] ...
跨平台的 .NET 运行环境 Mono 3.2 新特性
Mono 3.2 发布了,对 Mono 3.0 和 2.10 版本的支持不再继续,而且这两个分支也不再提供 bug 修复更新. Mono 3.2 主要新特性: LLVM 更新到 3.2 版本,带来更多 ...
mono for android学习过程系列教程(2)
接着上一讲继续开始写,今天介绍的是安卓的基本组成结构. 在大多数情况下,MONO FOR ANDROID的命名空间和Android的命名空间是互相映射的.有时候需要大小写,非字母数字字符的用法以及名 ...
OAuth2 理解
OAth2 是为了某个应用向第三方应用开放服务时,控制权限的. 因为不可以直接将账户体系开放出去,要求重新登录. 其实本质是让用户在客户端来判断是否要给该应用开放平台的权限,如果用户同意,那么可以拿到 ...
阿里云自定义日记文件无法通过ftp下载
异常处理汇总 ~ 修正果带着你的Net飞奔吧!http://www.cnblogs.com/dunitian/p/4599258.html 有可能是个例,xftp不行(对linux支持很好),Cute ...
CSS系列目录
1. 在HTML中引入CSS的方法 2. CSS选择器 2.1 CSS3新增选择器 3. CSS的继承与层叠特性 4. CSS中盒子模型 5. CSS中盒子之间的关系 6. CSS中盒子的 ...
VMware-存储断网之后无法添加vmx到清单
由于发生了单点故障,笔者最近处理了一个case,其中一些经验非常希望和大家分享. 问题原因: Technorati 标签: VMware,虚拟机,vmx,锁定,干货某环境使用VMware的ESXi5 ...
【DDD/CQRS/微服务架构案例】在Ubuntu 14.04.4 LTS中运行WeText项目的服务端
在<WeText项目:一个基于.NET实现的DDD.CQRS与微服务架构的演示案例>文章中,我介绍了自己用Visual Studio 2015(C# 6.0 with .NET Frame ...
如果你也会C#，那不妨了解下F#（1）：F# 数据类型
本文链接:http://www.cnblogs.com/hjklin/p/fs-for-cs-dev-1.html 简单介绍 F#(与C#一样,念作"F Sharp")是一种基于. ...

Nuclear开始