Skip to content

Commit 8c5c083

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
framework
1 parent 9d63825 commit 8c5c083

44 files changed

Lines changed: 1178 additions & 12502 deletions

Some content is hidden

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

‎01-JS基础/05-框架封装/01-jQuery的本质.html‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,29 @@
66
<script src="jquery-2.2.0.js"></script>
77
</head>
88
<body>
9-
<script>
10-
/*
11-
* jquery对外暴露了两个方法：jQuery和$,
12-
* 这两方法实际上是同一个方法，
13-
* 通过调用这两个方法，可以得到一个jQuery实例对象。
14-
*
15-
* jQuery实例对象是一个伪数组对象。
16-
*
17-
* jQuery和$实际上是一个工厂函数。
18-
* */
9+
<script>
10+
/*
11+
* jquery对外暴露了两个方法：jQuery和$,
12+
* 这两方法实际上是同一个方法，
13+
* 通过调用这两个方法，可以得到一个jQuery实例对象。
14+
*
15+
* jQuery实例对象是一个伪数组对象。
16+
*
17+
* jQuery和$实际上是一个工厂函数。
18+
* */
1919

20-
// 工厂函数直接调用，就可以得到一个实例
21-
var $div = $('<div></div>');
22-
var jQueryDiv = jQuery('<div></div>');
20+
// 工厂函数直接调用，就可以得到一个实例
21+
var $div = $('<div></div>');
22+
var jQueryDiv = jQuery('<div></div>');
23+
24+
// 验证实例是伪装组
25+
console.log(({}).toString.call($div));
26+
27+
</script>
28+
<div>
29+
<span>123</span>
30+
<span>456</span>
31+
</div>
2332

24-
// 验证实例是伪装组
25-
console.log(({}).toString.call($div));
26-
</script>
2733
</body>
2834
</html>

01-JS基础/05-框架封装/1/05jQ入口函数.html renamed to 01-JS基础/05-框架封装/04-jQuery整体结构.html

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,16 @@
66
</head>
77
<body>
88
<script>
9-
10-
// 咱们的自调结构，沿用了1.7的版本
9+
// 2.2.0的自调结构
10+
/*
11+
(function( w, factory ){
12+
console.log('对模块化做了支持');
13+
factory();
14+
}( window, function() {
15+
return jQuery;
16+
}));*/
17+
18+
// 自调结构，沿用了1.7的版本
1119
(function( w ) {
1220

1321
// 对外暴露的工厂函数
@@ -20,7 +28,7 @@
2028
constrcutor: jQuery
2129
};
2230

23-
// init是jQuery中真正的构造函数 ==> 入口函数
31+
// init是jQuery中真正的构造函数
2432
var init = jQuery.fn.init = function() {
2533

2634
};

01-JS基础/05-框架封装/1/06iframe.html renamed to 01-JS基础/05-框架封装/05-使用iframe判断window.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,17 @@
1515
// window对象有一个特点，就是window有一个window属性，指向自己
1616
// 如果一个数据的window属性是自己，那么就认为它是window。
1717
console.log( obj.window === obj );
18+
19+
20+
// 判断是不是window
21+
init.isWindow = function (w) {
22+
23+
if (w.window == w) {
24+
return true;
25+
}
26+
27+
return false;
28+
}
1829
</script>
1930
</body>
2031
</html>

‎01-JS基础/05-框架封装/06-入口函数对参数处理.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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+
<div>
10+
<a class="a">1</a>
11+
<a class="a">2</a>
12+
<a class="a">3</a>
13+
<a class="a">4</a>
14+
</div>
15+
<script>
16+
17+
/*
18+
* JQ入口函数根据不同参数创建实例的样式：
19+
20+
* 1、传入null、undefined、0、NaN、''返回空对象( 即空实例 )
21+
* 2、html片段，创建对应的DOM添加到实例上
22+
* 3、选择器，获取页面中的DOM添加到实例上
23+
* 4、数组，分拆添加到实例上
24+
* 5、伪数组，分拆添加到实例上
25+
* 6、对象
26+
* 7、其他基本数据类型
27+
* 8、DOM
28+
*
29+
30+
// 统一返回空的实例
31+
console.log($());
32+
console.log($(null));
33+
console.log($(undefined));
34+
console.log($(0));
35+
console.log($(NaN));
36+
console.log($(''));
37+
38+
*/
39+
40+
41+
// 判断是不是函数
42+
init.isFunction = function (fn) {
43+
44+
if (typeof fn == 'function') {
45+
return true;
46+
}
47+
48+
return false;
49+
}
50+
51+
function init( selector ) {
52+
53+
// 传入null、undefined、0、NaN、''返回空对象( 即空实例 )
54+
if ( !selector ) {
55+
return this;
56+
}
57+
58+
// 传入字符串，那么需要判断是html片段 还是 其它
59+
else if ( typeof selector == 'string' ) {
60+
61+
// 如果是片段，则创建对应的DOM，然后添加到实例身上，
62+
// 如果字符串的第一个字母是<,最后一个字母是>,并且length >= 3,就可以认为是html片段。
63+
if ( init.isHTML(selector) ) {
64+
65+
}
66+
67+
// 否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上
68+
else {
69+
70+
}
71+
72+
}
73+
74+
// 判断是伪数组
75+
else if ( init.isLikeArray(selector) ) {
76+
77+
}
78+
79+
else {
80+
81+
}
82+
83+
}
84+
85+
</script>
86+
</body>
87+
</html>

‎01-JS基础/05-框架封装/07-参数处理-字符串判断.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<div>
9+
<a class="a">1</a>
10+
<a class="a">2</a>
11+
<a class="a">3</a>
12+
<a class="a">4</a>
13+
</div>
14+
<script>
15+
/*
16+
* 传入字符串
17+
* 1、HTML片段，创建对应的DOM添加到实例上
18+
* 2、选择器，获取页面中的DOM添加到实例上
19+
* */
20+
21+
// 判断是不是html片段
22+
init.isHTML = function (html) {
23+
24+
// 如果是空类型的，直接返回false
25+
if (!html) {
26+
return false;
27+
}
28+
29+
// 如果字符串的第一个字母是<,最后一个字母是>,并且length >= 3,就可以认为是html片段。
30+
if (html.charAt(0) == '<' && html.charAt(html.length - 1) == '>' && html.length >= 3) {
31+
return true;
32+
}
33+
34+
return false;
35+
};
36+
37+
// 传入字符串，那么需要判断是html片段 还是 其它
38+
if ( typeof selector == 'string' ) {
39+
// 如果字符串的第一个字母是<,最后一个字母是>,并且length >= 3,就可以认为是html片段。
40+
if ( init.isHTML( selector ) ) {
41+
/*
42+
* 创建的思路：
43+
* 1、先创建一个临时的div容器
44+
* 2、设置这个div的innerHTML为html片段，这些片段就自动转变为了div的子元素，
45+
* 3、遍历div的子元素分别添加this身上，记住给实例补充length属性值，
46+
* 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。
47+
* */
48+
var tempDiv = document.createElement('div');
49+
tempDiv.innerHTML = selector;
50+
[].push.apply( this, tempDiv.childNodes );
51+
return this;
52+
}
53+
// 否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上
54+
else {
55+
/*
56+
* 实现的思路：
57+
* 1、使用querySelectorAll获取页面中的元素
58+
* 2、然后遍历获取到所有元素分别添加this身上，记住给实例补充length属性值，
59+
* 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。
60+
* */
61+
try {
62+
var nodes = document.querySelectorAll( selector );
63+
[].push.apply( this, nodes );
64+
return this;
65+
}catch(e) {
66+
this.length = 0;
67+
return this;
68+
}
69+
}
70+
}
71+
72+
</script>
73+
</body>
74+
</html>

01-JS基础/05-框架封装/1/10trim方法.html renamed to 01-JS基础/05-框架封装/08-参数处理-trim.html

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,21 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Title</title>
6-
<script src="jquery-2.2.0.js"></script>
76
</head>
87
<body>
8+
<div>
9+
<a class="a">1</a>
10+
<a class="a">2</a>
11+
<a class="a">3</a>
12+
<a class="a">4</a>
13+
</div>
914
<script>
10-
/*
15+
/*
1116
* trim方法是ES5提供的字符串方法，用来去除字符串首尾空白字符，但是IE9+才能兼容。
1217
* */
1318

14-
function trim( str ) {
19+
// 去掉字符串首尾空白字符
20+
init.trim = function ( str ) {
1521

1622
// 不是字符串就不处理了
1723
if( typeof str !== 'string' ) {
@@ -26,6 +32,7 @@
2632
// 把首尾空白字符替换为空，然后返回
2733
return str.replace( /^\s+|\s+$/g, '' );
2834
}
35+
2936
</script>
3037
</body>
3138
</html>

‎01-JS基础/05-框架封装/09-参数处理-伪数组.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<div>
9+
<a class="a">1</a>
10+
<a class="a">2</a>
11+
<a class="a">3</a>
12+
<a class="a">4</a>
13+
</div>
14+
<script>
15+
16+
/*
17+
* 数组的分类：
18+
*
19+
* 【 真数组 】
20+
* 创建方式：new Array 或字面量形式 []
21+
* 1、稀疏数组：数组中，某些下标不存在，即为稀疏数组。
22+
* 2、非稀疏数组：数组中没有缺失任何值。
23+
*
24+
* 【 伪数组 】
25+
* 1、必须要有length属性
26+
* 2、如果length属性值为0，那么这个对象有没有元素无所谓
27+
* 3、如果length属性值不为0，那么这个对象一定有 (length - 1) 为下标的属性值
28+
* */
29+
30+
// 伪装组
31+
var obj = { length: 0 };
32+
var obj = { length: 4, 3: 'a' }; // 没有0，1，2可以认为0，1，2存的是undefined
33+
var obj = { length: 2, 0: 'a', 1: 'b' };
34+
35+
// 非伪数组，因为没有 9(length - 1) 这个属性
36+
var obj = { length: 10, 0: 'a', 1: 'b', 2: 'c', 3: 'd', 4: 'e', 5: 'f' };
37+
38+
// 借用数组的push方法给obj按照下标的方式添加属性值，并且会自动维护lenghth属性
39+
var obj = {};
40+
[].push.apply( obj, [ 1, 2, 3, 4 ] );
41+
console.log( obj );
42+
43+
// 借用数组的pop方法删除obj最后一个属性值
44+
[].pop.call( obj );
45+
console.log( obj );
46+
47+
// 判断是不是伪数组或真数组
48+
init.isLikeArray = function( arr ) {
49+
50+
// 过滤函数和window，以及非对象的其他数据
51+
if ( init.isFunction( arr ) || init.isWindow( arr ) || typeof arr !== 'object' ) {
52+
return false;
53+
}
54+
55+
// 判断是不是真数组
56+
if ( ({}).toString.call( arr ) == '[object Array]' ) {
57+
return true;
58+
}
59+
60+
// 判断是不是伪数组
61+
// arr必须有length，在这个基础上，要么length为0，要么有length - 1这个属性值
62+
if ( ('length' in arr) && ( (arr.length === 0) || (arr.length - 1 in arr) ) ) {
63+
return true;
64+
}
65+
66+
return false;
67+
};
68+
69+
</script>
70+
</body>
71+
</html>

0 commit comments

Comments
 (0)