功能說明
一個(gè)span射窒，兩個(gè)按鈕许昨，點(diǎn)擊按鈕會(huì)讓span加1或者減1桑驱。它簡(jiǎn)單到你不需要分心關(guān)注竭恬，但是又足夠說明典型的html場(chǎng)景——就是既有數(shù)據(jù)呈現(xiàn)也有按鈕操作。
vanilla.js
vanilla.js號(hào)稱是全世界最輕量的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>
代碼行數(shù)倒是不算多，但是看起來的感受是:
- 數(shù)據(jù)格式轉(zhuǎn)換（整數(shù)到字符串押框，以及反過來）很討厭
- 使用了多個(gè)DOM API岔绸，所有這些API你都得弄懂
- 代碼太長(zhǎng)
這樣特點(diǎn)，就構(gòu)成了一種代碼的臭味橡伞，讓我喜歡不起來盒揉。而且，你得懂得DOM的節(jié)點(diǎn)選擇兑徘、事件監(jiān)聽刚盈、回調(diào)函數(shù)等。
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>
分析一下：
- 代碼還是少了不少藕漱，因?yàn)閖query的選擇器確實(shí)比較方便
- 使用精簡(jiǎn)的API替代Vanilla的。比如.html()比起.getElementById（）來說最域，是要看著舒服點(diǎn)的
然而谴分，內(nèi)核基本不變：依然是添加EventListener，命令式的取值和修改值镀脂，并在期間做數(shù)據(jù)轉(zhuǎn)換牺蹄。依然你得懂得DOM的節(jié)點(diǎn)選擇、事件監(jiān)聽薄翅、回調(diào)函數(shù)等沙兰。
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>
第一感覺就是：
- 規(guī)整氓奈。數(shù)據(jù)（data），方法(methods)放置的工工整整鼎天，一目了然舀奶。它充分的利用js的字面量對(duì)象的語法
- 整個(gè)應(yīng)用接口設(shè)計(jì)，基本上采用的都是簡(jiǎn)單斋射。一眼看過去育勺，一個(gè)復(fù)合詞也沒有（比如getElementById就是4個(gè)復(fù)合詞）
- 數(shù)據(jù)轉(zhuǎn)換這么繁冗的事兒，內(nèi)部幫你做了
現(xiàn)在罗岖，你不需要掛接EventListener涧至，使用@click語法自動(dòng)綁定事件，使用{{}}自動(dòng)綁定數(shù)據(jù)桑包；也不需要數(shù)據(jù)轉(zhuǎn)換這么繁冗的事兒南蓬，內(nèi)部幫你做了；你也不需要DOM的一系列的知識(shí)就可以構(gòu)造此程序哑了；對(duì)初學(xué)者來說赘方，這個(gè)門檻真是降低太多。
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有點(diǎn)類似弱左，但感覺和HTML沒啥關(guān)系了窄陡，結(jié)構(gòu)很漂亮。
你更喜歡哪個(gè)框架科贬？
