Skip to content

Commit c4f32f7

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
多处更新
1 parent 27a75e3 commit c4f32f7

10 files changed

+247
-150
lines changed

‎1 基础语法/04-数据类型.html

-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@
6161
console.log(undefined+10);//NaN
6262
console.log(null+10);//10
6363

64-
6564
console.log(typeof(null));//object （null->object）
6665
console.log(typeof(Function));//function
6766
console.log(typeof(Boolean));//function

‎1 基础语法/05-数据类型转换.html

+44-8
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,50 @@
66
</head>
77
<body>
88
<script>
9+
10+
// "=="引起的类型转换
11+
// 1. 存在 NaN 必为 false
12+
// 2. 【null】 == 【undefined】 不转换，始终为 true
13+
// 3. 【null / undefined】 == 【其他非 null / undefined】 不转换，始终为 false
14+
// 4. 【原始类型 string / number / boolean】 == 【Date对象】 原始类型=>number，Date对象 --> toString() / valueOf()
15+
// 5. 【原始类型 string / number / boolean】 == 【非Date对象】 原始类型=>number，Date对象 --> valueOf() / toString()
16+
// 6. 【原始类型 string / number / boolean】 == 【原始类型 string / number / boolean】 原始类型 => number
17+
18+
console.log(NaN == NaN);//false
19+
console.log("sunshine" == NaN);//false 存在 NaN 必为 false
20+
console.log(1 == true);//true true => 1
21+
console.log(true == "sun");//false true => 1 "sun" => NaN
22+
23+
var a = [0];
24+
if(a){
25+
console.log(a == true);//false
26+
}else{
27+
console.log("sun");
28+
}
29+
console.log(a.valueOf());//Array[1]…
30+
console.log(a.toString());//0
31+
32+
// => boolean
33+
console.log("------Boolean------");
34+
console.log(Boolean(0));//false
35+
console.log(Boolean(""));//false
36+
console.log(Boolean(null));//false
37+
console.log(Boolean(undefined));//false
38+
console.log(Boolean(NaN));//false
39+
console.log(Boolean());//false
40+
console.log(Boolean([]));//true
41+
console.log("------!!------");
42+
console.log(!!0);//false
43+
console.log(!!"");//false
44+
console.log(!!null);//false
45+
console.log(!!undefined);//false
46+
console.log(!!NaN);//false
47+
console.log(!![]);//true
48+
console.log(!!1);//true
49+
console.log(!!"abc");//true
50+
var date = new Date();
51+
console.log(!!date);//true
52+
953
//转换成字符串
1054
var bool = true;
1155
var num = 111;
@@ -41,14 +85,6 @@
4185
console.log(parseFloat(str2));
4286
console.log(Number(str3));
4387

44-
//布尔类型转换
45-
var date = new Date();
46-
console.log(Boolean(0));
47-
console.log(Boolean(""));
48-
console.log(Boolean(null));
49-
console.log(!!1);
50-
console.log(!!"abc");
51-
console.log(!!date);
5288

5389
</script>
5490
</body>

‎2 常用操作/06-编码.html

+30-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,36 @@
77
<body>
88

99
<script>
10-
//数据传递常需要编码后传递，接收还需反编译
11-
var url = "http://www.csxiaoyao.com?username='CS逍遥剑仙'&password='19931128'";
12-
console.log(encodeURIComponent(url));// 编码 http%3A%2F%2Fwww.csxiaoyao.com%3Fusername%3D'CS%E9%80%8D%E9%81%A5%E5%89%91%E4%BB%99'%26password%3D'19931128'
13-
console.log(decodeURIComponent(encodeURIComponent(url)));// 解码 http://www.csxiaoyao.com?username='CS逍遥剑仙'&password='19931128'
14-
10+
// 数据传递常需要编码后传递，接收还需反编译，推荐使用encodeURIComponent
11+
var url = "http://www.csxiaoyao.com?username='CS逍遥剑仙'&password='19931128'";
12+
13+
// 【escape & unescape】
14+
console.log(escape(url));// 编码 http%3A//www.csxiaoyao.com%3Fusername%3D%27CS%u900D%u9065%u5251%u4ED9%27%26password%3D%2719931128%27
15+
console.log(unescape(escape(url)));// 解码 http://www.csxiaoyao.com?username='CS逍遥剑仙'&password='19931128'
16+
17+
// 【encodeURIComponent & decodeURIComponent】【推荐】
18+
console.log(encodeURIComponent(url));// 编码 http%3A%2F%2Fwww.csxiaoyao.com%3Fusername%3D'CS%E9%80%8D%E9%81%A5%E5%89%91%E4%BB%99'%26password%3D'19931128'
19+
console.log(decodeURIComponent(encodeURIComponent(url)));// 解码 http://www.csxiaoyao.com?username='CS逍遥剑仙'&password='19931128'
20+
21+
// 【encodeURI & decodeURI】
22+
console.log(encodeURI(url));// 编码 http://www.csxiaoyao.com?username='CS%E9%80%8D%E9%81%A5%E5%89%91%E4%BB%99'&password='19931128'
23+
console.log(decodeURI(encodeURI(url)));// 解码 http://www.csxiaoyao.com?username='CS逍遥剑仙'&password='19931128'
24+
25+
// 【区别】
26+
// 三种方法都不会对 ASCII 字母、数字和规定的特殊 ASCII 标点符号进行编码，其余都替换为十六进制转义序列
27+
// 【escape & unescape】
28+
// escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z
29+
// 对字符串全部进行转义编码，ECMAScript v3 反对使用该方法，对URL编码勿使用此方法
30+
// 【encodeURIComponent & decodeURIComponent】
31+
// encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z
32+
// 传递参数时需使用encodeURIComponent，组合的url才不会被#等特殊字符截断
33+
// 【encodeURI & decodeURI】
34+
// encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
35+
// 进行url跳转时可以整体使用encodeURI，如果URI中含分隔符如 ? 和 #，应使用encodeURIComponent
36+
37+
// 【结论】
38+
// 推荐使用encodeURIComponent
39+
1540
</script>
1641
</body>
1742
</html>

‎2 常用操作/09-事件.html

+1
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
// window.onresize 浏览器大小变化
6969
// window.onload 页面加载完毕
7070
// div.onmousemove 鼠标在盒子上移动,不是盒子移动
71+
// oncontextmenu <body oncontextmenu="return false">取消右键菜单
7172

7273
//4.【onload事件】
7374
//js和html同步加载（如果使用元素在定义元素之间，容易报错）

‎2 常用操作/13-CSS属性操作.html

+1-4
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,6 @@
3232
div.style.backgroundColor = "orange";
3333
div.style.fontSize ="24px";
3434
div.style.textDecoration = "line-through";
35-
3635

3736
</script>
38-
</html>
39-
40-
37+
</html>

‎5 进阶/02-JavaScript数据类型.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
String
2020
Symbol (ECMAScript6新定义) 可以用来作为Object的key的值，也可以认为它是C里面的枚举类型
2121
1种复杂数据类型（引用类型）
22-
Object
23-
Array Date RegExp String Number Boolean Math (null)
22+
Object 基础对象
23+
Array Date RegExp String Number Boolean Math Arguments(函数参数集合) Error(异常对象) Function(函数构造器) (null)(不完全算对象)
2424

2525
typeof 返回类型小写(number string boolean undefined object function)
2626
typeof返回值为string类型，引用类型中，除function的对象都是object类型

‎7 设计模式/3/3.1.html renamed to ‎7 设计模式/3.1 闭包和高阶函数1.html

File renamed without changes.

‎7 设计模式/3/3.2.html renamed to ‎7 设计模式/3.2 闭包和高阶函数2.html

File renamed without changes.

‎7 设计模式/4.1 单例模式1.html

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
</head>
7+
<body>
8+
<div></div>
9+
10+
<script type="text/javascript">
11+
var Singleton = function( name ){
12+
this.name = name;
13+
this.instance = null;
14+
};
15+
Singleton.prototype.getName = function(){
16+
alert ( this.name );
17+
};
18+
Singleton.getInstance = function( name ){
19+
if ( !this.instance ){
20+
this.instance = new Singleton( name );
21+
}
22+
return this.instance;
23+
};
24+
var a = Singleton.getInstance( 'sven1' );
25+
var b = Singleton.getInstance( 'sven2' );
26+
// alert ( a === b ); // true
27+
// a.getName(); // sven1
28+
// b.getName(); // sven1
29+
30+
//或者：
31+
var Singleton = function( name ){
32+
this.name = name;
33+
};
34+
Singleton.prototype.getName = function(){
35+
alert ( this.name );
36+
};
37+
Singleton.getInstance = (function(){
38+
var instance = null;
39+
return function( name ){
40+
if ( !instance ){
41+
instance = new Singleton( name );
42+
}
43+
return instance;
44+
}
45+
})();
46+
var a = Singleton.getInstance( 'sven1' );
47+
var b = Singleton.getInstance( 'sven2' );
48+
// alert ( a === b ); // true
49+
// a.getName(); // sven1
50+
// b.getName(); // sven1
51+
52+
/**
53+
* 透明的单例模式
54+
*/
55+
var CreateDiv = (function(){
56+
var instance;
57+
var CreateDiv = function( html ){
58+
if ( instance ){
59+
return instance;
60+
}
61+
this.html = html;
62+
this.init();
63+
return instance = this;
64+
};
65+
CreateDiv.prototype.init = function(){
66+
var div = document.createElement( 'div' );
67+
div.innerHTML = this.html;
68+
document.body.appendChild( div );
69+
};
70+
return CreateDiv;
71+
})();
72+
// var a = new CreateDiv( 'sven1' );
73+
// var b = new CreateDiv( 'sven2' );
74+
// alert ( a === b ); // true
75+
76+
77+
/**
78+
* 代理实现单例模式
79+
*/
80+
var CreateDiv = function( html ){
81+
this.html = html;
82+
83+
this.init();
84+
};
85+
CreateDiv.prototype.init = function(){
86+
var div = document.createElement( 'div' );
87+
div.innerHTML = this.html;
88+
document.body.appendChild( div );
89+
};
90+
// 对代理类使用闭包，保证唯一instance
91+
var ProxySingletonCreateDiv = (function(){
92+
var instance;
93+
return function( html ){
94+
if ( !instance ){
95+
instance = new CreateDiv( html );
96+
}
97+
return instance;
98+
}
99+
})();
100+
var a = new ProxySingletonCreateDiv( 'sven1' );
101+
var b = new ProxySingletonCreateDiv( 'sven2' );
102+
alert ( a === b );
103+
104+
/**
105+
* 减少全局变量污染方法1
106+
* 使用命名空间
107+
*/
108+
var MyApp = {};
109+
MyApp.namespace = function( name ){
110+
var parts = name.split( '.' );
111+
var current = MyApp;
112+
for ( var i in parts ){
113+
if ( !current[ parts[ i ] ] ){
114+
current[ parts[ i ] ] = {};
115+
}
116+
current = current[ parts[ i ] ];
117+
118+
}
119+
};
120+
MyApp.namespace( 'event' );
121+
MyApp.namespace( 'dom.style' );
122+
console.dir( MyApp );
123+
// 上述代码等价于：
124+
var MyApp = {
125+
event: {},
126+
dom: {
127+
style: {}
128+
}
129+
};
130+
131+
/**
132+
* 减少全局变量污染方法1
133+
* 闭包封装私有变量
134+
*/
135+
var user = (function(){
136+
var __name = 'sven',
137+
__age = 29;
138+
return {
139+
getUserInfo: function(){
140+
return __name + '-' + __age;
141+
}
142+
}
143+
})();
144+
145+
Singleton.getInstance = (function(){
146+
var instance = null;
147+
return function( name ){
148+
if ( !instance ){
149+
instance = new Singleton( name );
150+
}
151+
return instance;
152+
}
153+
})();
154+
155+
</script>
156+
</body>
157+
</html>

0 commit comments

Comments
 (0)