前端js框架学习

Handlersbar

Handlebars是JavaScript一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译，这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。

参考：http://www.silverlightchina.net/html/HTML_5/study/2013/0227/22040.html

seajs

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

参考：http://www.cnblogs.com/leoo2sk/archive/2011/06/27/write-javascript-with-seajs.html

requirejs

AMD的引入

AMD提出了一种基于模块的异步加载JavaScript代码的机制，它推荐开发人员将JavaScript代码封装进一个个模块，对全局对象的依赖变成了对其他模块的依赖，无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的JavaScript代码好处很明显，各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。这种非阻塞式的并发式快速加载JavaScript代码，使Web页面上其他不依赖JavaScript代码的UI元素，如图片、CSS以及其他DOM节点得以先加载完毕，Web页面加载速度更快，用户也得到更好的体验。

RequireJS简介

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。

目前最新版本的RequireJS 1.0.8在IE 6+、Firefox 2+、Safari 3.2+、Chrome 3+、Opera 10+上都工作的很好。

实战RequireJS

在Web应用中使用RequireJS

在RequireJS官方主页上下载最新的版本的require.js，放到Web页面中。

使用RequireJS加载JavaScript文件

即使您的Web前端由于种种历史原因还没有打算进行模块化的设计，RequireJS作为JavaScript文件的加载器，还是可以帮助您来完成异步非阻塞的文件加载。

如清单2所示，有两个JavaScript文件a.js和b.js，里面各自定义了myFunctionA和myFunctionB两个方法，通过下面这个方式可以用RequireJS来加载这两个文件，在function部分的代码可以引用这两个文件里的方法。

清单2.加载JavaScript文件

<script src="./js/require.js"></script>
   
 
<script>
   
 
	require(["./js/a.js", "./js/b.js"], function() {   
	 
		myFunctionA();   
		 
		myFunctionB();   
	 
	});   
 
</script>

require方法里的这个字符串数组参数可以允许不同的值，当字符串是以”.js”结尾，或者以”/”开头，或者就是一个URL时，RequireJS会认为用户是在直接加载一个JavaScript文件，否则，当字符串是类似”my/module”的时候，它会认为这是一个模块，并且会以用户配置的baseUrl和paths来加载相应的模块所在的JavaScript文件。配置的部分会在稍后详细介绍。

这里要指出的是，RequireJS默认情况下并没有保证myFunctionA和myFunctionB一定是在页面加载完成以后执行的，在有需要保证页面加载以后执行脚本时，RequireJS提供了一个独立的domReady模块，需要去RequireJS官方网站下载这个模块，它并没有包含在RequireJS中。有了domReady模块，清单2的代码稍做修改加上对domReady的依赖就可以了。

<script src="./js/require.js">
</script>
<script>
    require(["domReady!", "./js / a.js ", ". / js / b.js "],
    function() {
        myFunctionA();
        myFunctionB()
    });
</script>

使用RequireJS来定义JavaScript模块

这里的JavaScript模块与传统的JavaScript代码不一样的地方在于它无须访问全局的变量。模块化的设计使得JavaScript代码在需要访问”全局变量”的时候，都可以通过依赖关系，把这些”全局变量”作为参数传递到模块的实现体里，在实现中就避免了访问或者声明全局的变量或者函数，有效的避免大量而且复杂的命名空间管理。

如同CommonJS的AMD规范所述，定义JavaScript模块是通过define方法来实现的。

下面我们先来看一个简单的例子，这个例子通过定义一个student模块和一个class模块，在主程序中实现创建student对象并将student对象放到class中去。

清单5.student模块，student.js

define(function(){
	return {
		createStudent:function(name,gender){
			return{
				name:name,
				gender,gender
			}
		}
	}
})

清单6.class模块，class.js

define(function(){
	var allStudents=[];
	return{
		classID:"001",
		department:"computer",
		addToClass:function(student){
			allStudents.push(student)
		}
		getClassSize:function(){
			return allStudents.length;
		}
	}
})

清单7.主程序

require(["js/student","js/class"],function(student,cls){
	cls.addToClass(student.createStudent("zhangsan","maile"));
	cls.addToClass(student.createStudent("lisi","femaile"));

})

student模块和class模块都是独立的模块，下面我们再定义一个新的模块，这个模块依赖student和class模块，这样主程序部分的逻辑也可以包装进去了。

清单8.依赖student和class模块的manager模块，manager.js

define(["js/student","js/class"],function(student,cls){
	return{
		addStudent:function(name,genter){
			cls.addStudent(student.createStudent(name,genter))
		},
		getClassSize:function(){
			return cls.getClassSize();
		}
	}
})

清单9.新的主程序

require("js/manager.js",function(manager){
	manager.addStudent("zhangsan","maile");
})

通过上面的代码示例，我们已经清楚的了解了如何写一个模块，这个模块如何被使用，模块间的依赖关系如何定义。

还是有一些使用技巧需要提示一下：

• 尽量不要提供模块的ID，如AMD规范所述，这个ID是可选项，如果提供了，在RequireJS的实现中会影响模块的可迁移性，文件位置变化会导致需要手动修改该ID。
• 每个JavaScript文件只定义一个模块，模块名称和文件路径的查找算法决定了这种方式是最优的，多个的模块和文件会被优化器进行优化。
• 避免模块的循环依赖，如果实在避免不了，可以模块中加上对”require”模块的依赖，在代码中直接用require(”dependencyModuleName”)。

配置RequireJS

前面的介绍中，我们似乎忽略了一个基本问题，模块名字是怎么来的？当我在require一个模块时，这个模块是如何映射到具体的JavaScript文件上去？这就涉及到如何配置RequireJS。

清单10.载入require.js

<script type="text/javascript" src="./js/requrie.js"></script>
<script type="text/javascript">
	requrie.config({
		baseUrl:"./js",		//
		paths:{
			"some":"some/v1"
		},
		waiteSeconds:10
	})

	//定义三种方式加载js方式，通过baseURL,paths,和直接定义的路径*.js
	requrie(["some/module","my/module","./js/a.js"],function(){

	})
//require()函数接受两个参数。
//---第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA', 'moduleB', 'moduleC']，即主模块依赖这三个模块；
//---第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

</script>

baseUrl指明的是所有模块的base URL，比如”my/module”所加载的script实际上就是/js/my/module.js。

注意，以.js结尾的文件加载时不会使用该baseUrl，它们仍然会使用当前index.html所在的相对路径来加载，所以仍然要加上”./js/”。如果baseUrl没有指定，那么就会使用data-main中指定的路径。

paths中定义的路径是用于替换模块中的路径，如上例中的some/module具体的JavaScript文件路径是/js/some/v1/module.js。

waitSeconds是指定最多花多长等待时间来加载一个JavaScript文件，用户不指定的情况下默认为7秒。

参考： http://www.csdn.net/article/2012-09-27/2810404