javascript编程规范

持续完善中…

jQuery不管从那方面来说都是是最接近原生javascript的.

不以规矩,不能成方圆.为避免填坑,在开始之前定义一系列编程规范,严格按规范编程.javascript基础知识请自行学习.

1.变量作用域

由于javascript对变量作用域不敏感,例如:

var a="a";
function test(){
    var b="b";
    (function(){
      var c="c";
      alert(a + b + c);
    })();
};
test();

变量a,b可以在函数test中的匿名函数中使用,这没有任何问题.但是当功能多了以后,使用这种方法比较容易出一些莫名其妙的问题,因此为提高软件质量,避免无谓的错误,编程时严格限制变量作用域在本函数内,函数通过传参的方式传入外部变量.上例修正为:

function test(a){
    (function(a,b){
      var c="c";
      alert(a + b + c);
    })(a,"b");
};
test("a");

严格控制变量作用域,避免无谓的错误

2.采用javascript严格模式

在对象或函数结束大括号后加上英文;号,表示结束.当使用min压缩javascript时,如不加;号会导致无法使用.

2.1 对象

必须使用严格模式,并采用以下模板编程.

Jquery包装的html dom对象,变量名以$开头,如内部使用在构造方法中创建,如外部传入直接斌值

同时因为需要控制变量作用域,参数较多时传递参数比较麻烦,因此对象内部定义名称为self的属性,类型为json,所有对象需要的属性都放到self中.

function Object(name,select_handler){
  "use strict";
  /***************************************************************************
  * 对象的属性
  **************************************************************************/
  this.self = {
    name :name,   //外部传入对象的参数直接保存  
    other: null, //在内部生成的参数在构造方法中生成    
    select_handler:select_handler, //传入必须的事件
    done_handler:null//非必须的事件,使用connect设置
  };

  /***************************************************************************
  * 对外提供的方法public
  **************************************************************************/
  this.toString=function(){
    return "This is " + this.self.name;
  };

  this.getOther=function(){
    return this.self.other;
  };


  this.cnnectDone=function(done_handler){
    this.self.done_handler = done_handler;
  };

  /***************************************************************************
  * 内部使用的方法private
  **************************************************************************/  
  function other(self,param1){
    //触发非必须的事件done_handler
    if( null == self.done_handler || undefined === self.done_handler )
      self.done_handler.call(self,"参数1","参数..."); //done_handler的第一个参数为对象Object
  };
  /***************************************************************************
  * 构造方法
  **************************************************************************/  
  (function(self){
    self.other = 3.1415926;
    if( null == self.select_handler || undefined === self.select_handler )
      self.select_handler.call(this,"参数1","参数..."); //select_handler的第一个参数为对象Object
  })(this.self);
};
var obj = new Object("javascript",function(obj,param1,param2){
});
//alert( obj.self.name ); 可以这样使用,但是不建议,通过方法获取
alert(obj.toString());
alert(obj.getOther());

2.2 方法

普通方法不必使用严格模式,但是要注意结束时加;号,并严格按第1条中的规定实施.

function test(a){
    alter("test");
};

3.标准模板

/**
 * javascript面向对象标准模板
 * @param wind windows对象,注意此wind可能来自iframe.
 * self绑定到标准window.document
 * "86A97755-304A-4F21-910A-4AB916971B07"绑定self时的唯一编号,每个类都不同注意修改
 */
function template(wind) {
    "use strict";    
    this.self = {
        me: this,     //代表自己
        wind: wind,   //template类工作windows
        doc: wind.document ? wind.document : wind.ownerDocument,//template类工作window.document
        $div:null,//在构造方法中创建div对象,并用JQuery包装
    };

    /**
     * 销毁对象
     */
    this.destroy = function () {
        var $doc = $(window.document ? window.document : window.ownerDocument);
        $doc.removeData("86A97755-304A-4F21-910A-4AB916971B07");
        this.self.$div.empty().off().remove(); //移除构造方法创建的html dom对象
        this.self = null;
    };

    /***************************************************************************
     * 内部方法
     **************************************************************************/  
     /**
      * 将本类的self绑定到window.document.
      * @param self
      * 注意类的slef全部绑定至window.document.而传入的wind(window对象)可能来自iframe
      */
     function setSelf(self) {
         var $doc = $(window.document ? window.document : window.ownerDocument);
         $doc.data("86A97755-304A-4F21-910A-4AB916971B07", self);
     };

     /**
      * 获取本类的self对象
      * @returns this.self
      * 为严格控制变量作用域,避免无谓的错误.在事件函数中首先调用这个方法获取self对象.
      */
     function getSelf() {
         var $doc = $(window.document ? window.document : window.ownerDocument);
         return $doc.data("86A97755-304A-4F21-910A-4AB916971B07");
     };
    /***************************************************************************
     * 构造方法
     **************************************************************************/
    (function (self) {
        setSelf(self);
        //不要直接使用字符串的形式创建html,首先性能不好,其次也不安全
        self.$div = $(self.doc.createElement("DIV"));        
        $(self.doc.body).append(self.$div);

        //创建文本对象.优先使用这个方法,直接文本不安全,存在注入风险
        //var txtnode = self.doc.createTextNode(msg);
        //self.$div.append(txtnode);

        //不建议的方式.首先性能不好,其次当append中为外部传入参数时有注入风险
        //self.$div.append($("<div></div>"));
    })(this.self);
};