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 = {
}
})();
评论
填写昵称与邮箱即可评论，无需登录。