2.underscore从功能出发看源码

2019-07-10  本文已影响0人  yaoyao妖妖

实用功能
Tips: // 前面是源码部分,后面是源码方法的使用

1.noConflict _.noConflict()

放弃Underscore 的控制变量 _ 返回Underscore 对象的引用

 var root = this;
// 记录现在 _ 的引用
 var previousUnderscore = root._;
  _.noConflict = function () {
    root._ = previousUnderscore;
    return this;
  };
// 使用 underscore  替代 _
var underscore = _.noConflict();

2.identity _.identity(value)

返回与传入参数相等的值. 相当于数学里的: f(x) = x
这个函数看似无用, 但是在Underscore里被用作默认的迭代器iterator.

  _.identity = function (value) {
    return value;
  };
//
var stooge = {name: 'moe'};
stooge === _.identity(stooge);
=> true

3.constant _.constant(value)

创建一个函数,这个函数 返回相同的值 用来作为_.constant的参数

  // Predicate-generating functions. Often useful outside of Underscore.
  _.constant = function (value) {
    return function () {
      return value;
    };
  };
//
var stooge = {name: 'moe'};
stooge === _.constant(stooge)();
=> true

4.noop _.noop()

返回undefined,不论传递给它的是什么参数。 可以用作默认可选的回调参数。

_.noop = function () {};
//
obj.initialize = _.noop;

5.times _.times(n, iteratee, [context])

调用给定的迭代函数n次,每一次调用iteratee传递index参数。生成一个返回值的数组。

  // 执行某函数 n 次
  _.times = function (n, iteratee, context) {
    var accum = Array(Math.max(0, n));
    iteratee = optimizeCb(iteratee, context, 1);
    for (var i = 0; i < n; i++) { accum[i] = iteratee(i); }
    return accum;
  };
//
_.times(3, function(n){ genie.grantWishNumber(n); });

6.random _.random(min, max)

返回一个min 和 max之间的随机整数。如果你只传递一个参数,那么将返回0和这个参数之间的整数。

  _.random = function (min, max) {
    if (max == null) {
      max = min;
      min = 0;
    }
    return min + Math.floor(Math.random() * (max - min + 1));
  };

//
_.random(0, 100);
=> 42

7.mixin _.mixin(object)

允许用您自己的实用程序函数扩展Underscore。传递一个 {name: function}定义的哈希添加到Underscore对象,以及面向对象封装。

  // 可向 underscore 函数库扩展自己的方法
  // obj 参数必须是一个对象(JavaScript 中一切皆对象)
  // 且自己的方法定义在 obj 的属性上
  // 如 obj.myFunc = function() {...}
  // 形如 {myFunc: function(){}}
  // 之后便可使用如下: _.myFunc(..) 或者 OOP _(..).myFunc(..)
  _.mixin = function (obj) {
    // 遍历 obj 的 key,将方法挂载到 Underscore 上
    // 其实是将方法浅拷贝到 _.prototype 上
    _.each(_.functions(obj), function (name) {
      // 直接把方法挂载到 _[name] 上
      // 调用类似 _.myFunc([1, 2, 3], ..)
      var func = _[name] = obj[name];

      // 浅拷贝
      // 将 name 方法挂载到 _ 对象的原型链上,使之能 OOP 调用
      _.prototype[name] = function () {
        // 第一个参数
        var args = [this._wrapped];

        // arguments 为 name 方法需要的其他参数
        push.apply(args, arguments);
        // 执行 func 方法
        // 支持链式操作
        return result(this, func.apply(_, args));
      };
    });
  };
//
_.mixin({
  capitalize: function(string) {
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});
_("fabio").capitalize();
=> "Fabio"

8.iteratee _.iteratee(value, [context])

生成可应用于集合中的每个元素的回调。.iteratee支持许多常见回调用例的简写语法。根据值的类型,.iteratee 将返回:

  _.iteratee = function (value, context) {
    return cb(value, context, Infinity);
  };
//
// No value
_.iteratee();
=> _.identity()

// Function
_.iteratee(function(n) { return n * 2; });
=> function(n) { return n * 2; }

// Object
_.iteratee({firstName: 'Chelsea'});
=> _.matcher({firstName: 'Chelsea'});

// Anything else
_.iteratee('firstName');
=> _.property('firstName');
//通过_.iteratee转换判断的Underscore 方法的完整列表是: countBy, every, filter, find, findIndex, findKey, findLastIndex, groupBy, indexBy, map, mapObject, max, min, partition, reject, some, sortBy, sortedIndex, and uniq

9.uniqueId _.uniqueId([prefix])

为需要的客户端模型或DOM元素生成一个全局唯一的id。如果prefix参数存在, id 将附加给它。

  // 生成客户端临时的 DOM ids
  var idCounter = 0;
  _.uniqueId = function (prefix) {
    var id = ++idCounter + '';
    return prefix ? prefix + id : id;
  };
//
_.uniqueId('contact_');
=> 'contact_104'

10.escape _.escape(string)

转义HTML字符串,替换&, <, >, ", ', 和 /字符。


//
_.escape('Curly, Larry & Moe');
=> "Curly, Larry &amp; Moe"

11.unescape_.unescape(string)

转义HTML字符串,替换&, <, >, ", ', 和 /字符。


//
_.unescape('Curly, Larry &amp; Moe');
=> "Curly, Larry & Moe"

12.result _.result(object, property, [defaultValue])

如果指定的property 的值是一个函数,那么将在object上下文内调用它;否则,返回它。如果提供默认值,并且属性不存在,那么默认值将被返回。如果设置defaultValue是一个函数,它的结果将被返回。

  _.result = function (object, property, fallback) {
    var value = object == null ? void 0 : object[property];
    if (value === void 0) {
      value = fallback;
    }
    return _.isFunction(value) ? value.call(object) : value;
  };
//
var object = {cheese: 'crumpets', stuff: function(){ return 'nonsense'; }};
_.result(object, 'cheese');
=> "crumpets"
_.result(object, 'stuff');
=> "nonsense"
_.result(object, 'meat', 'ham');
=> "ham"

13.now _.now()

一个优化的方式来获得一个当前时间的整数时间戳。可用于实现定时/动画功能。

  // 返回当前时间的 "时间戳"(单位 ms)
  // 其实并不是时间戳,时间戳还要除以 1000(单位 s)
  // +new Date 类似
  _.now = Date.now || function () {
    return new Date().getTime();
  };
//
_.now();
=> 1392066795351

14.template

_.template(templateString, [settings])
将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。 模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。 如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。 当你要给模板函数赋值的时候,可以传递一个含有与模板对应属性的data对象 。 如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数. 参数 settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.

//
var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b>&lt;script&gt;</b>"

中文文档: https://www.html.cn/doc/underscore/#noConflict

上一篇下一篇

猜你喜欢

热点阅读