（三）require.js

一、require.js的诞生，就是为了解决两个问题：

实现js文件的异步加载，避免网页失去响应；
管理模块之间的依赖性，便于代码的编写和维护。

二、 require.js的加载

<script src="js/require.js" defer async="true" ></script>

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer。

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

data-main属性的作用是，指定网页程序的主模块，入口代码。可以把main.js简写成main。

三、主模块的写法&模块加载&加载非规范的模块

AMD规范定义的的require()函数。

    require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){// some code here});

require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块。第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用，加载的模块会以参数形式传入该函数。

默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js，underscore.js和 backbone.js，然后自动加载。

使用require.config()方法，我们可以对模块的加载行为进行自定义。一般作为全局配置，在一个WebApp中，也有时候将配置提取出来放到单独文件下require.config.js。
```
　require.config({baseUrl: "js/lib",paths: {"jquery": "jquery.min",}
```
```
　});
```
baseUrl：改变基目录。paths：指定各个模块的加载路径，如果某个模块在某一台主机上，可以指定路径。require.js提供了一个优化工具，将多个模块合并在一个文件中，减少HTTP请求数。

四、加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。不符合的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

require.config({shim: {'underscore':{exports: '_'},'backbone': {deps: ['underscore', 'jquery'],exports: 'Backbone'}}});

shim：专门用来配置不兼容的模块。具体来说，每个模块要定义

exports值（输出的变量名），表明这个模块外部调用时的名称；
deps数组，表明该模块的依赖性。

五、AMD模块的写法

模块必须采用特定的define()函数来定义。

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'], function(myLib){function foo(){myLib.doSomething();}return {foo : foo};});

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

六、require.js插件

类似的插件还有json和mdown，用于加载json文件和markdown文件。

domready插件，可以让回调函数在页面DOM结构加载完成后再运行。
```
require(['domready!'], function (doc){// called once the DOM is ready});
```

text和image插件，则是允许require.js加载文本和图片文件。

define(['text!review.txt','image!cat.jpg'],function(review,cat){console.log(review);document.body.appendChild(cat);});

（二）AMD规范

通行的Javascript模块规范共有两种：CommonJs和AMD。

一、CommonJS

node.js的模块系统，就是参照CommonJS规范定义的。
在CommonJS中，有一个全局性方法require()，用于加载模块。

二、AMD

采用异步方式加载模块，比较适合浏览器环境。

require([module], callback);

Javascript模块化编程，requireJs相关推荐

学习阮一峰Javascript模块化编程，requireJS使用
使用背景NOW: 网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式. 项目需要一个团队分工协作.进度管理.单元 ...
Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
JavaScript模块化编程知识分享！
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
Javascript模块化编程系列二: 模块化的标准化(CommonJS AMD)
前言 Javascript模块化编程系列一: 模块化的驱动在前一篇介绍了为什么要进行Javascript模块化编程.至于如何实现模块化,不同的开发组织和个人具体的实现方式肯定是不一样.如何统一一个规 ...
JavaScript 模块化编程规范
JavaScript 模块化编程是一种组织代码的方式,可以将代码分成独立的小块,使得代码更易于维护.扩展和重用.常见的 JavaScript 模块化编程规范有 CommonJS.AMD.ES6 Mod ...
(转)Javascript模块化编程（一）：模块的写法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
Javascript模块化编程（一）：模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
Javascript模块化编程：AMD规范
一.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写 ...

Javascript模块化编程，requireJs

（三）require.js

（二）AMD规范

Javascript模块化编程，requireJs相关推荐

最新文章

热门文章