分析一个类似于jquery的小框架 (2)
核心构造函数
(function ( window, undefined ) { // 定义Itcast构造函数
function Itcast ( selector ) {
return new Itcast.fn.init( selector );
}
Itcast.fn = Itcast.prototype = {
constructor: Itcast, type: 'Itcast', length: 0, // 核心模块内容
init: function ( selector ) {
// 假设 这里 的 init 就是 jq 的init, 因此可以考虑各种参数 // '', null, undefined
if ( !selector ) {
return this;
} // str
if ( typeof selector == 'string' ) {
// 这里可能是 html 的字符串, 也可能是 选择器
if ( selector.charAt( 0 ) === '<' ) {
// 是 html 字符串
// 将字符串转换成 DOM 对象, 并加到 this 中
[].push.apply( this, Itcast.parseHTML( selector ) );
} else {
// 是选择器
// 获取元素, 并加到 this 中
// 使用 Itcast.Select
[].push.apply( this, Itcast.Select( selector ));
}
return this;
} // fn
if ( typeof selector == 'function' ) { }
//,目的是将selector对应的dom元素包装成Itcast对象
// dom,如果selector是DOM对象
//这里是构造函数,this指新建的对象(伪数组),返回this,会直接return
if ( selector.nodeType ) {
//当selector直接就是dom的时候,Itcast是伪数组,
// 直接将dom对象加入到this中即可
this[0] = selector;
this.length = 1;
return this;
} // itcast,本来就是Itcast对象,可以直接返回,也可以便利出来,包装依次再返回
if ( selector.type == 'Itcast' ) {
return selector;
} // 不知道的 return this
//如果是数组,或对象,认为selector.length>=0就是数组、伪数组,遍历
if( selector.length >= 0){
[].push.apply( this ,selector );
}else{
this[0] = selector;
this.length = 1;
}
return this;
// 。否则是对象,与dom一样
}, //toArray方法,将Itcast对象(伪数组)转换成数组返回
toArray:function(){
return [].slice.apply(this, 0);
},
// 。slice方法能截取,并返回一个数组 //get方法: 参数:index索引: 返回值:索引对应的DOM对象
//功能: 将index对应的Itcast伪数组中的DOM对象返回
//如果index不存在,、index》0 index《0
get:function( index ){
if( index === undefined){
return this.toArray();
}
if( index >= 0 ){
return this[ index ];
}else{
return this[ this.length + index];
}
}, //eq方法 参数:index, 返回值:Itcast对象
//功能:将索引对应的Itcast中的DOM包装成Itcast对象返回
eq: function( index ){
return this.constructor(this.get( index ));
}, //first: 返回第一个
first: function(){
return this.eq( 0 );
},
// last: 返回最后一个
last: function (){
return this.eq( -1 );
},
//each方法:实例方法,由Itcast对象调用
// ,参数: callback 函数 , 返回值:this。链式编程用
//功能: 遍历Itcast对象中的dom对象,并带入callback函数中操作
each:function(callback){
this.each(this,callback);
return this;
},
//map方法: 映射,将dom对象的操作结果返回,
map: function(callback){
this.map( this, callback);
return this;
} };
Itcast.fn.init.prototype = Itcast.fn; // 添加 extend 方法
Itcast.extend = Itcast.fn.extend = function ( obj ) {
for ( var k in obj ) {
this[ k ] = obj[ k ];
}
}; //添加核心模块的工具方法(静态成员)
Itcast.extend({
// each方法, 参数:array数组伪数组,对象,callback 操纵函数
//功能: 将array中的成员遍历操作,当callback返回false时停止循环
// 返回值: array原数组
each: function( array , callback){
if( array.length >= 0 ){
for( var i =0 ; i<array.length ; i++ ){
var res = callback.call( array[ i ] , i , array[ i ]);
if( res === false){
break;
}
}
}else{
for( var k in array){
var res = callback.call( array[ k ], k ,array[ k ]);
if( res === false){
break;
}
}
}
return array;
}, //map方法 返回值:经过操作之后 的新数组
// .参数:array(数组,伪数组,对象)callback(回调函数)
// 功能: 将array遍历,然后带入callback函数中,函数的返回值组成新数组,返回该数组
map: function(array , callback){
var res = [];
if( array.length >= 0 ){
for( var i = 0 ; i<array.length ; i++){
var result = callback.apply(array[ i ], array[ i ] , i);
if( result !== undefined ){
res.push(result);
}
}
}else{
for(var k in array){
var result = callback.apply( array[ i ], array[i] , i);
if( result !== undefined){
res.push(result);
}
}
}
return res;
} }) Itcast.parseHTML = (function () { var node = document.createElement( 'div' ); function parseHTML ( str ) {
node.innerHTML = str;
var arr = [];
arr.push.apply( arr, node.childNodes );
return arr;
}; return parseHTML; })();
分析一个类似于jquery的小框架 (2)的更多相关文章
- 分析一个类似于jquery的小框架
在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...
- 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
/* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...
- 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
// DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...
- 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装
// 缓存框架 (function (xframe) { /** * 实现了缓存框架的临时存储功能(内存存储) * @type {{data: Array, get: (function(*): *) ...
- 【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装
// 动画框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...
- 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
// 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素 ...
- 【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装
// 选择框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...
- 【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装
// 事件框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本 ...
- 【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装
// 内容框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读 ...
随机推荐
- SSIS 文件系统任务无法使用变量配置目标路径
SSIS 文件系统任务无法使用变量配置目标路径 需求: 在SSIS2012中,某个从平面文件导入数据的包中,需要把处理出错的文件拷贝到一个专门的文件夹,便于管理人员及时处理. 问题描述: 1. 在包参 ...
- strace命令简单用法
strace可以显示一个程序经历的系统调用,接收到的信号等信息. 用法: 1.strace -ff -o output programName 将程序programName的写入output文件中,- ...
- Swift 简介
1.swift支持所有C和Obeject-c的基本类型,支持面向过程和面向对象的编程机制. 2.swift提供了2种功能强劲的集合类型:数组和字典 3.元祖 4.可选类型 5.swift 是一种类型安 ...
- SDWebImage总结
SDWebImage 支持异步的图片下载+缓存,提供了 UIImageView+WebCache的 category,方便使用. 优点:首先NSURLCache是缓存原始数据(raw data)到磁盘 ...
- UVA 1151 买还是建(最小生成树)
买还是建 紫书P358 [题目链接]买还是建 [题目类型]最小生成树 &题解: 这题真的心累,看了3天,最后照着码还是wa,先放lrj代码,以后再看吧 &代码: // UVa1151 ...
- C#功能杂集
使用unsafe代码 Unsafe, fixed, stackalloc 由于C#可以使用元数据,验证函数签名.对象类型,保证执行过程的安全,如果要使用指针,则不能进行验证,用unsafe表示.uns ...
- Tomcat Connector三种运行模式(BIO, NIO, APR)的比较和优化
Tomcat Connector的三种不同的运行模式性能相差很大,有人测试过的结果如下: 这三种模式的不同之处如下: BIO: 一个线程处理一个请求.缺点:并发量高时,线程数较多,浪费资源. Tomc ...
- 彻底搞定char/wchar_t/unicode
彻底搞定char/wchar_t!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! (2013-07-17 10:18:28) 转载▼ 从char/wchar_t到TCHAR(1) ...
- Python基础语法(二)
类中的方法定义前如果有 @staticmethod 则此方法通过类名调用,如:dict.fromkeys() : 如果没有,则此方法通过对象调用 三元运算 name=值1 if 条件 else 值2 ...
- Conway's law(康威定律)
Mel Conway 康威在加利福尼亚理工学院获得物理学硕士学位,在凯斯西储大学获得数学博士学位.毕业之后,他参与了很多知名的软件项目,如 Pascal 编辑器.在他的职业生涯中,康威观察到一个现象 ...