核心构造函数

(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)的更多相关文章

  1. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  2. 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

    /* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...

  3. 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装

    // DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...

  4. 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装

    // 缓存框架 (function (xframe) { /** * 实现了缓存框架的临时存储功能(内存存储) * @type {{data: Array, get: (function(*): *) ...

  5. 【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装

    // 动画框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  6. 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装

    // 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素 ...

  7. 【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装

    // 选择框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  8. 【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装

    // 事件框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本 ...

  9. 【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装

    // 内容框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读 ...

随机推荐

  1. cuda-convnet windows8下编译

    编译环境: windows8.1 Anaconda python2.7 Visual studio 2012 CUDA6.0 Pthread for windows Intel Math Kernel ...

  2. http请求相关

    1.POST方式向服务器发送AJAX请求时   设置请求头 application/x-www-form-urlencoded 2.表单上传文件时     设置请求头 multipart/form-d ...

  3. JSP中动态include和静态include的区别(简版)

    动态的include: 用法:<jsp:include page="1.jsp" flush="true" /> 特点:行为元素,可以带参数:先编译 ...

  4. Gemfile分平台加载gem

    Gemfile分平台加载gem 区分平台以便加载不同的web server,象tzinfo-data只适用于windows # Windows does not include zoneinfo fi ...

  5. Mysql大范围分页优化案例

    在BBS线上业务抓到如下分页SQL: meizu_bbs meizu_bbs Query Sending data , meizu_bbs meizu_bbs Query Sending data , ...

  6. json对象数组按对象属性排序

    var array = [ {name: 'a', phone: 1, value: 'val_4'}, {name: 'b', phone: 5, value: 'val_3'}, {name: ' ...

  7. 清除系统日志及数据库(sql server)日志最佳实践

    在一个项目中遇到的问题:系统日志过大,后来用delete语句删除了(相当的慢),结果数据库日志又变成很大了(差不多10G),所以又得把数据库日志删除. 方法: --备份系统中的部份日志--SELECT ...

  8. ios中图片拉伸用法

    - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCap ...

  9. innodb的锁

    观察innodb的锁时间,需要关注: mysqladmin extended-status -r -i 1 -uroot | grep "Innodb_row_lock_time" ...

  10. 创建javascript对象的几种方式

    ECMAScript提供的对象有:String.Date.Array.Boolean.Math.Number.RegExp.Global 程序中需要用到很多自定义的js对象 1.直接创建 var ob ...