標題很有殺氣，但并不意味著空穴來風，寫這篇文章的目的也不是為了爭個高下，而是希望大家能了解不同思維下的不同產物，也了解下目前三大前端技術棧的部分優缺點。

placeholder 之健壯性

大家都知道 input 有一個 placeholder 的屬性，并且 Vue、React、Angular 都可能通過 polyfill 的方式兼容到 IE9，但遺憾的是 placeholder 在 IE9 并不兼容，這對產品來說是不可接受的。那么，對于前端，我們要怎么樣的方式做到兼容呢？

我們先來理理思路：

先檢測是不是 IE9，如果是，再走下面的邏輯

通過 getAttribute 獲取到 placeholder 屬性的值

在 input 后面畫一個一樣大小的 div，并且樣式設置成一樣，并把 input 背景透明

根據 input 的 value 是否為空， 設置 div 的 innerHTML 設置為前面獲取到 placeholder 的值或者空字符串

通過以上步驟，我們基本就可以做到一個仿原生的 placeholder 了

那如果是在 Vue 里面呢？可能是這樣的：

我們先定義一個組件叫 MyInput 或者定義一個指令叫 v-placeholder

通過 MyInput 的 props 或 v-placeholder 指令實現上面原生的邏輯

如果是 React 呢，其實和 Vue 差不多。總之，對現有業務代碼有侵入性，代碼可能是這樣的

<!-- 現有原生代碼 -->

通過以上示例，我們發現，如果要在現有業務代碼上兼容 placeholder，我們必需去找到每一個 input，然后更改代碼，對于寫習慣 Vue 和 React 的童鞋，這也許不是什么問題。

有沒有一種不更改現有代碼，也能做到兼容的方法呢？

我們來看看 Angular 是怎么處理這種情況的：

Angular 的組件和指令和一個非常靈活的命名設計叫做 selector，selector 是支持 css 選擇器的，而 css 選擇器是可以任意的，這就為我們擴展原生能力提供了可能。

在 Angular 里面，我們只需要寫一個叫做 placeholder 的指令（以下僅為示例代碼）：

import

我們發現，這個指令的 selector 叫 input[placeholder]，也就是說，Angular 在遇到 input 元素，并且這個 input 元素有 placeholder 屬性的時候，就會應用這個指令。同時我們也聲明了一個 placeholder 的輸入屬性，當值更改的時候，我們也會動態更新要顯示的提示文字。

最神奇的是，我們的業務代碼，一個字母都不需要更改，原來是怎么樣還是怎么樣。

Angular 并不是完美無缺，但其設計值得我們每個自稱工程師的人深思！

最后插廣告，我的 Angular 組件庫

tanboui?www.tanboui.com

Tbus富文本編輯器 發布了歡迎大家star

總結

以上是生活随笔為你收集整理的angular input_Angular 秒杀其它框架的设计之美（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。