前端代码复杂带来的问题
- 一丶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了