Javascript模块规范有两种:commonJs和AMD
commonJs起源于nodeJs。nodeJs标志着模块化编程正式诞生。在commonJs中,有一个全局性方法require(),应用于加载模块
举例---require()主要用于加载模块
var math = require('math'); math.add(2,3); // 5
问题:越来越多的项目采用“模块化”,但是,对于浏览器而言,所有的模块化的语言都放置在---服务器端,页面的渲染取决于网速的快慢。如果待加载的数据过多,会导致浏览器处于假死的状态。所以:异步加载应时而生
AMD规范:它采用异步加载模块,模块的加载不影响后面的语句的运行,所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完,这个回调函数才会运行
require([module], callback); require(['math'], function (math) { math.add(2, 3); });
解释上面的函数:math这个模块加载完毕,才会执行math.add这个函数。所以,浏览器就不会产生假死的状态
require.js出现的原因
1):实现js文件的异步加载,避免网页失去响应
2):管理模块之间的依赖性,便于代码的编写和维护
<script src="js/require.js" data-main="js/main"></script>
加载完全部的require之后,就要加载我们自己编写的代码---main.js
data-main 属性的作用:指定网页程序的主模块,指定的文件会第一个被requireJs加载。主模块--顾名思义:整个网页代码的入口
requireJs常用的方法和命令
require.config({}); 我们对模块的加载行为进行自定义。path:表示指定各个模块的加载路径。
require.config({ paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } });
2.模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数中,如果还依赖于其他的模块,那么define()函数的第一个参数,必须是数组,指明该模块的依赖性,于是先加载myLib.js这个文件
define(['myLib'], function(myLib){ function foo(){ myLib.doSomething(); } return { foo : foo }; });
加载非规范的模块
requireJs能加载非规范的模块。如果要加载它们,必须先定义它们的特征。
require.config({ shim: { 'underscore':{ exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } });