标签：双向 script 艺术 数据 ext 管理 col 逻辑 lse
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>
标签：双向 script 艺术 数据 ext 管理 col 逻辑 lse
原文地址：https://www.cnblogs.com/yangwenzhi/p/9541289.html
