《JavaScript设计模式》Stoyan Stefanov－读书笔记

第一章  简介

一、三种类型模式

　　设计模式、编码模式、反模式

二、JavaScript基本概念

1、面向对象

　　五种基本类型：数字、字符串、布尔、undefine、null

　　函数也是对象，也有属性和方法

　　对象有两种类型：1、原生的 ECMAScript　　2、主机的，在主机环境中定义，如浏览器

　　原生包括：内置对象和用户自定义对象

　　主机包括：window对象和所有DOM对象

2、原型

　　原型是个对象，每个都会自动获取一个Prototypes属性，该属性指向一个新的空对象

　　

3、JSLint

　　javascript是一门解析语言没有静态编译时检查，JSLint是检查JavaScript代码质量的工具

第二章  基本技巧

　　本章讨论一些高质量代码的核心方法、模式和习惯，如避免全局变量、使用单个变量var的声明、循环中缓存长度变量length和符合代码的约定.

一、编写可维护代码

1、减少全局变量

　　全局对象可以在函数外部使用this访问

　　mylobal = "hello";　　　　// 全局变量

　　console.log(mylobal);

　　console.log(window.mylobal);

　　console.log(window["mylobal"]);

　　全局变量的问题：1、第三方Javascript库　　2、广告合作伙伴的脚本　

　　释放变量：使用var 创建的变量不能删除，不使用var创建的隐含全局变量可以删除，隐含变量不是真正的变量，而是全局对象的属性，可以通过delete删除

　　// 定义三个全局变量

　　var global_var = 1;

　　global_noar = 2;

　　(function(){

　　　　global_fromfunc = 3;

　　})

　　delete  global_var;　　// false

　　delete  global_noar;　　// true

　　delete  global_fromfunc; 　　// true

2、单一的var模式 

　　用一个var在函数顶部进行变量的声明

　　var a = 0,

　　　   b = 1;

3、for循环

　　当遍历时存储长度，

　　var oLi = document.getElementsByTagName("li");

　　for(var i=0, len=oLi.length; i< len; i++){    ...   } 

4、不在增加内置的原型

　　就是别在内置的构造函数内增加新功能，

5、switch模式

　　提高switch的可读性和健壮性

　　var inspect = 0, result = "";

　　swith(inspect){

　　　　case 0:

　　　　　　result = "zero"; break;

　　　　case 1:

　　　　　　result = "one"; break;

　　　　default:

　　　　　　retult = "unknown";

　　}

　　如果不写break语句会接着向下执行

6 、parseInt()的数值约定

　　parseInt()从一个字符串中获取数值，第二个参数为进制，但如果字符串为0开头就必须写进制，如"08"，parseInt("08", 10);否则在ie下会输出

　　另一种写法可以：

　　+"08";　　或者   Number("08")    

第三章  字面量和构造函数

一、对象字面量

　　// 定义一个空对象

　　var dog = {};

　　// 向对象加一个属性和方法

　　dog.name = "benji";

　　dog.getName = function(){

　　　　return dog.name;

　　}

二、构造函灵敏

var Person = function(name){
    this.name = name;
    this.say = function(){
        return this.name;
    }
}

　　构造函数原型prototyp的作用

　　将say方法添加到this中，如果在任何时间调用new Person()时都会在内存中创建一个新的函数，会使效率低下，因为创建多个person实例时也会创建多个say方法，解决方法是将他们添加到原型中prototype

第四章  函数

　　函数的两个特点：1、函数是一类对象     2、函数可以提供一个作用域

1、全局作用域：function foo(){}

2、局部作用域：

function local(){

　　// 局部作用域

　　function bar(){};

　　return bar;

}

3、函数表达式  var bar = function(){  ...  }

4、匿名函数  function(){ ... };  没有名称，在自动函数或赋给一个变量时使用

5、即时执行函数  (function(){ ...  })();　　

　　即时函数的参数：

　　(function(who, when){

　　　　console.log("i met" + who);

　　})("joe black", new Date())

　　即时函数的返回值：

　　var result = (function(){

　　　　return 2 + 3;

　　})();

第五章  对象创建模式

一、命名空间模式

　　命名空间有助于减少全局变量的数量，并且避免合名冲突或过长的名字前缀

<script>
    // 不安全代码，比如两个js文件中都有这会MYAPP的创建，这样第二个会覆盖掉第一个对象
    var MYAPP = {};
    
    // 更好的代码风格
    if(typeof MYAPP === "undefined"){
        var MYAPP = {};
    }
    
    // 或者使用
    var MYAPP = MYAPP || {};
</script>

　

　　检测代码需要太多的重复工作，如果想定义MYAPP.modeles.module就必须三次检查，每次都需要检查一次对象或属性，可以使用namespace()函数

<script>
    MYAPP.namespace("MYAPP.modules.getName");

    // 相当于
    MYAPP.modules.getName = {}


    // 定义一个命名空间函数
    var MYAPP = MYAPP || {};
    MYAPP.namespace = function(sName, newObj){
        var parts = sName.split("."),
            argLen = arguments.length,
            parent = MYAPP;

        // 剥离最前面的全局变量
        if(parts[0] == "MYAPP"){
            parts = parts.slice(1);
        }

        if(argLen == 2 && (typeof newObj === "object" || typeof newObj === "function")){
            for(var i= 0,len = parts.length; i<len; i++){
                if(i == len-1){
                    parent[parts[i]] = $.extend(newObj, parent[parts[i]]);  // 需要继承之前的对象
                }
                else{
                    // 如果不存在就创建一个新的属性
                    if(typeof parent[parts[i]] === "undefined"){
                        parent[parts[i]] = {};
                    }
                }
                parent = parent[parts[i]];
            }
        }
        else{
            for(var i= 0,len = parts.length; i<len; i++){
                // 如果不存在就创建一个新的属性
                if(typeof parent[parts[i]] === "undefined"){
                    parent[parts[i]] = {};
                }
                parent = parent[parts[i]];
            }
        }

        return parent;
    }

    // 1、创建一个命名空间，并初始化命名空间的对象
    var ssq = MYAPP.namespace("MYAPP.storage.getStorage", {

        init: function(){
            this.bindEvent();
        },

        bindEvent: function(){
            console.log("bind All");
        }

    });

    // 调用
    ssq.init();     // 结果 bind All

    // 2、创建一个命名空间，初始化时为函数，其实使用对象也完全可以做到，MYAPP.namespace("MYAPP.storage", {showFun: function(){ console.log("匿名函数"); }};
    var dlt = MYAPP.namespace("MYAPP.storage.showFun", function(){
        console.log("匿名函数");
    });

    // 调用
    dlt();
</script>

二、私有属性、方法

　　js中没有私有成员的语法，可以通过闭包，或内部变量来实现这种功能。

<script>
    function Gadget(){
        
        // 私有成员
        var name = "iPad";
        
        // 公有函数
        this.getName = function(){
            return name;
        }
    }
    
    var toy = new Gadget();
    console.log(toy.name);      // undefined
    console.log(toy.getName()); // iPad
</script>

三、特权方法

　　就是通过公有方法来访问私有属性，这个方法可以叫做特权方法，上面的例子getName()就是个特权方法.

四、模块模式

<script>
    var myObj = (function(){
        
        // 私有成员
        var name = "my, oh my";
        
        // 实现公有部分
        return {
            getName: function(){
                return name;
            }
        }
    })();
</script>

1、构造函数的模块

<script>
    var MYAPP = MYAPP || {};

    // 命名空间函数
    MYAPP.namespace = function(sName, newObj){
        var parts = sName.split("."),
                argLen = arguments.length,
                parent = MYAPP;

        // 剥离最前面的全局变量
        if(parts[0] == "MYAPP"){
            parts = parts.slice(1);
        }

        if(argLen == 2 && (typeof newObj === "object" || typeof newObj === "function")){
            for(var i= 0,len = parts.length; i<len; i++){
                if(i == len-1){
                    parent[parts[i]] = $.extend(newObj, parent[parts[i]]);  // 需要继承之前的对象
                }
                else{
                    // 如果不存在就创建一个新的属性
                    if(typeof parent[parts[i]] === "undefined"){
                        parent[parts[i]] = {};
                    }
                }
                parent = parent[parts[i]];
            }
        }
        else{
            for(var i= 0,len = parts.length; i<len; i++){
                // 如果不存在就创建一个新的属性
                if(typeof parent[parts[i]] === "undefined"){
                    parent[parts[i]] = {};
                }
                parent = parent[parts[i]];
            }
        }

        return parent;
    }

    MYAPP.namespace("MYAPP.util");      // 创建一个命名空间
    MYAPP.util =  (function(){

        // 依赖
        var oLib = MYAPP.lib;
        
        // 创建构造函数
        function Constr(){
            this.elements = "siguang";
        }

        Constr.prototype.version = "2.0";
        Constr.prototype.showMessage = function(){
            console.log(this.version, this.elements);
        }

        var oConstr = new Constr();

        return oConstr;
    }());

    console.log(MYAPP);

    // 调用
    MYAPP.util.showMessage();        //
</script>

2、将全局变量导入到模块中

<script>
    MYAPP.utilities.module = (function(app, global){
        // 引用全局对象
        // 可以转成局部变量
        // 全局应用程序命名空间对象
    })(MYAPP, this)
</script>

第五章  对象创建

一、包装对象

　　什么是包装对象

　　var str = "ssssssss";   

　　str.charAt(3);

　　str.substring(2);

　　一般方法是调用的是对象，而str是字符串，这就是用到了包装对象，基本类型都有自己的包装对象

　　例如：字符串包装类型是String     数字是Number    布尔是Boolean，为什么str可以调用字符串的方法，看下面的例子

<script>
    var str = new String("haha");   // 将字符串到String对象
    
    // String的对象的方法
    String.prototype.charAt = function(n){
        // ....
    }
</script>

var str = "haha";　　　　// 这句正常定义变量

str.charAt(2);　　　　　　// 这里基本类型str会找到对应包装对象的方法，将属性及方法赋给基本类型，然后包装对象消失

第六章  代码复用模式

一、类式继承

　　类式继承的几种写法：

1、默认模式 

<script>

    // 父构造函数
    function Parent(name){
        this.name = name || "siguang";
        this.age = "30";
        this.setGame = function(){
            console.log(this.age);
        }
    }

    // 向该原型添加功能
    Parent.prototype.say = function(){
        return this.name;
    }

    // 空构造函数
    function Child(name, age){
        this.age = age;
        Parent.call(this, name);        // 改变父类的属性，否则调用的就是父类的属性
    }

    // 继承方法，封装了一个
    inherit(Child, Parent);

    function inherit(C, P){
        C.prototype = new P();　　　　// 继承方法
    }

    var oC = new Child("lulu", 28);   
    console.log(oC.say());      // lulu
    oC.setGame();               // 30
</script>

　　类式继承继承父类的属性和方法，如果改变其属性需要将改变指针Parent.call(this, name);

　　此模式的缺点：同时继承两个对象的属性，将子类传入age时this.age = age 输出的并不是预期的28而还是父类的30，这也就是第二种模式

2、共享原型

　　修改了inherit方法

function inherit(C, P){
　　C.prototype = P.prototype;　　　　// 缺点：在继承链的某一个子对象或孙对象修改了原型，会影响到父对象和祖先对象.
}

3、临时构造函数