摘要:版本最主要的一個(gè)特性是鏈?zhǔn)秸{(diào)用我們先簡單的實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的功能實(shí)現(xiàn)是很簡單的,直接函數(shù)就搞定了關(guān)鍵的實(shí)現(xiàn)思路也很簡單,我們可以這么理解當(dāng)我們返回了如果想調(diào)用方法時(shí),只要把綁定到就可以了我們再把傳參傳給方法,可參考在線調(diào)試因?yàn)槌掷m(xù)調(diào)用所以加入控
underscore 版本1.83 最主要的一個(gè)特性是鏈?zhǔn)秸{(diào)用
_([1,2,3]).each(console.log) // 1 0 (3) [1, 2, 3] // 2 1 (3) [1, 2, 3] // 3 2 (3) [1, 2, 3]
我們先簡單的實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的功能
實(shí)現(xiàn) _.each([1,2,3],console.log) 是很簡單的 ,直接_.each函數(shù)就搞定了
關(guān)鍵的_().each實(shí)現(xiàn)思路也很簡單,我們可以這么理解
當(dāng)我們返回了new _(obj),如果想調(diào)用each方法時(shí),只要把each綁定到prototype就可以了
我們再把傳參obj傳給each方法,可參考_.each.apply(_, args)
jsfiddle在線調(diào)試
var _ = function(obj) { //因?yàn)閚ew _持續(xù)調(diào)用_, 所以加入if 控制死循環(huán) if (!(this instanceof _)) return new _(obj); ?//把傳入的obj參數(shù)保存起來 ?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)
但是 我們怎么實(shí)現(xiàn)下面的功能呢?
_([1,2,3]).map(function(a){return a * 2}).each(console.log) //報(bào)錯(cuò) // 2 0 // 4 1 // 6 2
在用underscore的時(shí)候我們發(fā)現(xiàn)有個(gè)_.chain方法,可以實(shí)現(xiàn)鏈?zhǔn)竭B寫
_.chain([1,2,3]).map(function(a){return a * 2}).each(console.log) // 2 0 // 4 1 // 6 2
我們接下來簡單實(shí)現(xiàn)
主要的關(guān)鍵點(diǎn)是chainResult函數(shù),返回_(obj).chain()jsfiddle在線調(diào)試
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)
我們發(fā)現(xiàn)prototype原型鏈的時(shí)候調(diào)用的方法都一樣的,可以寫個(gè)函數(shù)循環(huán)jsfiddle在線調(diào)試
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)); }; }); }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/89841.html
摘要:我這里有個(gè)不夠準(zhǔn)確但容易理解的說法,就是檢查一個(gè)對象是否為另一個(gè)構(gòu)造函數(shù)的實(shí)例,為了更容易理解,下面將全部以是的實(shí)例的方式來說。 underscore源碼分析之整體架構(gòu) 最近打算好好看看underscore源碼,一個(gè)是因?yàn)樽约捍_實(shí)水平不夠,另一個(gè)是underscore源碼比較簡單,比較易讀。本系列打算對underscore1.8.3中關(guān)鍵函數(shù)源碼進(jìn)行分析,希望做到最詳細(xì)的源碼分析。今...
摘要:在上篇文章整體架構(gòu)分析中,我們講過上面的方法有兩種掛載方式,一個(gè)是掛載到構(gòu)造函數(shù)上以的形式直接調(diào)用在后文上統(tǒng)稱構(gòu)造函數(shù)調(diào)用,另一種則是掛到上以的形式被實(shí)例調(diào)用在后文上統(tǒng)稱原型調(diào)用。 underscore源碼分析之基礎(chǔ)方法 本文是underscore源碼剖析系列的第二篇,主要介紹underscore中一些基礎(chǔ)方法的實(shí)現(xiàn)。 mixin 在上篇文章underscore整體架構(gòu)分析中,我們講...
摘要:所以它與其他系列的文章并不沖突,完全可以在閱讀完這個(gè)系列后,再跟著其他系列的文章接著學(xué)習(xí)。如何閱讀我在寫系列的時(shí)候,被問的最多的問題就是該怎么閱讀源碼我想簡單聊一下自己的思路。感謝大家的閱讀和支持,我是冴羽,下個(gè)系列再見啦 前言 別名:《underscore 系列 8 篇正式完結(jié)!》 介紹 underscore 系列是我寫的第三個(gè)系列,前兩個(gè)系列分別是 JavaScript 深入系列、...
摘要:譯立即執(zhí)行函數(shù)表達(dá)式處理支持瀏覽器環(huán)境微信小程序。學(xué)習(xí)整體架構(gòu),利于打造屬于自己的函數(shù)式編程類庫。下一篇文章可能是學(xué)習(xí)的源碼整體架構(gòu)。也可以加微信,注明來源,拉您進(jìn)前端視野交流群。 前言 上一篇文章寫了jQuery整體架構(gòu),學(xué)習(xí) jQuery 源碼整體架構(gòu),打造屬于自己的 js 類庫 雖然看過挺多underscore.js分析類的文章,但總感覺少點(diǎn)什么。這也許就是紙上得來終覺淺,絕知此...
摘要:遍歷中的所有元素,按順序用遍歷輸出每個(gè)元素。如果傳遞了參數(shù),則把綁定到對象上。返回以方便鏈?zhǔn)秸{(diào)用。 each _.each(list, iteratee, [context])?Alias:?forEach?遍歷list中的所有元素,按順序用遍歷輸出每個(gè)元素。如果傳遞了context參數(shù),則把iteratee綁定到context對象上。每次調(diào)用iteratee都會傳遞三個(gè)參數(shù):(ele...
閱讀 2086·2021-11-15 17:57
閱讀 751·2021-11-11 16:54
閱讀 2603·2021-09-27 13:58
閱讀 4094·2021-09-06 15:00
閱讀 960·2021-09-04 16:45
閱讀 3514·2019-08-30 15:56
閱讀 1793·2019-08-30 15:53
閱讀 1633·2019-08-30 14:12