在此代码中
if (direction === 'up') {
for (key in elements) {
if (elements.hasOwnProperty(key)) {
elements[key].style.opacity = statics.elapsed / max_time;
}
}
} else if (direction === 'down') {
for (key in elements) {
if (elements.hasOwnProperty(key)) {
elements[key].style.opacity = (max_time - statics.elapsed) / max_time;
}
}
}
我想抽象出这个常见的习语:
for (key in elements) {
if (elements.hasOwnProperty(key)) {
// function using elements[key] and outside parameters
}
}
所以我可以简单地写一下
manyElements(element, function () {
});
我如何编写函数原型作为起点。我的猜测是。
function manyElements (elements, the_function) {
for (key in elements) {
if (elements.hasOwnProperty(key)) {
the_function();
}
}
}
但我需要访问外部参数,传递这些参数的最佳方法是什么?这是一个好主意,抽象出这段代码吗?
似乎我必须单独传递每个参数,以达到制作通用功能的目的。
我不想使用外部库,除了相关性。这里的答案是lodash实现:
Snippet 1
function forEach(collection, callback, thisArg) {
if (callback && typeof thisArg == 'undefined' && isArray(collection)) {
var index = -1,
length = collection.length;
while (++index < length) {
if (callback(collection[index], index, collection) === false) {
break;
}
}
} else {
each(collection, callback, thisArg);
}
return collection;
}
Snippet 2
var each = createIterator(eachIteratorOptions);
摘录3
function createIterator() {
var data = {
'arrayLoop': '',
'bottom': '',
'hasDontEnumBug': hasDontEnumBug,
'isKeysFast': isKeysFast,
'objectLoop': '',
'nonEnumArgs': nonEnumArgs,
'noCharByIndex': noCharByIndex,
'shadowed': shadowed,
'top': '',
'useHas': true
};
// merge options into a template data object
for (var object, index = 0; object = arguments[index]; index++) {
for (var key in object) {
data[key] = object[key];
}
}
var args = data.args;
data.firstArg = /^[^,]+/.exec(args)[0];
// create the function factory
var factory = Function(
'createCallback, hasOwnProperty, isArguments, isString, objectTypes, ' +
'nativeKeys, propertyIsEnumerable',
'return function(' + args + ') {\n' + iteratorTemplate(data) + '\n}'
);
// return the compiled function
return factory(
createCallback, hasOwnProperty, isArguments, isString, objectTypes,
nativeKeys, propertyIsEnumerable
);
}
答案 0 :(得分:2)
起初,有些库已经有了一些库,比如lodash或者下划线。检查http://lodash.com/docs#forEach功能。
其次,您可以使用Object.keys(elements).forEach(function(key){...})来快捷代码。
第三,您可能需要了解JavaScript函数 - 它们可以作为参数传递给其他函数然后调用。像这样:
function do(something) {
...
something(item);
...
}
do(function (arg) { console.log(arg); });
答案 1 :(得分:1)
如果您在代码中多次执行此操作,则将其抽象出来并没有错。您几乎已经得到了答案:只需将您需要的参数传递回传递给manyElements
的函数中。我会去传递密钥和值,因为你可能在某些地方需要密钥(例如将分配更改为其他地方)。
function manyElements (elements, the_function) {
for (key in elements) {
if (elements.hasOwnProperty(key)) {
the_function(key, elements[key]);
}
}
}
用法如下:
if (direction === 'up') {
manyElements(elements, function (key, value) {
value.style.opacity = statics.elapsed / max_time;
});
} else if (direction === 'down') {
manyElements(elements, function (key, value) {
value.style.opacity = (max_time - statics.elapsed) / max_time;
});
}
我不会调用函数manyElements,因为该名称并没有真正解释函数的作用。像forEachProperty
这样的东西可能更具自我记录性。