多学习前端开发的小伙伴都会遇到这样的问题：在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个长度之内写完。