【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛: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 = {}
})();
