浏览器require html,requireJS的使用

由于浏览器的是单线程的,在加载script标签时会打断,模块的加载.同时,模块间的依赖需要按顺序加载才能正常执行.为了解决这些问题,可以通过使用AMD模块中的requireJS使模块和它的依赖可以被异步的加载,并且按照正确的顺序.

使用requireJS的步骤

1.新建一个项目

2.在index.html中导入require.js文件,

在其script标签中使用data-main属性,

指定main.js,即设置全局变量配置文件的js文件

/*

html中的script标签在加载和执行过程中会阻塞网页的渲染，

所以一般要求尽量将script标签放置在body元素的底部，以便加快页面显示的速度，

还有一种方式就是通过异步加载的方式来加载js，这样可以避免js文件对html渲染的阻塞。

defer和async，defer这个属性在IE浏览器和早起的火狐浏览器中支持，

async在支持html5的浏览器上都支持，

只要有这两个属性，script就会以异步的方式来加载

data-main需要给所有的脚本文件设置一个根路径。

根据这个根路径，RequireJS将会去加载所有相关的模块

*/

3.对main.js进行配置

require.config({

baseUrl:"",

paths:"",

})

/*

baseUrl——用于加载模块的根路径。

paths——用于映射不同根路径下面的模块路径。

RJ默认采用一种baseUrl + moduleID的解析方式，这个解析方式后续会举例说明。

这个baseUrl非常重要，RJ对它的处理遵循如下规则：

在没有使用data-main和config的情况下，baseUrl默认为当前页面的目录

在有data-main的情况下，main.js前面的部分就是baseUrl

在有config的情况下，baseUrl以config配置的为准

上述三种方式，优先级由低到高排列。

RJ默认按baseUrl + module ID的规则，解析文件，并且它默认要加载的文件都是js，

所以你的module ID里面可以不包含.js的后缀，

这就是为啥你看到的module ID都是lib/foo, app/bar这种形式了。

有三种module ID，不适用这种规则：

以/开头，如/lib/jquey.js

以.js结尾，如test.js

包含http或https，如[http://cdn.baidu.com/js/jquery.js](http://cdn.baidu.com/js/jquery.js)

这三个module 都不会根据baseUrl + module ID的规则来解析,而是直接用module ID来解析

*/

4.配置main,或者其他文件的define,(js模块的使用)

define([dependencies], function(id){

})

或者

define(funciton (require, exports, module)){

require("ccs!./a.css")

var a = require("text!./a.html")//自定义依赖模块的调用

module.exports={

"a":a;

"b":function(){}

}

}

define(id?, dependencies?, factory);

其中：

id: 模块标识，可以省略。

dependencies: 所依赖的模块，可以省略。

factory: 模块的实现，或者一个JavaScript对象

RJ建议所有模块都不要使用第一个参数，

如果使用第一个参数定义的模块成为命名模块，

不适用第一个参数的模块成为匿名模块，

命名模块如果更名，

所有依赖它的模块都得修改！

第二个参数是依赖数组，

跟require一样，如果没有这个参数，

那么定义的就是一个无依赖的模块；

最后一个参数是回调或者是一个简单对象，

在模块加载完毕后调用，

当然没有第二个参数，最后一个参数也会调用。

5.调用backbone.js underscore.js

配置路由文件

define(["backbone"],function(backbone){

var Router = backbone.Router.extend=function(){

routes = {

"a":"a1", // ID为a的标签对应的名a1的方法

"b":"b1",

"*action": "defaultAction"

},

a:function(){}

})

/*

创建一个路由对象

*/

new router();

6.在main.js中启动路由

require(['jquery','backbone','./router.js'],function($,Backbone){

Backbone.history.start();

})

PS:循环依赖：

当一个模块foo的依赖数组中存在bar，bar模块的依赖数组中存在foo，就会形成循环依赖

define(['require', 'foo'], function(require, foo) {

return {

name: 'bar',

hi: function() {

foo = require('foo');

console.log('Hi! ' + foo.name);

}

}

});

define(['require', 'app/bar'], function(require, bar) {

return {

name: 'foo',

hi: function() {

bar = require('app/bar');

console.log('Hi! ' + bar.name);

}

}

});