初学require.js-javascript模块化编程
博客专区 > webphp 的博客 > 博客详情
初学require.js-javascript模块化编程
webphp 发表于3个月前
初学require.js-javascript模块化编程
  • 发表于 3个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 成都新区开服特惠,热门产品8.5折>>>   

    前几天在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文件。
标签: AMD require require.js
共有 人打赏支持
粉丝 2
博文 88
码字总数 90487
×
webphp
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: