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