requireJS 探索（一）

作者: 阿波罗程序猿 | 来源:发表于2016-08-26 00:23 被阅读325次

什么是requireJS？

requireJS
requireJS是JavaScript和模块的加载器，它适合在浏览器中使用，也可以在其他JavaScript环境中使用，比如Rhino and Node。requireJS使用像组件式的模块加载器，将改善你代码的相应速度和质量。

requireJS发挥的作用

简单总结起来就2点

改善了用户体验，它使js文件异步加载，从而避免网页，因为加载js时失去响应，一直卡在那。
使在项目中的js文件以模块化的形式存在，在业务之间调用时（管理业务之间的模块），如果有好的设计可以起到很好的解耦合和复用的作用。便于代码的维护和编写，结构清晰。

为什么使用requireJS

从前我们的代码是这样的
首先加载全部的js文件，加载js文件时浏览器会对html页面停止渲染，加载的js文件越多，网页卡的时间越久，影响用户体验。还有有的时候各个网页中js文件是相互依赖的比如如下代码必须先加载jquery.js才能加载后面的js不然会报错，而且每个页面都要这么写很麻烦。而且js也是写在html页面里，有洁癖的人很是不愿意看下去把这样2种风格的代码糅杂在一起。而且js与js之间依赖越大代码越不好编写与维护。对以后的重构之路简直就是自掘坟墓。所以我们要使用requireJS帮助我们管理js包依赖，帮助我们解耦合，帮助我们重构业务方法，帮助我们改善用户体验。

<!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("发布时间：" + 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
获取后把它加入到项目结构中。我们是这里是加在了WebRoot/common/require.js中。
2.建立项目中包的依赖文件requireConfig.js
我们这里把它与require.js放在同一个目录中。文件具体内容如下。保持依赖结构完整我贴出了全部的文件，文件如下：
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'
          },
          //暂时补充
          "gettheme303": {
              deps: ['jqxcore303'],
              exports: 'gettheme303'
          },
          "jqxgridPager303": {
              deps: ['jqxcore303','jqxgrid303'],
              exports: 'jqxgridPager303'
          },
          "jqueryJstree":{
              deps: ['jQuery'],
              exports: 'jqueryJstree'
          }
      }
  });
```
3.创建main_.js文件（main_futureRainfallWindow.js）
创建该文件前，最好在html页面所在的文件夹中创建js文件夹（或者某某随意），然后把main_.js文件创建在js文件夹中。具体代码如下：
//如果该业务的js文件(futureRainfallWindow.js)中有一个方法需要外部调用,这个时候就需要把这个类暴露出来,并且还要在futureRainfallWindow.js文件中导出该方法
var _futureRainfallWindow; //暴露的对象
require(["/jxfffcs/common/requireConfig.js"], function() {
require(["/jxfffcs/forecast/realTimeForecast/js/futureRainfallWindow.js"], function(futureRainfallWindow) {
_futureRainfallWindow = futureRainfallWindow;
});
});
4.创建业务js文件（futureRainfallWindow.js）
把它与main_*.js放在同一个文件夹下。如果改业务有需要公用的方法需要导出。具体代码如下：
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("发布时间：" + 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
      }

      //导出的方法
      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规范

requireJS是参照AMD规范编写的。那么什么是AMD规范？AMD（ Asynchronous Module Definition ）规范又称“异步模块定义规范”AMD制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）。

API解释：

define(id?, dependencies?, factory);
id:第一个参数，id，是个字符串。它指的是定义中模块的名字，这个参数是可选的。如果提供了项目中不允许重名。
dependencies：第二个参数，dependencies，是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行，并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。
factory：第三个参数，factory，为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

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

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

requireJS配置文件结构

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

paths：
所引用的模块名不在baseUrl中时使用paths。paths使用相对路径进行资源的引用。
shim：
配置依赖、导出、较老版本的自定义初始化版本（此方法不支持jquery），传统的浏览器全局脚本不能使用define()来的定义依赖和为模块设置一个值。

main_futureRainfallWindow.js
//如果该业务的js文件(futureRainfallWindow.js)中有一个方法需要外部调用,这个时候就需要把这个类暴露出来,并且还要在futureRainfallWindow.js文件中导出该方法
var _futureRainfallWindow;
require(["/jxfffcs/common/requireConfig.js"], function() {
//配置加载完毕，这样调用可以根据依赖安全的调用require()中的业务js
require(["/jxfffcs/forecast/realTimeForecast/js/futureRainfallWindow.js"], function(futureRainfallWindow) {
_futureRainfallWindow = futureRainfallWindow;
});
});

根据api中的描述，如果你想在html中使用require()，而且仅有一个main entry point，那么在该页面中调用require()最好使用内嵌的require()来调用，如上面的代码那样。

futureRainfallWindow.html

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

至此全部关于requireJS初探结束。

参考

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

requireJS 探索（一）

什么是requireJS？

requireJS发挥的作用

为什么使用requireJS

如何使用requireJS

什么是AMD规范

requireJS配置文件结构

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读