Javascript学习------设计模式（1）-CSDN博客

由于初次看《javascript设计模式》，有太多的疑问：

1.接口：提供必需实现的方法的类，但本类不需要具体实现（C#搬过来的）

 1         ///1:注释方实现接口
 2         var compositeform = function () {//继承接口
 3 
 4         }
 5         compositeform.prototype.add = function () {//实现接口中的添加方法
 6 
 7         }
 8         compositeform.prototype.delete = function () {//实现接口中的删除方法
 9 
10         }
11 
12         ///:属性法实现接口
13         var comform = function () {
14             this.implementsInteerfaces = ['Composite', 'FormItem'];
15         }
16         function addForm(formInstance) {
17             if (!implements(formInstance, 'Composite', 'FormItem')) {
18                 throw new error("对象没有实现所需的接口。")
19             }
20         }
21         function implementss(object) {
22             for (var i = 1; i < arguments.length; i++) {
23                 var interfaceName = arguments[i];
24                 var interfaceFound = false;
25                 for (var j = 0; j < object.implementsInteerfaces.length; j++) {
26                     if (object.implementsInteerfaces[j] == interfaceName) {
27                         interfaceFound = true;
28                         break;
29                     }
30                 }
31                 if (!interfaceFound) {
32                     return false;//接口没有被发现
33                 }
34             }
35             return true;//接口被发现
36         }
37 
38         ///:鸭式辨型模仿接口
39         var Composite = new Interface('Composite', ['add', 'remove', 'getchild']);
40         var FormItem = new Interface('FormItem', ['save']);
41 
42         var CompositeForm = function (id, method, action) {
43 
44         }
45         function addform(forminstance) {
46             ensureImplements(formInstance, Composite, FormItem);
47         }
48 
49 
50 
51         var Interface = function (name, methods) {
52             if (arguments.length != 2) {
53                 throw new error('创建接口失败');
54             }
55             this.name = name;
56             this.methods = [];
57             for (var i = 0, len = methods.length; i < len; i++) {
58                 if (typeof methods[i] !== 'string') {
59                     throw new error("接口方法是字符串型");
60                 }
61                 this.methods.push(methods[i]);
62             }
63         }
64 
65         Interface.prototype.ensureImplements = function (object) {
66             if (arguments.length < 2) {
67                 throw new error("确保能实现接口方法请传入至少2个，且符合要求的参数");
68             }
69             for (var i = 1, len = arguments.length; i < len; i++) {
70                 var interfaces = arguments[i];
71                 if (interfaces.constructor !== Interface) {
72                     throw new error("函数的参数interface.esureimplements希望从两个and above to be of接口实例");
73                 }
74                 for (var j = 0, methodsLen = interfaces.methods.length; j < methodsLen; j++) {
75                     var method = interfaces.methods[j];
76                     if (!object[method] || typeof object[method] !== 'function') {
77                         throw new error('');
78                     }
79                 }
80             }
81         }

以上代码只是照搬书上的，基本就是模仿面向对象语言里接口的功能（继承接口必需实现接口里的方法，但并没有验证方法参数，原因javascript的参数类型object 可是任何类型）

2.私有属性、私有方法与静态属性、静态方法（书上是都是使用闭包实现）

根据书中所讲,我所理解的意思（只是个人理解）

私有：类中的公共方法，操作类中局部变量或方法;(每个实例都是存在私有成员独立占用内存)

 1        var Books = function (newisbn, newtitle, newauthor) {
 2             var isbn = "abc", title, author;//局部变量(即私有变量)
 3             function select(str) {
 4                 isbn += str;
 5             }//局部方法(即私有方法)
 6             this.getIsbn = function () {
 7                 this.isbn = isbn;
 8             };
 9             this.getTitle = function () {
10                 this.isbn = title;
11             };
12             this.getAuthor = function () {
13                 this.isbn = author;
14             };
15             this.fn = function (str) {
16                 select(str);
17             };
18         }
19         var book = new Books();
20         book.fn("def");
21         book.getIsbn();
22         alert(book.isbn);//abcdef
23         var book1 = new Books();
24         book1.fn("ghi");
25         book1.getIsbn();
26         alert(book1.isbn);//abcghi

静态：静态成员关联类本身，而不是类实例后（用我的话来说，就是类的全局成员，在内存中只占一次，类实例共享的）

 1     var Books = function (newisbn, newtitle, newauthor) {
 2             var isbn = "abc", title, author;//类全局变量(即静态变量)
 3             function select(str) {
 4                 isbn += str;
 5             }//类全局方法(即静态方法)
 6             return function () {//闭包
 7                 this.getIsbn = function () {
 8                     this.isbn = isbn;
 9                 };
10                 this.getTitle = function () {
11                     this.isbn = title;
12                 };
13                 this.getAuthor = function () {
14                     this.isbn = author;
15                 };
16                 this.fn = function (str) {
17                     select(str);
18                 };
19             }
20         }();//括号很重要
21         var book = new Books();
22         book.fn("def");
23         book.getIsbn();
24         alert(book.isbn);//abcdef
25         var book1 = new Books();
26         book1.fn("ghi");
27         book1.getIsbn();
28         alert(book1.isbn);//abcdefghi

常量：创建只有取值器而没赋值器的么用变量模仿常量即可

3.继承

 //1.原型链继承
        var yuwen = function () {
        }
        yuwen.prototype = new Books();//设置原型链(实现继承)
        yuwen.prototype.constructor = yuwen;//重新设置(因为在设置prototype是消失了，书上是这样说的)
        yuwen.prototype.getBooks = function () {
            return this.books;
        }
        var w = new yuwen();
        alert(w.name2);//打印得外语 name2的属性得到

        //2.call对象冒充继承
        var shuxue = function () {
            Books.call(this);//对象冒充,即Books中的this变更为现在yuwem对象(实现继承)
        }
        var s = new shuxue();
        alert(s.name2);//打印得外语 name2的属性得到

3.单体模式(划分命名空间)

1 var GiantCorp = {};//命名空间
2         GiantCorp.common = {
3             inti: function () { },
4             pageend: function () { }
5         }
6         GiantCorp.index = {
7             inti: function () { },
8             pageend: function () { }
9         }

4方法链接调用(Jquery使用的方法)

 1         (function () {
 2             function _$(els) {
 3                 if (typeof arguments[0][0] === 'function') {
 4                     window.onload = arguments[0][0]();
 5                     return;
 6                 }
 7                 this.elements = [];
 8                 for (var i = 0, len = els.length; i < len; ++i) {
 9                     var element = els[i];
10                     if (typeof element === 'string') {
11                         element = document.getElementById(element);
12                     }
13                     this.elements.push(element);
14                 }
15             }
16             _$.prototype = {
17                 each: function (fn) {
18                     for (var i = 0, len = this.elements.length; i < len; i++) {
19                         fn.call(this.elements[i], i)
20                     }
21                     return this;
22                 },
23                 html: function () {
24                     for (var i = 0, len = this.elements.length; i < len; i++) {
25                         return this.elements[i].innerHTML;
26                     }
27                 }
28             }
29             window.$ = function () {
30                 return new _$(arguments);
31             }
32         })();
33     </script>
34     <span id="sp">s_s</span>
35     <span id="sp2">s-s</span>
36     <script type="text/javascript">
37         $(function () {
38             $("sp", "sp2").each(function (i) {
39                 alert(i);
40             });
41             alert($("sp").html());
42         });
43     </script>