requireJS 探索(一)

什么是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

推荐阅读更多精彩内容

  • 前面一篇文章写过一些模块的原理和怎么实现模块化,但是在具体的项目当中怎么实现呢。我们这里介绍下require的使用...
    avery1阅读 399评论 0 0
  • 大家好,我是IT修真院郑州分院第四期的学员王相博,一枚正直纯洁善良的WEB前端程序员。 今天给大家分享一下,修真院...
    More_ce0d阅读 75评论 0 0
  • 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js...
    半世韶华忆阑珊阅读 401评论 0 0
  • 1. 为什么要使用模块化? 什么是模块化:一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的...
    饥人谷_楠柒阅读 663评论 0 1
  • 物以类聚,人以群分。一个群体内,需要语言的交流,交流多了,语言的功能就侧重社交,自然也会产生流言八卦。 就如同一个...
    INKMAX阅读 435评论 0 0