1. 框架的课程安排
1> 整体介绍框架
2> 选择器模块
3> DOM 操作与框架结构(核心)
4> DOM 操作
5> 事件操作
6> 属性操作
7> 样式操作
jQuery.fn.extend()
jQuery.extend()
2. 前端的界限越来越模糊
3. 简要的分析一下 jq 的结构
// jq 1.7.1
(function ( window, undefined ) {
// 凡是调用全局的都是 window 下的东西,
// 所以为了减少作用域的搜索写在参数中.
// 如果不写在参数中, 那么表示在整个框架里, 都需要使用 window 这个名字
// 那么在投入生产环境中压缩代码就不能压缩 window
// 使用参数后, 函数内的 window 就是函数外的这个 window
// undefined
})( window );
// jq 3.1.0
( function ( global, factory ) {
// 代码
if ( module 存在 ) {
} else {
factory( golbal );
}
} )( window, function( a, b ) {
// 代码
// jq 的定义代码
});
// 拆开
var foo = function ( global, factory ) {
if ( typeof module ) {
// ...
} else {
factory( golbal );
}
};
var func = function ( a, b ) {
// jq 函数
};
foo( window, func );
4. jq 可以怎么使用
$(function () {
相当于 onload
})
$( document.body )
$( ‘<div>123</div>‘ )
$( ‘#id‘ ), $( ‘.c‘ ), $( ‘div‘ ), ...
$( $( ‘div‘ ) ) 与 $( ‘div‘ )
//将 刚刚创建的 div 加到 body
$( ‘<div>123</div>‘ ).appendTo( ‘body‘ )
var $body = $( ‘body‘ );
var $div = $( ‘<div></div>‘ );
$div.appendTo( $body )
$( .... ).get( 1 ) 等价于 $( ..... )[ 1 ]
$( .... ).get()
$( ... ).next().end()
// extend
for ( var k in obj ) {
this[ k ] = obj[ k ];
}
5. jq 的结构
核心模块
回调模块
浏览器能力检测模块
缓存, 属性, 队列
属性与样式操作
事件处理
选择器引擎
DOM 关系查找模块
DOM 操作模块
CSS 模块
ajax 模块
动画模块
兼容属性
6. 选择器模块
基本的面向对象的概念
案例: 页面中有两个 div, 和 两个 p. 要求设置他们的样式
7. 回调函数 callback function
之后才调用的函数
将一个函数传入到另一个函数中, 此时并没有调用函数, 而是在另一个函数中的某一个地方触发调用.
$.each( [ 1, 2, 3, 4 ], function ( v,i ) {} );
function f ( callback ) {
if ( typeof callback == ‘function‘ ) {
callback();
// otherFunc( callback );
}
}
f( function () { alert(123); } );
8. 可以发现系统使用 support.qsa 来实现浏览器的能力判断
support.qsa = rnative.test( document.querySelectorAll )
这里 rnative 就是
/function.*\(.*\).*\{ \[navive code/;
该正则用于匹配形如
‘function Array ( ) { [native code] }‘
为什么使用 support 对象, qsa 为什么使用 bool 值
if ( rnative.test( fn ) )
if ( supports.fn )
不要每次执行方法的时候 都去执行一次正则判断和字符串转换, 而是一开始的时候就应该将方法的能力
检测好, 存储与 support 中的一个属性. 而这个属性的命名一般与方法名同名
9. 自定义 select 方法的思路就有了
1> 定义一个 support 对象. 将需要使用的方法进行处理, 得到方法的能力
2> 需要使用的可能有兼容性的方法, 定义一个可以完成该方法的函数来替代. 在函数内部进行兼容处理
3> 定义 select 函数. 首先看是否支持 qsa, 如果支持直接使用. 如果不支持自己再来实现