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