不一样的地方

Posted 2021-01-01 yangwenzhi

1、拿Vue举例

（1）数据双向绑定

别人：教你怎么使用数据绑定
师兄：数据双向绑定的原理，自定义数据绑定

（2）vue-router 路由

别人：教你怎么使用路由
师兄：路由实现的原理，根据实际情况自己设计路由

（3）vuex 状态管理

别人：教你怎么使用状态管理
师兄：状态管理实现的原理，状态管理怎么传递合理

2、拿代码举例

（1）写代码

别人：如何实现逻辑
师兄：代码就是艺术品，不仅要实现逻辑，还要代码精简，有设计模式，要考虑扩展、继承，要有多人协作的设计思维

（2）代码实例：三个按钮，点第一个alert我是第一，点第二个一alert我是第二，点第三个一alert我是第三

一般代码    
    <script type="text/javascript">
        function fun(type) {
            if(type == 1) alert(‘我是第一‘);
            else if(type == 2) alert(‘我是第二‘);
            else if(type == 3) alert(‘我是第三‘);
        }

    </script>
    <div onclick="fun(1)">一</div>
    <div onclick="fun(2)">二</div>
    <div onclick="fun(3)">三</div>

优质代码
    <script type="text/javascript">

        function fun(type) {
            switch (type) {
                case 1:
                    alert(‘我是第一‘);
                    break;
                case 2:
                    alert(‘我是第二‘);
                    break;
                case 3:
                    alert(‘我是第三‘);
                    break;
            }
        }

    </script>
    <div onclick="fun(1)">一</div>
    <div onclick="fun(2)">二</div>
    <div onclick="fun(3)">三</div>

艺术代码    
    <script type="text/javascript">
        var fun = { //代码美观，可以扩展，可以继承
            ‘f1‘: ()=> alert(‘我是第一‘),
            ‘f2‘: ()=> alert(‘我是第二‘),
            ‘f3‘: ()=> alert(‘我是第三‘)
        }
    </script>
    <div onclick="fun.f1()">一</div>
    <div onclick="fun.f2()">二</div>
    <div onclick="fun.f3()">三</div>