国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[譯]JSX：硬幣的另一面

mudiyouyou / 2154人閱讀

摘要：它不過是硬幣的另一面。因此，既然我們能夠接受與通過這種方式混合在一塊兒，那么是時(shí)候讓介入并向我們展示硬幣的另一面了第三階段的并不是一個(gè)激進(jìn)的改變，是因?yàn)槲覀冞@個(gè)行業(yè)從一開始就注定和應(yīng)該是在一起的。

React框架剛剛發(fā)布的時(shí)候，JSX顛覆了很多人的想法。習(xí)慣了HTML標(biāo)簽與JavaScript代碼分離的前端工程師們，看到JSX大概都會不禁吐槽：“這些奇怪的標(biāo)簽出現(xiàn)在JavaScript里是要干啥?！”我們一向貫徹的關(guān)注點(diǎn)分離原則呢？Facebook的工程師難道一點(diǎn)都不了解這些社區(qū)中已經(jīng)默認(rèn)的規(guī)范？

像很多人一樣，我一開始對JSX這種語法是持懷疑態(tài)度的。甚至當(dāng)我愛上JSX后，每次我向別的開發(fā)者推薦這種語法，我都會覺得我是在向別人展示我丑陋的孩子。

從一開始的懷疑到愛上JSX，我漸漸意識到JSX其實(shí)并沒有那么激進(jìn)。它不過是硬幣的另一面。JSX其實(shí)是前端開發(fā)中自然進(jìn)化的一個(gè)過渡。為什么這么說呢，我們有必要回顧一下前端這幾年的發(fā)展歷程了。

第一階段：非侵入式JavaScript（Unobtrusive JavaScript）

還記得那個(gè)jQuery盛行的時(shí)代么？非侵入式的JavaScript被各種提倡。我們的HTML是純HTML，我們的JavaScript是純JavaScript。我們開發(fā)時(shí)是嚴(yán)格貫徹所謂的關(guān)注點(diǎn)分離的。

我們像下面這樣寫HTML：

Click to hide me

而我們的JavaScript會這樣寫：

$(".hide").click(function() { 
    $(this).hide(); 
})

按照之前的理解，這樣做是真的做到了關(guān)注點(diǎn)分離對吧？然而我覺得并不是這樣。

這樣寫看起來像是一個(gè)好主意。我們的HTML是絕對純凈的，完全不參合任何邏輯代碼。但是我們會慢慢發(fā)現(xiàn)一個(gè)問題：我怎么知道哪行JavaScript代碼在控制我的HTML呢？答案是：除非我閱讀了整個(gè)JavaScript文件，我才能明白，哪段JavaScript代碼在控制哪段HTML。（譯者注：這樣的情況很常見，尤其是在大型項(xiàng)目中，我們有無數(shù)的還有可能重復(fù)的DOM節(jié)點(diǎn)，HTML和JavaScript文件不在一起，要修改起來簡直太復(fù)雜了）。在這種模式中，你不能僅僅簡單的修改一個(gè)標(biāo)簽而不去檢查對應(yīng)的JavaScript代碼以確保你的修改沒有破換選擇器執(zhí)行。你看，這里實(shí)際上并沒有實(shí)現(xiàn)關(guān)注點(diǎn)分離，我們還是要不斷的關(guān)注HTML和JavaScript之間的聯(lián)系。我們做到的僅僅是把JS和HTML分離到了兩個(gè)不同的文件中。在本質(zhì)上這兩種技術(shù)是密不可分的，他們必須保持步調(diào)一致，否則就會導(dǎo)致我們的應(yīng)用崩潰。

直接分割HTML和JS導(dǎo)致我們的應(yīng)用更加難以維護(hù)和調(diào)試。每次你想修改一個(gè)標(biāo)簽，總是會擔(dān)心破壞一個(gè)jQuery選擇器。如果我們對關(guān)注點(diǎn)的分離不那么嚴(yán)格，也許可以減輕一些痛苦。于是，我們迎來了第二階段...

第二階段：雙向綁定（Two-way Binding）

在Knockout和Angular中出現(xiàn)的雙向綁定，讓所有前端開發(fā)者眼前一亮。許多開發(fā)者開始拋棄之前信奉的關(guān)注點(diǎn)分離，并全力擁抱這種在HTML標(biāo)簽中聲明式綁定的力量。當(dāng)數(shù)據(jù)發(fā)生改變，UI也自動(dòng)發(fā)生變動(dòng)。當(dāng)UI發(fā)生變動(dòng)，數(shù)據(jù)也隨之變動(dòng)。如此清晰，如此簡單。（譯者注：我認(rèn)為這是另一種意義上的關(guān)注點(diǎn)分離，我們不再需要關(guān)注HTML與JavaScript之間的聯(lián)系，我們需要做的就是維護(hù)好數(shù)據(jù)。）

這些框架的實(shí)現(xiàn)的確大不相同，但他們都在試圖做相同的事情。試想使用這幾個(gè)流行框架實(shí)現(xiàn)迭代數(shù)組這個(gè)例子：

//Angular


//Ember
{{#each user in users}}
//Knockout
data-bind=”foreach: users”

但是這里出現(xiàn)了一些有意思的事情————很少有人意識到一個(gè)非常顯著的問題：我們實(shí)際上在把JavaScript放到HTML中。這并不是我們所理解的那種關(guān)注點(diǎn)分離。我們可以發(fā)現(xiàn)這些框架都在處理同一件事：通過為HTML添加額外的特殊標(biāo)記使其更強(qiáng)大。這些標(biāo)記可以被解析為JavaScript。因此，既然我們能夠接受JavaScript與HTML通過這種方式混合在一塊兒，那么是時(shí)候讓React介入并向我們展示硬幣的另一面了...

第三階段：JSX

React的JSX并不是一個(gè)激進(jìn)的改變，是因?yàn)槲覀冞@個(gè)行業(yè)從一開始就注定HTML和JavaScript應(yīng)該是在一起的。

只有當(dāng)你體驗(yàn)過React和JSX之后，才能體會到這樣做有多少好處。React的JSX完全優(yōu)于所有的“第二階段”風(fēng)格的框架的原因有以下幾點(diǎn)：

編譯時(shí)錯(cuò)誤（Compile-time Errors）

當(dāng)你的HTML中出現(xiàn)輸入錯(cuò)誤時(shí)，你很難知道自己是哪里寫錯(cuò)了。在很多情況下這是一種無聲的運(yùn)行時(shí)錯(cuò)誤。比如，如果你在寫Angular應(yīng)用時(shí)輸入n-repeat而不是ng-repeat，什么都不會發(fā)生。當(dāng)你在寫Knockout應(yīng)用時(shí)把data-bind寫成data-bnd，也同樣什么都不會發(fā)生。在出現(xiàn)這些錯(cuò)誤時(shí)，你的應(yīng)用會悄無聲息的運(yùn)行時(shí)失敗。這太令人沮喪了。

相比之下，當(dāng)你在JSX中發(fā)生類似的輸入錯(cuò)誤時(shí)，它是不會被編譯的。忘記閉合

  • 標(biāo)簽了？難道你不想在你輸入錯(cuò)誤的HTML時(shí)得到豐富的反饋么？

    ReactifyError: /components/header.js: Parse Error: Line 23: Expected corresponding JSX closing tag for li while parsing file: /components/header.js

    有了JSX，這樣豐富的錯(cuò)誤反饋終于成為現(xiàn)實(shí)！靠這一點(diǎn)JSX絕對完勝。如此快速而又豐富的反饋極大的提高了生產(chǎn)效率。正如我在我的Clean Code課程中討論的那樣————良好的工程解決方案遵循速錯(cuò)原則。（譯者注：原文是：well- engineered solutions fail fast，關(guān)于fail fast可以查看http://geeklu.com/2010/07/fai... 進(jìn)行了解）

    充分利用JavaScript（Leverage the Full Power of JavaScript）

    使用JavaScript編寫你的標(biāo)記，意味著這些標(biāo)記可以借助JavaScript的全部能力，而不是像Angular或者Knockout這種以HTML為中心的框架只能提供有限的特殊標(biāo)記。（譯者注：我認(rèn)為這里作者的表述并不準(zhǔn)確，Angular也同樣可以自由擴(kuò)展HTML，只不過沒有React那么靈巧方便）。

    Client-side frameworks shouldn’t require you to learn a proprietary syntax for declaring loops and conditionals.
    客戶端框架不應(yīng)當(dāng)要求使用者學(xué)習(xí)特殊的語法來聲明循環(huán)或者條件語句。

    React減少了使用者學(xué)習(xí)另一種特殊的聲明循環(huán)和基本條件語句的成本。你可以看看第二階段中提到的幾個(gè)框架，他們實(shí)現(xiàn)雙向綁定的方式都是依靠一些屬于他們自己的特殊語法。相反，JSX看上去和HTML幾乎一樣，像循環(huán)和條件語句，完全依賴原生的JavaScript。與眾多的JavaScript框架相比，不需要去學(xué)習(xí)類似于數(shù)據(jù)綁定等特殊語法，這一點(diǎn)又讓React和JSX脫穎而出。

    并且，由于你將這些標(biāo)記與相關(guān)聯(lián)的JavaScript數(shù)據(jù)寫在一個(gè)文件中，當(dāng)你引用函數(shù)時(shí)，許多IDE能夠提供一些智能提示。想想當(dāng)你使用那些以HTML為中心的框架時(shí)，調(diào)用一個(gè)function卻總是輸入錯(cuò)誤時(shí)的苦惱吧！

    Final Thoughts

    JSX并不一個(gè)瘋狂的主意，它就是一段很正常的程序，因此不要再反感它了。

    JSX isn’t revolutionary. It’s evolutionary.

    JSX不是革命，它只是進(jìn)化發(fā)展的結(jié)果。

    像很多進(jìn)化、演變一樣，它給我們帶來的是一種改善。

    原文鏈接：https://medium.com/@housecor/...

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

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

    相關(guān)文章

    • [譯] 逐漸去掌握 React（作為一名 Angular 開發(fā)者）

      摘要：你是一個(gè)對感興趣的開發(fā)者嗎不用擔(dān)心，這真的不會讓你成為一個(gè)背叛者或其他什么，真的。事實(shí)上，這個(gè)想法并不是或獨(dú)創(chuàng)的它只是一種很棒的軟件開發(fā)實(shí)踐方式。把代碼分離到不同的文件里并不會自動(dòng)導(dǎo)致關(guān)注點(diǎn)分離。 原文鏈接 : Getting to Grips with React (as an Angular developer)原文作者 : DAVE CEDDIA譯者 : 李林璞（web前端領(lǐng)域）...

      channg 評論0 收藏0

    • [譯] W3C vs. WhatWG HTML5 標(biāo)準(zhǔn) - 差異記錄

      摘要：問題在于標(biāo)準(zhǔn)是同一硬幣的一面。然后，又改名為現(xiàn)存標(biāo)準(zhǔn)來指定它將不斷發(fā)展和不再支持使用版本號引用。作為這一步的結(jié)果，該組織正在積極開發(fā)的標(biāo)準(zhǔn)被稱為新版本。所以，刪除版本號使其具有連續(xù)性聽起來是比較合理地。特別地，標(biāo)準(zhǔn)去掉了和事件。 原文地址：http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-difference...

      ShevaKuilin 評論0 收藏0

    • [譯]基于 React Router 4 的可復(fù)用 Layout 組件

      摘要：通過向組件提供屬性，我們可以控制屬性的渲染。在這種情況下，我們將其包含在包含頁眉和頁腳的中，但這可能只是把其他組件做了簡單的分組。僅此而已短小精悍。的新版本專注于使用組件模型，而這些組件可以非常簡單的組合在一起。 本文翻譯自：Reusing layouts in React Router v4 在 React Router V4 應(yīng)用中，希望在每個(gè)路由上呈現(xiàn)一些默認(rèn)的組件，比如頁眉和頁...

      用戶83 評論0 收藏0

    • 理解CKB的Cell模型

      摘要：交易依然表示狀態(tài)的變化遷移。這樣一個(gè)模型的特點(diǎn)是狀態(tài)是第一性的所有者是狀態(tài)的屬性，每一份狀態(tài)只有一個(gè)所有者狀態(tài)不斷的被銷毀和創(chuàng)建。值得指出的是，的編程模型之所以強(qiáng)大，更多是因?yàn)樗袪顟B(tài)，而不是因?yàn)樗挠邢迗D靈完備。 在設(shè)計(jì) CKB 的時(shí)候，我們想要解決三個(gè)方面的問題： 狀態(tài)爆炸引起的公地悲劇及去中心化的喪失；計(jì)算和驗(yàn)證耦合在了一起使得無論是計(jì)算還是驗(yàn)證都失去了靈活性，難以擴(kuò)展；交易與價(jià)...

      henry14 評論0 收藏0

    • 對比特幣的繼承與創(chuàng)新！深入理解公鏈 CKB 的 Cell 模型

      摘要：為了理解底層公鏈的模型，我們前置了幾篇概念性文章，講述了我們應(yīng)該以狀態(tài)為中心設(shè)計(jì)區(qū)塊鏈系統(tǒng)的，以及這么做帶來的好處。交易依然表示狀態(tài)的變化遷移。 為了理解底層公鏈 CKB 的 Cell 模型，我們前置了幾篇概念性文章，講述了我們應(yīng)該以狀態(tài)為中心設(shè)計(jì)區(qū)塊鏈系統(tǒng)的，以及這么做帶來的好處。并且在上一篇文章中，詳細(xì)分析了比特幣 UTXO 模型和以太坊的 Account 模型，以及進(jìn)行了對比分析...

      ruicbAndroid 評論0 收藏0

    發(fā)表評論

    0條評論

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