javascript利用apply和arguments复用方法


Posted in Javascript onNovember 25, 2013

首先,有个单例对象,它上面挂了很多静态工具方法。其中有一个是each,用来遍历数组或对象。

var nativeForEach = [].forEach 
var nativeMap = [].map 
var util = { 
    each: function (obj, iterator, context) { 
        if (obj == null) return
        if (nativeForEach && obj.forEach === nativeForEach) { 
          obj.forEach(iterator, context) 
        } else if ( obj.length === +obj.length ) { 
            for (var i = 0; i < obj.length; i++) { 
                if (iterator.call(obj[i] || context, obj[i], i, obj) === true) return
            } 
        } else { 
            for (var k in obj) { 
                if (iterator.call(obj[k] || context, obj[k], k, obj) === true) return
            } 
        } 
    }, 
    map: function(obj, iterator, context) { 
        var results = [] 
        if (obj == null) return results 
        if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context)      
        this.each(obj, function(val, i, coll) { 
            results[i] = iterator.call(context, val, i, coll) 
        }) 
        return results 
    } 
}

还有诸如every、some等对集合(Array,Hash)操作的工具函数。使用时采用util.xx方式。

如果定义了一个集合类,这个类内部有集合数据。

function Collection(data) { 
    this.data = data || [] 
    // some other property 
    // this.xxx = yyy 
} 
Collection.prototype = { 
    // some method 
}

可以很方便的把util上的方法拷贝到集合类上,如

function copyMethod(clazz, obj) { 
    for (var method in obj) { 
        clazz.prototype[method] = function() { 
            var args = [].slice.call(arguments) 
            var target = this.data 
            args.unshift(target) 
            obj[method].apply(obj, args) 
        } 
    } 
} 
copyMethod(Collection, util)

这样拷贝后,Collection的实例就有了util上的方法,util操作的集合对象(第一个参数)就是Collection的this.data。如下直接可以遍历this.data了。

var coll = new Collection([10, 20, 30])  // 遍历 
coll.each(function(k) { 
    console.log(k) 
}) 
// 操作 
var arr = coll.map(function(k) { 
   return k - 5 
}) 
console.log(arr) // 5, 15, 25

这种模式在很多开源库中使用,比如jQuery,它的 $.each/$.map 很方便的拷贝到了 $().each/$().map。

又如Backbone,它的 _.each/_.map/_.every/_.chain (还有很多)都拷贝到了 Collection的原型上。

// Underscore methods that we want to implement on the Collection. 
// 90% of the core usefulness of Backbone Collections is actually implemented 
// right here: 
var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl', 
  'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select', 
  'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke', 
  'max', 'min', 'toArray', 'size', 'first', 'head', 'take', 'initial', 'rest', 
  'tail', 'drop', 'last', 'without', 'difference', 'indexOf', 'shuffle', 
  'lastIndexOf', 'isEmpty', 'chain']; // Mix in each Underscore method as a proxy to `Collection#models`. 
_.each(methods, function(method) { 
  Collection.prototype[method] = function() { 
    var args = slice.call(arguments); 
    args.unshift(this.models); 
    return _[method].apply(_, args); 
  }; 
});

又有,把 _.keys / _.values / _.pairs / _.invert / _.pick 等对对象操作的实用方法拷贝了 Backbone.Model上 (1.0新增)

var modelMethods = ['keys', 'values', 'pairs', 'invert', 'pick', 'omit']; // Mix in each Underscore method as a proxy to `Model#attributes`. 
_.each(modelMethods, function(method) { 
  Model.prototype[method] = function() { 
    var args = slice.call(arguments); 
    args.unshift(this.attributes); 
    return _[method].apply(_, args); 
  }; 
});
Javascript 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
js中的json对象详细介绍
Oct 29 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 #Javascript
js给onclick赋值传参数的两种方法
Nov 25 #Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 #Javascript
写JQuery插件的基本知识
Nov 25 #Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 #Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 #Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 #Javascript
You might like
S900/ ETON E1-XM 收音机
2021/03/02 无线电
php使用base64加密解密图片示例分享
2014/01/20 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
python在不同条件下的输入与输出
2020/02/13 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
销售自我评价
2013/10/22 职场文书
英语自荐信范文
2013/12/11 职场文书
年度考核评语
2014/01/19 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
先进班组事迹材料
2014/12/25 职场文书
2015年服务员工作总结
2015/04/08 职场文书
小学生暑假生活总结
2015/07/13 职场文书
2016五一手机促销广告语
2016/01/28 职场文书