Vue.js——前端代码复杂带来的问题——2020.12.9
- 作者: 我喜欢没事偷着乐
- 来源: 51数据库
- 2021-07-11
前端代码复杂带来的问题
- 一丶JavaScript原始功能
- 二丶案例代码
- 四丶运行结果
- ——欲渡黄河冰塞川，将登太行雪满山——
一丶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了
——欲渡黄河冰塞川，将登太行雪满山——
推荐阅读
