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