成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Proxy 的巧用

feng409 / 1739人閱讀

摘要：為了保證的可讀性，本文采用意譯而非直譯。對(duì)象的所有用法，都是上面的這種形式。其中用來(lái)生成實(shí)例，是表示所要攔截的對(duì)象，是用來(lái)定制攔截行為的對(duì)象。雖然不同的創(chuàng)建模式支持類(lèi)似的功能，但無(wú)法用隱式初始值包裝對(duì)象。

為了保證的可讀性，本文采用意譯而非直譯。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

Proxy 介紹

使用Proxy，你可以將一只貓偽裝成一只老虎。下面大約有6個(gè)例子，我希望它們能讓你相信，Proxy 提供了強(qiáng)大的 Javascript 元編程。

盡管它不像其他ES6功能用的普遍，但Proxy有許多用途，包括運(yùn)算符重載，對(duì)象模擬，簡(jiǎn)潔而靈活的API創(chuàng)建，對(duì)象變化事件，甚至Vue 3背后的內(nèi)部響應(yīng)系統(tǒng)提供動(dòng)力。

Proxy用于修改某些操作的默認(rèn)行為，也可以理解為在目標(biāo)對(duì)象之前架設(shè)一層攔截，外部所有的訪問(wèn)都必須先通過(guò)這層攔截，因此提供了一種機(jī)制，可以對(duì)外部的訪問(wèn)進(jìn)行過(guò)濾和修改。這個(gè)詞的原理為代理，在這里可以表示由它來(lái)“代理”某些操作，譯為“代理器”。

ES6原生提供了Proxy構(gòu)造函數(shù)，用來(lái)生成Proxy實(shí)例。

var proxy = new Proxy(target, handler);

Proxy對(duì)象的所有用法，都是上面的這種形式。不同的只是handle參數(shù)的寫(xiě)法。其中new Proxy用來(lái)生成Proxy實(shí)例，target是表示所要攔截的對(duì)象，handle是用來(lái)定制攔截行為的對(duì)象。

下面是 Proxy 最簡(jiǎn)單的例子是，這是一個(gè)有陷阱的代理，一個(gè)get陷阱，總是返回42。

let target = {
  x: 10,
  y: 20
}

let hanler = {
  get: (obj, prop) => 42
}

target = new Proxy(target, hanler)

target.x //42
target.y //42
target.x // 42

結(jié)果是一個(gè)對(duì)象將為任何屬性訪問(wèn)操作都返回“42”。 這包括target.x，target["x"]，Reflect.get(target, "x")等。

但是，Proxy 陷阱當(dāng)然不限于屬性的讀取。 它只是十幾個(gè)不同陷阱中的一個(gè)：

handler.get

handler.set

handler.has

handler.apply

handler.construct

handler.ownKeys

handler.deleteProperty

handler.defineProperty

handler.isExtensible

handler.preventExtensions

handler.getPrototypeOf

handler.setPrototypeOf

handler.getOwnPropertyDescriptor

Proxy 用例

默認(rèn)值/“零值”

在 Go 語(yǔ)言中，有零值的概念，零值是特定于類(lèi)型的隱式默認(rèn)結(jié)構(gòu)值。其思想是提供類(lèi)型安全的默認(rèn)基元值，或者用gopher的話(huà)說(shuō)，給結(jié)構(gòu)一個(gè)有用的零值。

雖然不同的創(chuàng)建模式支持類(lèi)似的功能，但Javascript無(wú)法用隱式初始值包裝對(duì)象。Javascript中未設(shè)置屬性的默認(rèn)值是undefined。但 Proxy 可以改變這種情況。

const withZeroValue = (target, zeroValue) => new Proxy(target, {
  get: (obj, prop) => (prop in obj) ? obj[prop] : zeroValue
})

函數(shù)withZeroValue 用來(lái)包裝目標(biāo)對(duì)象。 如果設(shè)置了屬性，則返回屬性值。 否則，它返回一個(gè)默認(rèn)的“零值”。

從技術(shù)上講，這種方法也不是隱含的，但如果我們擴(kuò)展withZeroValue，以Boolean (false), Number (0), String (""), Object ({})，Array ([])等對(duì)應(yīng)的零值，則可能是隱含的。

let pos = {
  x: 4,
  y: 19
}

console.log(pos.x, pos.y, pos.z) // 4, 19, undefined

pos = withZeroValue(pos, 0)

console.log(pos.z, pos.y, pos.z) // 4, 19, 0

此功能可能有用的一個(gè)地方是坐標(biāo)系。 繪圖庫(kù)可以基于數(shù)據(jù)的形狀自動(dòng)支持2D和3D渲染。 不是創(chuàng)建兩個(gè)多帶帶的模型，而是始終將z默認(rèn)為 0 而不是undefined，這可能是有意義的。

負(fù)索引數(shù)組

在JS中獲取數(shù)組中的最后一個(gè)元素方式通過(guò)寫(xiě)的很冗長(zhǎng)且重復(fù)，也容易出錯(cuò)。 這就是為什么有一個(gè)TC39提案定義了一個(gè)便利屬性Array.lastItem來(lái)獲取和設(shè)置最后一個(gè)元素。

其他語(yǔ)言，如Python和Ruby，使用負(fù)組索引更容易訪問(wèn)最后面的元素。例如，可以簡(jiǎn)單地使用arr[-1]替代arr[arr.length-1]訪問(wèn)最后一個(gè)元素。

使用 Proxy 也可以在 Javascript 中使用負(fù)索引。

const negativeArray = (els) => new Proxy(els, {
  get: (target, propKey, receiver) => Reflect.get(target,
    (+propKey < 0) ? String(target.length + +propKey) : propKey, receiver)
});

一個(gè)重要的注意事項(xiàng)是包含handler.get的陷阱字符串化所有屬性。 對(duì)于數(shù)組訪問(wèn)，我們需要將屬性名稱(chēng)強(qiáng)制轉(zhuǎn)換為Numbers，這樣就可以使用一元加運(yùn)算符簡(jiǎn)潔地完成。

現(xiàn)在[-1]訪問(wèn)最后一個(gè)元素，[-2]訪問(wèn)倒數(shù)第二個(gè)元素，以此類(lèi)推。

const unicorn = negativeArray(["

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105712.html

相關(guān)文章

  • Proxy 的巧用

    摘要：為了保證的可讀性，本文采用意譯而非直譯。對(duì)象的所有用法，都是上面的這種形式。其中用來(lái)生成實(shí)例，是表示所要攔截的對(duì)象，是用來(lái)定制攔截行為的對(duì)象。雖然不同的創(chuàng)建模式支持類(lèi)似的功能，但無(wú)法用隱式初始值包裝對(duì)象。 為了保證的可讀性，本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ Proxy 介紹 使用Proxy，你可以將一只貓偽裝成一只老虎。下面大...

    FreeZinG 評(píng)論0 收藏0

  • CSS（一）偽元素的巧用

    摘要：并且，一些偽元素可以使開(kāi)發(fā)者獲取到不存在于源文檔中的內(nèi)容比如常見(jiàn)的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類(lèi)使用一個(gè)冒號(hào)例如。就本文而言，我們將把我們探討的范圍限制在和這兩個(gè)偽元素的巧用上。 作為一門(mén)前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類(lèi)和...

    entner 評(píng)論0 收藏0

  • 異或運(yùn)算的巧用 → 不用額外的變量，如何交換兩個(gè)變量的值？

    摘要：開(kāi)心一刻兩頭奶牛在一起吃草，其中一頭奶牛甲越吃越慢，一副若有所思的模樣，另一頭奶牛奶牛乙發(fā)覺(jué)了，開(kāi)始了對(duì)話(huà)奶牛乙擱那合計(jì)啥呢奶牛甲你幫我合計(jì)合計(jì)奶牛乙咋地了奶牛甲我吃的是草，擠出來(lái)的是奶，也就是說(shuō)我把沒(méi)用的變成有用的了奶牛乙是這個(gè)事奶牛甲人開(kāi)心一刻　　兩頭奶牛在一起吃草，其中一頭（奶牛甲）越吃越慢，一副若有所思的模樣，另一頭奶牛（奶牛乙）發(fā)覺(jué)了，開(kāi)始了對(duì)話(huà)　　奶牛乙：擱那合計(jì)啥呢？　　奶牛甲...

    不知名網(wǎng)友 評(píng)論0 收藏0

  • CSS3-transition常用屬性及示例

    摘要：主要用來(lái)指定瀏覽器的過(guò)渡速度，以及過(guò)渡期間的操作進(jìn)展情況，解釋下注意值可以中定義自己的值，如過(guò)渡效果開(kāi)始前的延遲時(shí)間，單位秒或者毫秒與的巧用示例元素上浮示例元素上浮后續(xù)還會(huì)繼續(xù)補(bǔ)充，真心強(qiáng)大transition參數(shù) 語(yǔ)法 transition: property duration timing-function delay transition屬性是個(gè)復(fù)合屬性，她包括以下幾個(gè)子屬性： ...

    derek_334892 評(píng)論0 收藏0

  • 巧用代理設(shè)計(jì)模式(Proxy Design Pattern)改善前端圖片加載體驗(yàn)

    摘要：我們用一些前端框架的這個(gè)控件類(lèi)去顯示圖片。如果直接調(diào)用控件類(lèi)的代碼那么在這張具體的圖片真正加載到本地之前，上顯示一片空白，這個(gè)用戶(hù)體驗(yàn)不好。 這篇文章介紹一種使用代理設(shè)計(jì)模式（Proxy Design Pattern）的方法來(lái)改善您的前端應(yīng)用里圖片加載的體驗(yàn)。 假設(shè)我們的應(yīng)用里需要顯示一張尺寸很大的圖片，位于遠(yuǎn)端服務(wù)器。我們用一些前端框架的Image這個(gè)控件類(lèi)去顯示圖片。如果直接調(diào)用控...

    dackel 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

feng409

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<