其他分享
首页 > 其他分享> > 十一、天气案例————温开水的复习笔记

十一、天气案例————温开水的复习笔记

作者:互联网

一、原生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的值来达到计算属性的改变,来达到模板语法的不断重新解析

  

标签:info,return,复习,温开水,isHot,笔记,weather,let,btn
来源: https://blog.csdn.net/qq_47286790/article/details/122789433