?前端開發(fā)一些常用技巧 ? ? ? ? ? ? ? 模塊化結(jié)構(gòu) ? ? ? &&&&& ? ? 命名空間處理 奇技淫巧！！！！！！2016-09-29 ? ?17:16:39

?

?

#####背景：

　　

前端開發(fā)過程中，創(chuàng)建js對象非常容易，但是要把代碼變得更容易維護，那么就需要一些方法來實現(xiàn)約束和規(guī)范。

使用命名空間可以減少全局變量的使用，同時避免命名沖突和額外前綴，在命名空間下定義屬性方法，更加面向?qū)ο笥心居?#xff01;！

?

?

## 實踐如圖：

?

####Debugger調(diào)試【結(jié)合debugger來解釋 這個namespace方法的實現(xiàn)】?

Step1 ?: ? 當(dāng)執(zhí)行完第一個紫色框的時候 ?我控制臺輸出myApp ,如圖：

　　

　　

?

這就相當(dāng)于在 ?全局定義了myApp 的子屬性?

?

Step2 ?: ?當(dāng)執(zhí)行完第二個紫色框的時候 ? 我控制臺輸出myApp , 如圖：

　　

執(zhí)行完第二部分代碼的時候 ?就相當(dāng)于 ?給myApp對象子屬性添加 ?子方法 ；----》 這樣就簡單了實現(xiàn)了 我需要的效果。。。。。

?

?

?

?

####代碼

?

var myApp =myApp||{};myApp.namespace = function(ns_string){debugger;var parts =ns_string.split('.'), //[myApp,module1,module2,module3]parent =myApp;if(parts[0]==="myApp"){parts =parts.slice(1); //[module1,module2,module3] }for (var i = 0; i < parts.length; i++) {if(typeof parent[parts[i]]==="undefined"){parent[parts[i]] = {};}parent =parent[parts[i]];console.log(parent);}return parent;}debugger;myApp.namespace("myApp.module1.module2.module3");myApp.module1.del = function(x,y){return x-y;}myApp.module1.module2.add =function(x,y){return x+y;}myApp.module1.module2.module3.add1= function(x,y){return x+y;}var val1 = myApp.module1.del(4,2);var val2 = myApp.module1.module2.add(1,2);var val3 = myApp.module1.module2.module3.add1(22,33);console.log(val1);console.log(val2);console.log(val3);

?

轉(zhuǎn)載于:https://www.cnblogs.com/xianfei689/p/5920695.html

總結(jié)

以上是生活随笔為你收集整理的JS~~~ 前端开发一些常用技巧 模块化结构 命名空间处理 奇技淫巧！！！！！！...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。