由于初次看《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>
以上就是我学习《JavaScript 设计模式》的上半部分，虽然只是初浅的学习了一遍，但学到的东西还是有的，我相信下一次再学习这部分内容时能理解的更多！
时间： 2024-10-23 09:27:52