js引用 · wex5

WeX5界面模塊化的使用—JS引用 WeX5的JS是基于AMD規范，通過requirejs技術實現AMD規范。本文章主要介紹在WeX5中，如何引用JS，具體分為：如何引用符合AMD規范的JS？如何引用不符合AMD規范的JS？如何引用外部的JS？針對JS引用，平臺自帶了一個專門的演示案例importJs，目錄結構如下：引用JS 如何引用符合AMD規范的JS文件? 方式一：通過require(‘xx’)引用 AMD1.js是UI2下符合AMD規范的一個文件，代碼如下： AMD1.js文件內容： define(function(require){ return { fnOfAMD1: function(){ alert("hello AMD1"); } }; }); importJs.js中引用AMD1.js的代碼如下： define(function(require){ var $ = require("jquery"); var justep = require("$UI/system/lib/justep"); //加載UI2下, 符合AMD規范的文件 var amd1 = require("./AMD1"); ... )}; 說明：在importJs中，通過var amd1 = require(“./AMD1″)引用了當前目錄下的AMD1.js文件，之后，可以通過amd1調用AMD1.js文件返回的方法或變量，例如：amd1.fnOfAMD1() //調用AMD1.js定義的方法; 方式二：通過require([‘x1′, ‘x2′], function(p1, p2){})引用 AMD2.js是UI2下一個符合AMD規范的js文件，內容如下： define(function(require){ return { fnOfAMD2: function(){ alert("hello AMD2"); } }; }); importJs.js中引用AMD2.js的代碼如下： Model.prototype.importInnerBtnClick = function(event){ //加載UI2下, 符合AMD規范的文件 var path = "./AMD2"; require([path], function(m){ m.fnOfAMD2(); }); }; 說明：在importJS.js中，通過require([xxx], function(x){})方式，引用了AMD2.js文件，在回調函數中，參數m是AMD2.js文件返回的對象，在回調函數中，可以通過m調用AMD2.js中返回的對象上的方法和變量，例如：m.fnOfAMD2(); 如何引用不符合AMD規范的JS文件？對于不符合AMD規范的JS文件，引用方式與符合AMD規范的JS文件類似，唯一的區別是不符合模塊化的JS沒有返回值，具體引用方式如下：方式一：通過require(‘xx’)引用 noneAMD1.js是UI2下一個不符合AMD規范的JS文件，內容如下： function fnOfNoneAMD1(){ alert("hello noneAMD1"); } importJs.js中引用noneAMD1.js的代碼如下： define(function(require){ var $ = require("jquery"); var justep = require("$UI/system/lib/justep"); //加載UI2下, 符合AMD規范的文件 var amd1 = require("./AMD1"); //加載外網, 符合AMD規范的文件 var outterAMD1 = require("http://localhost:8080/x5/UI2/demo/misc/importJs/outterAMD1.js"); //加載UI2下, 不符合AMD規范的文件 require("./noneAMD1"); ... }); 說明：如上12行代碼所示，通過require(“./noneAMD1″)引用了不符合AMD規范的noneAMD1.js文件，在importJs.js的后續代碼中，可以直接訪問noneAMD1.js中定義的全局函數或變量，例如：fnOfNoneAMD1(); 方式二：通過require([‘x1′, ‘x2′], function(){})引用 noneAMD2.js是UI2下一個不符合AMD規范的JS文件，內容如下： function fnOfNoneAMD2(){ alert("hello noneAMD2"); } importJs.js中引用noneAMD2.js的代碼如下： Model.prototype.importInnerNoneAMDBtnClick = function(event){ //加載UI2下, 不符合AMD規范的文件 var path = "./noneAMD2"; require([path], function(){ fnOfNoneAMD2(); }); }; 說明：在require([xx], function(){})的回調函數中，可以直接使用被引用的noneAMD2.js中定義的全局函數和變量，例如：fnOfNoneAMD2(); 如何引用外部的JS文件？對于外部的JS文件，引用方式和UI2下的JS文件類似（無論是符合AMD規范還是不符合AMD規范），唯一的區別是給定的JS文件路徑必須是”http://”開頭的絕對路徑，且必須是完整的路徑（如果有擴展名，必須帶擴展名，如”.js”）。例如： define(function(require){ ... //加載外網, 符合AMD規范的文件 var outterAMD1 = require("http://wex5.com/cn/wp-content/uploads/2015/04/outterAMD1.js"); ... //加載外網, 不符合AMD規范的文件 require("http://wex5.com/cn/wp-content/uploads/2015/04/outterNoneAMD1.js"); ... Model.prototype.importOutterBtnClick = function(event){ //加載外網, 符合AMD規范的文件 var path = "http://wex5.com/cn/wp-content/uploads/2015/04/outterAMD2.js"; require([path], function(m){ m.fnOfOutterAMD2(); }) }; ... Model.prototype.importOutterNoneAMDBtnClick = function(event){ //加載外網, 不符合AMD規范的文件 var path = "http://wex5.com/cn/wp-content/uploads/2015/04/outterNoneAMD2.js"; require([path], function(){ fnOfOutterNoneAMD2(); }) }; ... }); 總結在WeX5中，引用JS（無論是符合AMD規范，還是不符合AMD規范）主要有兩種方式：require(‘path’)和require([xx, xx], function(p1,p2){})，這兩種方式對比如下：引用JS方式被引用JS的加載順序限制 require(‘xx’) 預先加載被引用的JS，再加載當前JS; require參數必須是字符串常量； require([xx, xx],function(p1,p2){}) 先加載當前JS，執行到require語句時，才加載被引用的JS； require參數支持變量或表達式；對于這兩種require方式，path必須符合以下規則：如果引用UI2下的文件，支持兩種路徑：以”./”或”../”開頭的相對路徑（相對于當前js所在的文件）；以”$UI/”開頭的路徑（$UI表示UI2）；路徑不需要帶文件擴展名”.js”；如果引用外部文件，路徑必須是以”http://”開頭的完整路徑（如果有擴展名”.js”，必須帶上擴展名）； WeX5是單頁模式，通過require引用的JS文件，每個不同的JS文件只加載一次，如果使用不符合AMD規范的JS文件，需要注意全局JS變量只有一份（多個頁共享相同的全局變量）。注意事項通過require加載js文件時，如果被加載的js文件中有document.write時，會報錯，例如，執行以下代碼時： require(["http://api.map.baidu.com/api?type=quick&ak=您的密鑰&v=1.4"]，function(){}); 會出現以下錯誤： Failed to execute ‘write’ on ‘Document': xxx It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. 原因是”http://api.map.baidu.com/api?type=quick&ak=您的密鑰&v=1.4″返回的代碼類似： (function(){ window.BMap_loadScriptTime = (new Date).getTime(); document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?type=quick&file=api&ak=您的密鑰&t=20140109092002">'); document.write('</script><script type="text/javascript" src="http://api.map.baidu.com/getscript?type=quick&file=feature&ak=您的密鑰&t=20140109092002"></script>'); })(); 解決方法可參考異步加載百度地圖，例如： Model.prototype.baiduBtnClick = function(event){ if (!window._baiduInitialize){ window._baiduInitialize = function(){ var mp = new BMap.Map("map"); mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); }; require(["http://api.map.baidu.com/api?v=1.4&ak=您的密鑰&callback=_baiduInitialize"], function(){}); } }; #### 案例資源下載：[importJs案例](http://wex5.com/cn/wp-content/uploads/2015/04/importJs.rar) 運行方式：將下載后的文件解壓后，將UI2下的內容復制到WeX5的UI2目錄；啟動WeX5服務；在瀏覽器中輸入http://localhost:8080/x5/UI2/demo/misc/importJs/importJs.w即可。