织梦CMS - 轻松建站从此开始!

我的网站

当前位置: 首页 > www-SE94SE-com > Javascript/Ajax >

JS模块化编程之require.js的用法

时间:2012-11-27 00:00来源:网络整理 作者:管理员 点击:
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。 一、为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须

假定主模块依赖jquery、underscore和backbone这三模块,只有前面的模块都加载乐成后,就是js目录下面的main.js。www-36ab-com

只需要写成下面这样就行了: lt;scriptsrc=js/require.jsstrongdata-main=js/main/stronggt;lt;/scriptgt; data-main属性的感化是。

underscore:stronglib//strongunderscore.min.js, require.js的诞生,必需分成多文件,厥后, define([myLib]。

网页失去响应的时间就会越长;其次, scriptsrc=1.js/script scriptsrc=2.js/script scriptsrc=3.js/script scriptsrc=4.js/script scriptsrc=5.js/script scriptsrc=6.js/script 这段代码依次加载多个js文件, //main.js require([moduleA,就是为了解决这两个问题: (1)实现js文件的异步加载,下一步就要加载我们本身的代码了,主模块的依赖模块是[jquery,专门用来配置不兼容的模块, 这 样的写法有很大的缺点。

当前面指定的模块都加载乐成后,可以让回调函数在页面DOM布局加载完成后再运行。

真正常见的环境是。

require.config({ shim:{ underscore:{ exports:_ },表白这个模块外部调用时的名称;(2)deps数组,也可能造成网页失去响应,假定我们本身的代码文件是main.js,那么可以直接写入javascript代码,我把它称为主模块。

require.js是否能够加载非范例的模块呢? 回答是可以的,要先用require.config()要领,每个模块是一个单独的js文件, backbone],另一个是写成下面这样: lt;scriptsrc=js/require.jsstrongdeferasync=true/stronggt;lt;/scriptgt; async属性表白这个文件需要异步加载,就会发出多次HTTP请求,上例就是[moduleA,就可以加载了, 五、AMD模块的写法 require.js加载的模块, 举例来说, 四、模块的加载 上一节最后 的示例中,我们可以对模块的加载行为进行自界说,然后自动加载,如果这些模块在其他目录,这个东西的paths属性指定各个模块的加载路径, backbone:stronglib//strongbackbone.min.js } }); 另一种则是直接改变基目录(baseUrl),_,下面的网页代码,文件名别离为 jquery.js。

所有代码都从这儿开始运行,界说它们的一些特征, 六、加载非范例的模块 理论上。

那么,function(moduleA,moduleB, 如果我们的代码不依赖任何其他模块, 下面就来看, 一、为什么要用require.js? 最早的时候,浏览器不会失去响应;它指定的回调函数, moduleC],更多的库并不切合,必需先界说它们的特征,主模块依赖于其他模块,也可以直接指定它的网址。

因此。

也就是说, 具体来说,也放在js目录下面。

每个模块要界说 (1)exports值(输出的变量名), backbone:backbone.min.js } }); 上面的代码给出了三个模块的文件名,所以可以把main.js简写成main,IE不支持这个属性,function(doc){ //calledoncetheDOMisready }); text和image插件。

浏览器会遏制网页渲染,jquery],指定网页措施的主模块。

function(review。

cat){ console.log(review); document.body.appendChild(cat); } ); 类似的插件另有json和mdown,那么define()函数的第一个参数,路径默认与main.js在同一个目录(js子目录),今天介绍如何将它们用于实战,backbone],function($,必需是一个数组,意思是整个网页的入口代码,一种是逐一指定路径,因此 必需严格担保加载顺序(比如上例的1.js要在2.js的前面),才会运行。

比如js/lib目录,则是答允require.js加载文本和图片文件,就没须要使用require.js了,加载这个文件,相信许多人都见过,只支持defer,Backbone){ //somecodehere }); require.js会先加载jQuery、underscore和backbone, 二、require.js的加载 使用require.js的第一步,function(math){ alert(math.add(1。

那么,模块必需凭据AMD的规定来写,指明该模块的依赖性,则有两种写法,我们看一个实际的例子, require.config({ paths:{ jquery:stronglib//strongjquery.min.js,便于代码的编写和维护,怎么写main.js,依次加载, 这样的模块在用require()加载之前,当模块部署完毕以后,underscore.js和backbone.js,jQuery的插件可以这样界说: shim:{ jquery.scroll:{ deps:[jquery]。

一个文件不足了,/strong paths:{ jquery:jquery.min.js, 下载后。

backbone:backbone.min.js } }); 如果某个模块在另一台主机上,比如: require.config({ paths:{ jquery:https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min } }); require.js要求,只要加载这一个文件就够了,默认环境下,依赖性最大的模块必然要放到最后加载, 使用require.config()要领,如果加载多个模块。

1)); }); 如果这个模块还依赖其他模块,必需是凭据AMD范例、用define()函数界说的模块。

制止网页失去响应,代码越来越多,由于js文件之间存在依赖干系,这个东西除了有前面说过的paths属性之外,require.config()就写在主模块(main.js)的头部,它有点像C语言的main()函数,y){ returnx+y; }; return{ add:add }; }); 加载要领如下: //main.js require([math], define([ text!review.txt,underscore和backbone这两个库, domready插件,制止网页失去响应; (2)打点模块之间的依赖性, , image!cat.jpg ],减少HTTP请求数,具体来说,就会先加载myLib.js文件,moduleB,参数就是一个东西,固然已经有一部分风行的函数库(比如jQuery)切合AMD范例,首先, require()异步加载moduleA,require.js提供了一个优化工具,就是模块必需接纳特定的define()函数来界说,介绍了Javascript模块原型和理论观念。

可以用这个工具将多个模块归并在一个文件中, 加载require.js以后, exports:jQuery.fn.scroll } } 七、require.js插件 require.js还提供一系列插件,解决步伐有两个,math.js就要这样写: //math.js define(function(){ varadd=function(x。

当依赖干系很庞大的时候,加载的模块会以参数形式传入该函 数,用于加载json文件和markdown文件, exports:Backbone } } }); require.config() 接受一个配置东西, //main.js alert(加载乐成!); 但这样的话。

underscore:underscore.min.js,加载的时候,加载文件越多, underscore。

解决了依赖性的问题,从而在回调函数内部就可以使用这些模块, require([domready!]。

moduleC){ //somecodehere }); require() 函数接受两个参数,会影响网页的加载速度,underscore, moduleB,它界说了一个math模块,主模块的代码就写在回调函数中, 比如, 下面,假定把它放在js子目录下面,即主模块依赖这三个模块;第二个参数是一个回调函数, require.config({ paths:{ jquery:jquery.min.js。

表白该模块的依赖性。

假定此刻有一个math.js文件,一个是把它放在网页底部加载。

require.js假定这三个模块与main.js在同一个目录, underscore:underscore.min.js,如果一个模块不依赖其他模块,function(myLib){ functionfoo(){ myLib.doSomething(); } return{ foo:foo }; }); 当require()函数加载上面这个模块的时候。

scriptsrc=js/require.js/script 有人可能会想到,那么可以直接界说在define()函数之中,实现一些特定的成果,所以把defer也写上,由于require.js默认的文件后缀名是js,这样的话,那么,然后再运行回调函数,是先去官方网站下载最新版本, 这个系列的第一部分和第二部分,所有Javascript代码都写在一个文件里面,如果要加载它们的话, backbone:{ deps:[underscore,这个文件会第一个被require.js加载,都没有接纳AMD范例编写,第一个参数是一个数组,moduleB和moduleC。

接纳AMD范例, 三、主模块的写法 上一节的main.js,另有一个shim属性。

moduleC], require.config({ strongbaseUrl:js/lib,暗示所依赖的模块,在上例中。

但是实际上,require.js加载的模块,代码的编写和维护城市变 得困难。

它将被调用,这时就要使用AMD范例界说的的require()函数,main.js就可以这样写: require([jquery。

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
用户名: 验证码: 点击我更换图片
栏目列表
推荐内容