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ū)ο蟆H绻麨楹瘮?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
  • 文/蒼蘭香墨 我猛地睜開眼躺盛,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了形帮?” 一聲冷哼從身側(cè)響起槽惫,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤周叮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后界斜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體仿耽,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨(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
  • 正文 年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