underscore源碼分析(1)

李昌杰發布于2019-08-21 17:40 / 532人閱讀

摘要：版本最主要的一個特性是鏈式調用我們先簡單的實現鏈式調用的功能實現是很簡單的，直接函數就搞定了關鍵的實現思路也很簡單，我們可以這么理解當我們返回了如果想調用方法時，只要把綁定到就可以了我們再把傳參傳給方法，可參考在線調試因為持續調用所以加入控

underscore 版本1.83 最主要的一個特性是鏈式調用

_([1,2,3]).each(console.log)
// 1 0 (3) [1, 2, 3]
// 2 1 (3) [1, 2, 3]
// 3 2 (3) [1, 2, 3]

我們先簡單的實現鏈式調用的功能
實現 _.each([1,2,3],console.log) 是很簡單的，直接_.each函數就搞定了

關鍵的_().each實現思路也很簡單，我們可以這么理解
當我們返回了new _(obj),如果想調用each方法時，只要把each綁定到prototype就可以了
我們再把傳參obj傳給each方法，可參考_.each.apply(_, args)
jsfiddle在線調試

var _ = function(obj) {
  //因為new _持續調用_, 所以加入if 控制死循環
  if (!(this instanceof _)) return new _(obj);
 ?//把傳入的obj參數保存起來
 ?this._wrapped = obj;
};

_.each = function(obj, iteratee) {
  var i, length;
  for (i = 0, length = obj.length; i < length; i++) {
       iteratee(obj[i], i, obj);
    }
  return obj;
};

_.prototype.each = function() {
  var args = [this._wrapped];
  [].push.apply(args, arguments);
  return _.each.apply(_, args)
};

_.each([1,2,3],console.log)
_([1,2,3]).each(console.log)

但是我們怎么實現下面的功能呢?

_([1,2,3]).map(function(a){return a * 2}).each(console.log) //報錯
// 2 0
// 4 1
// 6 2

在用underscore的時候我們發現有個_.chain方法，可以實現鏈式連寫

_.chain([1,2,3]).map(function(a){return a * 2}).each(console.log)

// 2 0
// 4 1
// 6 2

我們接下來簡單實現
主要的關鍵點是chainResult函數，返回_(obj).chain()jsfiddle在線調試

var _ = function(obj) {
  if (obj instanceof _) return obj;
  if (!(this instanceof _)) return new _(obj);
  this._wrapped = obj;
};

_.each = function(obj, iteratee) {
  var i, length;
  for (i = 0, length = obj.length; i < length; i++) {
       iteratee(obj[i], i, obj);
    }
  return obj;
};
_.map = function(obj, iteratee, context) {
    var length = obj.length,
        results = Array(length);
    for (var index = 0; index < length; index++) {
      results[index] = iteratee(obj[index], index, obj);
    }
    return results;
  };
 var chainResult = function(instance, obj) {
    return instance._chain ? _(obj).chain() : obj;
  };
  
_.chain = function(obj) {
  var instance = _(obj);
  instance._chain = true;
  return instance;
};

_.prototype.each = function() {
  var args = [this._wrapped];
  [].push.apply(args, arguments);
  return chainResult(this, _.each.apply(_, args))
};
_.prototype.map = function() {
  var args = [this._wrapped];
  [].push.apply(args, arguments);
  return chainResult(this, _.map.apply(_, args))
};
_.prototype.chain = function() {
  var args = [this._wrapped];
  [].push.apply(args, arguments);
  return chainResult(this, _.chain.apply(_, args))
};

_.chain([1,2,3]).map(function(a){ return a * 2}).each(console.log)

我們發現prototype原型鏈的時候調用的方法都一樣的，可以寫個函數循環jsfiddle在線調試

function mixin(){
  _.each(["chain", "each", "map"], function(name) {
    var func = _[name]
    _.prototype[name] = function() {
      var args = [this._wrapped];
      [].push.apply(args, arguments);
      return chainResult(this, func.apply(_, args));
    };
  });
}

GPU云服務器云服務器 underscore源碼分析 underscore underscore系列 underscore.js cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89841.html

underscore源碼剖析之整體架構

摘要：我這里有個不夠準確但容易理解的說法，就是檢查一個對象是否為另一個構造函數的實例，為了更容易理解，下面將全部以是的實例的方式來說。 underscore源碼分析之整體架構最近打算好好看看underscore源碼，一個是因為自己確實水平不夠，另一個是underscore源碼比較簡單，比較易讀。本系列打算對underscore1.8.3中關鍵函數源碼進行分析，希望做到最詳細的源碼分析。今...

2shou 2019-08-22 15:27 評論0 收藏0
underscore源碼分析之基礎方法

摘要：在上篇文章整體架構分析中，我們講過上面的方法有兩種掛載方式，一個是掛載到構造函數上以的形式直接調用在后文上統稱構造函數調用，另一種則是掛到上以的形式被實例調用在后文上統稱原型調用。 underscore源碼分析之基礎方法本文是underscore源碼剖析系列的第二篇，主要介紹underscore中一些基礎方法的實現。 mixin 在上篇文章underscore整體架構分析中，我們講...

BigNerdCoding 2019-08-22 15:32 評論0 收藏0
underscore 的源碼該如何閱讀？

摘要：所以它與其他系列的文章并不沖突，完全可以在閱讀完這個系列后，再跟著其他系列的文章接著學習。如何閱讀我在寫系列的時候，被問的最多的問題就是該怎么閱讀源碼我想簡單聊一下自己的思路。感謝大家的閱讀和支持，我是冴羽，下個系列再見啦前言別名：《underscore 系列 8 篇正式完結！》介紹 underscore 系列是我寫的第三個系列，前兩個系列分別是 JavaScript 深入系列、...

weknow619 2019-08-22 16:00 評論0 收藏0
學習 underscore 源碼整體架構，打造屬于自己的函數式編程類庫

摘要：譯立即執行函數表達式處理支持瀏覽器環境微信小程序。學習整體架構，利于打造屬于自己的函數式編程類庫。下一篇文章可能是學習的源碼整體架構。也可以加微信，注明來源，拉您進前端視野交流群。前言上一篇文章寫了jQuery整體架構，學習 jQuery 源碼整體架構，打造屬于自己的 js 類庫雖然看過挺多underscore.js分析類的文章，但總感覺少點什么。這也許就是紙上得來終覺淺，絕知此...

junnplus 2019-08-26 10:40 評論0 收藏0
underscore.js 源碼分析之 _.each() 函數

摘要：遍歷中的所有元素，按順序用遍歷輸出每個元素。如果傳遞了參數，則把綁定到對象上。返回以方便鏈式調用。 each _.each(list, iteratee, [context])?Alias:?forEach?遍歷list中的所有元素，按順序用遍歷輸出每個元素。如果傳遞了context參數，則把iteratee綁定到context對象上。每次調用iteratee都會傳遞三個參數：(ele...

xbynet 2019-08-20 12:09 評論0 收藏0