用不同框架实现一个前端最基础的功能

功能说明

一个span，两个按钮，点击按钮会让span加1或者减1。它简单到你不需要分心关注，但是又足够说明典型的html场景——就是既有数据呈现也有按钮操作。

vanilla.js

vanilla.js号称是全世界最轻量的Javascript框架，基本上写法就是和原生的写法一样。

<div id="app">
<p><span id="count">0</span>
    <button id="inc">+</button>
    <button id="dec">-</button>
  </p>
</div>
<script>
    var myBtn = document.getElementById('inc');
    myBtn.addEventListener('click', function(event) {
        var span = document.getElementById('count');
        span.textContent = parseInt(span.textContent) + 1
    });
    myBtn = document.getElementById('dec');
    myBtn.addEventListener('click', function(event) {
        var span = document.getElementById('count');
        span.textContent = parseInt(span.textContent) - 1
      });
<script>

代码行数倒是不算多，但是看起来的感受是:

• 数据格式转换（整数到字符串，以及反过来）很讨厌
• 使用了多个DOM API，所有这些API你都得弄懂
• 代码太长
  这样特点，就构成了一种代码的臭味，让我喜欢不起来。而且，你得懂得DOM的节点选择、事件监听、回调函数等。

jquery

JQuery大家都很熟悉了。

<div id="app">
<p><span id="count">0</span>
    <button id="inc">+</button>
    <button id="dec">-</button>
  </p>
</div>
<script>
$('#inc').click(function(){
  $("#count").html(parseInt($("#count").html())+1)
})
$('#dec').click(function(){
  $("#count").html( (parseInt($("#count").html())).toString()-1)
})
<script>

分析一下：

• 代码还是少了不少，因为jquery的选择器确实比较方便
• 使用精简的API替代Vanilla的。比如.html()比起.getElementById（）来说，是要看着舒服点的

然而，内核基本不变：依然是添加EventListener，命令式的取值和修改值，并在期间做数据转换。依然你得懂得DOM的节点选择、事件监听、回调函数等。

Vue.js

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>
new Vue({
  el:'#app',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
    }
  }
})
</script>

第一感觉就是：

• 规整。数据（data），方法(methods)放置的工工整整，一目了然。它充分的利用js的字面量对象的语法
• 整个应用接口设计，基本上采用的都是简单。一眼看过去，一个复合词也没有（比如getElementById就是4个复合词）
• 数据转换这么繁冗的事儿，内部帮你做了

现在，你不需要挂接EventListener，使用@click语法自动绑定事件，使用{{}}自动绑定数据；也不需要数据转换这么繁冗的事儿，内部帮你做了；你也不需要DOM的一系列的知识就可以构造此程序；对初学者来说，这个门槛真是降低太多。

React

class Counter extends React.Component {
  @autobind
  inc() {
    this.setState({
      count: this.state.count + 1
    });
  }

  @autobind
  dec() {
    this.setState({
      count: this.state.count - 1
    });
  }

  render() {
    return (
      <p>
        {this.state.count}}
        <button onClick={this.inc}>+</button>
        <button onClick={this.dec}>-</button>
      </p>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('app'));

React代码和Vue.js有点类似，但感觉和HTML没啥关系了，结构很漂亮。

你更喜欢哪个框架？

整理自：https://segmentfault.com/a/1190000007548442