+1

设计模式/单例.html

@@ -1,16 +1,16 @@
 <script type="text/javascript">
-    var People = (function () {
+    var People = (function () {//var的函数方法所以用大写
         var instance;
         function init() {
             //定义私有方法和属性
             //做某事
             return {
-            //定义公共方法和属性
+                //定义公共方法和属性
             };
         }
         return {
             createPeople: function () {
-                if (!instance) {
+                if (!instance) {//只能有一份内存的对象,有就不创建,没就创建
                     instance = init();
                 }
                 return instance;

设计模式/发布订阅模式.html

@@ -19,7 +19,7 @@
             }
             for (var i = 0; i < events[evt].length; i++) {
                 events[evt][i].handler(args);
-                
+
             }
         }
         return {
@@ -34,11 +34,12 @@
     EventCenter.on('my_event', function (data) {
         console.log('my_event2 received...');
     });
-    EventCenter.fire('my_event',);
+    EventCenter.fire('my_event', );
 //逻辑:
 //最外面放一个空对象.
 //A方法作用:讲若干函数放入数组
 //B方法:调用A里面所有的方法.
 //AB怎么联系起来:通过外面的events对象,AB都是操作events对象.
 //所以1对多.
+
 </script>

设计模式/发布订阅模式范例.html

@@ -0,0 +1,50 @@
+<script type="text/javascript">
+    var EventCenter = (function () {
+        //外部创建一个可以包含数组的对象
+        var events = {};
+        /*
+          {
+            my_event: [{handler: function(data){xxx}}, {handler: function(data){yyy}}]
+          }
+        */
+        //这里只保存方法到数组,不做操作.
+        function on(evt, handler) {
+            events[evt] = events[evt] || [];
+            events[evt].push({
+                handler: handler
+            });
+        }
+        //对上面保存在数组里的函数做相关操作
+        //重点是:都是对同一event对象的数组操作
+        function fire(evt, args) {
+            if (!events[evt]) {
+                return;
+            }
+            for (var i = 0; i < events[evt].length; i++) {
+                events[evt][i].handler(args);
+            }
+        }
+        function off(evt) {
+            delete events[evt]
+        }
+        return {
+            on: on,
+            fire: fire,
+            off: off
+        }
+    })();
+    EventCenter.on('my_event', function (data) {
+        console.log('my_event received...');
+    });
+    EventCenter.on('my_event', function (data) {
+        console.log('my_event2 received...');
+    });
+    EventCenter.fire('my_event');
+    EventCenter.on('change', function (val) {
+        console.log('change...  now val is ' + val);
+    });
+    EventCenter.fire('change', 'Tom');
+    EventCenter.off('change');//events[change]就被删除了
+    //所以不会再调用change相关方法(通知),delete原理就是删除数组里面的元素(即方法)
+
+</script>

设计模式/工厂模式.html

@@ -0,0 +1,14 @@
+<script type="text/javascript">
+    function createPerson(opts) {
+        var person = {
+            name: opys.name || 'peter'
+        };
+        person.sayName = function () {
+            console.log(this.name);
+        }
+        return person;
+    }
+    var p1 = createPerson({ name: 'tom' });
+    var p2 = createPerson({ name: 'kite' })
+
+</script>

设计模式/构造函数模式.html

@@ -0,0 +1,12 @@
+<script type="text/javascript">
+    function Person(name, age) {
+        this.name = name;
+        this.age = age;
+    }
+    Person.prototype.sayName = function () {
+        return this.name;
+    };
+    var student = new Person('tony', 20);
+    console.log(student);
+
+</script>

设计模式/模块模式.html

@@ -1,14 +1,15 @@
 <script type="text/javascript">
-var Person = (function(){
-	var name = 'ruoyu';
-	function sayName(){
-		console.log(name);
-	}
-
-	return {
-		name: name,
-		sayName: sayName
-	}
-})()
-Person.sayName();
+    var Person = (function () {
+        var name = 'ruoyu';
+        function sayName() {
+            console.log(name);
+        }
+
+        return {
+            name: name,
+            sayName: sayName
+        }
+    })()
+    Person.sayName();
+
 </script>

设计模式/混合模式.html

@@ -0,0 +1,34 @@
+<script type="text/javascript">
+    var Person = function (name, age) {
+        this.name = name;
+        this.age = age;
+    };
+    Person.prototype.sayName = function () {
+        console.log(this.name);
+    }
+    var Student = function (name, age, score) {
+        //这里的 call作用:改变作用域,可以引用构造函数
+        Person.call(this, name, age);//this是student
+        this.score = score;
+        //student继承了person的属性
+    };
+    //Object.create()可以调用这个方法来创建一个新对象。
+    //新对象的原型就是调用 create方法时传入的第一个参数
+    Student.prototype = Object.create(Person.prototype);
+    //student继承了person的方法
+    // Student.prototype = create(Person.prototype);
+    // function create (parentObj){
+    //     function F(){}
+    //     F.prototype = parentObj;
+    //     return new F();
+    // };//这一段等同于上面Object.create.(Person.prototype).
+    Student.prototype.sayScore = function () {
+        console.log(this.score);
+    }
+    var student = new Student("likefool", 18, 90);
+    console.log(student);//obj{属性+方法}
+    student.sayName();//'likefool'
+//student继承了person的属性和方法
+//混合模式= 构造函数模式 + call继承属性
+
+</script>