成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

深層屬性，輕松提取

sydMobile / 2566人閱讀

摘要：于是一些工具函數(shù)誕生了，比如的雖然它保證了開發(fā)者在提取屬性的過程中不會因?yàn)橛龅交蛑惖闹刀鴴伋觯秉c(diǎn)也很明顯屬性的路徑被寫成了字符串，開發(fā)者無法獲得編輯器的自動補(bǔ)全與智能糾錯。

面臨的問題

假設(shè)有這樣一個對象，表示的是 用戶是否啟用了回復(fù)通知的設(shè)置

const settings = {
    notification: {
        reply: {
            active: {
                true
            }
        }
        // ...其他設(shè)置項(xiàng)
    }
    // ...其他設(shè)置項(xiàng)
}

當(dāng)開發(fā)者想要提取 active 的值，最直接的方法是這么做

const isNotificationReplyActive = settings.notification.reply.active

但這是不安全的，因?yàn)?JavaScript 中通常使用 null 或 undefined 分別表示未定義或未聲明的值

typeof someVar === "undefined" // 未聲明
let someVar = null // 已聲明，未定義

實(shí)際開發(fā)過程中可能因?yàn)楸热绻?jié)省資源的考慮，當(dāng)用戶未進(jìn)行過設(shè)置時，它的 notification 或者更深的某一級的值是 null 或 undefined，而非對象。

// 比如當(dāng)未設(shè)置回復(fù)通知時，它是這樣的
const settings = {
    notification: {
        // 沒有 reply
    }
}

// 這種情況下， settings.notification.reply 的值是 undefined
// JS 中試圖獲取 undefined 上的 key 時會觸發(fā) TypeError
const isNotificationReplyActive = settings.notification.reply.active // TypeError!

于是開發(fā)者采取了這樣的措施

const isNotificationReplyActive = settings
    && settings.notification
    && settings.notification.reply
    && settings.notification.reply.active
// 或者
try {
    const isNotificationReplyActive = settings.notification.reply.active
} catch (err) {
    // 錯誤處理
}

經(jīng)驗(yàn)豐富的開發(fā)者都知道，這樣做的缺點(diǎn)很多，在此就不展開了。

于是一些工具函數(shù)誕生了，比如 lodash 的 _.get

import _ from "lodash"
const isNotificationReplyActive = _.get(settings, "notification.reply.active")

雖然它保證了開發(fā)者在提取屬性的過程中不會因?yàn)橛龅?undefined 或 null 之類的值而拋出 TypeError ，但缺點(diǎn)也很明顯——

屬性的路徑被寫成了字符串，開發(fā)者無法獲得 IDE/編輯器 的自動補(bǔ)全與智能糾錯。

不能使用便捷的解構(gòu)語法—— const { notification: { reply: { active } } } = settings

簡直是一夜回到解放前。

解決方法 —— safe-touch

現(xiàn)在讓我們來回顧一下本文開頭的那張圖——它即是本文的主角、上述所有問題的解決方案。

// 引入
import safeTouch from "safe-touch"

const settings = { /* ... */ }
// 包裹要提取的對象
const touched = safeTouch(settings)

// 把它當(dāng)作函數(shù)調(diào)用，可以獲得原始值
touched() === settings // true

// 亦可以直接獲取 settings 上存在的屬性，同樣通過調(diào)用取得屬性值
// 在現(xiàn)代化的 IDE/編輯器 中，這一過程可以給出智能提示與自動補(bǔ)全
touched.notification.reply.active() // 若依本文開頭給出的例子，值為 true

// 可以安全地獲取并不存在的屬性，返回 undefined ，不會拋出 TypeError
touched.something.does.not.exist[Math.random()]() // undefined

// 支持解構(gòu)
const { notification: { reply: { active, notExistingKey } } } = touched
active() // true
notExistingKey() // undefined
怎么做到的

其實(shí)不難，核心功能通過 ES6 的 Proxy 就可以實(shí)現(xiàn)。再結(jié)合 TypeScript 的類型判斷（初學(xué) TS，看了好久文檔），生成 index.d.ts 供智能化的 IDE/編輯器 使用，就有了自動補(bǔ)全與智能提示。

短小的源碼 repo （歡迎 Star / issue）

可以從 npm 獲取

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/96112.html

相關(guān)文章

  • [譯] 最深刻而易懂的ES6解構(gòu)教程

    摘要：被解構(gòu)的數(shù)據(jù)項(xiàng)位于賦值運(yùn)算符的右側(cè)，可以是任何數(shù)組和對象的組合，允許隨意嵌套。數(shù)組模式位于賦值運(yùn)算符的左側(cè)，被結(jié)構(gòu)的數(shù)組在其右側(cè)。 解構(gòu)是ES6的新特性，用于從JavaScript對象和數(shù)組中提取數(shù)據(jù)，語法上比ES5所提供的更加簡潔、緊湊、清晰。它不僅能減少你的代碼量，還能從根本上改變你的編碼方式。用的越多，你就會發(fā)現(xiàn)越多塑造數(shù)據(jù)和函數(shù)的方式，這些實(shí)現(xiàn)方式在過去幾乎是不可能的。本文將深...

    AlphaGooo 評論0 收藏0

  • 前端進(jìn)階資源整理

    摘要：前端進(jìn)階進(jìn)階構(gòu)建項(xiàng)目一配置最佳實(shí)踐狀態(tài)管理之痛點(diǎn)分析與改良開發(fā)中所謂狀態(tài)淺析從時間旅行的烏托邦，看狀態(tài)管理的設(shè)計(jì)誤區(qū)使用更好地處理數(shù)據(jù)愛彼迎房源詳情頁中的性能優(yōu)化從零開始，在中構(gòu)建時間旅行式調(diào)試用輕松管理復(fù)雜狀態(tài)如何把業(yè)務(wù)邏輯這個故事講好和 前端進(jìn)階 webpack webpack進(jìn)階構(gòu)建項(xiàng)目(一) Webpack 4 配置最佳實(shí)踐 react Redux狀態(tài)管理之痛點(diǎn)、分析與...

    BlackMass 評論0 收藏0

  • ES6：解構(gòu)——JavaScript 從數(shù)組和對象中提取數(shù)據(jù)的優(yōu)雅方法

    摘要：跳過數(shù)組中的元素學(xué)會了如何按順序從數(shù)組中提取數(shù)據(jù)。解構(gòu)方法中提供了很好的解決方案。從對象中提取數(shù)據(jù)依然從最基本的開始，提取從中提取和。 本文編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58f41a06a58c240ae35bb8e6 英文連接：ES6: Destructuring — an elegant...

    GraphQuery 評論0 收藏0

  • 利用Mesosphere DC/OS在任意基礎(chǔ)設(shè)施之上實(shí)現(xiàn)TensorFlow分布

    摘要：與其它可用于的軟件包一樣，新的軟件包亦可利用來加速各類機(jī)器學(xué)習(xí)與深度學(xué)習(xí)應(yīng)用。數(shù)據(jù)科學(xué)家們必須首先構(gòu)建起機(jī)器學(xué)習(xí)模型，確保其適合分布式計(jì)算特性，而后將其映射至深層神經(jīng)網(wǎng)絡(luò)當(dāng)中，最終編寫代碼以為這套新模型提供支持。 今天，我們興奮地宣布在Mesosphere DC/OS服務(wù)目錄當(dāng)中發(fā)布TensorFlow的be...

    hightopo 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<