STIMULUS（一） —— 介紹

wind3110991 發(fā)布于2019-08-23 14:06 / 3547人閱讀

摘要：參考閱讀是一款擁有謙遜理想的框架。這是一個(gè)受歡迎的方案，比如當(dāng)你六個(gè)月后返回一個(gè)模板不記得各種東西是如何組合在一起的時(shí)候?？勺x的代碼，也意味著團(tuán)隊(duì)中的其他人也能通過(guò)閱讀模版或者開(kāi)發(fā)者控制臺(tái)，來(lái)快速地追蹤行為或判斷問(wèn)題。

參考閱讀：https://chloerei.com/2018/02/...

Stimulus 是一款擁有謙遜理想的 JavaScript 框架。Stimulus 不會(huì)把你的應(yīng)用程序整個(gè)搬到前端，它的設(shè)計(jì)理念是通過(guò)自動(dòng)化將元素連接到 JavaScript 來(lái)你的 HTML。

將 HTML 連接到 JavaScript

Stimulus 的工作方式是不停地監(jiān)控頁(yè)面，等待 data-controller 這個(gè)魔法屬性出現(xiàn)。例如class屬性，你可以在它里面放入多個(gè)值。不同于應(yīng)用或移除 CSS 類(lèi)名，data-controller 的值是用于與 Stimulus 控制器相連接或斷開(kāi)連接的。
你可以這樣認(rèn)為：class 是連接 HTML 和 CSS 的橋梁，data-controller 是連接 HTLM 和 JavaScript 的橋梁。

在此基礎(chǔ)上，Stimulus 拯救了魔法屬性data-action，它描述了頁(yè)面上的事件應(yīng)該怎樣觸發(fā)控制器方法；還有魔法屬性data-target，它為你提供了在控制器作用域（controller’s scope）中尋找元素的句柄（handle ）。

關(guān)注點(diǎn)分離

Stimulus 的魔法屬性讓你清晰地將內(nèi)容與行為分離，如同你使用 CSS 將內(nèi)容與形式分離那樣。此外，Stimulus 的自然約定也鼓勵(lì)你按名稱(chēng)對(duì)相關(guān)聯(lián)的代碼進(jìn)行分組。

這樣的安排能幫助你構(gòu)建可復(fù)用的，類(lèi)似 trait 的控制器，為你的代碼帶來(lái)足夠使用的結(jié)構(gòu)層次，使之遠(yuǎn)離 “JavaScript 湯”。

可閱讀的文檔

當(dāng)你的 JavaScript 行為是由魔法屬性映射的，你可以閱讀一段 HTML 便能知道發(fā)生了什么。這是一個(gè)受歡迎的方案，比如當(dāng)你六個(gè)月后返回一個(gè)模板,不記得各種東西是如何組合在一起的時(shí)候。

可讀的代碼，也意味著團(tuán)隊(duì)中的其他人也能通過(guò)閱讀模版或者開(kāi)發(fā)者控制臺(tái)，來(lái)快速地追蹤行為或判斷問(wèn)題。

水是溫暖的

現(xiàn)在是時(shí)候來(lái)探索一下 Stimulus 的工作方式了。繼續(xù)閱讀，學(xué)習(xí)如何構(gòu)建你的第一個(gè)控制器。

Next: Hello, Stimulus

GPU云服務(wù)器云服務(wù)器 STIMULUS 自我介紹平臺(tái)介紹相關(guān)介紹

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

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

相關(guān)文章

STIMULUS（二） —— Hello, Stimulus

摘要：每個(gè)項(xiàng)目都是從開(kāi)始的，此項(xiàng)目也不例外。控制器為帶來(lái)生命力作為其核心，的目標(biāo)是自動(dòng)將元素連接到對(duì)象。檢查是否生效刷新頁(yè)面，你會(huì)看到任何改變都沒(méi)有。在中，處理事件的控制器方法叫做操作方法。這意味這我們擁有了標(biāo)準(zhǔn)的重構(gòu)技術(shù)兵工廠。學(xué)習(xí) Stimulus 的最簡(jiǎn)單方式就是構(gòu)建一個(gè)簡(jiǎn)單的控制器。這一章我們就來(lái)學(xué)習(xí)一個(gè)。先決條件要往下繼續(xù)，你需要運(yùn)行一個(gè) stimulus-starter ，...

bigdevil_s 2019-08-23 14:06 評(píng)論0 收藏0
前端開(kāi)發(fā)者手冊(cè)2019

摘要：年，和前端開(kāi)發(fā)者與應(yīng)用程序前端開(kāi)發(fā)者之間產(chǎn)生了巨大的分歧。開(kāi)發(fā)最常見(jiàn)的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開(kāi)發(fā)者可以從瀏覽器開(kāi)發(fā)中學(xué)習(xí)到，編寫(xiě)代碼不需要考慮瀏覽器引擎的限制。前端開(kāi)發(fā)者手冊(cè)2019 Cody Lindley 編著原文地址本手冊(cè)由Frontend Masters贊助，通過(guò)深入現(xiàn)代化的前端工程課程來(lái)提高你的技能。下載：PDF ...

church 2019-08-02 16:18 評(píng)論0 收藏0
前端開(kāi)發(fā)者手冊(cè)2019

摘要：年，和前端開(kāi)發(fā)者與應(yīng)用程序前端開(kāi)發(fā)者之間產(chǎn)生了巨大的分歧。開(kāi)發(fā)最常見(jiàn)的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開(kāi)發(fā)者可以從瀏覽器開(kāi)發(fā)中學(xué)習(xí)到，編寫(xiě)代碼不需要考慮瀏覽器引擎的限制。前端開(kāi)發(fā)者手冊(cè)2019 Cody Lindley 編著原文地址本手冊(cè)由Frontend Masters贊助，通過(guò)深入現(xiàn)代化的前端工程課程來(lái)提高你的技能。下載：PDF ...

xiao7cn 2019-08-26 13:47 評(píng)論0 收藏0
前端開(kāi)發(fā)者手冊(cè)2019

摘要：年，和前端開(kāi)發(fā)者與應(yīng)用程序前端開(kāi)發(fā)者之間產(chǎn)生了巨大的分歧。開(kāi)發(fā)最常見(jiàn)的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開(kāi)發(fā)者可以從瀏覽器開(kāi)發(fā)中學(xué)習(xí)到，編寫(xiě)代碼不需要考慮瀏覽器引擎的限制。前端開(kāi)發(fā)者手冊(cè)2019 Cody Lindley 編著原文地址本手冊(cè)由Frontend Masters贊助，通過(guò)深入現(xiàn)代化的前端工程課程來(lái)提高你的技能。下載：PDF ...

鄒立鵬 2019-08-30 10:56 評(píng)論0 收藏0
自適應(yīng)寬度元素單行文本省略用法探究

摘要：?jiǎn)涡形谋臼÷院驮丶捌涓冈氐膶傩远紵o(wú)關(guān)元素或?yàn)樵貎?nèi)單行文本省略，需要給元素或?yàn)樵靥砑訕邮綖樵氐淖釉厝绻亲赃m應(yīng)寬度時(shí)，內(nèi)的子元素實(shí)現(xiàn)單行文本省略，需要給添加樣式單行文本省略是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中非常常用的技術(shù)，幾乎每個(gè)站點(diǎn)都會(huì)用到。單行文本省略適用于顯示摘要信息的場(chǎng)景，如列表標(biāo)題、文章摘要等。在響應(yīng)式開(kāi)發(fā)中，自適應(yīng)寬度元素單行文本省略容易失效不起作用，對(duì)網(wǎng)頁(yè)開(kāi)發(fā)這造成困擾。因此，本文將要...

K_B_Z 2019-04-23 13:46 評(píng)論0 收藏0