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'了.也是醉了