分析一个类似于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;

})();
时间: 2024-12-07 00:38:06

分析一个类似于jquery的小框架 (2)的相关文章

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

在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , undefined){ //Itcast函数,参数:selector.返回值一个Itcast对象,功能:new Itcast.prototype.init() function Itcast(selector){ return new Itcast.prototype.init(); } // Itcas

自己写的一个类似于jQuery中的toggle函数

这是HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>公共测试页</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script ty

封装一个自己的 Ajax小框架

框架代码如下: // 使用封装方法的人只关心提供http的请求方法,url地址,数据,成功和失败的回调方法 // 类的构造定义,主要职责就是新建出 XMLHttpRequest 对象 var MyXMLHttpRequest = function () { var xmlhttprequest; if (window.XMLHttpRequest) { xmlhttprequest = new XMLHttpRequest(); if (xmlhttprequest.overrideMimeTy

jQuery源码 框架分析

每一个框架都有一个核心,所有的结构都是基于这个核心之上,结构建立好了之后,剩下的就是功能的堆砌. jQuery的核心就是从HTML文档中匹配元素并对其操作. 就跟一座大楼一样,让我们一步一步了解这座大厦的基石和结构. 1.构造函数 2.链式语法 3.选择器 4.扩展性  一.构造函数 我们知道类是面向对象编程的一个重要概念,它是对事物的最高抽象,它是一个模型.通过实例化一个类,我们可以创建一个实例. javascript本身没有类的概念,只有原型prototype,prototype是什么呢?它

使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发人员更轻松的打造出功能丰富而且美观的UI界面.开发人员不须要编写复杂的javascript,也不须要对css样式有深入的了解,开发人员须要了解的仅仅有一些简单的html标签.jQuery EasyUI为我们提供了大多数UI控件的使用

一个可以实时跟踪分析iOS App视图的小工具

一个可以实时跟踪分析iOS App视图的小工具(已开源) GitHub入口:https://github.com/sx1989827/RunTrace 前言 作为iOS的开发者,常常为了UI界面搞得头破血流,你是不是经常遇到这样的痛点:这个view是从哪里来的,它的父视图是什么,它的子视图有哪些,它的frame会发生什么样的变化,它怎么突然隐藏了,它什么时候会被释放掉,对于像自动布局,错误常常如潮水般的涌来,我想动态获取一个view的约束怎么办,我想知道这个view此时此刻和其他哪些view产生

java创建一个简单的小框架frame

import java.awt.*; import javax.swing.*; public class SimpleFrameTest { public static void main(String[] args) { EventQueue.invokeLater(new Runnable(){ // 开一个线程 public void run() { SimpleFrame frame = new SimpleFrame(); frame.setTitle("记事本"); //

自己封装的一个Ajax小框架

在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架: 1 /** 2 * frameAjax 3 * 4 * 参数: 5 * paramsObj: Json 6 * required params: 7 * type:请求参数类型(String) 8 * url:请求地址(String) 9 * data:请求参数(Json),data可为空值. 10 * success:请求回调(Function) 11 * async:表示请求是否异步处理

站在分析的角度去实现插件框架

开场一些题外话,今天登陆这个"小菜"的博客园,感触颇多."小菜"是我以前在QQ群里面的网名,同时也申请了这个博客园账户,五年前的"小菜"在NET和C++某两个群里面非常的活跃,也非常热心的帮助网友尽能力所及解决技术上的问题.依稀记得当时NET群里面的"青菊.Allen.酷酷",C++群里面的"夏老师.风筝兄"等网友.哥们.时过境迁,后来因为某些原因而慢慢淡出了QQ群里的技术交流,在这里我真的非常感谢网友&q