文档章节

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

webphp
 webphp
发布于 2017/07/26 11:28
字数 1934
阅读 16
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

微信开发-正式号的配置

1、设置相关 业务域名的设置(不设置的话,相关页面会显示防欺诈盗号信息提示) JS接口安全域名设置 网页授权域名设置 注意:以上三个设置中都有下载文件的提示,此文件内容一样,下载一个即可...

Code辉
7分钟前
0
0
微服务之Eureka服务发现

当调用API或者发起网络通信的时候,无论如何我们都要知道被调用方的IP和服务端口,大部分情况是通过域名和服务端口,事实上基于DNS的服务发现,因为DNS缓存、无法自治和其他不利因素的存在,...

架构师springboot
8分钟前
0
0
spring boot2 admin login

版本: admin server 配置 admin client 配置 参考资料

showlike
10分钟前
0
0
NIO、Netty(Netty基础)

一、概述 Netty是一个Java的开源框架。提供异步的、事件驱动的网络应用程序框架和工具,用以快速开发高性能、高可靠性的网络服务器和客户端程序。 Netty是一个NIO客户端,服务端框架。允许快...

这很耳东先生
16分钟前
0
0
Spring boot 读文件

每次都忘, 找起来太费事, 因为太乱. 简单说, 就是不打成jar包的时候, 可以返回File, 打成jar包只能返回InputStream. -- 要是把返回File那个方法去掉多好.就不用tmd本地ok, 发布的时候懵逼了....

园领T
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部