为什么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.前 ...

随机推荐

(转) 从0开始搭建SQL Server AlwaysOn 第三篇（配置AlwaysOn）
原文地址: http://www.cnblogs.com/lyhabc/p/4682986.html 这一篇是从0开始搭建SQL Server AlwaysOn 的第三篇,这一篇才真正开始搭建Alwa ...
SSD框架训练自己的数据集
SSD demo中详细介绍了如何在VOC数据集上使用SSD进行物体检测的训练和验证.本文介绍如何使用SSD实现对自己数据集的训练和验证过程,内容包括: 1 数据集的标注2 数据集的转换3 使用SSD如 ...
VS2013中的MVC5模板部署到mono上的艰辛历程
部署环境:CentOS7 + Mono 3.10 + Jexus 5.6 在Xamarin.Studio创建的asp.net项目,部署过程非常顺利,没有遇到什么问题:但在VS2013中创建的asp.n ...
ABP框架理论研究总结(典藏版)
目前,我已经完成了Module-Zero的翻译,请查看我的<Module-Zero学习目录>. 到现在为止,使用ABP框架开发正式项目已经3个月有余了,期间翻阅了大量文档资料,包括ABP官 ...
ES6+ 现在就用系列（一)：为什么使用ES6+
系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...
Spark 运行架构核心总结
摘要: 1.基本术语 2.运行架构 2.1基本架构 2.2运行流程 2.3相关的UML类图 2.4调度模块: 2.4.1作业调度简介 2.4.2任务调度简介 3.运行模式 3.1 standalo ...
Android WebView 优化页面加载效果
目前带有Web功能的APP越来越多,为了能够更好的使用WebView展示页面,可以考虑做相关的优化:WebView 缓存,资源文件本地存储,客户端UI优化. 可能有些人会说,为什么不做Native的, ...
JavaScript随笔2
JavaScript的组成:ECMA.DOM.BOM闭包,子函数可以使用父函数的局部变量函数:arguments是个参数数组oDiv.style.width:只能操作行间的样式.在IE下oDiv.c ...
ASP.NET MVC系列：Model
1. Model任务 Model负责通过数据库.AD(Active Directory).Web Service及其他方式获取数据,以及将用户输入的数据保存到数据库.AD.Web Service等中. ...
验证码识别<1>
1. 引子前两天访问学校自助服务器()缴纳网费,登录时发现这系统的验证码也太过“清晰”了,突然脑袋里就蹦出一个想法:如果能够自动识别验证码,然后采用暴力破解的方式,那么密码不是可以轻易被破解吗? p ...

Nuclear开始