js-base/programming.html at master · xiaoyiaishide/js-base · GitHub

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
	<title>编程实战</title>
</head>
<body>
	<p>
		UI层的松耦合：WEB UI分层，将JavaScript从css中从抽离（避免使用CSS表达式）。
								  将css从JavaScript中抽离（可以通过在JavaScript中操作CSS的className来达到修改样式的目的）。
								  将JavaScript从HTML中抽离。
								  将HTML从JavaScript中抽离：服务端加载，简单的客户端模板，复杂的客户端模板。

		避免使用全局变量：全局变量带来的问题：命名冲突，代码的脆弱性，难以测试。
						  意外的全局变量：避免省略使用var关键字，避免意外的全局变量，如果可以使用严格模式。
						  单全局变量方式：命名空间，模块化。
						  零全局变量。

		事件处理：隔离应用逻辑。
				  不要分发事件对象:
				  <script type="text/javascript">
				  	//好的例子
				  	var MyApplication = {
				  		handleClick: function(event){
				  			event.preventDefault();
				  			event.stopPropagation();

				  			//传入应用逻辑
				  			this.showPopup(event.clientX, event.clientY);
				  		},
				  		showPopup:function(x, y) {
				  			var popup = document.geyElementById('popup');
				  			popup.style.left = x + 'px';
				  			popup.style.top = y + 'px';
				  			popup.className = "reveal";
				  		}
				  	};

				  	addListener(element, "click", function(event) {
				  		MyApplication.handleClick(event);
				  	})
				  </script>
		避免空比较：检测基本数据类型：typeof 'abc'//string
									  typeof 123//number
									  typeof true//boolean
									  typeof undefined//undefined
									  typeof null//object(一般不用于检测语句)
					检测引用类型：instanceof：Date,Error,RegExp,自定义引用类型。
											  检测引用类型的最好方法就是instanceof运算符。
											  instanceof运算符不仅检测这个对象的构造器，还检测原型链。
											  默认情况下，每个对象都继承自Object，因此每个对象的'value instanceof Object'都会返回true。
											  因此使用'value instanceof Object'来判断对象是否属于某个特定类型的做法并非最佳。
					检测函数：检测函数的最好办法typeof方法
					检测数组：Array.isArray()
					检测属性：判断属性是否存在的最好的方法是使用in运算符
							  判断实例属性也可以用hasOwnProperty()

		将配置数据从代码中抽离出来：配置数据：URI,需要展示给用户的字符串,重复的值,配置项,任何可能发生变更的值
									抽离配置数据
									保存配置数据

		抛出自定义错误：错误的本质：抛出错误的本质是为了调试方便
						在JavaScript中抛出错误：throw new Error("something bad hanppen")
						抛出错误的好处：便于调试。
										一旦修复了一个很难调试的错误，尝试增加一两个自定义的错误。当再次发生错误时，这将有助于更容易的解决问题。
										如果正在编写代码，思考一下：我希望某些事情不会发生，如果发生，我的代码会一团糟。这时，如果某些事情发生，就会抛出一个错误。
										如果正在编写的代码别人也会使用，思考一下他们使用的方式，在特定情况下抛出的错误。
						try-catch语句：使用throw还是try-catch
									   不要将try-catch中的catch留空
						错误类型：Eroor：所有错误的基本类型。
								  EvalError：通过eval()函数执行代码发生错误时抛出。
								  RangeError：一个数字超过它的边界时抛出，非常罕见的错误。
								  ReferenceError：期望的对象不存在时抛出。
								  SyntaxError：有语法错误时抛出。
								  TypeError：变量不是期望的类型时抛出。
								  URIError：通过encodeURI(),encodeURIComponent(),decodeURI(),decodeURIComponent()等函数传递格式非法的URI字符串时抛出。

		不是你的对象不要动：什么是你的：在一个多人开发的项目中，每个人都假设库对象会按照他们的文档中描述的一样正常的工作。如果你修改了其中的对象，将会给自己的团队设置一个陷阱。原生对象，DOM对象，BOM对象，类库对象。
							原则：不要覆盖方法。
								  不要新增方法，避免命名冲突，一个对象此刻没有某个方法不代表它未来也没有。
								  不要删除方法。
							更好的途径：基于对象的继承（原型继承），基于类型的继承，门面模式
							关于polyfill的注解
							组织修改：防止扩展：禁止为对象添加属性和方法，但已存在的方法和属性是可以被修改和删除的
									  密封：类似"防止扩展"，但是禁止"删除"对象已存在的属性和方法
									  冻结：类似"密封"，但是禁止"修改"对象已经存在的属性和方法

		浏览器嗅探：User-Agent检测：只针对旧的或者特定版本的浏器，绝不应当针对最新版本或者未来版本的浏览器。
					特性检测：纯粹的特性检测是一种很好的办法。
					避免特性推断，避免浏览器推断！

	</p>
</body>
</html>