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

資訊專欄INFORMATION COLUMN

深層屬性，輕松提取

sydMobile / 2514人閱讀

摘要：于是一些工具函數(shù)誕生了，比如的雖然它保證了開發(fā)者在提取屬性的過程中不會因為遇到或之類的值而拋出，但缺點也很明顯屬性的路徑被寫成了字符串，開發(fā)者無法獲得編輯器的自動補全與智能糾錯。

面臨的問題

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

const settings = {
    notification: {
        reply: {
            active: {
                true
            }
        }
        // ...其他設置項
    }
    // ...其他設置項
}

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

const isNotificationReplyActive = settings.notification.reply.active

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

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

實際開發(fā)過程中可能因為比如節(jié)省資源的考慮，當用戶未進行過設置時，它的 notification 或者更深的某一級的值是 null 或 undefined，而非對象。

// 比如當未設置回復通知時，它是這樣的
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)驗豐富的開發(fā)者都知道，這樣做的缺點很多，在此就不展開了。

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

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

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

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

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

簡直是一夜回到解放前。

解決方法 —— safe-touch

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

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

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

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

// 亦可以直接獲取 settings 上存在的屬性，同樣通過調(diào)用取得屬性值
// 在現(xiàn)代化的 IDE/編輯器 中，這一過程可以給出智能提示與自動補全
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
怎么做到的

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

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

可以從 npm 獲取

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

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

相關(guān)文章

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

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

    AlphaGooo 評論0 收藏0

  • 前端進階資源整理

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

    BlackMass 評論0 收藏0

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

    摘要：跳過數(shù)組中的元素學會了如何按順序從數(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在任意基礎設施之上實現(xiàn)TensorFlow分布

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

    hightopo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<