多學習前端開發的小伙伴都會遇到這樣的問題：在JavaScript中全局變量經常會引起命名沖突，甚至有時侯重寫變量不是按照想像中的順序來。避免全局變量名沖突的最好辦法還是創建命名空間，接下來千鋒廣州Web培訓老師就給大家分享在JavaScript中創建命名空間的幾種常用方法。

JavaScript的執行環境由各種各樣的全局變量構成，這些全局變量先于函數執行環境而創建、這些全局變量都掛載于“全局對象”下。當名稱有沖突時就會產生一些不可控的問題，比如命名沖突、代碼的脆弱性、難以測試等。

?在編程開發中合理的使用命名空間可以避免相同的變量或對象名稱產生的沖突，而且命名空間也有助于組織代碼有更強的可維護性和可讀性。JavaScript中雖然沒有提供原生的命名空間支持，但我們可以使用其他的方法（對象和閉包）實現類似的效果。

1、單一全局變量

JavaScript中一個流行的命名空間模式是選擇一個全局變量作為主要的引用對象，因為每個可能的全局變量都成為唯一全局變量的屬性，也就不用再創建多個全局變量，也就避免了和其他聲明的沖突。不過單一全局變量模式已經在不少的JavaScript類庫中使用，如：YUI定義了唯一的YUI全局對象，jQuery定義了$和jQuery，$由其他類庫使用時使用jQuery等。示例如下：

var myApplication = (function() {

function() {

// ***

},

return {

// **

}

})();

2、命名空間前綴

命名空間前綴模式其思路非常清晰，就是選擇一個獨特的命名空間，然后在其后面聲明聲明變量、方法和對象。示例如下：

var = myApplication_propertyA = {};

var = myApplication_propertyA = {};

function myApplication_myMethod() {

// ***

}

從某種程度上來說，它確實減少了命名沖突的發生概率，但其并沒有減少全局變量的數目，在使用這種模式時一定要特別注意。

3、對象字面量表示法

對象字面量模式可以認為是包含一組鍵值對的對象，每一對鍵和值由冒號分隔，鍵也可以是代碼新的命名空間。示例如下：

var myApplication = {

// 可以很容易的為對象字面量定義功能

getInfo:function() {

// ***

},

// 可以進一步支撐對象命名空間

models:{},

views:{

pages:{}

},

collections:{}

};

對象字面量為我們提供了優雅的鍵/值語法，我們可以非常便捷的組織代碼封裝不同的邏輯或功能，而且可讀性、可維護性、可擴展性極強。

4、嵌套命名空間

嵌套命名空間模式可以說是對象字面量模式的升級版、它也是一種有效的避免沖突模式、因為即使一個命名空間存在、它也不太可能擁有同樣的嵌套子對象、示例如下：

var myApplication = myApplication || {};

// 定義嵌套子對象

myApplication.routers = myApplication.routers || {};

myApplication.routers.test = myApplication.routers.test || {};

當然、我們也可以選擇聲明新的嵌套命名空間或屬性作為索引屬性、如：

myApplication[′routers′] = myApplication[′routers′] || {};

使用嵌套命名空間模式可以使代碼易讀且有組織性，而且相對安全、不易產生沖突，其弱點是如果我們的命名空間嵌套過多會增加瀏覽器的查詢工作量。

5、立即調用的函數表達式

立即調用函數（IIFE）實際上就是匿名函數，被定義后立即被調用。IIFE是用于封裝應用程序邏輯的常用方法，以保護它免受全局名稱空間的影響。示例如下：

// 命名空間和undefined作為參數傳遞，確保：

// 1.命名空間可以在局部修改，不重寫函數外部上下文

// 2.undefined 的參數值是確保undefined，避免ES5規范里定義的undefined

(function (namespace, undefined) {

// 私有屬性

var foo = "foo";

bar = "bar";

// 公有方法和屬性

namespace.foobar = "foobar";

namespace.sayHello = function () {

say("Hello World!");

};

// 私有方法

function say(str) {

console.log("You said:" str);

};

})(window.namespace = window.namespace || {});

可擴展性是任何可伸縮命名空間模式的關鍵，使用IIFE可以輕松實現這一目的，我們可以再次使用IIFE給命名空間添加更多的功能。

6、命名空間注入

命名空間注入是IIFE的另一個變體，從函數包裝器內部為一個特定的命名空間“注入”方法和屬性，使用this作為命名空間代理，這種模式的優點是可以將功能行為應用到多個對象或命名空間。示例如下：

var myApplication = myApplication || {};

myApplication.utils = {};

(function () {

var value = 5;

this.getValue = function () {

return value;

}

// 定義新的子命名空間

this.tools = {};

}).apply(myApplication.utils);

(function () {

this.diagnose = function () {

return "diagnose";

}

}).apply(myApplication.utils.tools);

// 同樣的方式在普通的IIFE上擴展功能，僅僅將上下文作為參數傳遞并修改，而不是僅僅使用this，如果你經常被全局變量沖突困擾，一定要牢記JavaScript命名空間知識點。

擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

關于CSS命名，有人私問過我，說有時候會出現命名很糾結的情況，class命名感覺就非常亂，有時自己都看不下去了，分不清楚了。

其實寫出一套優雅的CSS代碼也是一個合格的前端開發人員基本的且重要素質。今天，我就來談談我平時是怎么命名CSS的。希望對大家有借鑒作用。

從四個方面，來總結一下：

一、分類處理樣式

心中一定要將CSS進行一個分類，不管是小項目還是大項目都希望這樣處理。

1、布局（grid）: 我們將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等。常用！

2、模塊（module）：即語義化的可以重復使用的較大的整體。如導航、登陸、注冊、列表、評論、搜索等。常用！

3、元件（unit）：通常是一個不可再分的較為小巧的個體，被重復用于各種模塊中，比如按鈕、輸入框、loading、圖表等。常用！

4、功能（function）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動。不常用，不可濫用！

5、皮膚（skin）：對于換膚型網站需要使用，將皮膚型的樣式抽離出來，非換膚型網站不可濫用，不常用。

二、遵循一套命名規則

使用類選擇器，放棄ID選擇器。因為ID在一個頁面中的唯一性導致了如果以ID為選擇器來寫css，就無法重用，而class而優勢在于復用性，而且私有度也并不高。因此，我一般情況下會選擇在HTML中的ID用于JavaScript，但是在CSS里只用class，一個ID也不用。這樣做實際上也是將表現和行為分開，而不是混在一起。

class命名：使用單個字母（分類首字母）+"-"為前綴。

比如：對于header部分，我們可以這樣寫：

注意1：在css中，樣式的選擇器總是要以上面的 .g- .m- .u- .f- .s-這五類開頭，然后再里面使用后代選擇器。

注意2：這并不是說所有的className都需要加這些前綴，對于一些不屬于這幾種的元素，我們完全可以不加前綴，作為后代選擇器使用。

那么如何使用后代選擇器呢？注意三點

1、我們約定不以單個字母+“-”為前綴且長度大于等于2的類選擇器為后代選擇器。

如：.g-date .u-right_arrow{ float: right;} 這個就是不合適的，我們直接寫成 .u-right_arrow{ float: right;}即可。

2、一個語義化的標簽也可以是后代選擇器。

比如.m-list li{}，而不是用.m-list div{}。

3、盡量簡約而不失語義

如.m-abc這種完全沒有語義，不知道要表達什么，對于相同語義的不同命名，我們可以直接加數字或字母區分即可（如.m-list1、.m-list2,都是列表模塊，都通加數字即表示不同的列表模塊）。

三、注意一些代碼格式

1、選擇器、屬性和值都用小寫

這一點非常關鍵：根據xhtml規范，所有的標簽屬性和值都要使用小寫形式，而我們知道xhtml更為標準，所以最好遵循之，這樣，選擇器必須小寫就是十分必要的了。既然這樣我們就不能使用駝峰式寫法來寫類名了，如class="u-leftArrow"實際上就是不規范的了，最好寫成class="u-left_arrow"，也可以表達相同的意思。

2、省略值為0的單位

這樣可以節省不必要的字節同時也為了方便閱讀，我們將0px、0em、0%等都縮寫為0。如下所示：

3、使用16進制表示顏色值，其中的字母使用大寫形式，并盡量縮寫

除非在你需要透明度而使用rgba，否則都是用#FFFFFF這樣的寫法，并盡量縮寫，如#FFF。使用大寫形式，是因為這樣更加具有易讀性，且有利于壓縮，而縮寫為了減少不必要的字節。

4、關于屬性的書寫順序

這一點可能也是大家比較糾結的一個問題，大部分起初階段也是亂寫，甚至根本沒注意這個問題。

根據屬性的重要性順序來書寫。即先書寫定位布局類屬性，在書寫盒模型等自身屬性，最后書寫文本類及修飾類屬性。

另外，如果屬性間存在關聯性，則不要隔開來寫。如下代碼所示：

其中的height和line-height具有關聯性，盡量不要分開寫。

5、私有在前，標準在后

先寫帶有瀏覽器私有標志的屬性，后寫W3C標準的屬性。因為私有的屬性，說明瀏覽器自身還沒有規范化，標準屬性是用不了的。若某一天該瀏覽器的屬性規范化了，那么說明標準屬性可以使用了，而如果我們先寫W3C標準屬性，最后寫私有屬性，就有可能導致私有屬性覆蓋標準屬性。因此私有在前，標準在后的寫法是考慮到了以后可能會出現的問題。

其它一些減小CSS文件大小，可以縮寫的盡量采用縮寫形式等大家注意一下就行了。下面將一些常用的類選擇器命名列一下。供大家參考。

四、通常的類選擇器如何命名

前面我說過，命名className時，應當以其作用、功能來命名。要有語義化，下面從五個分類出發，列一些通常命名的名字。供參考

1、對于布局，即用.g-作為前綴，通常有以下推薦的寫法。

頭部： header或head

主體： body

尾部：footer或foot

主欄： main

側欄：side

盒容器： wrap或box

主欄子容器：mainc

側欄子容器：sidec

2、對于模塊，即.m-作為前綴。元件，.u-作為前綴，通常有下面推薦的寫法。

導航： nav

子導航：subnav

菜單：menu

選項卡：tab

標題區：head或title

內容區：body或content

列表：list

表格：table

表單：form

排行：top

熱點：hot

登錄：login

標志：logo

廣告：adervertise

搜索：search

幻燈：slide

幫助：help

新聞：news

下載：download

注冊：register或regist

投票：vote

版權:copyright

結果：result

按鈕：button

輸入：input

3、對于功能，即以.f-為前綴，通常推薦如下：

清除浮動：clearboth

向左浮動：floatleft

向右浮動: floatright

溢出隱藏：overflowhidden 　

4、對于顏色，即以.s-為前綴，通常推薦如下：

字體顏色：fontcolor

背景：background

背景顏色：backgroundcolor

背景圖片：backgroundimage

背景定位：backgroundposition

邊框顏色：bordercolor

5、對于狀態，即以.z-為前綴，通常推薦如下：

選中:selected

當前：current

顯示：show

隱藏：hide

打開：open

關閉:close

出錯：error

不可用:disabled

最后總結一下：

說一下CSS選擇器使用的注意事項：

1、.m-xxx div{}這種無主義不可取，且會造成大面積污染。

2、.g-zzz .m-xxx{}不可取，類別的選擇器的后代選擇中不應當包括類別選擇器。

3、不要將選擇器定的過于冗長，因為選擇器的結構越復雜，瀏覽器的消耗就越大，一般建議在3個長度之內寫完。