js 设计模式（灵活的语言 JavaScript）

灵活的语言 JavaScript

函数

• 普通函数

function checkName（）{
	// 验证姓名
}
1
2
3

• 函数的另一种形式

var checkName = function(){
	// 验证姓名
}
1
2
3

• 用对象收编变量

var checkObject= {
	checkName: function(){
		// 验证姓名
	}
}
1
2
3
4
5

• 对象的另一种形式

var checkObject = function(){}
checkObject.checkName = function(){
	// 验证姓名
}
1
2
3
4

• 真假对象(供多人开发 提高复用性)

var CheckObject = function () {
  return {
    checkName: function () {
      console.log("checkName");
      // 验证姓名
    },
  };
};
var a = CheckObject();
a.checkName();
1
2
3
4
5
6
7
8
9
10

• 类和数组一样

var CheckObject = function () {
  return {
    checkName: function () {
      console.log("checkName");
      // 验证姓名
    },
  };
};
var a = new CheckObject();
a.checkName();
1
2
3
4
5
6
7
8
9
10

类需要用关键字new创建

一个检验类

• 创建对象实例

var CheckObject = function () {};
CheckObject.prototype = {
  checkName: function () {
    console.log("checkName");
    // 验证姓名
  },
};

CheckObject.prototype.checkName();
1
2
3
4
5
6
7
8
9

另一种方式

var CheckObject = function () {};
CheckObject.prototype.checkName = function () {
  console.log("checkName");
  // 验证姓名
};
CheckObject.prototype.checkName();
1
2
3
4
5
6

方法还可以这样用

var CheckObject = {
  checkName: function () {
    console.log("checkName");
    // 验证姓名
    return this;
  },
  checkEmail: function () {
    console.log("checkEmail");
    // 验证邮箱
    return this;
  },
  checkPassword: function () {
    console.log("checkPassword");
    // 验证密码
    return this;
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

此时我们想使用它 就可以这样

CheckObject.checkName().checkEmail().checkPassword();
1

• 当然同样的方式还可以放到类的原型对象中

var CheckObject = function () {};
CheckObject.prototype = {
  checkName: function () {
    console.log("checkName");
    // 验证姓名
    return this;
  },
  checkEmail: function () {
    console.log("checkEmail");
    // 验证邮箱
    return this;
  },
  checkPassword: function () {
    console.log("checkPassword");
    // 验证密码
    return this;
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用时需要先new一下

var a = new CheckObject();
a.checkEmail().checkName().checkPassword();
1
2

函数的祖先

Function.prototype.checkEmail = function () {
  // 验证邮箱
  console.log("checkName");
};
1
2
3
4

• 使用时

var f = function () {};
f.checkEmail();
1
2

• 类

var f = new Function();
f.checkEmail();
1
2

这样做的坏处就是污染了原生对象Function

解决方法：

Function.prototype.addMethod = function (name, fn) {
  this[name] = fn;
};
1
2
3

如果你想添加邮箱验证和姓名验证放啊你可以这样做

var methods = function () {}; // 或者 var methods = new function(){}

methods.addMethod("checkName", function () {
  console.log("checkName");
  // 验证姓名
});
methods.addMethod("checkEmail", function () {
  console.log("checkEmail");
  // 验证邮箱
});
methods.checkName();
methods.checkEmail();
1
2
3
4
5
6
7
8
9
10
11
12

可以链式添加吗？

Function.prototype.addMethod = function (name, fn) {
  this[name] = fn;
  return this;
};
1
2
3
4

var methods = function () {}; // 或者 var methods = new function(){}

methods.addMethod("checkName", function () {
  console.log("checkName");
  // 验证姓名
  return this;
});
methods.addMethod("checkEmail", function () {
  console.log("checkEmail");
  // 验证邮箱
  return this;
});
methods.checkName().checkEmail();
1
2
3
4
5
6
7
8
9
10
11
12
13

换一种方式使用方法

Function.prototype.addMethod = function (name, fn) {
  this.prototype[name] = fn;
  return this;
};
var Methods = function () {};
Methods.addMethod("checkName", function () {
  console.log("checkName");
  // 验证姓名
}).addMethod("checkEmail", function () {
  console.log("checkEmail");
  // 验证邮箱
});
var m = new Methods();
m.checkEmail();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这里不能直接调用 要使用new关键词创建新对象

下章剧透

在欢乐的学习中小白的第一天工作结束了，兴奋、痴迷、感概。明天小白将去看看同事们丰富的编程世界。在那时小白将领略封装、继承的魅力

忆之获

小白工作第一天的故事结束，通过对小白与小铭对函数的多样化创建与使用，我们对JavaScript这门语言有了新的认识，“灵活性” 是这门语言特有的气质，不同的人可以写出不同风格的代码，这是JavaScript给予我们的财富，不过我们要在团队开发中慎重挥霍，尽量保证团队开发代码风格一致，这也是团队代码易开发、可维护以及代码规范的必要要求。

我问你答

真假对象中如何实现方法的链式调用呢？
试着定义一个可以为函数添加多个方法的addMethod方法
试着定义一个既可为函数原型添加方法又可为其自身添加方法的 addMethod 方法

（答案下期揭晓）
第二章 面向对象

你问我答

欢迎大家在评论区留下自己的疑问，博主会对其进行一一解答。

本章总结代码

var CheckObject = {
  checkName: function () {
    console.log("checkName");
    // 验证姓名
    return this;
  },
  checkEmail: function () {
    console.log("checkEmail");
    // 验证邮箱
    return this;
  },
  checkPassword: function () {
    console.log("checkPassword");
    // 验证密码
    return this;
  },
};
CheckObject.checkName().checkEmail().checkPassword();

var CheckObject = function () {};
CheckObject.prototype = {
  checkName: function () {
    console.log("checkName");
    // 验证姓名
  },
};

CheckObject.prototype.checkName();

var CheckObject = function () {};
CheckObject.prototype.checkName = function () {
  console.log("checkName");
  // 验证姓名
};
CheckObject.prototype.checkName();

var CheckObject = function () {
  return {
    checkName: function () {
      console.log("checkName");
      // 验证姓名
    },
  };
};
var a = new CheckObject();
a.checkName();

var CheckObject = function () {
  return {
    checkName: function () {
      console.log("checkName");
      // 验证姓名
    },
  };
};
var a = CheckObject();
a.checkName();

Function.prototype.addMethod = function (name, fn) {
  this.prototype[name] = fn;
  return this;
};
var Methods = function () {};
Methods.addMethod("checkName", function () {
  console.log("checkName");
  // 验证姓名
}).addMethod("checkEmail", function () {
  console.log("checkEmail");
  // 验证邮箱
});
var m = new Methods();
m.checkEmail();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73