文档章节

初学require.js-javascript模块化编程

webphp
 webphp
发布于 2017/07/26 11:28
字数 1934
阅读 15
收藏 0
    前几天在imooc网上学习一个侧边栏开发的课程,在视频课程中发现了require.js和scss的开发,感觉很方便 ,尤其在多人开发的项目中,可以提高效率及减少开发中重命名的错误,所以今天作为一个初学者就学习一下require.js
一、学习目的
    在最早的时候。所的javascript代码都是写在一个文件里面,只加载一个文件就够,但随着项目的扩展会越来越大,就会有多个js文件,这样要依次加载多个文件,这样的写法有很大的缺点:首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越久,其次,js文件之间存在依赖关系,因此必须保证加载顺序。当依赖关系很复杂的时候,代码的编写和维护就会变的困难。
    require.js的出现就可以解决以上的两个问题,
    1、实现js文件的异步加载,避免网页的响应时间太长
    2、管理模块之间的依赖性,便于代码的编写和维护
二、reqiure.js开始学习-加载
    1、使用require.js的第一步,是去官方网站下载最新版本http://www.requirejs.cn/
    2、将require.js文件存放到项目目录下,然后引入
<script src="js/require.js"></script>
如果只写这样一句是无法缩短网页的响应时间,我们应习惯性的将js文件放到网页的最底部,第二就是在上段js文件的代码中加上 defer  async="true"
<script src="js/require.js" defer async="true"></script>
async属性表明这个文件需要异步加载,避免网页失去响应,但万恶IE不支持这个属性,只支持defer,所以为了兼容要加上defer.加载完require.js以后,要加载require的主模块,就是在这个主模块中定义的其它模块js,下一步就要加载我们自己写的代码了,假定我们自己写的代码文件为main.js,放在了项目js的目录下,
<script src="js/require.js" defer async="true" data-main="js/main"></script>
data-main属性的作用是,指定网页程序的主模块,这个文件会被require.js第一个加载,由于require.js默认主文件名后缀为js,所以可以的.js省去不写。
三、主模块的写法
    在上一段的main.js被我们定义为主模块,意思是整个网页的JS入口代码,所有的代码都从这里开始运行,如果我们的主入口文件的js不依赖任何其它模块,我们在main.js里直接写js代码,回想一下如果这样就没有必要使用require.js了,真正在我们多人开发项目中,主模块会依赖其它模块,这里我们就要使用AMD规范定义的require函数了。
    main.js
    语法为:   
//main.js
require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){
//write code here
})
    在这里解释一下require函数的使用,require()接收两个参数,第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA','moduleB','moduleC'],即主模块依赖这三个模块,第二个参数是一个回调函数,当前指定的模块都加载成功后,它将被调用。加载的模块会以参数的形式传入到函数中,从而在回调函数内部就可以使用这些模块。
    require()异步加载moduleA,moduleB,moduleC,浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载完成后,才会运行也解决了依赖的问题。
    下面以实际例子进行,
    假如主模块依赖jquery,那么main.js就要这样写    
require(['jquery'],function($){
$('body').css('backgroud-color','red');
})
    require.js会加载jquery,然后再运行回调函数,主模块代码写在回调函数中
四、模块的加载
    上面的main.js实例中,主模块依赖于jquery, 默认情况下,require.js假如这个模块与main.js在同一目录下,文件名分别为jquery.js, 然后自动加载,
    使用require.config()方法,我们可以对模块的加载进行自定义,require.config()就写在主模块main.js的头部,参数就是一个对象,这个对象的paths属性指定各个模块的路径
require.config({
 
paths:{
"jquery":"jquery",
"validate":"validate",
}
})
    上面的代码给出了二个模块的文件名,路径默认与main.js在同一目录下,如果这些模块不其它目录下,比如js/validate/目录,则写法就要改变,会产生两种写法,
    1、逐一指定路径
require.config({
paths:{
"jquery":"jquery.min",//此文件与main.js在同一目录
"validate":"validate/validate",
}
 
})
    2、另一种是直接改变目录(baseUrl)
require.config({
 
baseUrl :"js/validate",
paths:{
"jquery":"jquery.min",
"validate":"validate",
}
 
})
    如果模块在另一台服务器主机上,也可以直接指定url网址,如
require.config({
 
paths :{
"jquery":"https//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
}
});
     require.js要求每一个模块是一个单独的js文件,这样的话如果多个模块,就会发起多次HTTP请求,还是会影响网页的加载速度,因此require.js提供一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,可以减少http请求,优化模块地址:http://www.requirejs.cn/docs/optimization.html
五、AMD(异步加载响应)模块的写法
    require.js加载的模块,是采用的AMD模块规范,也就是说模块必须按照AMD的规定来写,模块必须采用特定的defin()函数来定义,如果一个模块不依赖其它模块,那就直接定义在defind()函数之中
    假定现在有一个validate.js 它定义了一个validate模块,那么validate.js就要这样写
//validate.js
 
define(function(){
return{
add =function(x,y){
return x+y;
}
}
})
    在主入口文件里加载方法如下:
//main.js
 
require(['validate'],function(validate){
console.log( validate.add(1,3));
 
})
    如果validate.js模块还依赖其它模块,那么define()函数的第一个参数,必须是一个数组,指明依赖模块名称,如
//validate.js
 
define(['jquery'],function($){
return{
ajaxpost =function(){
var url = $("#elm").prop('href');
$.post(...)
}
}
 
})
     当require()函数加载上面这个模块,就会先加载jquery.min.js文件。
六、加载非规范性模块
    从理论上来讲,require.js加载的模块,必须是按照AMD规范,用define()函数定义模块,但是实际上,虽然已经有一部分流行的函数库比如jquery符合AMD规范,但是也一些不符合,但是require还是可以加载非规范模块的
    这样的模块在用require()加载之前,要先用require.config()方法,来定义他们的一些特征,就要用到config()函数中的shim属性,config()函数除了有paths属性外,还有一个shim属性
    如,
require.config({
 
shim :{
'math':{
exports :'_'
},
'validate':{
deps:['math','jquery'],
exports :'validate'
}
 
}
 
 
});
    require.config()接受了一个配置对象,这里用到的是shim,专门用来配置不兼容的模块,每个模块要定义
        ⑴、exports值:输出的变量名,表明这个模块名部调用时的名称;
        ⑵、deps数组,表明该模块的依赖性,都依赖了那些模块。
    比如:jquery的插件可以这样定义:
reqiure.config({
 
shim :{
 
'jquery.scroll':{
deps:['jquery'],
exports:'jQuery.fn.scroll'
}
 
}
 
})
七、require.js插件
    require.js还提供了一系列插件,实现一些特定功能
    domready插件,可以让回调函数在页面DOM结构加载完成后在运行
require(['domready!'],function(doc){
 
//DOM加载完以后运行的代码段
 
})
    text和image插件,则是允许require.js加载文本和图片文件。
define(['text!review.txt','image!cat.jpg'],function(review,cat){
 
console.log(review);
document.body.appendChild(cat)
 
})
    类似的插件还有json和mdown,用于加载json文件和markdown文件。

© 著作权归作者所有

共有 人打赏支持
webphp
粉丝 1
博文 92
码字总数 92338
作品 0
海淀
程序员
模块化Javascript编程基础 - 自己收藏

(一) 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。 网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用...

顽Shi
2014/03/30
0
0
Javascript模块化编程:require.js的用法

作者: 阮一峰 日期: 2012年11月 7日 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什...

java_T
2013/06/28
0
0
Javascript模块化编程(三):require.js的用法

Javascript模块化编程(三):require.js的用法 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。...

邓含月
2014/01/03
0
0
Javascript模块化编程(三):require.js的用法

一、为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页...

rocet
2014/03/28
0
2
Javascript模块化编程(三):require.js的用法

作者: 阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js? 最...

donny945
2014/09/25
0
2

没有更多内容

加载失败,请刷新页面

加载更多

mysql 数据类型及占用字节数

数字类型 TINYINT                           1 字节 SMALLINT                          2 个字节 MEDIUMINT                         3 个字节...

会游泳的鱼_
51分钟前
3
0
高性能mysql:创建高性能的索引

性能优化简介 MySQL性能定义为完成某件任务所需要的时间量度,换句话说,性能即响应时间,这是一个非常重要的原则。我们通过任务和时间而不是资源来测量性能。数据库服务器的目的是执行SQL语...

背后的辛酸
今天
6
0
HTTP get、post 中请求json与map传参格式

import java.io.IOException;import java.net.URI;import java.net.URISyntaxException;import java.nio.charset.Charset;import java.util.ArrayList;import java.util.List;im......

寒风中的独狼
今天
3
0
IDEA中tomcat启动慢 耗时10分钟

用idea中的tomcat以debug模式启动,会非常的慢,而正常启动没啥问题;原因是debug模式中View Breakpoints断点代码,断点的是jar包,而现在启动由于jar包发生变化,导致启动时一直处于等待中。...

GoodMarver
今天
5
0
Linux学习-10月18(awk)

9.6/9.7 awk 一、awk简介   1. awk是一种编程语言,用于对文本和数据进行处理的   2. 具有强大的文本格式化能力   3. 利用命令awk,可以将一些文本整理成为我们想要的样子   4. 命令awk...

wxy丶
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部