underscore.js依赖库函数分析一

Underscore简介:

underscore是一个非常简洁,实用的javascript库,和jQuery封装类型差不多,但underscore是backbone的依赖 库,想运行backbone就必须先引入underscore.js。“_”开头是依赖库underscore的一个特征,用于区分其他库函数名。“.” 以后就是函数的名称。

Underscore函数:

underscore中封装了60多个函数,供开发者使用,接下来一个个分析。

1.each()和map函数

underscore中each 和map有一个共同的特征,就是根据一定的条件去遍历集合中的每一个元素。但他们之间的操作方式却是不同的。

each()函数:

调用的格式:

_.each(list,iterator,[context])

该函数式根据iterator迭代器提供的过滤条件,遍历list列表中的每一个元素。

源码:

   var each = _.each = _.forEach = function(obj, iterator, context) {
        if (obj == null) return;
        if (nativeForEach && obj.forEach === nativeForEach) {
         //如果宿主环境支持, 则优先调用JavaScript 1.6提供的forEach方法
            obj.forEach(iterator, context);
        } else if (obj.length === +obj.length) {
            // 对[数组]中每一个元素执行处理器方法
            for (var i = 0, length = obj.length; i < length; i++) {
                if (iterator.call(context, obj[i], i, obj) === breaker) return;
            }
        } else {
            // 对{对象}中每一个元素执行处理器方法
            var keys = _.keys(obj);
            for (var i = 0, length = keys.length; i < length; i++) {
                if (iterator.call(context, obj[keys[i]], keys[i], obj) === breaker) return;
            }
        }
    };

函数思路:如果宿主支持原生的forEach方法,那就是直接调用原生的,如果不支持就走遍历方式,(一般为浏览器或node.js支持原生的forEach方法)。

这里有一个判断方式很少见,obj.length === +obj.length,称之为鸭式辩型的判断方式。

时间: 2024-10-16 11:49:47

underscore.js依赖库函数分析一的相关文章

underscore.js依赖库函数分析二(查找)

查找: 在underscore.js封装了对dom查找的操作,find()和filter()函数,find()函数的查找操作是返回首个与条件相符的元素值,filter()函数是找到与条件相符的所有元素,则返回的就是一个数组,如果没有找到符合条件,则返回一个空的数组.接下来一个个分析: find()函数: 该函数根据iterator迭代器中的自定义函数条件,在集合列表中查找符合条件的第一个元素,如果找到,则返回第一个元素,否则返回“undefined”. 实例: /** * Created by

underscore.js 源码分析5 基础函数和each函数的使用

isArrayLike 检测是数组对象还是纯数组 var property = function(key) { return function(obj) { return obj == null ? void 0 : obj[key]; }; }; var getLength = property('length'); var isArrayLike = function(collection) { var length = getLength(collection); return typeo

HiShop2.x版本中的上传插件分析,得出所用的模板语言为Underscore.js 1.6.0且自己已修改

效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popbox_ImgPicker_listItem"> <# _.each(dataset,function(url){ #> <li> <span class="img-list-overlay"><i class="img-l

Underscore.js 分析

Underscore.js的源码和适合第一次看源码的人,因为文件比较小,而且没有依赖,读起来比较轻松.代码写的还很是很简练的. 我看的是1.7的源码,下面说说我觉得比较有意思的几个地方 1. _.isUndefined = function(obj) { return obj === void 0; }; 代码里好几个地方都用到了void 0,而不是undefined判断一个object是不是undefined.据说这样是因为有些浏览器允许改变undefined的值.比如undefined =

underscore.js 分析 第三天

// Create a safe reference to the Underscore object for use below. // 为Underscore对象创建一个安全的引用 // _为一个函数对象,它的实例服从单例模式. var _ = function(obj) { if (obj instanceof _) return obj; if (!(this instanceof _)) return new _(obj); this._wrapped = obj; }; 来一个最简单

Underscore.js 1.3.3 源码分析收藏

Underscore是一个提供许多函数编程功能的库,里面包含了你期待(在Prototype.js和Ruby中)的许多功能.但是没有扩展任何内置的Javascript对象,也就是说它没有扩展任何内置对象的原型.它被定位为jQuery和Backbone.js的基础层 源码注释转之网上他人之备注,特收藏以后方便阅读. // Underscore.js 1.3.3 // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. // Underscore is

使用Underscore.js的template将Backbone.js的js代码和html代码分离

这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去,这似乎不是一件非常好的事情,因为将js代码和html代码融合到一起会增加代码的维护难度,而且这个过程中考虑到性能的因素,需要将HTML代码放到一个数组中,最后进行拼接,代码写起来比较麻烦.我看到他们的代码之后就在考虑是否有一种类似php模板引擎的东西可以将Collection传递进去然后渲染. 我

underscore.js源码解析

一直想针对一个框架的源码好好的学习一下编程思想和技巧,提高一下自己的水平,但是看过一些框架的源码,都感觉看的莫名其妙,看不太懂,最后找到这个underscore.js由于这个比较简短,一千多行,而且读起来容易一些,所以就决定是它了,那废话不多说开始我们的源码学习. underscore.js源码GitHub地址: https://github.com/jashkenas/underscore/blob/master/underscore.js 本文解析的underscore.js版本是1.8.3

钉钉js依赖库学习

看别人用的依赖库的好处在于,你知道有什么可以用,什么可以借鉴.(钉钉——协作桌面应用) PS:人最怕是不知道,而不是你不会. 1. jQuery 钉钉使用了1.9.1版本的jQuery,jQuery作为一个最为广泛使用库,已经不用说明它是什么了. 学习地址:http://jquery.com/ PS:Includes Sizzle.js 2. jQuery Hotkeys jQuery插件,可用来监听键盘事件,几乎支持所有的组合键. 学习地址:https://github.com/jeresig