优雅的Javascript
优雅的Javascript
在我们这个行业里，从来不缺少天才。
在Javascript大行其道的年代，富互联网应用，用户体验炙手可热。目前流传于世的Javascript框架层出不穷，我们如何站在巨人的肩膀上做一些事情呢？这一直是我思考的一件事。
每一个前端攻城师都希望他所写的东西被更多人使用，这里有一种莫名的成就感，如何写出让众人追捧的Javascript代码成为争结。我姑且叫它“优雅的Javascript”，本文就如何写出优雅的javascript做出总结，抛砖引玉，也许会迸发出更敏锐的思考。
如何写出“优雅的Javascript”，Frist——命名规范！
所谓无规矩不成方圆，在我们写后台代码的时候可能形成了很不错的命名习惯，这些好的东西我们不应该抛弃，因为他们同样会使你的前端代码变的优雅无比！
我们来看下面一组代码实例：
//公开类
var ClassName = function () { //类名首字母大写
var _strName = "私有变量"; //私有变量前加下划线，小写字母开头
this.strName = "公开属性"; //公开属性小写字母开头，不加下划线
this._strName = "私有属性";
var _objdefault = { //私有变量集合
_name: "私有变量",
age: 1
}
this.objDefault = { //公开对象集合
name: "公开属性",
age: 2
}
this._objDefault = { //私有对象集合
_name: "私有属性",
age: 3
}
var _funMethod = function () { //私有方法前加_fun
alert("私有方法");
}
this.funMehtod = function () { //公开方法前加fun
alert("共有方法");
}
}
//静态公开类
var StaticClass = {
name: "公开属性",
_name:"私有属性",
_funMethod: function () { alert("私有方法"); },
funMethod: function () { alert("公开方法"); },
}
相信聪明的你已经看懂了，用3句话总结一下：
- 类名大写开头，其它（方法、属性、变量）小写开头，函数前面加fun；
- 私有的前面加 “_”,（下划线）,
- 公开的前面不加“_” （下划线）
上面的规范只是为了规范化的命名，我们要与C#、Java等后端代码的公开私有相区分。
Second——规范化注释！
我们来看如下代码块级注释
/*
*
* Better UI 1.0
* For Shot BUI
* Copyright (c) 2012-2013 (http://www.appwy.com/blog.html)
* @description 一个优秀的常用UI函数库。
* @download http://www.appwy.com/download/BUI_1.0_beta.js
* @author ***
* Depends: jquery 1.4+
*
*/
这是应该在每一个js包文件头部出现的内容，他包括了js包的名称，版权，描述，下载地址、作者，要依赖的类库是Jquery 1.4以上的版本，当然你还可以在这里加入你想要注释给开发者的信息，这就如同书的封面，没有封面的书看上去是多么的简陋啊。
下面我以一个简单的例子来阐述一下内部注释的优雅性：
$(function () {
$.extend({
/**
* @description jquery扩充 判断浏览器属性
* @author ***
*
* @example
alert($.browserName());
if ($.IE6){
}
*/
browserName: function () {//返回浏览器名称
return navigator.appName;
},
cookie: navigator.cookieEnabled, //是否可用cookie
ie: $.browser.msie != undefined,//是否是IE
ie6: $.browser.msie != undefined && $.browser.version == 6, //是否是IE6
safari: $.browser.safari != undefined, //是否是苹果
mozilla: $.browser.mozilla != undefined, //是否是火狐
opera: $.browser.opera != undefined, //是否是Opera
webkit: $.browser.webkit != undefined ,//是否是谷歌
/**
* @description 动态脚本注入。
* @author ***
* @param {String|url} 脚本路径。
* @param {Function|callback} 回调函数。
*/
loadScript: function(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
}
else {//其他浏览器
script.onload = callback; //function() {
//callback();
//};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
});
});
我想当其它人看到这些代码注释的时候一定会心存感激的。
最后，我希望更多人去关注前端问题，关注这个领域。我们的文化需要传承，我们的书写需要优雅，请让你的代码跳舞吧！
--北北
欢迎发邮件与我交流
Email :babyisun@qq.com
欢迎关注我的闲谈微博：http://t.qq.com/igeyan 和微群http://qun.t.qq.com/20054302
欢迎加入程序员故事QQ群：177215039
