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

資訊專欄INFORMATION COLUMN

高級 Vue 組件模式 (6)

makeFoxPlay / 2830人閱讀

摘要：之后再引入該指令，如下之后就可以在組件的模板中使用該指令了，比如一切都將按預(yù)期中運行，當(dāng)組件的狀態(tài)為開時，組件的根元素會增加一個的內(nèi)容增強屬性。到后來興起了組件化開發(fā)的開發(fā)思想，指令似乎是隨著的沒落而消失了蹤影。

06 通過 directive 增強組件內(nèi)容 目標(biāo)

之前的五篇文章中，switch 組件一直是被視為內(nèi)部組件存在的，細心的讀者應(yīng)該會發(fā)現(xiàn)，這個組件除了幫我們提供開關(guān)的交互以外，還會根據(jù)當(dāng)前 toggle 的開關(guān)狀態(tài)，為 button 元素增加 aria-expanded 屬性，以 aira 開頭的屬性叫作內(nèi)容增強屬性，它用于描述當(dāng)前元素的某種特殊狀態(tài)，幫助殘障人士更好地瀏覽網(wǎng)站內(nèi)容。

但是，作為組件調(diào)用者，未必會對使用這種相關(guān)屬性對網(wǎng)站內(nèi)容進行增強，那么如何更好地解決這個問題呢？答案就是使用 directive。

我們期望能夠顯示地聲明當(dāng)前的元素是一個 toggler 職能的組件或者元素，這個組件或者元素，可以根據(jù)當(dāng)前 toggle 組件的開關(guān)狀態(tài)，動態(tài)地更新它本身的 aria-expanded 屬性，以便針對無障礙訪問提供適配。

實現(xiàn) 簡單實現(xiàn)

首先創(chuàng)建一個 toggler 指令函數(shù)，如下：

export default function(el, binding, vnode) {
  const on = binding.value

  if (on) {
    el.setAttribute(`aria-expanded`, true);
  } else {
    el.removeAttribute(`aria-expanded`, false);
  }
}

這個指令函數(shù)很簡單，就是通過傳入指令的表達式的值來判定，是否在當(dāng)前元素上增加一個 aria-expanded 屬性。之后再 app 引入該指令，如下：

directives: {
  toggler
}

之后就可以在 app 組件的模板中使用該指令了，比如：

一切都將按預(yù)期中運行，當(dāng) toggle 組件的狀態(tài)為開時，custom-button 組件的根元素會增加一個 aria-expanded="true" 的內(nèi)容增強屬性。

Note: 這里關(guān)于指令的引入，使用的函數(shù)簡寫的方式，會在指令的 bind 和 update 鉤子函數(shù)中觸發(fā)相同的邏輯，vue 中的指令包含 5 個不同的鉤子函數(shù)，這里就不贅述了，不熟悉的讀者可以通過閱讀官方文檔來了解。

注入當(dāng)前組件實例

上文中的指令會通過 binding.value 來獲取 toggle 組件的開關(guān)狀態(tài)，這樣雖然可行，但在使用該指令時，custom-button 本身的 prop 屬性 on 已經(jīng)代表了當(dāng)前的開關(guān)狀態(tài)，能否直接在指令中獲取當(dāng)前所綁定的組件實例呢？答案是可以的。指令函數(shù)的第三個參數(shù)即為當(dāng)前所綁定組件的虛擬 dom 節(jié)點實例，其 componentInstance 屬性指向當(dāng)前組件實例，所以可以將之前的指令改版如下：

export default function(el, binding, vnode) {
  const comp = vnode.componentInstance;
  const on = binding.value || comp.on;

  if (on) {
    el.setAttribute(`aria-expanded`, true);
  } else {
    el.removeAttribute(`aria-expanded`, false);
  }
}

這樣，即使不向指令傳入表達式，它也可以自動去注入當(dāng)前修飾組件所擁有的 prop 屬性 on 的值，如下:

提供更多靈活性

指令函數(shù)的第二個參數(shù)除了可以獲取傳入指令內(nèi)部的表達式的值以外，還有其他若干屬性，比如 name、arg、modifiers等，詳細說明可以去參考官方文檔。

為了盡可能地使指令保證靈活性，我們期望可以自定義無障礙屬性 aria 的后綴名稱，比如叫做 aria-on，這里我們可以通過 arg 這個參數(shù)輕松實現(xiàn)，改版如下：

export default function(el, binding, vnode) {
  const comp = vnode.componentInstance;
  const suffix = binding.arg || "expanded";
  const on = binding.value || comp.on;

  if (on) {
    el.setAttribute(`aria-${suffix}`, true);
  } else {
    el.removeAttribute(`aria-${suffix}`, false);
  }
}

可以發(fā)現(xiàn)，這里通過 binding.arg 來獲取無障礙屬性的后綴名稱，并當(dāng)沒有傳遞該參數(shù)時，降級至 expanded。這里僅僅是為了演示，讀者有興趣的話，還可以利用 binding 對象的其他屬性提供更多的靈活性。

成果

最終的運行結(jié)果就不用語言描述了，直接截了一個圖，是 toggle 組件開關(guān)狀態(tài)為開時的截圖:

你可以下面的鏈接來看看這個組件的實現(xiàn)代碼以及演示：

sandbox: 在線演示

github: part-6

總結(jié)

關(guān)于指令的概念，我自身還是在 angularjs(v1.2以下版本) 中第一次接觸，當(dāng)時其實不興組件化開發(fā)這個概念，指令本身的設(shè)計理念也是基于增強這個概念的，即增強某個 html 標(biāo)簽。到后來興起了組件化開發(fā)的開發(fā)思想，指令似乎是隨著 angularjs 的沒落而消失了蹤影。

但仔細想想的話，web 開發(fā)流程中，并不是所有的場景都可以拿組件來抽象和描述的，比如說，你想提供一個類似高亮邊框的公用功能，到底如何來按組件化的思想抽象它呢？這時候使用指令往往是一個很好的切入點。

因此，當(dāng)你面臨解決的問題，顆粒度小于組件化抽象的粒度，同時又具備復(fù)用性，那就大膽的使用指令來解決它吧。

目錄

github gist

關(guān)注公眾號 全棧101，只談技術(shù)，不談人生

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

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

相關(guān)文章

  • 高級 Vue 組件模式 (1)

    摘要：寫在前頭去年，曾經(jīng)閱讀過一系列關(guān)于高級組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級組件模式的文章，碰巧最近接手了一個公司項目，前端這塊的技術(shù)棧是。同時這個組件還擁有一個屬性，用來初始化的狀態(tài)值。 寫在前頭 去年，曾經(jīng)閱讀過一系列關(guān)于高級 react 組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級 angular 組件模式的文章，碰巧最近接手了一個公...

    lanffy 評論0 收藏0

  • vue-router 一些容易被忽略的知識點

    摘要：調(diào)用全局的守衛(wèi)。在被激活的組件里調(diào)用。用創(chuàng)建好的實例調(diào)用守衛(wèi)中傳給的回調(diào)函數(shù)。 本文適用于對 Vue.js 和 vue-router 有一定程度了解的開發(fā)者除特殊說明，vue-router 版本為 3.0.2 正文 路由 class 匹配 路由匹配后會給該標(biāo)簽添加 class 屬性值 .router-link-active，該功能在嵌套路由中十分方便 class 的實際屬性值可以通...

    chunquedong 評論0 收藏0

  • 高級 Vue 組件模式 (3)

    摘要：在中，我們是否也有一些手段或特性來提高組件的復(fù)用程度和靈活性呢答案當(dāng)然是有的，那就是。成果通過實現(xiàn)，我們成功將注入的邏輯抽離了出來，這樣每次需要共享組件的狀態(tài)和方法時，混入該即可。 03 使用 mixin 來增強 Vue 組件 目標(biāo) 之前一篇文章中，我們雖然將 toggle 組件劃分為了 toggle-button、toggle-on 和 toggle-off 三個子組件，且一切運行良...

    iKcamp 評論0 收藏0

  • 高級 Vue 組件模式 (2)

    摘要：編寫復(fù)合組件目標(biāo)我們需要實現(xiàn)的需求是能夠使使用者通過組件動態(tài)地改變包含在它內(nèi)部的內(nèi)容。成果通過復(fù)合組件的方式，我們將組件劃分為了三個更小的職責(zé)更加單一的子組件。 02 編寫復(fù)合組件 目標(biāo) 我們需要實現(xiàn)的需求是能夠使使用者通過 組件動態(tài)地改變包含在它內(nèi)部的內(nèi)容。 熟悉 vue 的童鞋可能馬上會想到不同的解決方案，比如使用 slot 并配合 v-if，我們這里采用另外一種方法，利用 vu...

    Galence 評論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    pumpkin9 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<