核心构造函数

(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. python3-day2-python基础2

    一.for循环 for循环是我们编程中非常常用的一种循环,以下就是for循环在python中的一些应用实例: 1.单层for循环 #!/usr/bin/env python3#-*- coding: ...

  2. spring mvc 参数

    Struts(表示层)+Spring(业务层)+Hibernate(持久层) Struts: Struts是一个表示层框架,主要作用是界面展示,接收请求,分发请求. 在MVC框架中,Struts属于V ...

  3. 事件驱动之Twsited异步网络框架

    在这之前先了解下什么是事件驱动编程 传统的编程是如下线性模式的: 开始--->代码块A--->代码块B--->代码块C--->代码块D--->......--->结 ...

  4. MyBatis学习(二)、SQL语句映射文件(1)resultMap

    二.SQL语句映射文件(1)resultMap SQL 映射XML 文件是所有sql语句放置的地方.需要定义一个workspace,一般定义为对应的接口类的路径.写好SQL语句映射文件后,需要在MyB ...

  5. core文件

    1.ulimit  -c查看是否可以产生core文件 打印0表示当前不产生core文件 2.ulimit -c unlimited 设置产生core文件 这种方法只是临时设置产生core文件 3.ec ...

  6. AMap编辑折线、多边形、圆

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. 关于litJson的System.InvalidCastException

    最近在做一个Unity3D的项目,用到了litJson库, 它比JavaScript里的JSON解析更加严格, 有时候解析数据的时候会出现类型不对. 比如说 {"data":12} ...

  8. cocos2d-x3.2创建新项目失败的一种可能性(cygwin自带的python2.6被抢先执行)

    之前一直使用cocos2d-x2.2写游戏,写了几个游戏后,想尝试下3.x版本的新功能,就下载了cocos2d-x3.2版本. 参照官方文档的说法,cocos2d-x3.x版本需要python2.7环 ...

  9. Django RedirectView

    RedirectView作用是重定向一个指定,给定的Url.这个给定的Url可能包含有字典风格的字符串,因为关键字(词)会被改变,所以从这个Url中捕获的参数可能也会被修改,例如,Url中的“%”应该 ...

  10. C#获取网页内容的三种方式

    C#通常有三种方法获取网页内容,使用WebClient.WebBrowser或者HttpWebRequest/HttpWebResponse... 方法一:使用WebClient (引用自:http: ...