用不同框架实现一个前端最基础的功能
2016-11-24 本文已影响59人
waynedeng
功能说明
一个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没啥关系了，结构很漂亮。
你更喜欢哪个框架？
