RequireJs入门
随着Javascript在开发中占得比重越来越大,就需要一个团队来分工、协作,为了大家的代码可以更好的相互使用,这个时候模块化编程 就成为一个迫切的需求了。但是Javascript本身不是模块化的语言。它不支持类,更别说模块了。
既然模块如此重要,那团队开发中就应该去制定一种规范,来约束大家,这样就便于大家相互使用。如果每个人都按自己的写法,那肯定是乱了套的, 目前Javascript官方没有规范,通行的Javascript模块规范只有两种:CommonJs和AMD
CommonJs概述
CommonJs是服务器端模块规范,它加载模块顺序是同步的,必须等待一个加载完了在加载下一个,node.js就是遵守CommonJs规范
AMD
AMD是浏览器端模块,加载是异步的,无需等待。
两者的区别是:CommonJs是服务器端模块规范,加载模块顺序是同步的;AMD是浏览器端模块,加载是异步的。两者之间可以相互转化(在这就不做阐述了)。
RequireJs是什么
RequireJs是个Javascript文件、模块加载程序,在浏览器执行速度很快,它也可以用在其他Javascript环境里,像node等等
它遵循AMD模块规范
为什么要使用RequireJs
1.如第一段所讲的,Javascript模块化的需要,需求的需要
如下的代码想必大家都看过:
<script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></script> <script src="4.js"></script>
这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长; 其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的 模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难
2.实现js文件的异步加载,避免网页失去响应;
3.管理模块之间的依赖性,便于代码的编写和维护
如何使用RequireJs
1.去官网下一个RequireJs文件,像js文件一样添加
1 <script data-main="script/main" src="script/require.js"></script>
大家发现这段代码里多了一个data-main属性,这个就像C语言中的主函数一样,main.js会第一个被Require.js加载,由于require.js默认的 文件名后缀是js,所以可以把main.js简称成main
那我们看看main这个主函数是怎么写的
定义模块:一个模块名一个文件
1.假如这个模块没有任何依赖关系,仅仅是一些name/value的集合,就可以定义成object的形式
define({ color:"black", size:"unisize" })
2.假如这个模块没有任何依赖关系,仅仅需要一个方法处理一些简单的逻辑
1 define(function(){ 2 var a=1,b=2; 3 document.write(a+b); 4 })
3.定义一个有依赖关系的模块,第一个参数是数组,第二个参数是一个方法function,在第一个参数相对应的js文件全部加载完了,第二个参数的function才会执行
1 define(["./cart","./inventory"],function(cart,inventory){ 2 return { //也可以返回一个function 3 cart:cart.add(3,4); 4 inventory:inventory.minus(3,4); 5 } 6 })
4.定义一个模块来转换CommonJs
1 define(function(require, exports, module) { //方法中三个参数,需要按照顺序写和相对应的名字,否则会出现混乱,也可以舍弃exports和module,但是你要使用的使用,一定要按照顺序写 2 var a = require(‘a‘), 3 b = require(‘b‘); 4 5 //Return the module value 6 return function () {}; 7 } 8 );
RequireJs入门1