"编写高质量代码"一书笔记

总结

css架构结构 :  

 

  base  :   共用样式

  common: 通用控件样式

  page: 页面级样式

 

js 架构结构：

 

base 位于三层最底层，职责一是封装不同浏览器下js的差异，提供统一的接口，依靠它来完成跨浏览器兼容的工作，职责二是扩展js语言底层提供的接口，让它提供 更多更为易用的接口，base层是给common层和page层提供接口。

 

common 位于三层的中间，依赖于base层提供的接口，common提供可供复用的组件，它是典型mvc模式中的M，和页面内的具体功能没直接关系，common层的功能是给page层提供组件。可以复用的

 

page层，

 位于三层的最顶端 ，这一层和页面里的具体功能需求直接相关，是mvc模式的c,page层依敕于base层和common层，page层的功能是完成页面内的功能需求。

 

javascript: 对象编程

 

反方法写在原型里，可以被所有实例共享，实例化的时候，并不会在实例的内存中再复制 一份，而写在类里的行为，实例化的时候会在每个实例里复制一份。把实例写在内存消耗，没有特殊原因，推荐尽量把行为写在原型里。

 

用this._age来定义表明是私有的，不能当成公有的属性来调用 。提醒而已。

 

用get,set 方法来访问属性需要将相关的方法都 放到构造函数和里，和所有方法以都放到原型相比，这么做会占用更多的内存，但它可以更好地保护 属性，

 

function Animal(name){

   var name;

   this.getName=function(){

    return name;

   }

   this.setName=function(o){

     name=o;

   }

}

 

function有两种不同的用法,作为函数，

直接使用 函数名（）调用，this指向window作为类的构造函数，使用new 函数名（）调用。this指向实例

 

命名空间

 

var GLOBAL={};

GLOBAL.namespace=function(str){

   var arr=str.split("."),o=GLOBAL;

   for(i=(arr[0]=="GLOBAL")?1:0;i<arr.length;i++){

      o[arr[i]]=o[arr[o]]||{};

     o=o[arr[i]];

   }

}

 

GLOBAL.namespace("Dom");   //调用

 

继承代码

 

function extend(subClass,superClass){

    var F=function();

    F.prototype=superClass.prototype;

    subClass.prototype=new F();

    subClass.protype.constructor=subClass;

    subClass.superclass=superClass.prototype;

    if(superClass.protope.constructor==Object.prototype.constructor){

      superClass.prototype.constructor=superClass;

   }

   }

 

function Animal(name){

   this.name=name;

   this.type="animal";

} 

 

Animal.prototype={

    say:function(){

       alert("i'm a(an)"+this.type+",my name is "+this.name);

   }

}

 

function Bird(name){

     this.constructor.superclass.constructor.apply(this,autuments);

     this.type="bird";

}

 

extend(Bird,Animal);

Bird.prototype.fly=function(){

   alert("i'm flying");

}

 

var canary=new Bird("xiaocui");

canary.say();     // i'm a(an) bird,my name is xiaocui

 

Array

 

Array.prototype.each=function(fun){

   for(var i=0,n=this.length,i<n;i++){

          fun(this[i],i);

   }

}

 

Array.prototype.clone=function(){

   var o=[];

   this.each(function(v,k){

     o[k]=v;

   })

  return o;

}

 

Array.prototype.map=function(fun){

    var o=[];

    this.each(function(v,k){

        o[k]=fun(v,k);

     })

   return o;

}

Array.prototype.Delete=function(a){

   var o=this.clone();

   for(var i=o.length,n=0;i>n;i--){

      if(o[i]==a){

         a.splice(i,1);

      }

   }

}

javascript 提供了一些内置类：Array,String,Function等。在javascript中，所有的内置类和自定义类，所有类的祖先类都是Object.如果想对所有对象都扩展方法，可以通过修改Object类的原型实现。

 

 

无论在类的构造 函数中还是在原型中，this都指向实例化的对象。

内置类的方法可以重写，但属性却不能重写。

 

修改内置类的原理型 非常方便，缺点是可能会带来冲突隐患，自定义的可以保护原型不修改，但它需要用new来实例化自定义类，相对麻烦 一些。

如果是小应用，不用过多浮头考虑可维护性，推荐使用前者，如果是大中型应用，需要考虑可维护性，推荐使用后者。

 

var node=document.getElementById("a");

typeof node         //  object;

 

对于常规属性，统一使用 node.xxxxx,对于自定义属性，统一使用 node.getAttribute("XXXX");

 

目标对象    e.target||e.srcElement

 

 

 好的可维护 性的代码从四个方面获得：

    代码的松耦合，高度模板化，将页面内的元素视为一个个模块，相互独立，尽量避免耦合过高的代码，从html,css,javascript,三个层面考虑模块化

   良好的注释

   注意代码的弹性，在性能和弹性的选择上，一般 情况下以弹性为优先考虑条件

   严格按照规范编写代码