打造自己的js库(base篇)

                                             打造自己的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);

通过这样的方式将一些自己常用的方法绑定到上边,方面快速开发。接下来的几篇文章将我常用的一些方法放出来,以供参考。

猜你喜欢

转载自blog.csdn.net/qq_39771254/article/details/81083150