require.js的使用心德:
都是自我的理解所得:
first:为什么使用?
1,web开发js的占用比例越来越大,引入的插件也越来越多,维护困难,一个一个的script的写要废
2,模块开发的需求
3,有时候javascript的运用是有依赖的需求的,大量的使用难以保证依赖顺序,出现不存在的问题
second:这是个坑,使用前的提示:
使用的环境是服务器的web环境,单纯的没有服务器的静态页面使用根本没有反应!
[][][]还有最重要的一点是,所有的路径,出了加/的,若是寻相对路径,都是以baseUrl为基础的???这个待验证![][]]
third:废话不多说,直接上图片:
step:首先是目录结构:
index.html是我的页面,这个require是一个服务器的根目录,require是require.js的库
step2:主要的index.html的样子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this in index</title>
<div id="modle">asdafdfad</div>
<!--注意:src是require的库,defer是ie异步,async是异步,data-main是js入口文件,config,主要的require.config都在里面写各种调用-->
<script src="require.js" defer async="true" data-main='config' ></script>
</head>
<body>
<h1>this is index</h1>
</body>
</html>
step3的config.js文件如下:
require.config({
paths:{
a:'lib/a',
b:'lib/b',
c:'others/c',
jQuery:'lib/jquery.min'
},
waitSeconds:5,
//jquery等各种外部库要使用,当要如此,是做兼容的
shim:{
jQuery:{
exports:'$'
}
}
})
require(['a','b','c','jQuery'],function(a,b,c,$){
a.a();//输出this is module a
b.b();//输出this is module b
c.c();//输出this is module c in others
console.log(c.c2);//有时候有时候我会相信一切有尽头
a.show();//背景变红
$('#modle').html('d');//文本变为d
})
各个模块文件如下:a.js
define(['jQuery'],function($){
function a(){
console.log('this is module a ');
}
function jqueryShow(){
$('#modle').css('background','red');
}
return {
a:a,
show:jqueryShow
}
})
b.js
define(function(){
return {
b:function(){
console.log('this is module b');
},
care:function(){
console.error('刚刚引入的jquery不是一个模块,不能在define处搞');
}
}
})
c.js
define([],function(){
return {
c:function(){
console.log('this is module c in others');
},
c2:'有时候有时候我会相信一切有尽头!'
}
})
//后来在发现的一些坑
后来发现他的那个baseUrl的坑有点多呀什么情况呢?
坑之一:baseUrl如果没有设定,那会默认为加载data-main的路径,如果在config(main)中申明了,就是它,都没有,那就是require.js所在路径,paths的设定相对路径都是它位参考的,模块的引入require和define自然也是以config(main)中的baseUrl为参考的相对路径(如:baseUrl:'/js/modle',那么意思就是所有的相对路径都是以modle目录里面为参考),但是baseUrl什么时候不起作用呢?就是用了/(根目录符号开头),http开头的路径和....js结尾的,这么一想还是很人性的哈!
坑之二:如果有多个的入口文件,那么,就不能申明data-main在标签中了,就得在各个页面中分别写require.config({}),但是又有个问题了,什么问题呢?就是啊,如果引入require.js时候是defer async='true' 那么后面的require.config会说没有定义,所以,引入require.js的标签一般都不写前面的defer async='true'了.也是醉了