虽然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时使用。
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这一套就行了。