Vue.js——前端代码复杂带来的问题——2020.12.9

一丶JavaScript原始功能

（一）在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的

• 那个时候的代码是怎么写的呢？直接将代码写在<script>标签中即可

（二）随着ajax异步请求的出现，慢慢形成了前后端的分离

• 客户端需要完成的事情越来越多，代码量也是与日俱增
• 为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护
• 但是这种维护方式，依然不能避免一些灾难性的问题

（三）比如全局变量同名问题

（四）另外，这种代码的编写方式对js文件的依赖顺序几乎是强制性的

• 但是当js文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较难的事情
• 而且即使弄清楚顺序，也不能避免下面出现的这种尴尬问题的发生

二丶案例代码

<script>
  document.getElementById('button').onclick = function(){
    console.log('按钮发生了点击');
  }
</script>
<script>
  //A.js文件中，key定义了一个变量，名字是flag，并且为true
  flag = true
  
  //B.js文件中，Ting也喜欢用flag这个变量，只是为false
  flag = false
  
  //main.js文件中，key想通过flag进行一些判断，完成后续的事情
  if(flag){
    console.log('key是个Vue.js小萌新');
  }
</script>

四丶运行结果

• Key后来发现代码不能正常运行，去检查代码发现，确实是true，没有问题呀
• 最后才发现原来是被Ting写的js文件中的同名flag覆盖了，变为false了

——欲渡黄河冰塞川，将登太行雪满山——