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 发过来
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.前 ...
随机推荐
- linux练习题
观察系统当前进程的运行情况的命令是( ):A.freeB.dmesgC.topD.last 答案:http://hovertree.com/tiku/bjag/foxg5n0q.htm Linux系统 ...
- 我的MYSQL学习心得（二） 数据类型宽度
我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 针对Linux ASP.NET MVC网站中 httpHandlers配置无效的解决方案
近期有Linux ASP.NET用户反映,在MVC网站的Web.config中添加 httpHandlers 配置用于处理自定义类型,但是在运行中并没有产生预期的效果,服务器返回了404(找不到网页) ...
- ASP.NET Web API 开篇示例介绍
ASP.NET Web API 开篇示例介绍 ASP.NET Web API 对于我这个初学者来说ASP.NET Web API这个框架很陌生又熟悉着. 陌生的是ASP.NET Web API是一个全 ...
- CSharpGL(10)两个纹理叠加
CSharpGL(10)两个纹理叠加 本文很简单,只说明如何用shader实现叠加两个纹理的效果. 另外,最近CSharpGL对渲染框架做了修改,清理一些别扭的内容(DoRender()前后的事件都去 ...
- 数据预处理中归一化（Normalization）与损失函数中正则化（Regularization）解惑
背景:数据挖掘/机器学习中的术语较多,而且我的知识有限.之前一直疑惑正则这个概念.所以写了篇博文梳理下 摘要: 1.正则化(Regularization) 1.1 正则化的目的 1.2 正则化的L1范 ...
- 后HTML5时代
十二年前,无论多么复杂的布局,在我们神奇的table面前,都不是问题:十年前,阿捷的一本<网站重构>,为我们开启了新的篇章:八年前,我们研究yahoo.com,惊叹它在IE5下都表现得如此 ...
- JavaScript权威设计--跨域,XMLHttpRequest(简要学习笔记十九)
1.跨域指的是什么? URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a. ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（28）-系统小结
系列目录 我们从第一节搭建框架开始直到二十七节,权限管理已经告一段落,相信很多有跟上来的园友,已经搭配完成了,并能从模块创建授权分配和开发功能了 我没有发布所有源代码,但在14节发布了最后的一次源代码 ...
- Mina、Netty、Twisted一起学（八）：HTTP服务器
HTTP协议应该是目前使用最多的应用层协议了,用浏览器打开一个网站就是使用HTTP协议进行数据传输. HTTP协议也是基于TCP协议,所以也有服务器和客户端.HTTP客户端一般是浏览器,当然还有可能是 ...