优雅的Javascript

来源:岁月联盟 编辑:exp 时间:2012-02-27

在我们这个行业里,从来不缺少天才。
在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句话总结一下:
1. 类名大写开头,其它(方法、属性、变量)小写开头,函数前面加fun;
2. 私有的前面加 “_”,(下划线),
3. 公开的前面不加“_” (下划线)
上面的规范只是为了规范化的命名,我们要与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);
    }
 
    });
});
我想当其它人看打这些代码注释的时候一定会心存感激的。
最后,我希望更多人去关注前端问题,关注这个领域。我们的文化需要传承,我们的书写需要优雅,请让你的代码跳舞吧!

 

摘自 北北