為了規范在項目中使用的javascript代碼,我們使用了requirejs框架。
初始階段,我們在按鈕的點擊事件中調用創建的模塊,代碼如下:
function button_click() {_this = this;var args = _this["Command_Params"] || (_this.config || {})["Command_Params"];var cmd = _this["Command"];if (cmd) {cmd.onclick?cmd.onclick(args):"";} else {var url = _this["Command_Url"] || (_this.config || {})["Command_Url"];if (!url) return;require([url], function(Class) {var cmd = new Class(_this, args);cmd.onclick(args);_this["Command"] = _this["Command_Singled"] || (_this.config || {})["Command_Singled"] == false ? null : cmd;});} }
在這里我們在按鈕的屬性中添加了Command_Url來標識模塊地址,監聽了按鈕的點擊事件,在點擊的時候引用按鈕中配置的模塊并執行onclick方法。不得不說這是一種很簡便的使用模塊的方式,但是不是嚴格的AMD模式。
后來在使用的過程中突然想在頁面初始化的時候引用一個模塊,直接使用require方法就出現了問題:
require(["./plug-in/jtgcmobile/dd/user.js"],function(Class){var user =new Class();user.showSomeThing();user.login();})
require.js:166 Uncaught Error: Mismatched anonymous define() module: function (){return o}
糾結了好長時間,發現這個方法在控制臺可以直接運行,排除模塊定義錯誤、加載代碼錯誤。那就剩下一個問題,requirejs的加載模式問題導致在頁面加載的過程中無法執行require方法。
又去看了一下官方的文檔,文檔上雖然沒有明說不可以這樣使用,但是提供了一個方法在頁面初始化的時候加載模塊。代碼如下:
<script data-main="scripts/main" src="scripts/require.js"></script>
也就是說在加載requirejs的時候就要指定初始加載模塊。
按照這種方式加載后一切正常了。
所以 ?data-main 屬性還是比較重要的。
?