zoukankan      html  css  js  c++  java
  • "编写高质量代码"一书笔记

    总结
    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,三个层面考虑模块化
       良好的注释
       注意代码的弹性,在性能和弹性的选择上,一般 情况下以弹性为优先考虑条件
       严格按照规范编写代码
  • 相关阅读:
    【C++】基础及引用
    gradle打包分编译环境
    gradle
    MediaPlayer滑动不准的问题
    python初步入门
    音频播放服务
    《深入理解Android2》读书笔记(二)
    缓存(LruCache)机制
    handler机制
    监听网络状态
  • 原文地址:https://www.cnblogs.com/sunrise/p/4200509.html
Copyright © 2011-2022 走看看