JavaScript框架封装雏形：实现了基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架的搭建 /\* \* @Author: 我爱科技论坛 \* @Time: 20180705 \* @Desc: 实现一个类似于JQuery功能的框架 \* V 1.0: 实现了基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架的搭建 \* \*/ // 框架 (function (w) { var xframe = { /\*\* \* 实现对象的可扩充性 \* @param target \* @param source \* @returns {\*} \*/ extend : function (target, source) { for (var i in source){ target = source; } return target; }, } // 暴露我的立即函数中的局部变量(给window这个对象添加两个属性变量： xframe, $$) w.xframe = w.$$ = xframe; })(window); // 基础框架: 基本上都是不需要参与链式访问的 // 实现功能: 如果是一个参数的话，就直接给类添加方法 // 如果是多个参数的话，就表示给指定的对象添加方法 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基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架的搭建