JS进阶系列 --- 框架封装

作者的话

如果你和我一样是初窥前端的一个怀抱梦想的初学者，我希望我走过的这段路能对你有些许的启示，让你对前端收获一点感悟。
如果你是一个前端的大牛，也由衷的希望你能留下些许的指教。

为什么使用框架##

我们知道，原生的js虽然代码强大，可以完成几乎所有项目的开发。
但是，如果纯用原生的js来写项目，未免过于繁琐。而借助于一些js框架可以使得代码变得简练。
类比jquery和原生的id选择器：
jquery: $(’#panini’);
原生js: document.getElementById(‘panini’);
可见框架的好处了吧。
##为什么封装自己的框架##
会用框架不代表能够理解一个框架。
Jquery八千多行的代码我是无法理解的了，但是封装一个自己的框架会让你对js认识更加深入，对js的使用更加熟练。
这也是我写这个系列的初衷。

jquery1.0

这个框架是仿造jquery2.2版本做的，函数的功能也尽量向jquery靠拢。一共777行，后续还会添加新的方法。做了部分ie8的兼容。

/*******
	author by 帕尼尼  
	set time: 2018/3/29 16:27
	copy @1.00

*******/
(function( w ) {

    // jQuery工厂
    function jQuery( selector ) {
        return new App( selector );
    };
    // 这是真正的构造函数，同时把构造函数放在了原型中
    function App( selector ) {

        // null、undefined、NaN、0、false、''
        if ( !selector ) {
            return this;
        }

        // function
        if ( $.isFunction( selector ) ) {

            // 打包给ready静态方法处理
            $.ready( selector );
        }

        // string ==> ( html || selector )
        else if( $.isString( selector ) ) {

            // 为了用户友好体验，先去掉首尾空白字符
            selector = $.trim( selector );

            // html
            if( $.isHTML( selector ) ) {

                // 利用一个临时的div来创建DOM，
                // 然后把创建好的DOM依次push给实例。
                var tempDiv = document.createElement( 'div' );
                tempDiv.innerHTML = selector;
                [].push.apply( this, tempDiv.childNodes );
            }

            // selector
            else {

                try {
                    [].push.apply( this, document.querySelectorAll( selector ) );
                }catch(e) {
                    // 如果报错了，那么手动补一个length属性，代表没有获取到任何元素
                    this.length = 0;
                }
            }
        }

        // array || likeArray
        else if( $.isLikeArray( selector ) ) {
            [].push.apply( this, [].slice.call( selector ) );
        }

        // 其它
        else {
            this[0] = selector;
            this.length = 1;
        }
    };

    // 替换原型 + 原型简称
    // 替换App的原型为工厂的原型，这样外界就可以通过工厂给实例扩展方法
    App.prototype = jQuery.prototype = {
        constructor: jQuery,

        // 获取版本号
        version: "1.0.0",

        // 代表所有实例默认的选择器，也代表实例是一个jQuery类型的对象
        selector: '',

        // 代表所有实例默认的长度
        length: 0
    };

    // 给jQuery和原型分别添加extend方法
    jQuery.extend = jQuery.prototype.extend = function( obj ) {
        for ( var key in obj ) {
            this[ key ] = obj[ key ];
        }
    };

    // 暴露工厂和工厂的简称
    w.jQuery = w.$ = jQuery;

    /**
            jQuery    
    ***/

    // 给jQuery添加一些静态方法(兼容ie8)
    $.extend({

        //获取样式
        getStyle: function(dom,style){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom)[style];
            }else{//ie8
                return dom.currentStyle[style];
            }
        },

        // 去掉首尾空白字符
        trim: function( str ) {
            return str.trim ? str.trim() : str.replace( /^\s+|\s+$/g, '');
        },
    });

    // 给jQuery添加一些静态方法(is)
    $.extend({

        // 判断是不是html片段
        isHTML: function( html ) {

            // <.>
            if( html.charAt(0) === '<' &&
                    html.charAt( html.length - 1 ) === '>' &&
                    html.length >= 3 ) {
                return true;
            }

            return false;
        },

        // 判断是不是函数
        isFunction: function( fn ) {

            return typeof fn === 'function';
        },

        // 判断是不是window
        isWindow: function( w ) {

            return  w.window === w;
        },

        // 判断是不是对象
        isObject: function( obj ) {

            // 如果是object或function，那就是对象
            if ( typeof obj === 'object' || typeof obj === 'function' ) {
                return true;
            }

            return false;
        },

        // 判断是不是字符串
        isString: function( str ) {

            return typeof str === 'string';
        },


        // 判断是不是真数组或伪数组
        isLikeArray: function( arr ) {

            // Function、window、!Object
            if ( $.isFunction( arr ) || $.isWindow( arr ) || !$.isObject( arr ) ) {
                return false;
            }

            // 判断是不是真数组
            if ( ({}).toString.call( arr ) === '[object Array]' ) {
                return true;
            }

            // 判断是不是伪数组
            if ( 'length' in arr && ( arr.length === 0 || arr.length - 1 in arr ) ) {
                return true;
            }

            return false;
        }
    });

    // 给jQuery添加一些静态方法
    $.extend({

        ready: function( fn ) {

            // 先统一判断DOMContentloaded有没有触发，
            // 通过document.readyState === 'complete'判断
            // 如果为true，fn可以直接调用。

            // 如果为false，那么判断支不支持addEventListener，
            // 如果支持，绑定DOMContentLoaded事件

            // 如果不支持，使用attchEvent绑定onreadystatechang事件,
            // 注意，需要在里面判断document.readyState === 'complete'才执行fn。
            // 防止fn多次执行。

            // DOM已经构造完毕，fn可以直接执行
            if ( document.readyState === 'complete' ) {
                fn();
            }

            // 如果DOM没有构造完毕，那么判断addEventListener是否兼容
            else if( document.addEventListener ) {
                document.addEventListener( 'DOMContentLoaded', fn );
            }

            // 如果不兼容addEventListener，那么采取attachEvent的方式，
            // 同时事件变为了onreadystatechange，为了防止这个事件多次触发造成的fn多次执行，
            // 所以需要一个包装函数来进行过滤。
            else {
                document.attachEvent( 'onreadystatechange', function() {
                    if( document.readyState === 'complete' ) {
                        fn();
                    }
                } );
            }
        },

        //遍历每一个元素
        each: function(obj,fn){
            if($.isLikeArray(obj)){
                for(let i=0;i= 0 ) {
                return this[ i ];
            }else {
                return this[ this.length + i ];
            }
        },

        // 截取实例的部分元素，构成一个新的jQuery实例返回
        slice: function() {
            /*
            * 1、通过数组的slice截取部分元素(slice返回的是数组)，
            * 2、把截取到的元素转换为实例对象返回。
            * */

            // 因为slice的参数会有变化，所以需要是arguments，
            // 我们要把arguments中的每一项传给数组的slice，所以需要借用apply平铺传递过去，
            // 最后把slice返回数组，通过jQuery工厂保证成实例返回。
            return $( [].slice.apply( this, arguments ) );
        },

        // 获取指定下标的元素，获取的是jQuery类型的实例对象。
        eq: function( i ) {
            /*
             * 1、如果传入null或undefined，返回一个新实例，
             * 2、如果传入的是正数，按照指定的下标获取元素，再包装成新实例返回
             * 3、如果传入的是负数，按照下标倒着( this.length + 负数 )获取元素，再包装成新实例返回
             * */

            // null、undefined得到新实例
           return i == null? $() : $( this.get( i ) );
        },

        // 获取实例中的第一个元素，是jQuery类型的实例对象。
        first: function() {
            return this.eq( 0 );
        },

        // 获取实例中的最后一个元素，是jQuery类型的实例对象。
        last: function() {
            return this.eq( -1 );
        },

        //清空所有元素的内容
        empty: function(){
            this.each(function(){
                this.innerHTML = "";
            });
            return this;
        },

        //删除所有元素
        remove: function(){
            this.each(function(){
                this.parentNode.removeChild(this);
            });
            return this;
        },

        //获取第一个元素的内容；设置所有元素的内容
        html: function(ctx){
            //获取第一个元素的内容
            if(arguments.length === 0){
                return this[0].innerHTML;   
            }
            //设置所有元素的内容
            this.each(function(){
                this.innerHTML = ctx;
            });
            return this;
        },

        //获取所有元素的文本内容；设置所有元素的文本内容
        text: function(ctx){
            //获取所有元素的文本内容
            if(!ctx){
                return this[0].innerText;   
            }
            //设置所有元素的文本内容
            this.each(function(){
                this.innerText = ctx;
            });
            return this;
        },

        //遍历实例中的每一个元素
        each: function(fn){
            for(let i=0;i

jquery2.0

这里用了class语法重写了框架，没有做兼容处理，没有做选择器

/*******
	author by 帕尼尼  
	set time: 2018/3/29 16:27
	copy @1.00

*******/
class JQuery {
    /**
     * 构造函数
     * @param   {string}  selector  选择器字符串
     * @param   {dom}   selector    dom对象
     * @return   {jquery}   jquery对象
     */
    constructor(selector) {
        if(Tool.isString(selector)) {
            [].push.apply(this, document.querySelectorAll(selector));
        } else {
            [].push.call(this, selector);
        }
    }
    /**
     * 获取第index个jquery对象
     * @param   {number}  index  位置
     * @return   {jquery}   jquery对象
     */
    eq(index) {
        return $(this[index]); 
    }
    /**
     * 获取第index个dom对象
     * @param   {number}  index  位置
     * @return   {dom}   dom对象
     */
    get(index) {
        return this[index];
    }
    /**
     * 获取第一个dom对象
     * @param   {void}
     * @return   {dom}   dom对象
     */
    first() {
        return this[0];
    }
    /**
     * 获取最后一个dom对象
     * @param   {void}
     * @return   {dom}   dom对象
     */
    last() {
        return this[this.length-1];
    }
    /**
     * 遍历jquery对象
     * @param   {function}  fn  回调函数
     * @return   {jquery}   jquery对象
     */
    each(fn) {
        for(let i=0; i