一、原生JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气案例(原生JavaScript)</title>
</head>
<body>
<div id="root">
今天天气很<h2 id="weather"></h2>
<button id="btn">切换天气</button>
</div>
<script>
let btn = document.querySelector('#btn');
let weather = document.querySelector('#weather');
let isHot = false;
weather.textContent = '凉爽';
btn.addEventListener('click',function(){
isHot = !isHot;
if(isHot){
weather.textContent = '炎热';
}
else{
weather.textContent = '凉爽';
}
})
</script>
</body>
</html>评价
总感觉很乱，感觉东西一旦多起来就会让可读性变差，感觉数据和操作是杂糅在一起的。
二、原生JavaScript改进
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气案例(原生JavaScript)</title>
</head>
<body>
<div id="root">
今天天气很<h2 id="weather">凉爽</h2>
<button id="btn">切换天气</button>
</div>
<script>
let btn = document.querySelector('#btn');
let weather = document.querySelector('#weather');
//闭包，写一个接口，数据和对应的数据操作
function changeWeather(){
// 数据
let weatherAtt=[
'凉爽','炎热'
];
let isHot = false;
// 数据操作
function change(){
isHot = !isHot;
if(isHot){
weather.textContent = weatherAtt[1];
}
else{
weather.textContent = weatherAtt[0];
}
}
// 完成闭包
return {change:change};
}
const changeweather = new changeWeather();
// 调用接口
btn.addEventListener('click',changeweather.change);
</script>
</body>
</html>评价
闭包，数据和对应的接口。我感觉可读性要好一点，应该就是将事件监听里的事件内容分离开来了，让事件监听函数的理解更加清晰。业务逻辑分离开来（乱说一通，(#^.^#)）。
三、使用Vue框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备容器 -->
<div id="root">
<p v-text="info"></p>
<!-- 与 <p>{{info}}</p> 一样 -->
<button @click="changeWeather">切换天气</button>
</div>
<script>
new Vue({
el:'#root',
data:{
isHot:false,
info:'凉爽',
},
methods: {
changeWeather(){
this.isHot = !this.isHot;
if(this.isHot===true){
this.info = '炎热';
// return this.info;
console.log(this.info);
}
else{
this.info = '凉爽';
// return this.info;
console.log(this.info);
}
}
},
})
</script>
</body>
</html>评价
感觉和前面JavaScript原生改进方法很相似，不过是使用了框架，自己要书写的代码更加简洁和可读性更高。不过怎么感觉有点不怎么好，就是那个data总是在变。
四、Vue改进方案一（使用计算属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备容器 -->
<div id="root">
(1)今天天气很<p v-text="info"></p>
<p>(2)今天天气很{{info}}</p>
<button @click="changeWeather">切换天气</button>
</div>
<script>
new Vue({
el:'#root',
data:{
isHot:false
},
computed:{
// 简写形式
info(){
return this.isHot?'凉爽':'炎热';
}
// 完整形式
// weather:{
// get(){
// return this.isHot?'凉爽':'炎热';
// }
// set(){
//
// }
// }
},
methods: {
changeWeather(){
this.isHot = !this.isHot;
// return this.info;
}
},
})
</script>
</body>
</html>评价
不断修改isHot的值来达到计算属性的改变，来达到模板语法的不断重新解析