requireJS 探索（一）

什么是requireJS？

requireJS

requireJS是JavaScript和模塊的加載器，它適合在瀏覽器中使用剧浸，也可以在其他JavaScript環(huán)境中使用锹引，比如Rhino and Node。requireJS使用像組件式的模塊加載器唆香，將改善你代碼的相應(yīng)速度和質(zhì)量嫌变。

requireJS發(fā)揮的作用

簡單總結(jié)起來就2點(diǎn)

  • 改善了用戶體驗，它使js文件異步加載躬它，從而避免網(wǎng)頁腾啥，因為加載js時失去響應(yīng)，一直卡在那冯吓。
  • 使在項目中的js文件以模塊化的形式存在倘待，在業(yè)務(wù)之間調(diào)用時（管理業(yè)務(wù)之間的模塊），如果有好的設(shè)計可以起到很好的解耦合和復(fù)用的作用组贺。便于代碼的維護(hù)和編寫延柠，結(jié)構(gòu)清晰。

為什么使用requireJS

從前我們的代碼是這樣的
首先加載全部的js文件锣披，加載js文件時瀏覽器會對html頁面停止渲染，加載的js文件越多贿条，網(wǎng)頁卡的時間越久雹仿，影響用戶體驗。還有有的時候各個網(wǎng)頁中js文件是相互依賴的比如如下代碼必須先加載jquery.js才能加載后面的js不然會報錯整以，而且每個頁面都要這么寫很麻煩胧辽。而且js也是寫在html頁面里，有潔癖的人很是不愿意看下去把這樣2種風(fēng)格的代碼糅雜在一起公黑。而且js與js之間依賴越大代碼越不好編寫與維護(hù)邑商。對以后的重構(gòu)之路簡直就是自掘墳?zāi)埂?/strong>所以我們要使用requireJS幫助我們管理js包依賴，幫助我們解耦合凡蚜，幫助我們重構(gòu)業(yè)務(wù)方法人断，幫助我們改善用戶體驗。

<!DOCTYPE html>
<html>
<head>
    <title>未來降雨圖分布</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../common/jqwidgets-ver3.0.3/jqwidgets/styles/jqx.base.css" type="text/css"/>
    <link rel="stylesheet" href="../../common/jqwidgets-ver3.0.3/jqwidgets/styles/jqx.metro.css" type="text/css"/>
    <script type="text/javascript" src="../../common/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../js/util.js"></script>
    <script type="text/javascript" src="../../common/json2.js"></script>
    <script type="text/javascript" language="javascript" src="/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="../../common/jqwidgets-ver3.0.3/scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../common/jqwidgets-ver3.0.3/jqwidgets/globalization/localizestrings.js"></script>
    <script type="text/javascript" src="/jxfffcs/js/rainMethod.js"></script>
    <script type="text/javascript" src="/jxfffcs/js/TimeUtil.js"></script>
    <script type="text/javascript" src="/jxfffcs/common/My97DatePicker/WdatePicker.js"></script>
    <!--<script data-main="/jxfffcs/forecast/realTimeForecast/js/main_futureRainfallWindow.js" src="/jxfffcs/common/require.js"></script>-->
    <script>
        $(function () {
            var url = location.search;
            var Request = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1) //去掉?號
                //strs = str.toLowerCase();
                var strs = str;
                strs = strs.split("&");
                for (var i = 0; i < strs.length; i++) {
                    Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            var data = JSON.parse(Request.dataString.replace(/_/g, "至"));
            var unitname = Request.unitname;
            var listInfo = data.listInfo;
            var fymdh = data.fymdh.substring(0, 16);
            $("#fymdhDiv").html("發(fā)布時間：" + fymdh);
            $("#dropDownListJqx").jqxDropDownList({
                source: listInfo,
                placeHolder: "請選擇",
                selectedIndex: 1,
                displayMember: 'ftIntv',
                valueMember: 'ymdh',
                width: '280',
                height: '25',
                theme: "metro"
            });
            $("#dropDownListJqx").on('change', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    if (item) {
                        var value = item.value;
                        //top.showLoading();
                        $("#gridImg").attr("src", "/jxfffcs/rest/situationAnalysis/reports/getRealTimeForecastGrid?width=" + 800 + "&height=" + 800 + "&ymdh=" + value + "&fymdh=" + fymdh + "&unitname=" + unitname + "&t=" + new Date().getTime());
                        //top.hideLoading();
                    }
                }
            });
            $("#dropDownListJqx").jqxDropDownList('selectedIndex', 0);
        });
    </script>
</head>
<body>
<div id='dropDownListJqx' style="float:left;"></div>
<div id="fymdhDiv" style="float:left;font-family: '宋體';font-size: 14PX;margin-top:5px;margin-left:5px;"></div>
<img id="gridImg" style="clear:both;" width="500px" height="500px" alt="" src="">
</body>
</html>

如何使用requireJS

  • 1.獲取requireJS
    獲取后把它加入到項目結(jié)構(gòu)中朝蜘。我們是這里是加在了WebRoot/common/require.js中恶迈。

  • 2.建立項目中包的依賴文件requireConfig.js
    我們這里把它與require.js放在同一個目錄中。文件具體內(nèi)容如下谱醇。保持依賴結(jié)構(gòu)完整我貼出了全部的文件暇仲，文件如下：
    require.config({
    paths: {
    //張博===================================================================================================
    "jQuery": "/jxfffcs/common/jquery-1.7.2.min",
    "jqueryWindow": "/jxfffcs/common/jquery-window-5.03/jquery.window",
    "jqueryUi": "/jxfffcs/common/jquery-ui-1.10.3/js/jquery-ui-1.7.2.custom.min",
    "WdatePicker":"/jxfffcs/common/My97DatePicker/WdatePicker",
    //"rainMethod":"/jxfffcs/js/rainMethod",
    "TimeUtil":"/jxfffcs/js/TimeUtil",
    "jsonTool": "/jxfffcs/js/jsonTool",
    "ajaxfileupload": "/jxfffcs/js/ajaxfileupload",
    "jqueryuploadify": "/jxfffcs/ancillary/uploadify/jquery.uploadify",
    "lang": "/jxfffcs/chart/Highcharts/js/lang",
    "langhighstock": "/chart/Highstock/js",
    "highstock": "/jxfffcs/chart/Highstock/js/highstock",
    "exporting": "/jxfffcs/chart/Highstock/js/modules/exporting",
    "highcharts": "/jxfffcs/chart/Highcharts/js/highcharts",
    "draggablepoints": "/jxfffcs/js/draggable-points",
    "ajaxfileuploadie": "/jxfffcs/js/ajaxfileuploadie",
    //劉雁飛===================================================================================================
    "DateFormat":"/jxfffcs/js/DateFormat",
    "util": "/jxfffcs/js/util",
    //"common": "/jxfffcs/js/common",
    "init": "/jxfffcs/jsapi/init",
    "map": "/jxfffcs/map/map",
    "mapjs": "/jxfffcs/map/forecast/map",
    "toolbar": "/jxfffcs/map/toolbar",
    //"rainMethod": "/jxfffcs/js/rainMethod",
    "json2":"/jxfffcs/common/json2",
    "threePicAndTab":"/jxfffcs/forecast/threePicAndTab/js/threePicAndTab",
    "rainMethod":"/jxfffcs/js/rainMethod",
    "common":"/jxfffcs/js/common",
    "jqueryJstree":"/jxfffcs/common/jstree_pre1.0_fix_1/jquery.jstree",
    //3.8.2
    //張博===================================================================================================
    "jqxall": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqx-all",
    "jqxcore": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxcore",
    "jqxbuttons": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxbuttons",
    "jqxscrollbar": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxscrollbar",
    "jqxtree": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxtree",
    "jqxdata": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxdata",
    "jqxgrid": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxgrid",
    "jqxtreegrid" : "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxtreegrid",
    "jqxwindow": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxwindow",
    "jqxcheckbox": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxcheckbox",
    "jqxdatatable": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxdatatable",
    "jqxmenu": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxmenu",
    "jqxgridselection": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxgrid.selection",
    "jqxlistbox": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxlistbox",
    "jqxdropdownlist": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxdropdownlist",
    //劉雁飛===================================================================================================
    "jqxgridsort": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxgrid.sort",
    "localizestrings": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/globalization/localizestrings",
    "jqxcombobox": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxcombobox",
    "jqxslider": "/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxslider",
    "jqxnavigationbar":"/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxnavigationbar",
    "jqxpanel":"/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxpanel",
    "jqxgridColumnsresize":"/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxgrid.columnsresize",
    "jqxbuttongroup":"/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxbuttongroup",
    "jqxdragdrop":"/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxdragdrop",
    "jqxexpander":"/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxexpander",
    "jqxsplitter":"/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxsplitter",
    "jqxtabs":"/jxfffcs/common/jqwidgets-ver3.8.2/jqwidgets/jqxtabs",
    "gettheme":"/jxfffcs/common/jqwidgets-ver3.8.2/scripts/gettheme",
    //3.0.3
    //張博===================================================================================================
    "jqxall303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqx-all",
    "jqxcore303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxcore",
    "localizestrings303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/globalization/localizestrings",
    "gettheme303": "/jxfffcs/common/jqwidgets-ver3.0.3/scripts/gettheme",
    "jqxradiobutton303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxradiobutton",
    "jqxbuttons303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxbuttons",
    //"jqxdata303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxdata",
    "jqxgridselection303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxgrid.selection",
    "jqxnumberinput303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxnumberinput",
    "jqxgridedit303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxgrid.edit",
    "jqxTooltip303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxtooltip",
    "jqxcombobox303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxcombobox",
    //"jqxlistbox303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxlistbox",
    //劉雁飛===================================================================================================
    "jqxscrollbar303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxscrollbar",
    "jqxpanel303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxpanel",
    "jqxtree303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxtree",
    "jqxdropdownbutton303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxdropdownbutton",
    "jqxinput303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxinput",
    "jqxcheckbox303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxcheckbox",
    "jqxgrid303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxgrid",
    "jqxdata303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxdata",
    "jqxnavigationbar303":"/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxnavigationbar",
    "jqxmenu303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxmenu",
    "jqxgridColumnsresize303":"/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxgrid.columnsresize",
    "jqxgridsort303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxgrid.sort",
    "jqxbuttongroup303":"/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxbuttongroup",
    "jqxlistbox303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxlistbox",
    "jqxdropdownlist303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxdropdownlist",
    "jqxdragdrop303":"/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxdragdrop",
    "jqxexpander303":"/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxexpander",
    "jqxwindow303": "/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxwindow",
    "jqxsplitter303":"/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxsplitter",
    "jqxtabs303":"/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxtabs",
    "jqxgridPager303":"/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqxgrid.pager"
    },
    shim: {
    //張博
    "jQuery": {
    exports: '$'
    },
    "jqueryUi": {
    deps: ['jQuery'],
    exports: 'jqueryUi'
    },
    "ajaxfileupload": {
    deps: ['jQuery'],
    exports: 'ajaxfileupload'
    },
    "ajaxfileuploadie": {
    deps: ['jQuery'],
    exports: 'ajaxfileuploadie'
    },
    "jqueryuploadify": {
    deps: ['jQuery'],
    exports: 'jqueryuploadify'
    },
    "highstock": {
    deps: ['jQuery'],
    exports: 'highstock'
    },
    "highcharts": {
    deps: ['jQuery'],
    exports: 'highcharts'
    },
    "lang": {
    deps: ['highcharts'],
    exports: 'lang'
    },
    "exporting": {
    deps: ['jQuery', 'highstock'],
    exports: 'exporting'
    },
    "draggablepoints": {
    deps: ['highcharts'],
    exports: 'lang'
    },
    //劉雁飛
    "jqueryWindow": {
    deps: ['jQuery'],
    exports: 'jqueryWindow'
    },
    //3.8.2
    "jqxcore": {
    deps: ['jQuery'],
    exports: 'jqxcore'
    },
    //張博===================================================================================================
    "jqxscrollbar": {
    deps: ["jqxcore", "jqxbuttons"],
    exports: 'jqxscrollbar'
    },
    "jqxtree": {
    deps: ["jqxcore"],
    exports: 'jqxtree'
    },
    "jqxdata": {
    deps: ["jqxcore"],
    exports: 'jqxdata'
    },
    "jqxdatatable": {
    deps: ["jqxcore", "jqxscrollbar", "jqxbuttons"],
    exports: 'jqxdatatable'
    },
    "jqxmenu": {
    deps: ["jqxcore"],
    exports: 'jqxmenu'
    },
    "jqxlistbox": {
    deps: ["jqxcore", "jqxbuttons", "jqxscrollbar"],
    exports: 'jqxlistbox'
    },
    "jqxdropdownlist": {
    deps: ["jqxcore", "jqxbuttons", "jqxscrollbar", "jqxlistbox"],
    exports: 'jqxdropdownlist'
    },
    "jqxgrid": {
    deps: ["jqxcore", "jqxdata"],
    exports: 'jqxgrid'
    },
    "jqxgridsort": {
    deps:["jqxcore", "jqxgrid"],
    exports: 'jqxgridsort'
    },
    "jqxgridselection": {
    deps: ["jqxcore", "jqxgrid"],
    exports: 'jqxgridselection'
    },
    "jqxtreegrid": {
    deps: ["jqxdatatable"],
    exports: 'jqxtreegrid'
    },
    //劉雁飛===================================================================================================
    "jqxwindow": {
    deps: ["jqxcore"],
    exports: 'jqxwindow'
    },
    "jqxcheckbox": {
    deps: ["jqxcore"],
    exports: 'jqxcheckbox'
    },
    "jqxbuttons": {
    deps: ["jqxcore"],
    exports: 'jqxbuttons'
    },
    "jqxall": {
    deps: ['jQuery'],
    exports: 'jqxall'
    },
    "jqxcombobox": {
    deps: ['jqxcore', 'jqxdata'],
    exports: 'jqxcombobox'
    },
    "jqxslider": {
    deps: ['jqxcore'],
    exports: 'jqxslider'
    },
    "jqxnavigationbar": {
    deps: ['jqxcore'],
    exports: 'jqxnavigationbar'
    },
    "jqxpanel": {
    deps: ['jqxcore'],
    exports: 'jqxpanel'
    },
    "jqxgridColumnsresize": {
    deps: ['jqxcore',"jqxgrid"],
    exports: 'jqxgridColumnsresize'
    },
    "jqxbuttongroup": {
    deps: ['jqxcore'],
    exports: 'jqxbuttongroup'
    },
    "jqxdragdrop": {
    deps: ['jqxcore'],
    exports: 'jqxdragdrop'
    },
    "jqxexpander": {
    deps: ['jqxcore'],
    exports: 'jqxexpander'
    },
    "jqxsplitter": {
    deps: ['jqxcore'],
    exports: 'jqxsplitter'
    },
    "jqxtabs": {
    deps: ['jqxcore'],
    exports: 'jqxtabs'
    },
    "gettheme": {
    deps: ['jqxcore'],
    exports: 'gettheme'
    },

              //3.0.3
          "jqxcore303": {
              deps: ['jQuery'],
              exports: 'jqxcore303'
          },
          //張博===================================================================================================
          "jqxall303": {
              deps: ['jqxcore303'],
              exports: 'jqxall303'
          },
          "jqxbuttons303": {
              deps: ['jqxcore303'],
              exports: 'jqxbuttons303'
          },
          //"jqxscrollbar303": {
          //    deps: ['jqxcore303'],
          //    exports: 'jqxscrollbar303'
          //},
          "jqxpanel303": {
              deps: ['jqxcore303'],
              exports: 'jqxpanel303'
          },
          "jqxtree303": {
              deps: ['jqxcore303', 'jqxdata303'],
              exports: 'jqxtree303'
          },
          "jqxdropdownbutton303": {
              deps: ['jqxcore303'],
              exports: 'jqxdropdownbutton303'
          },
          "jqxinput303": {
              deps: ['jqxcore303'],
              exports: 'jqxinput303'
          },
          "jqxcheckbox303": {
              deps: ['jqxcore303'],
              exports: 'jqxcheckbox303'
          },
          "jqxdata303": {
              deps: ['jqxcore303'],
              exports: 'jqxdata303'
          },
          "jqxgrid303": {
              deps: ['jqxcore303', 'jqxdata303', 'jqxmenu303'],
              exports: 'jqxgrid303'
          },
          "jqxscrollbar303": {
              deps: ['jqxcore303', 'jqxbuttons303'],
              exports: 'jqxscrollbar303'
          },
          "jqxgridselection303": {
              deps: ['jqxcore303', 'jqxgrid303'],
              exports: 'jqxgridselection303'
          },
          "jqxnumberinput303": {
              deps: ['jqxcore303'],
              exports: 'jqxnumberinput303'
          },
          "jqxmenu303": {
              deps: ['jqxcore303'],
              exports: 'jqxmenu303'
          },
          "jqxgridedit303": {
              deps: ['jqxcore303', 'jqxgrid303'],
              exports: 'jqxgridedit303'
          },
          "jqxTooltip303": {
              deps: ['jqxcore303'],
              exports: 'jqxTooltip303'
          },
          "jqxcombobox303": {
              deps: ['jqxcore303', 'jqxdata303'],
              exports: 'jqxcombobox303'
          },
          //劉雁飛===================================================================================================
          "jqxradiobutton303": {
              deps: ['jqxcore303'],
              exports: 'jqxradiobutton303'
          },
          // "jqxgrid303": {
          //    deps: ["jqxcore303", "jqxdata303"],
          //    exports: 'jqxgrid303'
          //},
          // "jqxdata303": {
          //    deps: ["jqxcore303"],
          //    exports: 'jqxdata303'
          //},
          "jqxnavigationbar303": {
              deps: ['jqxcore303'],
              exports: 'jqxnavigationbar303'
          },
          //"jqxpanel303": {
          //    deps: ['jqxcore303'],
          //    exports: 'jqxpanel303'
          //},
          // "jqxscrollbar303": {
          //    deps: ["jqxcore303", "jqxbuttons303"],
          //    exports: 'jqxscrollbar303'
          //},
          //"jqxgridselection303": {
          //    deps: ["jqxcore303", "jqxgrid303"],
          //    exports: 'jqxgridselection303'
          //},
          "jqxmenu303": {
              deps: ["jqxcore303"],
              exports: 'jqxmenu303'
          },
          "jqxgridColumnsresize303": {
              deps: ['jqxcore303',"jqxgrid303"],
              exports: 'jqxgridColumnsresize303'
          },
          "jqxgridsort303": {
              deps:["jqxcore303", "jqxgrid303"],
              exports: 'jqxgridsort303'
          },
          //"jqxtree303": {
          //    deps: ["jqxcore303"],
          //    exports: 'jqxtree303'
          //},
          "jqxbuttongroup303": {
              deps: ['jqxcore303'],
              exports: 'jqxbuttongroup303'
          },
          "jqxlistbox303": {
              deps: ["jqxcore303", "jqxbuttons303", "jqxscrollbar303", "jqxcheckbox303"],
              exports: 'jqxlistbox303'
          },
          "jqxdropdownlist303": {
              deps: ["jqxcore303", "jqxbuttons303", "jqxscrollbar303", "jqxlistbox303", "jqxcheckbox303"],
              exports: 'jqxdropdownlist303'
          },
          "jqxdragdrop303": {
              deps: ['jqxcore303'],
              exports: 'jqxdragdrop303'
          },
          "jqxexpander303": {
              deps: ['jqxcore303'],
              exports: 'jqxexpander303'
          },
          "jqxwindow303": {
              deps: ["jqxcore303"],
              exports: 'jqxwindow303'
          },
          "jqxsplitter303": {
              deps: ['jqxcore303'],
              exports: 'jqxsplitter303'
          },
          "jqxcheckbox303": {
              deps: ["jqxcore303"],
              exports: 'jqxcheckbox303'
          },
          "jqxtabs303": {
              deps: ['jqxcore303'],
              exports: 'jqxtabs303'
          },
          "localizestrings303": {
              deps: ['jqxcore303'],
              exports: 'localizestrings303'
          },
          //暫時補(bǔ)充
          "gettheme303": {
              deps: ['jqxcore303'],
              exports: 'gettheme303'
          },
          "jqxgridPager303": {
              deps: ['jqxcore303','jqxgrid303'],
              exports: 'jqxgridPager303'
          },
          "jqueryJstree":{
              deps: ['jQuery'],
              exports: 'jqueryJstree'
          }
      }
  });

  • 3.創(chuàng)建main_.js文件（main_futureRainfallWindow.js）
    創(chuàng)建該文件前，最好在html頁面所在的文件夾中創(chuàng)建js文件夾（或者某某隨意）副渴，然后把main_    .js文件創(chuàng)建在js文件夾中奈附。具體代碼如下：
    //如果該業(yè)務(wù)的js文件(futureRainfallWindow.js)中有一個方法需要外部調(diào)用,這個時候就需要把這個類暴露出來,并且還要在futureRainfallWindow.js文件中導(dǎo)出該方法
    var _futureRainfallWindow; //暴露的對象
    require(["/jxfffcs/common/requireConfig.js"], function() {
    require(["/jxfffcs/forecast/realTimeForecast/js/futureRainfallWindow.js"], function(futureRainfallWindow) {
    _futureRainfallWindow = futureRainfallWindow;
    });
    });

  • 4.創(chuàng)建業(yè)務(wù)js文件（futureRainfallWindow.js）
    把它與main_*.js放在同一個文件夾下。如果改業(yè)務(wù)有需要公用的方法需要導(dǎo)出煮剧。具體代碼如下：
    define(["jQuery","util","json2","jqxdropdownlist303","gettheme303","localizestrings303","rainMethod","TimeUtil","WdatePicker"], function() {
    $(function () {
    var url = location.search;
    var Request = new Object();
    if (url.indexOf("?") != -1) {
    var str = url.substr(1) //去掉?號
    //strs = str.toLowerCase();
    var strs = str;
    strs = strs.split("&");
    for (var i = 0; i < strs.length; i++) {
    Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
    }
    }
    var data = JSON.parse(Request.dataString.replace(/_/g, "至"));
    var unitname = Request.unitname;
    var listInfo = data.listInfo;
    var fymdh = data.fymdh.substring(0, 16);
    $("#fymdhDiv").html("發(fā)布時間：" + fymdh);
    $("#dropDownListJqx").jqxDropDownList({
    source: listInfo,
    placeHolder: "請選擇",
    selectedIndex: 1,
    displayMember: 'ftIntv',
    valueMember: 'ymdh',
    width: '280',
    height: '25',
    theme: "metro"
    });
    $("#dropDownListJqx").on('change', function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var value = item.value;
    //top.showLoading();
    $("#gridImg").attr("src", "/jxfffcs/rest/situationAnalysis/reports/getRealTimeForecastGrid?width=" + 800 + "&height=" + 800 + "&ymdh=" + value + "&fymdh=" + fymdh + "&unitname=" + unitname + "&t=" + new Date().getTime());
    //top.hideLoading();
    }
    }
    });
    $("#dropDownListJqx").jqxDropDownList('selectedIndex', 0);
    });

          function publicM() {
          //some code
      }

      //導(dǎo)出的方法
      return {
          publicM: publicM
      }
  });

  • 5.在html頁面添加一條js引用
    <script data-main="/jxfffcs/forecast/realTimeForecast/js/main_futureRainfallWindow.js" src="/jxfffcs/common/require.js"></script>代碼如下：
    <!DOCTYPE html>
    <html>
    <head>
    <title>未來降雨圖分布</title>

          <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
      <meta http-equiv="description" content="this is my page">
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <link rel="stylesheet" href="../../common/jqwidgets-ver3.0.3/jqwidgets/styles/jqx.base.css" type="text/css"/>
      <link rel="stylesheet" href="../../common/jqwidgets-ver3.0.3/jqwidgets/styles/jqx.metro.css" type="text/css"/>
      <!--<script type="text/javascript" src="../../common/jquery-1.7.2.min.js"></script>-->
      <!--<script type="text/javascript" src="../../js/util.js"></script>-->
      <!--<script type="text/javascript" src="../../common/json2.js"></script>-->
      <!--<script type="text/javascript" language="javascript" src="/jxfffcs/common/jqwidgets-ver3.0.3/jqwidgets/jqx-all.js"></script>-->
      <!--<script type="text/javascript" src="../../common/jqwidgets-ver3.0.3/scripts/gettheme.js"></script>-->
      <!--<script type="text/javascript" src="../../common/jqwidgets-ver3.0.3/jqwidgets/globalization/localizestrings.js"></script>-->
      <!--<script type="text/javascript" src="/jxfffcs/js/rainMethod.js"></script>-->
      <!--<script type="text/javascript" src="/jxfffcs/js/TimeUtil.js"></script>-->
      <!--<script type="text/javascript" src="/jxfffcs/common/My97DatePicker/WdatePicker.js"></script>-->
      <script data-main="/jxfffcs/forecast/realTimeForecast/js/main_futureRainfallWindow.js" src="/jxfffcs/common/require.js"></script>
  </head>

  <body>
  <div id='dropDownListJqx' style="float:left;"></div>
  <div id="fymdhDiv" style="float:left;font-family: '宋體';font-size: 14PX;margin-top:5px;margin-left:5px;"></div>
  <img id="gridImg" style="clear:both;" width="500px" height="500px" alt="" src="">
  </body>
  </html>

至此使用requireJS異步加載js和管理依賴包添加完畢

什么是AMD規(guī)范

requireJS是參照AMD規(guī)范編寫的斥滤。那么什么是AMD規(guī)范将鸵？AMD（ Asynchronous Module Definition ）規(guī)范又稱“異步模塊定義規(guī)范”AMD制定了定義模塊的規(guī)則，這樣模塊和模塊的依賴可以被異步加載中跌。這和瀏覽器的異步加載模塊的環(huán)境剛好適應(yīng)（瀏覽器同步加載模塊會導(dǎo)致性能咨堤、可用性、調(diào)試和跨域訪問等問題）漩符。

  • API解釋：

define(id?, dependencies?, factory);
id:第一個參數(shù)一喘，id，是個字符串嗜暴。它指的是定義中模塊的名字凸克，這個參數(shù)是可選的。如果提供了項目中不允許重名闷沥。
dependencies：第二個參數(shù)萎战，dependencies，是個定義中模塊所依賴模塊的數(shù)組舆逃。依賴模塊必須根據(jù)模塊的工廠方法優(yōu)先級執(zhí)行蚂维，并且執(zhí)行的結(jié)果應(yīng)該按照依賴數(shù)組中的位置順序以參數(shù)的形式傳入（定義中模塊的）工廠方法中。
factory：第三個參數(shù)路狮，factory虫啥，為模塊初始化要執(zhí)行的函數(shù)或?qū)ο蟆Ｈ绻麨楹瘮?shù)奄妨，它應(yīng)該只被執(zhí)行一次涂籽。如果是對象，此對象應(yīng)該為模塊的輸出值砸抛。

  • AMD例子（例如上面的futureRainfallWindow.js）

      define(['jquery'] , function ($) {
      return function () {};
  });

requireJS配置文件結(jié)構(gòu)

  • requireConfig.js
    require.config({
    paths: { //項目包資源集合
    "jQuery": "/jxfffcs/common/jquery-1.7.2.min"
    },
    shim: { //項目包資源的依賴集合
    "jQuery": {
    exports: '$'
    }
    }
    });

paths：
所引用的模塊名不在baseUrl中時使用paths评雌。paths使用相對路徑進(jìn)行資源的引用。
shim：
配置依賴直焙、導(dǎo)出景东、較老版本的自定義初始化版本（此方法不支持jquery），傳統(tǒng)的瀏覽器全局腳本不能使用define()來的定義依賴和為模塊設(shè)置一個值奔誓。

  • main_futureRainfallWindow.js
    //如果該業(yè)務(wù)的js文件(futureRainfallWindow.js)中有一個方法需要外部調(diào)用,這個時候就需要把這個類暴露出來,并且還要在futureRainfallWindow.js文件中導(dǎo)出該方法
    var _futureRainfallWindow;
    require(["/jxfffcs/common/requireConfig.js"], function() {
    //配置加載完畢耐薯，這樣調(diào)用可以根據(jù)依賴安全的調(diào)用require()中的業(yè)務(wù)js
    require(["/jxfffcs/forecast/realTimeForecast/js/futureRainfallWindow.js"], function(futureRainfallWindow) {
    _futureRainfallWindow = futureRainfallWindow;
    });
    });

根據(jù)api中的描述，如果你想在html中使用require()丝里，而且僅有一個main entry point曲初，那么在該頁面中調(diào)用require()最好使用內(nèi)嵌的require()來調(diào)用，如上面的代碼那樣杯聚。

  • futureRainfallWindow.html

最后在html頁面中加入
<script data-main="/jxfffcs/forecast/realTimeForecast/js/main_futureRainfallWindow.js" src="/jxfffcs/common/require.js"></script>

至此全部關(guān)于requireJS初探結(jié)束臼婆。

參考

http://requirejs.org
https://github.com/amdjs/amdjs-api/wiki/AMD

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市幌绍，隨后出現(xiàn)的幾起案子颁褂，更是在濱河造成了極大的恐慌故响，老刑警劉巖，帶你破解...
    沈念sama閱讀 223,002評論 6贊 519
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件颁独，死亡現(xiàn)場離奇詭異彩届，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)誓酒，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3贊 400
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門樟蠕，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人靠柑，你說我怎么就攤上這事寨辩。” “怎么了歼冰？”我有些...
    開封第一講書人閱讀 169,787評論 0贊 365
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵靡狞，是天一觀的道長。 經(jīng)常有香客問我隔嫡，道長甸怕，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 60,237評論 1贊 300
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任腮恩，我火速辦了婚禮蕾各，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘庆揪。我一直安慰自己，他們只是感情好妨托，可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布缸榛。 她就那樣靜靜地躺著，像睡著了一般兰伤。 火紅的嫁衣襯著肌膚如雪内颗。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 52,821評論 1贊 314
  • 城市分裂傳說
    那天敦腔，我揣著相機(jī)與錄音均澳，去河邊找鬼。 笑死符衔，一個胖子當(dāng)著我的面吹牛找前，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播判族，決...
    沈念sama閱讀 41,236評論 3贊 424
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼躺盛，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了形帮？” 一聲冷哼從身側(cè)響起槽惫，我...
    開封第一講書人閱讀 40,196評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤周叮，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后界斜，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體仿耽，經(jīng)...
    沈念sama閱讀 46,716評論 1贊 320
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評論 3贊 343
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年各薇，在試婚紗的時候發(fā)現(xiàn)自己被綠了项贺。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡得糜，死狀恐怖敬扛，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情朝抖，我是刑警寧澤啥箭，帶...
    沈念sama閱讀 36,583評論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站治宣，受9級特大地震影響急侥，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜侮邀，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評論 3贊 336
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一坏怪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧绊茧，春花似錦铝宵、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0贊 25
  • 一樁弒父案鹏秋，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至亡笑，卻和暖如春侣夷，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背仑乌。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工百拓， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人晰甚。 一個月前我還...
    沈念sama閱讀 49,378評論 3贊 379
  • 代替公主和親
    正文 我出身青樓衙传，卻偏偏與公主長得像，于是被迫代替她去往敵國和親厕九。 傳聞我的和親對象是個殘疾皇子粪牲，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評論 2贊 361

推薦閱讀更多精彩內(nèi)容

  • 前面一篇文章寫過一些模塊的原理和怎么實現(xiàn)模塊化，但是在具體的項目當(dāng)中怎么實現(xiàn)呢止剖。我們這里介紹下require的使用...
    avery1閱讀 740評論 0贊 0
  • 大家好，我是IT修真院鄭州分院第四期的學(xué)員王相博亭引，一枚正直純潔善良的WEB前端程序員绎速。 今天給大家分享一下，修真院...
    More_ce0d閱讀 302評論 0贊 0
  • 什么是模塊化開發(fā)焙蚓？ 前端開發(fā)中纹冤，起初只要在script標(biāo)簽中嵌入幾十上百行代碼就能實現(xiàn)一些基本的交互效果，后來js...
    半世韶華憶闌珊閱讀 657評論 0贊 0
  • 1. 為什么要使用模塊化购公？ 什么是模塊化：一個模塊就是實現(xiàn)特定功能的文件萌京，有了模塊，我們就可以更方便地使用別人的...
    饑人谷_楠柒閱讀 1,035評論 0贊 1
  • 中國人自古以來對房子的熱情都遠(yuǎn)超其他國度”茸“家”這個字求妹，房子里頭有豬，“嫁”也是女子要房子方能成婚佳窑。跟很多姑娘一樣...
    Elaina1110閱讀 198評論 0贊 0