/*
* @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的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建的更多相关文章

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

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

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

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

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

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

  4. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

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

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

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

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

  7. 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装

    // CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候, ...

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

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

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

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

随机推荐

  1. 心急的C小加 贪心算法

    心急的C小加 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 C小加有一些木棒,它们的长度和质量都已经知道,需要一个机器处理这些木棒,机器开启的时候需要耗费一个单位的 ...

  2. SCVMM-VMWARE ACE虚拟机管理工具

    SCVMM是微软的虚拟化管理工具 VMWARE ACE是另一套虚拟化的工具 这两套工具都是用来管理虚拟机的,可以直接将物理机虚拟化为虚拟机 企业一旦发展到了一定阶段,并然需要自己的服务器和虚拟化环境, ...

  3. codevs 2460 树的统计

    2460 树的统计   题目描述 Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I.             ...

  4. 新手git: ssh: connect to host localhost port 22: Connection refused

    由于gitlab上要git pull或者git clone,可是每次都出现这个问题.之前偶尔出现这个问题.可是仅仅是偶尔.这是为什么呢?然后就開始搜索网上的解决方式了. 这个问题搜索网上非常多答案.可 ...

  5. luogu1955 [NOI2015] 程序自动分析

    题目大意 假设x1,x2,x3...代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变量相等/不等的约束条件,请判定是否可以分别为每一个变量赋予恰当的值,使得上述所有约束条件同时被满足.i, ...

  6. perl的安装

    http://www.activestate.com/activeperl/downloads 安装的时候,默认把perl放置到环境变量的PATH中 之后,需要重启电脑,确保环境变量生效 执行perl ...

  7. 国内物联网平台初探(一) ——百度物接入IoT Hub

    物接入IoT Hub - 架构 全托管的云服务,帮助建立设备与云端之间安全可靠的双向连接 支撑海量设备的数据收集.监控.故障预测等各种物联网场景 物接入IoT Hub - 功能 通信协议:支持MQTT ...

  8. MAVEN学习笔记之Maven插件的应用(4)

    MAVEN学习笔记之Maven插件的应用(4) <build> <pluginManagement> <plugins> <plugin> <gr ...

  9. Python 实现简单图片验证码登录

    朋友说公司要在测试环境做接口测试,登录时需要传入正确的图片的验证码,本着懒省事的原则,推荐他把测试环境的图片验证码写死,我们公司也是这么做的^_^.劝说无果/(ㄒoㄒ)/~~,只能通过 OCR 技术来 ...

  10. MySQL 5.6 Reference Manual-14.7 InnoDB Table Compression

    14.7 InnoDB Table Compression 14.7.1 Overview of Table Compression 14.7.2 Enabling Compression for a ...