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 validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
javascript表单正则应用
Feb 04 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
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
php获取目标函数执行时间示例
2014/03/04 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Python制作爬虫采集小说
2015/10/25 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
自我鉴定200字
2013/10/28 职场文书
优秀求职信范文分享
2014/01/26 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
小孩不笨观后感
2015/06/03 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python