一、 框架结构 ==> 难点
- 1 jQuery对象的本质
- 2 框架核心结构
- 3 入口函数(构造函数)
1、jQuery的本质
jquery对外暴露了两个方法：jQuery和$,
这两方法实际上是同一个方法，
通过调用这两个方法，可以得到一个jQuery实例对象。
- jQuery 实例对象是一个伪数组对象
- jQuery和$实际上是一个工厂函数
- 工厂函数直接调用，就可以得到一个实例
2、jQuery的基本结构
2.2.0版本
(function(w,factory){
console.log('对模块做了支持');
factory();
}(window,function(){
return jQuery;
}));
1.7版本
(function(w){
// 对外暴露的工厂函数
function jQuery(){
return new jQuery.fn.init();
}
//给原型提供一个简写的方法
jQuery.fn = jQuery.prototype ={
};
// init是jQuery中真正的构造函数
var init = jQuery.fn.init = function(){
};
// 替换构造函数的原型为jQuery工厂的原型
init.prototype = jQuery.fn;
// 把工厂通过两个变量暴露出来
w.jQuery = w.$ = jQuery;
}(window));
3、jQuery插件实现机制
jQuery.fn.alert = function(msg){
alert(msg);
};
在fn上添加
4、入口函数init
通过$工厂，最终到达了init构造函数这里，所有的初始化实例过程都在这里实现，所以把这里称之为入口函数
5、入口函数实现思路
==jq入口对不同参数处理的规律：==
- 传入null、undefined、0、NaN、''返回空对象( 即空实例 )
- 传入字符串，那么需要判断是html片段 还是 其它，
- 如果是片段，则创建对应的DOM，然后添加到实例身上；
- 否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上。
- 如果是数组或许伪数组，那么把每一项分别添加到实例身上。
- 除了上面的数据类型，剩余的，统一添加到实例身上。
==入口函数实现逻辑：==
funciton init(selector){
//传入的null、undefined、0、NaN、'' 返回空对象（即空实例）
if(!selector){
return this;
}
//传入的字符串，那么需要判断是html片段还是其他
else if(typeof selector == 'string'){
//如果是片段，则创建对应的DOM，然后添加到实例身上。如果字符串的第一个字母是<,最后一个字母是>,并且length>=3,就可以认为是html片段
if(是html片段){
/*
1、先创建一个临时的div容器
2、设置这个div的innerHTML为html片段
3、然后遍历div的子元素分别添加到this身上，记住给实例补充length属性值
4、可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程
*/
}
// 否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上
else {
/*
* 实现的思路：
* 1、使用querySelectorAll获取页面中的元素
* 2、然后遍历获取到所有元素分别添加this身上，记住给实例补充length属性值，
* 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。
* */
}
}
/*
* 判断是不是真假数组的思路：
* 1、先把函数和window排除掉，
* 2、然后通过toString来判断是不是真数组
* 3、否则再判断是不是伪数组
* 备注：下面的判断只用来判断是不是伪数组，不要用下面的判断条件判断真数组，
* 例如：[ 0:1, , , ] 使用下面的判断，就会得到false，造成真数组的误判。
* 3.1、 先看看这个对象有没有length属性，
* 3.2、 如果有，看看length的值是不是为0，如果为0，OK是伪数组，
* 3.3、 如果length的值不为0，看看这个数据有没有 length - 1这个属性，如果有，OK是伪数组。
* 建议把这个是否是真假数组的判断封装为一个函数，在这里调用。
* */
else if ( ) {
/*
* 实现的思路：
* 把真或伪数组中的每一项分别添加到实例身上，记住给实例补充length属性值，
* 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。
* */
}else {
/*
* 实现的思路：
* 把这个参数直接添加到实例身子，length为1即可。
* */
}
}
6、代码块
代码块：一对大括号
如果把一对大括号赋值给其他变量，或者参与运算，那么大括号就变
成了字面量
例如：
({}).toString() 正确
{}.toString(); 错误
7、window的length属性代表页面中iframe的数量
window有一个window属性，指向自己
8、封装数组的trim方法
function trim(str){
if(typeof str!== 'string'){
return str;
}
if(str.trim){
return str.trim();
}
return str.replace(/^\s+|\s+$/g,'');
}
第二天 核心方法 ==> 中等
- 1 入口函数对函数的处理
- 2 原型上的核心方法
- 3 map与each
1、静态和实例方法的区别
- 静态方法
jQuery.extend({
isFunction: function( fn ) {
return typeof fn === 'function';
}
});
- 实例方法
jQuery.prototype.extend({
alert: function( msg ) {
alert( msg );
}
});
- 静态方法的使用
jQuery.isFunction([])
- 实例方法的使用
var $$ = new jQuery();
$$.alert( '实例调用' );
==构造函数不能使用自己原型中方法( Function例外 )==
==实例不能直接使用构造函数身上的静态方法==
2、IE8中apply有问题
apply方法可以该改变this指向，同时可以把数组或伪数组平铺传入给函数，
但是IE8，apply只能平铺真数组或者内置的伪数组，我们自定义的伪数组会报错。
IE8中需要先把自定义伪数组转换为真数组，才能借用apply。
借用数组的slice方法，通过一个伪数组得到一个真数组
//先把伪数组截取为真数组
[].splce.call(伪数组)
//实现需求
[].push.apply(空对象，[].splice.call(伪数组));
3、入口函数
为了防止获取不到页面的元素，所以要把函数传入到jQuery，
然后在这个回调函数中编写代码。这个回调函数会在页面DOM解析完毕之后执行。
$(function(){
//逻辑代码
})
- html5新增了一个DOMContentLoaded事件，兼容IE9，
- 这个事件会在DOM解析完毕后触发，
- 通常这个事件要比onload快很多，
- 但是也有很少的例外。
- ==备注==：如果发生了例外，DOMContentLoaded事件和onload事件触发的间隔时间相差不会很大，
- 所以可以认为DOMContentLoaded 比 onload要快，只监听DOMContentLoaded即可。
==IE9+==
document.addEventListener( 'DOMContentLoaded', function() {
var spans = document.querySelectorAll( 'span' );
console.log( spans, 'DOMContentLoaded');
} );
==IE8兼容==
document.attachEvent( 'onreadystatechange', function() {
if ( document.readyState === 'complete' ) {
/*var spans = document.querySelectorAll( 'span' );
console.log( spans, 'DOMContentLoaded');*/
/*逻辑代码*/
}
4、jQ原型核心方法
- 1、jquery 获取版本号
- 2、selector 代表所有实例默认的选择器，也代表实例是一个jQuery类型的对象
- 3、length 代表所有实例默认的长度
- 4、toArray 把实例转换为数组返回
- 5、get 获取指定下标的元素，获取的是原生DOM
- 6、each 遍历实例，把遍历到的数据分别传给回调使用
- 7、map 遍历实例，把遍历到的数据分别传给回调使用，然后把回调的返回值收集起来组成一个数组返回
- 8、slice 截取实例的部分元素，构成一个新的jQuery实例返回。
- 9、first 获取实例中的第一个元素，是jQuery类型的实例对象。
- 10、last 获取实例中的最后一个元素，是jQuery类型的实例对象。
- 11、eq 获取指定下标的元素，获取的是jQuery类型的实例对象。
- 12、push 给实例添加新元素
- 13、sort 对实例中的元素进行排序
- 14、splice 按照指定下标指定数量删除元素，也可以替换删除的元素。
5.each方法
function each(obj,fn){
var i,len,key;
if('length' in obj){
for(i = 0,len=obj.length;i<len;i++){
//修改this指向为value，并添加中断
if(fn.call(obj[i],i,obj[i]==false)){
break;
}
}
}else{
for(key in obj){
if(fn.call(obj[key],key,obj[key])==false){
break;
}
}
}
}
each( obj, function( key, val ) {
// 当得到val为222这个的属性时，就不用再遍历之后的属性了
if ( val == 333 ) {
return false;
}
console.log( key, val );
} );
6、map实现
function map( obj, fn ) {
/*
* 1、先判断obj是不是数组或者伪数组，
* 2、如果是，则通过i的方式遍历这个对象
* 3、如果不是，则通过for in的方式遍历这个对象
* 4、在遍历的过程中，把每一次遍历到key和val分别传给回调。
* 5、在给回调传参的时候，需要收集回调的返回值，最后把所有的返回值构成新数组返回。
* */
var i, len, key, result = [];
if( 'length' in obj ) {
for ( i = 0, len = obj.length; i < len; i++ ) {
result.push( fn.call( obj[ i ], obj[ i ], i ) );
}
}else {
for ( key in obj ) {
result.push( fn.call( obj[ key ], obj[ key ], key ) );
}
}
return result;
}
console.log(map(obj, function (val, key) {
console.log(val, key, this);
}));
第三天 DOM操作 ==> 中等
- 1 创建DOM
- 2 删除DOM
- 3 追加DOM
第四天 属性样式操作 ==> 简单
- 1 class属性操作
- 2 公共属性操作
- 3 样式操作
第五天 事件 ==> 难点
- 1 事件绑定
- 2 事件解除
第六天 ajax和插件 ==> 难点
- 1 ajax
- 2 插件实现原理
- 3 折线图饼图做成框架插件
- 4 刮刮乐插件
网友评论