分享一下require js的使用经验,零经验学requirejs

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qkzhx0516/article/details/79085205

首先,requirejs是什么我就不多说了吧,都是老生常谈了吧。可以看一下阮一峰大佬的文章:http://www.ruanyifeng.com/blog/2012/11/require_js.html;

其优点也是颇多,例如一下几点:

1、实现按需加载,通过requirejs,你可以在需要某个js模块的时候再加载。这样就可以避免在初始化页面的时候,有很多的数据请求和数据传输;
2、避免传统的,一个页面上N多个script 标签而引起的依赖关系错误,这样就起到方便管理模块的作用;
3、防止页面阻塞,起到异步加载的作用;
4、方便管理版本控制问题;(后面会体现出来);

好了,下面用代码说话吧。

不管我们用哪个工具,得先下载吧,点击这里下载requirejs文件:http://requirejs.org/docs/download.html;
很小,大概18k这样。
requirejs的使用方式也很简单
<script src="./require.js" data-main='./main.js'></script>
大家肯定注意到了,这个data-main的这个属性,这个属性的作用就是指定网页程序的主模块。就是我定义的main.js会第一个被requirejs加载,而由于requirejs的默认文件后缀名就是js ,所以我们这里可以把main.js的后缀去掉。

好,下面看一下我的目录结构。。好吧 ,没有结构,我为了省事就直接都放在一个文件夹下面;

我页面需要用到的文件有:first.js math.js  jquery.js 和 style.css ,requirejs加载css文件的模式和js文件不同,我会在最后说;
通俗的写法我们会在页面写三个script标签来引入这三个文件,三个还好。那要是十三个呢。 岂不是很恶心对吧!那下面我们看一下用requirejs怎么来做,终于可以开始了。。
因为我们main.js作为主模块被加载的, 肯定要先配置main.js里都做了些神马。

require.config({
paths: {
'jquery': ['http://libs.baidu.com/jquery/2.0.3/jquery'],
},
urlArgs: 'ver=0.1.2',//版本控制

});

require(['jquery', 'math', 'first'], function ($, math) {
console.log($)
})

相信大家看到之后,也会明白一些吧。首先path的作用就是设置模块的ID与路径的映射,这样的话,在后面需要用到的这个模块的时候,只需要用模块的ID代替就好了, 这样是不是很方便,不然的话还要写一长串的东西。当然,引入本地打方法是一样的。
第二个urlArgs参数,我也标出来了,就是为了解决版本控制问题,这样你只需要在这个地方改一下版本号,所有的版本号可以自动升级 ,上图说话;


大家看一下,目前所有的版本号都是0.1.2 ,ok 我升级一下
urlArgs: 'ver=0.1.3'


是不是很6,当然还有其他的一些方法去处理这个版本控制问题,大家可以自己查找。

require(['jquery', 'math', 'first'], function ($, math) {
console.log($)
})

这里地方,require接收两个参数,第一个参数是数组,就是你所需要的js模块,第二个是个callback回调,当前页面指定的模块都加在成功之后才会被调用。这样的异步加载模块,浏览器不会失去响应,而且这样也解决了依赖性的问题。有木有~
做到这里我已经很兴奋了。感觉好强大!ok,到这里main.js的 配置差不多就这么多,下面我们看一下js 模块里面是怎么写的。
先看一下math.js的内容:
console.log('working')

define(function(){
var sum = function(x,y){
return x+y;
}
return{
sum:sum
}
})

以为requirejs加载模块是按照AMD的规范来写的,所以模块必须采用define()的函数来定义,如果你的模块还依赖其他模块呢,要怎么处理的, 比如我们需要jquery,看一下我们是怎么来做的, 我在first.js里做了这件事,大家看一下:

console.log('first Work')

define(['jquery'],function(){
var inner = function(){
$('span').html('我是first.js生成的内容')
}
inner()
})

在define的第一个参数中,加入你所需的依赖模块,因为我在main.js中 ,定义好了jquery,所以这里直接引用,这样是不是很方便。看一下效果,

如果不引入jquery, 就会报错

好,到这里应该对require的使用方法有所了解了吧。
我们看一下Network:

所需的js文件都有。到这里就算成功了。

下面说一下requirejs如何加载css文件的:

其实requirejs 本身没有实现这个功能的,但是我们可以借助插件:https://github.com/guybedford/require-css

require-css

配置如下:
在main.js的config中加入一项
map: {
'*': {
'css': 'css'
}
},

这个css.js文件就是我们刚刚下载的文件。
之后再把我们事先写好的css文件require进来,具体代码如下:
require(['jquery', 'math', 'first', 'css!style'], function ($, math) {
console.log($)
})

注意:加载css文件的时候,是通过css!‘url’的形式来加载css文件。我的文件是style.css ,所以引入就是'css!style';
这样,css文件也成功加载进来。

而且版本控制也做好了处理。是不是很方便~ 
到此,requirejs的基本使用方法就是专业,动起来写代码试试吧。。。

是什ok,我目前对requirejs的理解大概就是这样,以后再深入研究一下,如果有说的不对的地方,希望大佬们指正!

展开阅读全文

没有更多推荐了,返回首页