打造自己的js库(base篇)
随着code经验的增加,函数封装,可复用性组件开发可以说是一个水到渠成的过程,最近一直想写一个属于自己的js库,将自己用的较多的组件都放在里面,但是也一直被搁置,因为我感觉自己目前能力可能不够,但是不试试怎么知道呢。只要尝试,就算不成功,对自己也是宝贵的经验。
1.命名空间
万事开头难,这一步很关键,使用命名空间避免冲突,将方法绑定到window上。ps:能有今天的成长,大部分归功于前辈们的代码,通过解读能学到很多东西,感谢!
namespace = function(){
var args = arguments; //函数内部args为参数长度
for(var i = 0;i<args.length;i++){ //循环截取参数绑定到window上边
var objs = args[i].split('.');
var obj = window;
for(var j = 0;j<objs.length;j++){
obj[objs[j]] = obj[objs[j]] || {};
obj = obj[objs[j]]
}
}
return obj
}
namespace("gu.base")//启动方式
运行完成后,window上边会绑定gu,gu下边有方法base,然后在gu.base上边进行函数扩展。
(function () {
/**
* 获取传入参数类型
* @param {object} obj
* @return {string}
* @date 2017-11-16
*/
function getParamType (obj) {
return (obj == null ? String(obj) : Object.prototype.toString.call(obj).replace(/\[object\s+(\w+)\]/i,"$1") || "object").toLowerCase();
};
/**
* 类似$.extend()
* @param destination
* @param source
* @return {object} destination
* @date 2017-11-16
*/
gu.base.extend = function (destination,source) {
if (destination == null) {
destination = source
}
else {
for (var property in source){
if (getParamType(source[property]).toLowerCase() === "object" &&
getParamType(destination[property]).toLowerCase() === "object" )
arguments.callee(destination[property], source[property])
else
destination[property] = source[property];
}
}
return destination;
};
gu.base.isArray = function (obj) {
return getParamType(obj) === "array";
};
gu.base.isObject = function (obj) {
return getParamType(obj) === "object";
};
gu.base.isFunction = function (obj) {
return getParamType(obj) === "function";
};
gu.base.isString = function (obj) {
return getParamType(obj) === "string";
};
gu.base.isBoolean = function (obj) {
return getParamType(obj) === "boolean";
};
gu.base.isDate = function (obj) {
return getParamType(obj) === "date"
};
gu.base.g = function (id) {
return document.getElementById(id);
}
})();
gu.base.extend(window, gu.base);
通过这样的方式将一些自己常用的方法绑定到上边,方面快速开发。接下来的几篇文章将我常用的一些方法放出来,以供参考。