提炼出一个常见的习语
Abstracting out a common idiom
在此代码中
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实现:
代码段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;
}
代码段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
);
}
首先,有些库已经完成了这项工作,比如lodash或underlinehttp://lodash.com/docs#forEach作用
其次,您可以使用Object.keys(elements).forEach(function(key){…})来简化代码。
第三,您可能需要了解JavaScript函数——它们可以作为参数传递给其他函数,然后被调用。像这样:
function do(something) {
...
something(item);
...
}
do(function (arg) { console.log(arg); });
如果您在代码中多次这样做,那么将其抽象出来并没有错。您几乎已经得到了答案:只需将所需的参数传递回传递给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
这样的东西可能更自我记录。
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- jQuery:循环一个具有不同超时值的循环
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 从javascript创建一个列表
- 节点导出返回一个空对象
- 使用clickToggle并在单击另一个元素时关闭元素
- 我可以在json对象中添加一个函数吗
- 使用javascript将动态表从一个html页面打印到另一个html页
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 表追加而不附加最后一个元素
- 我如何找到一个句子中的所有空格并替换忽略它们
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 找到一个最常见的类
- 创建一个索引数组,该数组的索引值为 JavaScript 中最常见的数组值
- 单击另一个时,如何折叠打开的常见问题解答
- 创建一个asp.net 5项目来保存常见的js模块
- 为什么我的任何时间DateTimePicker jQuery插件仍然是一个常见的文本框
- 提炼出一个常见的习语
- 我需要创建一个函数来计算输入的不同等级的数量,它只显示最常见的等级
- 一次显示一个常见问题,隐藏其他的