发一个工具库到np

49 阅读2分钟

虽然lodash非常优秀,并且也支持按需引入,但是我认为这种情况下,我还是有必要自己搞一个tdash,这样也是一种进步,造轮子不可耻,我们就仿着lodash来好了

认识架构

lodash的仓库有多个分支,amd,es,版本,压根也不知道干啥,但是感觉他的源文件和解析文档,可以慢慢去看懂架构

iife

最外层一个立即执行函数

;(function(){}.call(this))

把window或者globa传入备用。

暴露_

通过runContext

var _ = runInContext();
var runInContext = (function runInContext(context) {
    context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps));
  ////
}

使用lodash爆出

var runInContext = (function runInContext(context) {
  function lodash(value) {
      if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
        if (value instanceof LodashWrapper) {
          return value;
        }
        if (hasOwnProperty.call(value, '__wrapped__')) {
          return wrapperClone(value);
        }
      }
      return new LodashWrapper(value);
    }
  function startWith(){...}
  lodash.startWith = startWith
  return lodash
}

使用lodashWrapper爆出

使用上面的lodash继续操作,可以看到最后返回了一个new LodashWrapper(value),

function LodashWrapper(value, chainAll) {
    this.__wrapped__ = value;
    this.__actions__ = [];
    this.__chain__ = !!chainAll;
    this.__index__ = 0;
    this.__values__ = undefined;
}

设置了这些属性: wrapped:存放参数value。 actions:存放待执行的函数体func, 函数参数 args,函数执行的this 指向 thisArg。 chain、undefined两次取反转成布尔值false,不支持链式调用。和underscore一样,默认是不支持链式调用的。 index:索引值 默认 0。 values:主要clone时使用。 image.png

mixin

function mixin(object, source, options) {
  // source属性中的每一个属性遍历。
      var props = keys(source),
          methodNames = baseFunctions(source, props);

      if (options == null &&
          !(isObject(source) && (methodNames.length || !props.length))) {
        options = source;
        source = object;
        object = this;
        methodNames = baseFunctions(source, keys(source));
      }
      var chain = !(isObject(options) && 'chain' in options) || !!options.chain,
          isFunc = isFunction(object);

      arrayEach(methodNames, function(methodName) {
        var func = source[methodName];
        object[methodName] = func;
        if (isFunc) {
          object.prototype[methodName] = function() {
            var chainAll = this.__chain__;
            if (chain || chainAll) {
              var result = object(this.__wrapped__),
                  actions = result.__actions__ = copyArray(this.__actions__);

              actions.push({ 'func': func, 'args': arguments, 'thisArg': object });
              result.__chain__ = chainAll;
              return result;
            }
            return func.apply(object, arrayPush([this.value()], arguments));
          };
        }
      });

      return object;
    }

主要作用是将新属性和方法添加到给定的对相中,通常用于往lodash命名空间中添加新的函数,或者将函数添加到用户提供的对象。另外他挂在了lodash上,所以我们在使用lodash时也可以往里面自定义方法。

function customFunction() {
    // 自定义逻辑
}

_.mixin({ customFunction: customFunction });

// 现在可以像调用 Lodash 中的其他方法一样调用 customFunction
_.customFunction();

自己搞一个

我们读懂了lodash颇为复杂的架构,现在搞个简单的,毕竟我也只是为了造轮子。 链接在这:github.com/lmhtolin/td… 用的rollup,感觉还是不会太有意思,后续还是要改用webpack才好。 这样子然后npm publish这一套就行了。