RequireJs印象中是刚参加工作接手第二个ext项目中遇到过，很可惜当时没有认真研究过，实际上一直到今天也只是停留在知道它可以做什么而已。年底了工作渐渐进入休整期，前天不经意看到博客园一大神讨论requirejs和ASP.NET MVC Bundling异同，忽然又想起了requirejs,于是决定一探究竟，下面记录这两天的（断断续续的~~你懂得）学习成果。
1.RequireJs能做什么？
1). 防止页面加载js时阻塞页面渲染
2). 模块化加载js,避免出现页面多引用、依赖js问题
2.认识RequireJs
使用RequireJs加载模块化的js，define定义模块且模块需返回
//DefineJs模块
define(function(){ var DefineJs={ MyAlert:function(msg){ alert('sean '+msg) } } return DefineJs;//必须返回 })
注：我们可以在定义模块的时候添加依赖
//依赖jquery的模块
define(["jquery"],function($){ var MyJs={ MyAlert:function(msg){ var opt={id:1,name:'sean',msg:'hi sean'}; $.extend(opt,{msg:'hi '+msg}) alert(opt.msg) } } return MyJs;//必须返回 })
html页面如何使用模块js？RequireJs引用到页面时可以添加data-main属性指定模块入口main.js再此可以省略后缀，相当于main函数，async="true"是异步加载避免阻塞，defer是针对IE浏览器功能和async一样。
<!DOCTYPE html> <html> <head> <title>RequireJs实践</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <script src="js/require.js" data-main="js/main" defer async="true" ></script> </body> </html>
main.js conffig配置用到哪些模块
//main.js
require.config({ baseUrl:'js/', paths : { myfunc: 'DefineJs' //DefineJs模块 } }) require(["myfunc"],function(r){ r.MyAlert('你好') // sean 你好 })
实际开发中我们会引用很多jquery插件而且这些插件未必就是define()模块化的，那该如何使用RequireJs呢？
RequireJs提供shim关键字将依赖的js某个全局变量暴露出来当做模块引用
//不符合AMD规范 UnAMD.js
var consol=function (argument) {
var opt={
id:1,
name:'sean'
}
$.extend(opt,{name:argument})
console.info(opt)
}
main.js稍作修改
//main.js
require.config({ baseUrl:'js/', paths : {
jquery :["http://libs.baidu.com/jquery/2.0.3/jquery"], myfunc: 'DefineJs'//DefineJs模块 }, shim: {//不符合AMD js UnAMD: { deps : ["jquery"], //依赖jquery exports : "consol"//输出的对象必须和相关js中的全局变量一致 封装成对象 } } }) require(["jquery",'UnAMD'],function($,con){ $(function(){ con('月明星惜');//控制台输出 对象{id:1,name:'月明星惜'} }) })
/*===========================RequireJs简单介绍到此结束==================================*/
注意事项：
defing 命名模块
仔细看jquery发现且在定义模块时是这样的 define( "jquery", [], function() { return jQuery; }); 根据上面介绍我们知道define定义模块时这个模块可以是依赖别的模块的也就是第二个参数数组，那么第一个参数是什么意思呢？其实定义模块是可以强制性定义模块名称，而且在require.config中不可以修改模块名称，所以配置时一定要注意这种已命名的模块。
requirejs.config({ baseUrl: '/public/js', paths: { myjquery: 'lib/jquery/jquery'//重新自定义jquery模块名称 } }); requirejs(['myjquery'], function($) { //do sth 程序报错 $ is undefined });