您的位置：首页 > Web前端 > JavaScript

RequireJS -Javascript模块化（一、简介）

2016-05-12 11:56 543 查看

1、认识RequireJS

RequireJs官网（http://requirejs.org/）的描述：

RequireJSisaJavaScriptfileandmoduleloader.Itisoptimizedforin-browseruse,butitcanbeusedinotherJavaScriptenvironments,likeRhinoandNode.UsingamodularscriptloaderlikeRequireJSwillimprovethespeedandqualityofyourcode.

RequireJS是一个用来加载模块的js文件，它是在浏览器端的一个优化设计，同时它能够在其他js环境下使用，比如Rhino和Node，使用类似于RequireJS的js模块加载器能够提升您的代码执行速度和质量

2、使用RequireJS

（1）平时我们引用js的方式

index.html

<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8"/>
<scripttype="text/javascript"src="js/my/dr.js"></script>
<title></title>
</head>

<body>
<p>thisisindex.html</p>
<script>
console.log("dr.version:"+dr.version);
</script>
</body>

</html>

js/my/dr.js

!function(window){
　　vardr={};
　　dr.version="v1.0";
　　window.dr=dr;

}(window);

控制台输出

dr.version:v1.0

（2）引用requirejs的方式

一个简单的例子：

目录结构：

index.html

<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8"/>
<scripttype="text/javascript"src="js/require.js"data-main="js/main"></script>
<title></title>
</head>

<body>
<p>thisisindex.html</p>
</body>

</html>

js/my/dr.js

!function(window){
　　vardr={};
dr.version="v1.0";

window.dr=dr;

define(function(){
returndr;
});

}(window);

js/main.js

require.config({
baseUrl:"js",
paths:{
dr:"my/dr"
}
})

require(["dr"],function(dr){
if(dr){
console.log("dr.jsisready!");
　　　　console.log("dr.version:"+dr.version);
}
})

测试，控制台输出：

dr.jsisready!
dr.version:v1.0

1、看下index.html。

　　在<head>标签中引入了require的js文件，并指明属性data-main="js/main.js"，这个属性相当于指明了RequireJs的入口，与java中的mian方法相似（这个属性的值可以直接写成"js/main"，require会自动去找js下的main.js文件）。

2、看下RequireJs的“入口”main.js。

　　require.config()：配置require的基本信息。

　　　　baseUrl如果不指定的话，那默认为main.js的文件夹路径，即"js"，我们的代码中写不写baseUrl属性都无所谓，因为我们与main的文件夹路径是一致的；

　　　　path：我们要引用的js文件和路径，如果要引用多个js文件，追加即可，但是这里我们引用的js文件中必须符合AMD规范（异步模块加载机制）才可以，简单的说就是必须有define()方法。

　　require()：两个参数，第一个是数组，里面存放我们要引用的js文件的名称，与上面config方法中的paths中的名称对应，第二个是引用完成后的回调函数，在这个函数中有个参数，这个参数值就是js文件中define()方法的返回值。

3、看下dr.js

!function(window){
vardr={};
dr.version="v1.0";

window.dr=dr;

define(function(){
returndr;
});

}(window);

这个跟之前（1）平时我们引用js的方式相比，多了一个define函数（斜体部分），这个函数返回了dr对象。这样才符合AMD规范，我们在main.js的require()的回调函数中才能得到dr.version的值。

简单的总结下：

1、在我们需要引用的js文件中定义define()方法，返回某个对象。

2、编写main.js方法（当然名字写成什么都可以，只要在index引用RequireJs文件的时候指明属性data-main的值为对应的main.js即可）。编写配置文件（指定baseUrl，paths里面存放我们要引用的js文件，这里js文件都是作为module的方式被require异步加载）

3、在index.html中引入requirejs文件，指明require入口，在页面中使用即可。

下面是我加载两个模块的例子（dr.js和jquery.js），很简单，各位一眼就能看懂的。

目录结构：

（配图有误，后面测试的时候将jquery文件夹修改为了jq）

按照步骤来：

1、在dr.js和jquery.js中编写define()方法。dr.js我们刚刚已经写过了，这里不改动；jquery呢？看下jquery源码：

//ExposejQueryasanAMDmodule,butonlyforAMDloadersthat
//understandtheissueswithloadingmultipleversionsofjQuery
//inapagethatallmightcalldefine().Theloaderwillindicate
//theyhavespecialallowancesformultiplejQueryversionsby
//specifyingdefine.amd.jQuery=true.Registerasanamedmodule,
//sincejQuerycanbeconcatenatedwithotherfilesthatmayusedefine,
//butnotuseaproperconcatenationscriptthatunderstandsanonymous
//AMDmodules.AnamedAMDissafestandmostrobustwaytoregister.
//LowercasejqueryisusedbecauseAMDmodulenamesarederivedfrom
//filenames,andjQueryisnormallydeliveredinalowercasefilename.
//DothisaftercreatingtheglobalsothatifanAMDmodulewantstocall
//noConflicttohidethisversionofjQuery,itwillwork.
if(typeofdefine==="function"&&define.amd&&define.amd.jQuery){
define("jquery",[],function(){returnjQuery;});
}

已经看到jquery已经写好了，将jQuery做一个异步加载的module实现。

2、编写main.js，在paths中添加jquery的配置，名称为“jquery”，路径是“jq/jquery”，代表着引入"js/jq/"下的jquery.js文件，注意：这里的路径不能写后缀".js"；在require中添加jquery的模块。

require.config({
baseUrl:"js",
paths:{
jquery:"jq/jquery",
dr:"my/dr"
}
})

require(["jquery","dr"],function($,dr){
if($){
console.info("jqueryisready!");
console.log("jqueryversion:"+$().jquery);
}
if(dr){
console.info("dr.jsisready!");
console.log("dr.version:"+dr.version)
}
})

3、index.html，增加一个按钮，用于测试jquery和dr是否正确引入

<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8"/>
<scripttype="text/javascript"src="js/require.js"data-main="js/main.js"async="async"defer="defer"></script>
<title></title>
</head>

<body>
<p>thisisindex.html</p>
<buttononclick="getVersion();">获取版本</button>
<script>
functiongetVersion(){
console.log("index-->jqueryversion:"+$().jquery);
console.log("index-->drversion:"+dr.version);
}
</script>
</body>

</html>

测试：

jqueryisready!
jqueryversion:1.9.1
dr.jsisready! dr.version:v1.0

//点击button按钮时候控制台输出
index-->jqueryversion:1.9.1
index-->drversion:v1.0

这里存在一个问题，很大的问题：如果我们把getVersion()的function包装去掉，直接在script中写

console.log("index-->jqueryversion:"+$().jquery);

或者

console.log("index-->drversion:"+dr.version);

会发生什么呢？

UncaughtReferenceError:$isnotdefined

jqueryisready!
jqueryversion:1.9.1
dr.jsisready! dr.version:v1.0

或者

UncaughtReferenceError:drisnotdefined

jqueryisready!
jqueryversion:1.9.1
dr.jsisready! dr.version:v1.0

问题的根源在于，在requirejs异步加载jquery和dr的时候，index.html的文档流已经读完了，所以发生了错误，之后又异步获取到了require加载jquery和dr完成的回调函数。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航