原生JS的不足和框架的优势对比
代码层面的问题
原生JS 框架
1.缺少规划,代码混乱 ----> 结构化开发
//原生js的代码写的很随意,没有规划性
2.缺少限制,容易冲突 ----> 独立文件,独立作用域
//原生js开发不是多人并行开发,修改代码容易造成全局变量和其他业务发生变化
//框架借助glub和webpack等工程化工具,实现各页面独立开发,相互不影响,有自己的作用域,只要本作用 域的变量不发生冲突,与其他页面的变量问题就不会产生冲突,最重要的是解决了多人并行开发的问题
3.缺少支撑,能力要求高 ----> 提供支持,只关心业务
//原生JS要负责前端的架构、工具、业务等;而框架的架构和工具都做了集成,只关心业务逻辑即可
效率问题
原生JS 框架
1.关注所有流程 -----------> 只关注业务
//原生js开发者要关注业务外的所有流程,还不能并行开发,浪费很多时间,效率低下
//框架的出现使得开发者只需要关注前端的业务逻辑实现,不需要关注其他,提高了效率
2.团队效率低 ------------> 并行开发
//js一个人开发改动会影响其他人的代码和功能实现,只能等一个人开发完了其他开发者才能继续开发
//框架开发只要接口和参数不变,只会影响自己的模块,对别人的模块不会产生影响,可以多人并行开发
3.测试效率低 ------------> 模块测试,自动化测试
//js的影响是全局的,一个业务改动会覆盖全局,测试也是要再次进行全局测试
//模块改动只会影响本模块和有业务关系的模块,测试范围缩小;还有的支持工具测试和自动化测试,极大 地提高了测试的效率
多页应用的问题
原生JS 框架
1.路由体验问题 ---------> 使用单页路由
//原生js会加载所有内容,导致所有html,css,js,请求都要重新加载,耗费时间长
//框架的html,css,js都是提前加载好的只用请求数据,页面显示很快
2.无页面切换效果 ---------> 可以添加过场动画
//原生js切换页面,整个页面会销毁,加载会出现白屏,用户体验不高
//框架是单页,加载并不会整个页面销毁,页面切换实际就是好DOM元素的切换,可以添加过场动画提高视 觉效果
3.浪费服务器资源 --------> 减少服务器请求
//原生js加载会销毁整个页面,重新请求资源加载,加重服务器负担
//框架只请求数据,大大减少了服务器负担
