开发者社区> 向善的灯> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81055973 ...
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81055973

 

/*
* @Author: 我爱科技论坛
* @Time: 20180715
* @Desc: 实现一个类似于JQuery功能的框架
* V 1.0: 实现了基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架的搭建
* V 2.0:实现了框架的进一步优化,具有良好的扩展性, 可以支持链式访问
* */

 

/ 主框架: 只做一件事,就是用于获取所有的元素集合
(function (w) {
    // 定义一个Xframe对象,后面就是他的构造函数
    var xframe = function (selector, context) {
        // 为了使得后面的函数this始终指向的是xframe框架,这里需要修改函数内部this的指向
        return this.init.apply(this, [selector, context]);
    };

    // 定义一个初始化函数,用于初始化获取所有的元素集合
    // 只要用户使用了类似于JQuery中的选择元素的方法,就开始选择一个元素集合
    // 这里的核心功能:实际上是为了使用一个伪数组实现一个类似于JQuery中的链式访问的功能
    xframe.prototype.init = function (selector, context) {
        // 开始构建一个伪数组:{1 : list[0], 2 : list[1], , , , length : list.length}
        this.length = 0;
        if (typeof  selector === 'string'){
            var nodeList = (context || document).querySelectorAll(selector);
            this.length = nodeList.length;
            for (var i = 0, len = this.length; i < len; i++){
                this[i] = nodeList[i];
            }
        } else if (selector.nodeType){
            // 如果获取的是一个元素节点,文本节点,或者属性节点的话
            this[0] = selector;
            this.length++;
        }

        // 为了可以支持链式访问必须把这个this对象返回出去
        return this;
    };


    // 使用双对象法则继续暴露出去一个对象,进行对象的二次封装
    // 【双对象法则的使用】
    var $$ = function (selctor, context) {
        // 这里使用一个简单的异步加载机制,等待所有的DOM元素执行完毕之后再开始继续向下执行
        if (typeof selctor === 'function'){
            // selector就是DOM元素加载完毕之后的继续向下执行的回调函数
            w.onload = selctor;
        } else {
            // 如果不是一个函数的话
            return new xframe(selecor, context);
        }
    }

    // 添加一个extend方法, 用于扩充一个对象的方法, 扩展向一个类中拷贝方法
    $$.extend = function () {
        // 这里需要分为两种情况:
        // 1. 如果传过来的是一个参数的话,就相当于是给xframe对象添加方法
        // 2. 如果是两个参数的话,就相当于是给一个类扩充方法
        var len = arguments.length,
            target = null,              // target 用来存储需要把方法拷贝进去的目标函数
            i = 1,                      // 初始化变量i, 表示需要开始遍历的起始位置标记
            key;                        // 为了防止定义太多的局部变量,可以把后面需要用到的所有局部变量事先在前面定义好
        if (len === 0){
            return;
        } else if (len === 1){
            // 给xrame对象添加方法
            target = xframe.prototype;
            i--;
        } else{
            // 两个参数的话,那么第一个参数就是我需要拷贝新的方法进去的目标对象
            // 如果是两个参数的话:就不需要修改变量i的值了, 直接从第一个位置开始,拿到第一个参数后, 把第二个参数的方法全部拷贝给第一个对象
            // 注意: 这里有可能也是三个参数或者是多个参数, 因此也可以吧后面的好几个对象的属性或者方法添加给第一个对象
            target = arguments[0];
        }


        // 确定好了target 这个目标对象以后,开始遍历原始对象那个source,把source里面的方法全部都拷贝到这个target对象里面
        for (; i < len; i++){
            // 这里实际上在遍历一个json对象,json对象的每一项实际上就是一个属性或者方法
            for (key in source){
                target[key] = arguments[i][key];
            }
        }
        return target;
    }


    // 为了把主框架里面的局部变量暴露出去供其他模块使用
    w.xframe = w.$ = $$;

})(window);



// 公共框架
(function (xframe) {
    // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
    xframe.extend({
        each : function () {

        }
    });

    // 不需要参与链式访问的
    /*公共部分*/
    xframe.extend(xframe, {

    });
    /*字符串处理模块*/
    xframe.extend(xframe, {

    });
    /*数组相关*/
    xframe.extend(xframe, {

    });
    /*Math*/
    xframe.extend(xframe, {

    });
    /*数据类型检验*/
    xframe.extend(xframe, {

    });
})(xframe);



// 事件框架
(function (xframe) {
    // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
    xframe.extend({
        each : function () {

        }
    });

    // 不需要参与链式访问的
    xframe.extend(xframe, {

    });
})(xframe);


// 属性框架
(function (xframe) {
    // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
    xframe.extend({
        each : function () {

        }
    });

    // 不需要参与链式访问的
    xframe.extend(xframe, {

    });
})(xframe);



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

        }
    });

    // 不需要参与链式访问的
    xframe.extend(xframe, {

    });
})(xframe);


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

        }
    });

    // 不需要参与链式访问的
    xframe.extend(xframe, {

    });
})(xframe);



// 缓存框架
(function (xframe) {
    // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
    xframe.extend({
        each : function () {

        }
    });

    // 不需要参与链式访问的
    xframe.extend(xframe, {

    });
})(xframe);




















// 基础框架: 基本上都是不需要参与链式访问的
// 实现功能: 如果是一个参数的话,就直接给类添加方法
// 如果是多个参数的话,就表示给指定的对象添加方法
xframe.extend(xframe, {
    ltrim: function () {

    },
    rtrim: function () {

    },
    trim: function () {

    },
    ajax: function () {

    },
    formateString: function () {

    },
    random: function () {

    },
    isNumber: function () {

    },
    isBoolean: function () {

    },
    isString: function () {

    },
    isUndefined: function () {

    },
    isObject: function () {

    },
    isNull: function () {

    },
    isArray: function () {

    },

})


// 选择框架
/***
 * 如果下面的框架需要用到上面的框架,就直接可以把上面的去全局变量/对象暴露出去,这里是使用了前面的xframe全局变量
 */
(function ($$) {
    $$.$all = function () {

    };
    $$.$id = function (id) {

    };
    $$.$tag = function () {

    };
    $$.$class = function () {

    };
    $$.$group = function () {

    };
    $$.cengci = function () {

    };
    $$.$select = function () {

    }

})(xframe);


// 事件框架
(function ($$) {
    $$.on = function () {

    }
})(xframe);


// CSS框架
(function ($$) {
    $$.css = function () {

    };

    // 元素的显示与隐藏
    $$.show = function () {

    };
    $$.hide = function () {

    };

    // 元素的宽度和高度
    $$.width = function () {

    };
    $$.height = function () {

    };


    // 元素的滚动宽度和高度
    $$.scrollWidth = function () {

    };
    $$.scrollHeight = function () {

    };

    // 滚动条相对于上面和左边的距离
    $$.scrollTop = function () {

    };
    $$.scrollLeft = function () {

    };


    // 屏幕的宽度和高度
    $$.screenWidth = function () {

    };
    $$.screenHeight = function () {

    };


    // 文档区域的宽度和高度
    $$.wWidth = function () {

    };
    $$.wHeight = function () {

    };


    // 获取文档滚动窗口的相关属性参数信息
    $$.wScrollHeight = function () {

    };
    $$.wScrollWidth = function () {

    };

    // 获取文档滚动窗口距离上面和左边的距离和宽度
    $$.wScrollTop = function () {

    };
    $$.wScrollLeft = function () {

    };
})(xframe);


// 属性框架
(function ($$) {
    // 私有方法
    function removeName() {

    };

    function addName() {

    }

    // 公有方法
    $$.attr = function () {

    };
    $$.addClass = function () {

    };
    $$.removeClass = function () {

    }
})(xframe);


// 内容框架
(function () {
    $$.html = function () {

    };
    $$.text = function () {

    };
    $$.val = function () {

    }
})();


// 动画框架
(function () {
    function Animate() {

    }

    Animate.prototype = {}
})();

 

 

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123753 ...
814 0
【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123779 ...
897 0
【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123799 ...
961 0
【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123810 ...
712 0
【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123820 ...
867 0
【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123835 ...
835 0
【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123854 ...
860 0
【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123863 ...
832 0
【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81087543 主要问题: 在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个。
922 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript 语言在引擎级别的执行过程
立即下载
分布式流处理框架
立即下载
在 IoT 设备进行 JavaScript 开发的探索之路
立即下载