RequireJS

first:为什么使用?

  1,web开发js的占用比例越来越大,引入的插件也越来越多,维护困难,一个一个的script的写要废

  2,模块开发的需求

  3,有时候javascript的运用是有依赖的需求的,大量的使用难以保证依赖顺序,出现不存在的问题

second:这是个坑,使用前的提示:

  使用的环境是服务器的web环境,单纯的没有服务器的静态页面使用根本没有反应!

third:废话不多说,直接上图片:

index.jsp是我的页面,所有的js文件全部放在JS文件夹

1.main.js

requirejs.config({
    baseUrl: 'js',
    paths: {
        
        
        jquery: "lib/jquery/jquery-1.12.4.min",
        bootstrap: "lib/bootstrap/bootstrap.min",
        relatedselect: "plugin/relatedSelect",
        
    },
    shim: {
        bootstrap: ["jquery"],
        relatedselect: ["jquery"]
    }
});
require(['relatedselect','jquery'], function (relatedselect,jquery) {
    console.log("=======use=======");
    var result = 
        [
            {
                "children":[
                    {"name":"城中社区","code":"370523100"},
                    {"name":"城里社区","code":"370523200"}
                ],
                "code":370523,
                "name":"广饶街道"
            }
        ]
    ;
    /*$.ajax({
                type: "POST",//请求方式
                url: "/item.json",//地址，就是json文件的请求路径
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
　　　　　　　　success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
                    console.log(result);
                },
                error:function(xhr,textStatus){
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                },
            });*/
    var config = {
                        defaultText : [ '=街道=', '=管区=', '=社区(村)=' ],
                        firstParentCode : '',
                        data : result,
                        isPreAppend : true,
                        renderId : 'party-rs',
                        nameList : [ 'country', 'town', 'village' ],
                        preLabel : [ '请选择行政区划：', '', '' ],
                        listeners : {
                        onRender : function(select) {
                            $('#' + (select.idList)[0]
                                + ' option[value!=""]')[0].selected = true;
                                select
                                    .onChange(select.getByIndex(0),
                                        0);
                            }
                        }
                    };
    new RelatedSelect(config);
    console.log(jquery);
});

注意：

• 尽可能使用baseUrl规范访问路径
• 在模块存在依赖时，考虑优先顺序
• shim里面是依赖注入
• 静态网页貌似无法引用require,先画个问号

坑之一: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'了.也是醉了