为什么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. Linux设备管理(四)_从sysfs回到ktype

    sysfs是一个基于ramfs的文件系统,在2.6内核开始引入,用来导出内核对象(kernel object)的数据.属性到用户空间.与同样用于查看内核数据的proc不同,sysfs只关心具有层次结构 ...

  2. linux yum命令详解

    yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...

  3. 解决WINDOWS防火墙开启后Ping不通

    WINDOWS系统由于安全考虑,当开启防火墙时,默认不允许外主机对其进行ping功能,即别的电脑ping不通本机.别的主机ping不通本机是因为本机的防火墙关闭了ICMP回显功能,只要把这回显功能打开 ...

  4. 一不小心写了个WEB服务器

    开场 Web服务器是啥玩意? 是那个托管了我的网站的机器么? No,虽然那个也是服务器,但是我们今天要说的Web服务器主要是指像IIS这样一类的,用于处理request并返回response的工具,没 ...

  5. RavenDB官网文档翻译系列第一

    本系列文章主要翻译自RavenDB官方文档,有些地方做了删减,有些内容整合在一起.欢迎有需要的朋友阅读.毕竟还是中文读起来更亲切吗.下面进入正题. 起航 获取RavenDB RavenDB可以通过Nu ...

  6. 工作笔记--哪些bug应由研发发现?

      标准: 研发应发现: 主功能流程无法正常使用,以及联调时主功能流程是否正常 功能缺失 打包时数据库表非最新.程序文件非最新: 文件导出时有明显错误(如无法导出.导出后格式明显不对.批量导入出错) ...

  7. SQL Server 监控系列(文章索引)

    一.前言(Introduction) SQL Server监控在很多时候可以帮助我们了解数据库做了些什么,比如谁谁在什么时候修改了表结构,谁谁在删除了某个对象,当这些事情发生了,老板在后面追着说这是谁 ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统(6)-Unity 依赖注入

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 本节重构一下代码,采用IOC控制反转,也就是依赖注入 您可以访问http://unity.codeplex.com/rel ...

  9. .NET MVC Razor模板预编译(二)

    在前面一片文章:<.NET MVC4 Razor视图预编译(一)> 里面我采用的是PrecompiledMvcViewEngineContrib组件进行预编译视图的虚拟地址注册,但是这个组 ...

  10. PHP的学习--新特性

    最近做的项目使用了 php7,但感觉有很多新特性没有用起来.就想总结一下,一些可能会用到的新特性.之前使用的环境是 php5.4,所有也会有 php5.5 和 php5.6 的特性总结进来,这里只列出 ...