angular input_Angular 秒杀其它框架的设计之美（一）

标题很有杀气，但并不意味着空穴来风，写这篇文章的目的也不是为了争个高下，而是希望大家能了解不同思维下的不同产物，也了解下目前三大前端技术栈的部分优缺点。

placeholder 之健壮性

大家都知道 input 有一个 placeholder 的属性，并且 Vue、React、Angular 都可能通过 polyfill 的方式兼容到 IE9，但遗憾的是 placeholder 在 IE9 并不兼容，这对产品来说是不可接受的。那么，对于前端，我们要怎么样的方式做到兼容呢？

我们先来理理思路：

1. 先检测是不是 IE9，如果是，再走下面的逻辑
2. 通过 getAttribute 获取到 placeholder 属性的值
3. 在 input 后面画一个一样大小的 div，并且样式设置成一样，并把 input 背景透明
4. 根据 input 的 value 是否为空， 设置 div 的 innerHTML 设置为前面获取到 placeholder 的值或者空字符串

通过以上步骤，我们基本就可以做到一个仿原生的 placeholder 了

那如果是在 Vue 里面呢？可能是这样的：

1. 我们先定义一个组件叫 MyInput 或者定义一个指令叫 v-placeholder
2. 通过 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