《Javascript 设计模式》－读书笔记

第一章   设计模式类别

什么是设计模式：模式是一种可复用的解决方案。

一、设计模式有三种类别

　　1、创建型模式：专注于处理对象机制。包括：构造器、工厂、抽象、原型、单例、生成器

　　2、结构型模式：用于找出在不同对象之间建立关系密切的简单方法。 包括：装饰者、外观、享元、适配器、代理

　　3、行为模式：用于改善或简化系统中不同对象之间的通信。包括：迭代器、中介者、观察者、访问者

 

第二章   JavaScript设计模式

一、四种方法可以将健值赋给一个对象

<script>
    // 1、使用点
    var newObject = {};
    newObject.sonKey = "Hello World";       // 设置
    var key = newObject.sonKey;             // 获取

    // 2、中括号语法
    newObject['sonKey'] = "Hello World";
    var key = newObject['sonKey'];
    
    // 3、object.defineProperty
</script>

 

　　1、创建对象两种常用方法

　　　　var newObject = {};　　　　

　　　　// 构造器的简洁记法

　　　　var newObject = new Object()

　　

　　2、四种方法将键值赋值给一个对象

　　　　a、"点"语法　　　　设置：newObject.someKey = "Hello World";　　　　获取：var key = newObject.someKey

　　　　b、中括号语法　　  设置：newObject["someKey"] = "Hello World";　　   获取：var key = newObject["someKey"];

　　　　c、ECMAScript5中的defineProperty

　　　　d、defineProperties

 

模式一：Constructor（构造器）模式也可以叫构造函数

       Constructor是一种在内存已分配权给该对象的情况下，用于初始化新创建对象的特殊方法

 

优点：每个实例都进行new实例化在内存中会简单创建一个空间，数据不会冲突

缺点：这种简单的构造函数中的write()方法都是公用，而不象是属性需要分离，而创建一个实例也会创建一个write()方法对性能上有所影响，建议使用porotype

<script>

    // 创建对象
    function Car(model, year, miles){
       this.model = model;
       this.year = year;
       this.miles = miles;

       this.write = function(){
           return this.model + " has done " + this.year;
       }
    }

    // 创建实例
    var civic = new Car("Honda Civic", 2009, 3000);
    var mondeo = new Car("Honda Civic", 2009, 3000);

    civic.write();
    mondeo.write();
</script>

 

带原型的构造函数

JS中的prototype属性，在调用构造函数创建对象后，新对象都会具有构造函数的所有属性

<script>

    // 创建对象
    function Car(model, year, miles){
       this.model = model;
       this.year = year;
       this.miles = miles;
    }

    Car.prototype = {
        constructor: Car,
        write: function(){
            return this.model + " has done " + this.year;
        }
    }

    // 创建实例
    var civic = new Car("Honda Civic", 2009, 3000);
    var mondeo = new Car("Honda Civic", 2009, 3000);

    civic.write();
    mondeo.write();
</script>

 

 

模式二：Module（模块）模式

　　有几种用于实现模块的方法？

　　1、对象字面量　　　　

　　2、Module模式　　　　

　　3、AMD模块　　　

　　4、CommonJS模块　　　　

　　5、ECMAScript Harmony模块

 

1、对象字面量

优点：有自己命名空间可以通过"."来访问全名空间

缺点：一个页面中如果有两个功能同时调用并且同时改变其属性会出现问题

<script>
    var myModule = {
        myProperty : "someValue",

        myConifg: {
            useCaching: true,
            language: "en"
        },

        // 方法
        myMethod: function(){
            console.log("where in the world is paul irish today?");
        }
    }
</script>

 

2、Module模式

　　模块模式（立即调用函数IIFE）：可以定义私有和公有封装的方法，自动执行匿名函数，并返回暴露的公用接口

缺点：接口返回的count和money只是第一次调用的值，如果setData改变了count和money的值，这时候在调用countSsq.count不是为0，解决的方法就是通过getData来重新获取一下count和money的值

<script>
    var countSsq = (function(){
        var count = 0;
        var money = 0;
        var setData = function(countNum, moneyNum){
            count = countNum;
            money = moneyNum;
        }
        var getData = function(){
            return {count: count, money: money}
        }
        
        return {
            count: count,
            money: money,
            setData: setData,
            getData: getData
        }
    })();
</script>

 

 

　　揭示模块模式：

<script>
    var myModule = (function(){

        var privateVar = "Ben Cherry", publicVar = "Hey tthere";
        
        function privateFunction(){
            console.log("name:" + privateVar);
        }
        
        function publicFunction(strName){
            privateVar = strName;
        }
        
        function publicGetName(){
            privateFunction()
        }
        
        // 将暴露的公有指针指向到私有的函数和属性上
        return {
            setName: publicFunction,
            greeting: publicVar,
            getNam: publicGetName
        }
    })();
</script>

 

引入混入

　　比如我们引用了如jquery的库，可以将jquery对象通过匿名函数传递进来，并按我们自己希望的取个本地的中

<script>
    var myModule = (function(JQ){

        // JQ为jQuery对象通过参数传递进来，将在模块内转成自己所定义的名子
        function privateMethod(){
            JQ(".box").html("test");
        }

        return {
            publicMethod: function(){
                privateMethod();
            }
        }

    })(jQuery)
</script>

 

引出

<script>
    var myModule = (function(){

        // 模块对象
        var module = {},
                privateVariable = "hello world";

        module.publicProperty = "Foobar";
        module.publicMethod = function(){
            console.log(privateVariable);
        }

        return module;      // 将模块对象暴露给外部
    })()

    myModule.publicMethod();
</script>

 

模式三、单例模式（Singleton）

　　单例模式限制了类的实例化次数只能一次

<script> 
    var mySingleton = (function () {

        /* 这里声明私有变量和方法 */
        var privateVariable = 'something private';
        function showPrivate() {
            console.log(privateVariable);
        }

        /* 公有变量和方法（可以访问私有变量和方法） */
        return {
            publicMethod: function () {
                showPrivate();
            },
            publicVar: 'the public can see this!'
        };
    })();

    mySingleton.publicMethod();  // 输出 'something private'
    console.log(mySingleton.publicVar); // 输出 'the public can see this!'    
</script>

 

模式四、观察者模式

　　目标：维护一系列观察者，方便添加或删除观察者

　　观察者：目标状态发生改变时需获得通知的对象提供一个更新接口

　　具体目标：状态发生改变时向观察者发出通知，存储具体观察者

　　具体观察者：存储一个指向具体目标的引用，实现观察者更新接口，以自身状态与目标的状态保持一致

<script>

    // 观察者
    function Observer(){
        this.observerList = [];
    }

    Observer.prototype = {
        constructor: Observer,

        // 向数据中添加数据
        add: function(obj){
            return this.observerList.push(obj);
        },

        // 清空数据
        empty: function(){
            this.observerList = [];
        },

        // 获取对象的长度
        count: function(){
            return this.observerList.length;
        }
    }


    // 扩展对象的方法
    function extend(obj, extension){
        for(var key in obj){
            extension[key] = obj[key];
        }
    }

    // 模拟目标
    function Subject() {
        this.observerList = new Observer();     // 将观察者引入到目标的属性
    }

    Subject.prototype = {
        constructor: Subject,

        addObserver: function(data){
            this.observerList.add(data);
        },

        getCount: function(){
            return this.observerList.count();
        }
    }

    var oSub = new Subject();
    oSub.addObserver("aaa");
    console.log(oSub.getCount());

    oSub.addObserver("bbb");
    oSub.addObserver("ccc");
    console.log(oSub.getCount());
</script>

 

模式五、中介者模式

　　中介者模式的功能就是封装了多个类之间的交互

http://ju.outofmemory.cn/entry/107912

Why Mediator ?

　　各个对象之间的交互操作非常多，每个对象的行为操作都依赖彼此对方，修改一个对象的行为，同时会涉及到修改很多其他对象的行为，如果使用Mediator模式，可以使各个对象间的耦合松散,只需关心和 Mediator的关系,使多对多的关系变成了一对多的关系，可以降低系统的复杂性，提高可修改扩展性。

 

使用中介者模式的场合

1.一组定义良好的对象，现在要进行复杂的通信。

2.定制一个分布在多个类中的行为，而又不想生成太多的子类。

可以看出，中介对象主要是用来封装行为的，行为的参与者就是那些对象，但是通过中介者，这些对象不用相互知道。（迪米特法则的具体实现）

 

使用中介者模式的优点：

1.降低了系统对象之间的耦合性，使得对象易于独立的被复用。

2.提高系统的灵活性，使得系统易于扩展和维护。

 

使用中介者模式的缺点：

　　中介者模式的缺点是显而易见的，因为这个“中介“承担了较多的责任，所以一旦这个中介对象出现了问题，那么整个系统就会受到重大的影响。

<script>

    // 中介者模式的简单实现，暴露publih()和subscribe()
    var mdeiator = (function(){

        // 存储可被广播或监听的topic
        var topics = {};

        // 订阅一个topic，提供一个回调函数，一旦topic被广告就执行回调
        var subscribe = function(ic, fn){

            // 如果存储中没有当前数据则创建一个
            if(!topics[ic]){
                topics[ic] = [];
            }

            topics[ic].push({context: this, callback: fn});
            return this;
        }

        // 发布/广播事件到程序的剩余部分
        var publish = function(ic){
            var args;

            if(!topics[ic]){
                return false;
            }

            args = Array.prototype.slice.call(arguments, 1);

            for(var i= 0,l = topics[ic].length; i<l; i++){
                var subscription = topics[ic][i];
                subscription.callback.applay(subscription.context, args);
            }

            return this;
        }

        return {
            publish: publish,
            subscribe: subscribe,
            installTo: function(obj){
                obj.subscribe = subscribe;
                obj.publish = publish;
            }
        }
    })();

    mdeiator.subscribe("aa", function (){ alert("haha"); });
    mdeiator.subscribe("aa", function (){ alert("haha"); });

    mdeiator.publish("aa");

</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

第十一章   模块化的JavaScript设计模式

一、脚本加载器

　　AMD、CommandJS和seajs三种模块化开发 

　　1、AMD：异步模块定义的整体目标是提供模块化的.

 　　　　模块入门：

　　　　模块定义define方法和用于处理依赖加载的require方法

 

第10章   JavaScript MV*设计模式

一、三个架构模式

　　1、MVC：模型、视图、控制器

　　2、MVP：模型、视图、表示器

　　3、MVVM：模型、视图、视图模型

 

二、MVC

　　MVC它将业务数据（modle）、用户界面（view）隔离、第三个组件（controller）管理逻辑和用户输入.

　　当UI的变化引起模型属性改变时，模型会触发"change"事件； 所有显示模型数据的视图会接收到该事件的通知，继而视图重新渲染。 你无需查找DOM来搜索指定id的元素去手动更新HTML。 — 当模型改变了，视图便会自动变化

 

　　1、Modle模型

　　　　管理应用于程序的数据，不涉及用户界面，也不涉及表示层

<script>
    var Photo = Backbone.model.extend({

        // photo默认属性
        defaults : {
            src: "place.jpg",
            caption: "a default image",
            viewed: false
        },

        // 确保每一个photo都有一个src
        init: function (){
            this.set({ "src": this.defaults.src });
        }
    })
</script>

 

　　Model主要是与业务数据有关

 

　　2、View（视图）

　　视图是Model（模型）的可视化表示，用户可以与视图进行交互，包括读取和编辑模型，在模型中获取或设置障碍属性值

 

　　模板：

　　在支持MVC/MV*的框架中，javascript模版与view的关系

　　javascript模板通常是用于将view模板定义为包含模板变量的标记录

Handlebars.js
<li>
    <h2>{{caption}}</h2>
    <img class="source" src="{{src}}">
    <div>
        {{metadata}}
    </div>
</li>

 

　　3、Controller（控制器）

　　控制器是模型和视图之间的中介，当用户操作视图时，控制器负责更新模型

 

 

 

 

 

 

 

BackBone中文官网：http://www.csser.com/tools/backbone/backbone.js.html

 

 

第七章   设计模式类别