Skip to content

Commit 3053e09

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
update
1 parent 80ddcf5 commit 3053e09

File tree

101 files changed

+1822
-29573
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+1822
-29573
lines changed

01-JS基础/05-框架封装/02-代码块.html renamed to 01-JS基础/05-框架封装/02-代码块与常量.html

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,26 @@
77
<body>
88
<script>
99
/*
10-
* 什么是代码块：
11-
* 代码块就是一对大括号。
12-
*
13-
* 如果把一对大括号赋值给其他变量，或者参与运算，那么大括号就变成了字面对象。
10+
* 代码块就是一对大括号
11+
* 如果把一对大括号赋值给其他变量，或者参与运算，那么大括号就变成了字面对象
1412
* */
15-
1613
{
1714
var a = 1;
1815
console.log(a);
1916
}
20-
2117
// 需要通过运算，把{}转换为字面量，才能调用方法
2218
console.log(({}).toString()); // '[object Object]'
2319

2420
// 错误，代码块不能调用方法
2521
// {}.toString();
2622

23+
/*
24+
* 在ES6之前，js并没有常量的概念，但是却融入了这种思想，
25+
* 只要一个值是常量，通常会把存储这个常量的变量字母全部大写，
26+
* 类似于构造函数首字母都大写
27+
* */
28+
console.log(Math.PI);
29+
2730
</script>
2831
</body>
2932
</html>

‎01-JS基础/05-框架封装/11-显示原型和隐式原型.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
/*
10+
* 在js中，有两个属性和原型对象相关：
11+
* 这两个属性，都指定原型对象，
12+
* 1、prototype ( 显示原型、原型属性 )
13+
* 2、__proto__ ( 隐式原型、原型对象 )
14+
* */
15+
16+
// 原型对象：就是实例继承的对象
17+
</script>
18+
</body>
19+
</html>

‎01-JS基础/05-框架封装/12-静态方法&实例方法.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,64 @@
77
<body>
88
<script>
99

10+
/*
11+
* 类：在ES6之前，通常把构造函数当做类
12+
* */
13+
function Person( name, age, MAX_AGE ) {
14+
/*
15+
* 通过this添加的实例成员添加到了实例上
16+
* */
17+
// 实例成员
18+
this.name = name;
19+
this.MAX_AGE = MAX_AGE;
20+
}
21+
Person.prototype = {
22+
constructor: Person,
23+
// 实例成员
24+
run: function( ) {
25+
// 为了减少冗余，复用静态方法
26+
Person.run( this.age );
27+
}
28+
}
29+
// 静态成员
30+
Person.MAX_AGE = 300;
31+
// 静态成员
32+
Person.say = function() {
33+
console.log( '说' );
34+
}
35+
// 静态方法
36+
Person.run = function( age ) {
37+
if ( age < 5 ) {
38+
console.log( '趴着跑' );
39+
}else if ( age >= 5 && age <= 16 ) {
40+
console.log( '跳着跑' );
41+
}else if ( age > 16 && age < 30 ) {
42+
console.log( '跑酷' );
43+
}else {
44+
console.log( '拄着拐杖跑' );
45+
}
46+
}
47+
// 创建一个实例
48+
var demo = new Person( 'csxiaoyao', 200 );
49+
console.log( demo.MAX_AGE ); // 200
50+
// 实例不能使用静态方法
51+
// demo.say();
52+
demo.run();
53+
console.log(Person.MAX_AGE); // 300
54+
// 静态方法必须要通过函数来使用
55+
person.say();
56+
// 构造函数不能使用实例方法
57+
58+
/*
59+
* 为什么都是实例方法复用静态方法：
60+
* 因为。静态方法服务的面更广，即可以服务实例，
61+
* 也可以服务其他的地方，所以实例方法可以复用静态方法( 即实例方法中可以使用静态方法解决问题 )。
62+
*
63+
* 而实例方法只服务于实例，没法服务与更多的地方，
64+
* 所以静态方法无法复用实例方法( 即静态方法中无法使用实例方法解决问题 )。
65+
*
66+
* */
67+
1068
// 【 详情见图 pic03 】
1169

1270
function jQuery() {

01-JS基础/05-框架封装/11-添加extend处理静态方法.html renamed to 01-JS基础/05-框架封装/13-添加extend处理静态方法.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,16 @@
2626
this[ key ] = obj[ key ];
2727
}
2828
}
29+
/*
30+
// 预期给Person构造函数添加静态成员
31+
Person.extend({
32+
33+
});
34+
// 预期给Person实例添加实例成员
35+
Person.prototype.extend({
36+
37+
});
38+
*/
2939

3040
// 给jQuery添加一些静态方法
3141
jQuery.extend({

01-JS基础/05-框架封装/13-修改ie8的apply问题.html renamed to 01-JS基础/05-框架封装/14-修改ie8的apply问题.html

File renamed without changes.

01-JS基础/05-框架封装/14-IE8兼容DOMContentLoaded事件.html renamed to 01-JS基础/05-框架封装/15-IE8兼容DOMContentLoaded事件.html

File renamed without changes.

‎01-JS基础/05-框架封装/17-each.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<script src="jquery-2.2.0.js"></script>
7+
</head>
8+
<body>
9+
<script>
10+
11+
var obj = { a: {val:1}, b: 222, c: 333, d: 444 };
12+
var arr = [ 'aaa', 'bbb', 'ccc', 'dddd' ];
13+
/*
14+
* jQ的each方法，变量对象或者数组时，
15+
* 下标和值传入回调的顺序和数组的forEach相反。
16+
* */
17+
// 这是数组的forEach
18+
arr.forEach( function( val, index ) {
19+
console.log( val, index );
20+
});
21+
22+
23+
function each( obj, fn ) {
24+
/*
25+
* 1、先判断obj是不是伪数组
26+
* 2、如果是，则通过i的方式遍历对象
27+
* 3、如果不是，则通过for in的方式遍历这个对象
28+
* 4、在遍历的过程中，把每一次遍历到key和val分别传给回调。
29+
* */
30+
// likeArray
31+
if( 'length' in obj ) {
32+
33+
for ( var i = 0, len = obj.length; i < len; i++ ) {
34+
// fn( i, obj[ i ] );
35+
36+
// 指定fn执行时，this指向val
37+
// fn.call( obj[ i ], i, obj[ i ] );
38+
39+
// 添加中断，如果fn的返回值为false则break，跳出循环
40+
if ( fn.call( obj[ i ], i, obj[ i ] ) === false ){
41+
break;
42+
}
43+
}
44+
45+
}else {
46+
47+
for ( var key in obj ) {
48+
// fn( key, obj[ key ] );
49+
50+
// 指定fn执行时，this指向val
51+
// fn.call( obj[ key ], key, obj[ key ] );
52+
53+
// 添加中断，如果fn的返回值为false则break，跳出循环
54+
if ( fn.call( obj[ key ], key, obj[ key ] ) === false ) {
55+
break;
56+
}
57+
}
58+
59+
}
60+
}
61+
62+
each( obj, function( key, val ) {
63+
console.log( key, val );
64+
} );
65+
66+
each( arr, function( index, val ) {
67+
console.log( index, val );
68+
} );
69+
70+
/**
71+
* this 的运用
72+
*/
73+
each( obj, function( key, val ) {
74+
console.log( key, val, this );
75+
} );
76+
77+
/**
78+
* 中断的实现
79+
*/
80+
each( obj, function( key, val ) {
81+
// 当 val 为 333 时，中断
82+
if ( val == 333 ) {
83+
return false;
84+
}
85+
console.log( key, val );
86+
} );
87+
88+
89+
/**
90+
* 融合
91+
*/
92+
(function( w ) {
93+
94+
jQuery.fn = jQuery.prototype = {
95+
// 遍历实例
96+
each: function( fn ) {
97+
return jQuery.each( this, fn );
98+
}
99+
}
100+
101+
// 给jQuery添加一些静态方法
102+
jQuery.extend({
103+
// 遍历对象或类数组
104+
each: function( obj, fn ) {
105+
var i, len, key;
106+
107+
if ( jQuery.isLikeArray( obj ) ) {
108+
for ( i = 0, len = obj.length; i < len; i++ ) {
109+
if ( fn.call( obj[ i ], i, obj[ i ] ) === false ) {
110+
break;
111+
}
112+
}
113+
}else {
114+
for ( key in obj ) {
115+
if ( fn.call( obj[ key ], key, obj[ key ] ) === false ) {
116+
break;
117+
}
118+
}
119+
}
120+
return obj;
121+
}
122+
});
123+
124+
}( window ));
125+
126+
var result = $('a').each(function (index, a) {
127+
console.log(index, a, this);
128+
});
129+
130+
</script>
131+
</body>
132+
</html>

01-JS基础/05-框架封装/2/12map.html renamed to 01-JS基础/05-框架封装/18-map.html

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,29 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Title</title>
6-
<script src="jquery-2.2.0.js"></script>
76
</head>
87
<body>
9-
<script>
8+
<script>
109

11-
var obj = { a: 111, b: 222, c: 333, d: 444 };
12-
var arr = [ 'aaa', 'bbb', 'ccc', 'dddd' ];
10+
// each返回的是原来的数组，并不会新创建一个数组
11+
// map方法会返回一个新的数组
12+
(function( w ) {
1313

14+
jQuery.fn = jQuery.prototype = {
15+
// 通过实例得到一个新数组
16+
map: function( fn ) {
17+
return jQuery.map( this, fn );
18+
}
19+
}
1420

15-
/*
16-
* jQ的map方法，用来遍历对象或者数组，
17-
* 然后把遍历到了val和key值传给回调，
18-
* 最后收集回调的返回值，构成新数组返回。
19-
* */
20-
21-
/*console.log($.map(obj, function (val, key) {
22-
console.log(val, key, this);
23-
return val;
24-
}));*/
25-
21+
// 给jQuery添加一些静态方法
22+
jQuery.extend({
2623

2724
// map实现
28-
function map( obj, fn ) {
25+
map: function( obj, fn ) {
2926

3027
/*
31-
* 1、先判断obj是不是数组或者伪数组，
28+
* 1、先判断obj是不是伪数组，
3229
* 2、如果是，则通过i的方式遍历这个对象
3330
* 3、如果不是，则通过for in的方式遍历这个对象
3431
* 4、在遍历的过程中，把每一次遍历到key和val分别传给回调。
@@ -49,11 +46,25 @@
4946
return result;
5047
}
5148

52-
console.log(map(obj, function (val, key) {
53-
console.log(val, key, this);
54-
// return val / 100;
55-
}));
49+
});
50+
51+
}( window ));
52+
53+
// map
54+
var result = $('a').map(function() {
55+
// 这里的this指向遍历到的每一个a
56+
return this.innerHTML;
57+
});
58+
59+
console.log( $.map( $('a'), function () {
60+
return this.innerHTML;
61+
}));
5662

57-
</script>
63+
</script>
64+
<div>
65+
<a>11</a>
66+
<a>22</a>
67+
<a>33</a>
68+
</div>
5869
</body>
5970
</html>

0 commit comments

Comments
 (0)