RequireJS－模块化开发框架

时间：2022-07-14 22:26:28

一、equireJS 和 SeaJS 都是很不错的模块加载器，两者区别如下

　　1. 两者定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端

　　2. 两者遵循的标准有差异。RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD

 

RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件，以及不用通过script标签顺序去管理依赖关系。也不会有阻塞（blocking）的情况发生

 

二、RequireJS的模块入口

　　script标签上一个自定义属性：data-main="main"，等号右边的main指的main.js。这个main指主模块或入口模块。

main.js中就两个函数调用require.config和require。

require.config用来配置一些参数，它将影响到requirejs库的一些行为。

require.config的参数是一个JS对象，常用的配置有baseUrl，paths等。

 

 <script data-main="js/main" src="require.js.js"></script> 

 

 main.js

1 require.config({
2     paths: {
3         jquery: 'jquery-1.7.2'
4     }
5 });
6 
7 require(['jquery'], function($) {
8     alert($().jquery);
9 });

 

paths参数，使用模块名“jquery”，其实际文件路径jquery-1.7.2.js（后缀.js可以省略）。

我们知道jQuery从1.7后开始支持AMD规范，即如果jQuery作为一个AMD模块运行时，它的模块名是“jquery”。注意“jquery”是固定的，不能写“jQuery”或其它。

注：如果文件名“jquery-1.7.2.js”改为“jquery.js”就不必配置paths参数了。

 

 

三、定义模块和读取模块

1、定义模块

selector.js

1 define(function() { 
2     function query(selector,context) { 
3         alert(selector, context); 
4     } 
5     return query;
6  });

 

2、读取模块

参数1为获取的js文件可以不写扩展名，第二个参数要执行的事

1 require(['selector'], function(query) {
2     var els = query('.wrapper');
3     console.log(els)
4 });

 

 

四、模块的依赖

<script data-main="main.js" src="require.js"></script>

主模块main

 1 require.config({
 2     baseUrl: 'js',          // baseUrl指的模块文件的根目录，可以是绝对路径或相对路径。这里用的是相对路径。
 3     parth: {
 4         $: "http://public.zgzcw.com/shared/jquery-1.7.1.min.js?v=20140717123"
 5     }
 6 });
 7 
 8 // 引用模块
 9 require(['lab', "event"], function(query, e) {
10     var els = query('#tagName');
11     e.bind();
12     e.unbind();
13 });

 

lab.js

 1 // 定义一个模块
 2 define(function(){
 3 
 4     function tag(id){
 5         $(id + " li").click(function(){
 6             if($(this).hasClass("active")){
 7                 $(this).removeClass("active");
 8             }
 9             else{
10                 $(this).addClass("active");
11             }
12         })
13     }
14 
15     return tag;
16 })

 

event.js

 1 define(["lab"], function(lab){  // 引用lab.js
 2 
 3     var bind = function(){
 4 
 5     }
 6 
 7     var unbind = function(){
 8         
 9     }
10     
11     return {
12         bind: bind,
13         unbind: unbind
14     }
15 })
标签：

相关文章