当前位置: 首页 > 工具软件 > RequireJS > 使用案例 >

浏览器require html,requireJS的使用

有翰海
2023-12-01

由于浏览器的是单线程的,在加载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);

}

}

});

 类似资料: