背景
工作中在做客户运营系统时,发现js和css的引用还处于最原始的状态没有更新。在上一个项目中通过对象和其中的方法实现了简单的模块化编程。但随着工程项目的庞大程度增加,简单的对象已经满足不了模块化编程的需求了,所以接触了RequireJS,了解了AMD编程规范。
什么是AMD
和AMD对应的是CMD,在nodeJS里面的依赖是基于CMD,同步加载要依赖的文件。而在浏览器中,如果同步加载需要依赖的文件会导致阻塞,造成浏览器假死,所以需要进行异步依赖。AMD-Asychronous Module Loader,支持这个规范的一个库是requirejs,可以用于优化代码。
从小了说,在做几个简单页面构成的小应用程序时,调用一个js,用不同的对象把各个方法封装起来,也是模块化的一种实现。但这更偏向业务层,涉及到其他其他第三方控件时,就会变得不好管理。
RequireJS使用
- 下载requireJS,下载页面:http://requirejs.org/docs/download.html 压缩后大约8k左右。下载的版本是1.8.3
- 在应用中引用requireJS进行开发
requirejs demo
创建一个应用程序,moduletest,工程的目录如下
|---index.html |---app.js |---lib |-------require.js |----|---modules |----|------|------math.js
在index.html中添加requirejs
data-main指出了入口js,类似于C++中的main函数。可以忽略js后缀。
data-main所在的目录是baseurl,所有的require里面的路径都是相对于它的相对路径,当然也可以在require.config里面指定baseUrl,这样path就是以指定的baseUrl为准了。
- 这个app要实现的功能是当用户输入两个数字之后,显示结果。app.js注册求和按钮事件,再调用math.add求和。
- 在math中写入以下代码:
define([],function(){
var add = function(a,b){
return parseInt(a)+ parseInt(b);
};
return{
add:add
}
});
具体的函数实现写在define函数中,第一个参数是需要引用的模块,为赋新词强说愁,引用了jquery,然后实现了add函数,return的结果是一个对象,里面包含需要返回的方法。
6.在app中引用math,调用其方法。
require.config({
paths:{
'jquery':"http://libs.ainemo.com/jquery/2.2.2/jquery.min"//注意path后面的js需要省略
}
});
因为要用到公用的已经存放在cdn上比较稳定的jquery版本,所以在这里指定了jquery的路径。
require(['jquery','lib/modules/math'],function($,math){
$(function(){
$('#add').click(function(){
var result = math.add($('#param1').val() , $('#param2').val());
$('#addResult').html(result);
});
});
});
demo done.
demo 地址:https://coding.net/u/fiona2016/p/requirejs-learn/git