# SMD同步模塊 > 今天小感冒就不寫那么多了，就先貼代碼 > * 模塊文件 ~~~ // 同步加載模塊學習 // 定義模塊管理單體對象 var F = F || {} F.define = function (str, fn) { /** * @param parts 路徑解析 * @param old 祖先 * @param parent 父 * @param this 當前 * @param i 模塊層級 * @param len 模塊層級長度 * @type {string[]} */ var parts = str.split('.'), old = parent = this, i = len = 0; if(parts[0] === "F") { parts = parts.slice(1) } if(parts[0] === 'define' || parts[0] === "module") { return; } // 遍歷路由模塊并定義每層模塊 for (len = parts.length; i<len; i++) { // 如果父模塊中不存在當前模塊 if(typeof parent[parts[i]] === 'undefined') { // 聲明當前模塊 在這里parent 依舊等于old,this parent[parts[i]] = {} } // 緩存下一層級的祖父模塊 old = parent // 緩存下一層級父模塊 parent 等于 str里定義的模塊 parent = parent[parts[i]] } // 如果給定模塊方法則定義該模塊方法 if (fn) { // 此時i等于parts.length,故減一 old[parts[--i]] = fn () } old['test'] = 'kingEND' console.log("old=", old[parts[i]]) console.log("this=", this) console.log("parent=", parent) console.log("parts=", parts) // 返回模塊管理器單體對象 return this } F.module = function () { var args = [].slice.call(arguments), // 獲取回調執行函數 fn = args.pop(), parts = args[0] && args[0] instanceof Array ? args[0] : args, // 依賴模塊列表 回調函數參數 modules = [], // 模塊路由 modIDs = "", // 依賴模塊索引 i = 0, // 依賴模塊的長度 ilen = parts.length, // 父模塊，模塊路由層級索引，模塊路由層級長度 parent,j,jlen; while (i < ilen) { // 如果是模塊路由 if (typeof parts[i] === 'string') { // 設置當前模塊父對象 parent = this // 解析模塊路由，并屏蔽掉模塊父對象 modIDs = parts[i].replace(/^F\./,'').split('.') console.log('modIDs=', modIDs) // 遍歷模塊路由層級 for (j = 0 ,jlen = modIDs.length; j< jlen; j++) { // 重置父模塊 parent = parent[modIDs[j]] || false } console.log(parent) // 將模塊添加到依賴模塊列表中 modules.push(parent) //如果模塊是對象 } else { modules.push(parts[i]) } // 取下一個模塊 i++ } fn.apply(null, modules) } ~~~ * 測試文件 ~~~ F.define('string', function () { return { trim: function (str) { return str.replace(/^\s+|\s+$/g) } } }) var result = F.string.trim("測試用例") console.log("result=", result) F.define('dom', function () { var $ = function (id) { $.dom = document.getElementById(id) return $ } $.html = function(html) { if (html) { this.dom.innerHTML = html return this } else { console.log("$=", this.dom.innerHTML) return this.dom.innerHTML } } return $ }) F.dom('test').html() F.define('dom.addclass.removeclass') F.dom.addclass = function (type, fn) { return function (className) { if(!~this.dom.className.indexOf(className)) { this.dom.className += '' + className } console.log(this.dom.className.indexOf(className)) } }(); F.dom.removeclass = function () { return function (className) { if(!~this.dom.className.indexOf(className)) { console.log("removeclass") } } } F.module(['dom', document, F], function (dom, doc) { dom('test').html('new add!') doc.body.style.background = "blue" }) ~~~ ### 總結 * 先說定義模塊