项目开发之——前端项目开发之——前端

ajax ??前后端的分离是经历了很长一段的历史的（详细看此博客），最初的前端页面是由后端加入数据渲染完毕后再发送至前端，而前端的一些数据的变动带来的也经常是整个页面的跳转和刷新，在代码的编写和页面的加载上都带来了极大的不便；
??直到后来有了ajax（Asynchronous JavaScript And XML）这一理念，这一问题才得以缓解，后来这一理念被发扬光大，使得前后端的交互只剩下最基础的业务逻辑相关的——数据（可以看出，数据才是一个工程的灵魂）；
??示例代码

XMLHttpRequest 对象

??尽管已步入前后端分离时代，模板后台渲染这一理念仍然在广泛使用，因为若前端页面加载逻辑较为复杂，客户端算力或带宽不足，便可能出现首屏白屏的问题，通常这种情况下，在后端将加入了数据渲染好的页面直接发送来是一种高效的解决方案；此文只以前后端分离的理念讲解
webpack ??在开始之前先介绍下webpack的开发方式，将commonJS或es6层层引用的代码，打包压缩成一两个浏览器可以准确执行但人类看不懂的es5代码；这种开发方式的优势在于

可以更好的模块化前端的开发，并方便了对外部依赖的引用，打破传统的
??可以看出，尽管使用虚拟dom管理页面，但是开发风格还是比较贴近原生的网页开发，非常的简单易上手
总体评估
- 开发和维护：vue使用部分自定义api来方便常用的开发需求，对于一些关键问题vue已经提供了很好的解决方案，代码架构也较为稳定、统一，对中小型的项目有着快速的开发周期；但是自定义api既是优势，也是缺陷，在长期或大型项目中会有所体现，会导致出现一些编辑器无法理解的语句，无法提供准确的提示，会导致debug困难
- 学习成本：只要懂原生网页开发，即可上手，理解少数概念即可，不需要学习像react那样繁琐的全家桶
- 运行效率：压缩后的大小同样可以忽略，运行效率也是不需要担心的
- 生态：国际范围内可能人数远少于react，国内下载量远超react，毕竟作者是中国人——尤雨溪，国内用户多，这也就使得国内vue相关的轮子众多，也就使得无论是vue的官方文档还是vue的插件还是vue相关的bug问答，都是不缺中文的，这也就极大的降低了国内的开发门槛
Angular
特点
- 开发上：使用纯粹的模板式页面开发，以java（确定不是js）的语法风格进行网页的开发（面向对象、依赖注入等）
- 运行上：使用Incremental DOM而非虚拟dom，相较于虚拟dom来说更加节省内存，但在代码模式上，angular依然抵制直接操作原生dom；正是如此，angular同样可用于跨平台开发，但是小程序这部分有所缺失
代码示例 ??贴出部分示例，详细见官方文档

/*此为ts语法编写*/ import { Component, OnInit } from '@angular/core'; import { Hero } from '../hero'; import { HEROES } from '../mock-heroes'; @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css'] })export class HeroesComponent implements OnInit {heroes = HEROES; //为hero列表数据， selectedHero?: Hero; //当前选中的heroconstructor() { }ngOnInit() { }onSelect(hero: Hero): void { this.selectedHero = hero; } }
My Heroes {{hero.id}} {{hero.name}} {{selectedHero.name | uppercase}} Details id: {{selectedHero.id}}Hero name:
??可以看出，ng框架有着更浓厚的“框架味”，或者说“模板味”，将大部分页面逻辑封装成api，使用起来未免少了些灵活性
总体评估 PS：由于国内angular使用太少，只对angular略有耳闻，并未深入了解，内容均源自查阅大量博客、文档和知乎
- 开发和维护：angular由于其语言风格较受后端开发者的欢迎；angular可以说是统一了前端的代码风格，而且由于TS的语法，即使是新手，开发出来的内容也是规规矩矩的；但是严格的标准同时也限制了一定的angular的开发自由，当然，大而全和小而美二者都有各自的优缺点，评判标准在每位开发者自己的心中；这同时也使得angular开发一些小项目如同大炮打苍蝇，杀鸡用牛刀一般
文章图片
- 学习成本：据资深ng开发者描述，ng学习曲线陡峭到令人发指的地步，此时应祭出这张图，angular的学习曲线.jpg
文章图片
- 运行效率：作为谷歌团队开发的项目，angular有着优秀的运行效率，这点是毋庸置疑的，早期的ng有着体积臃肿的诟病，这个问题也已经在后期的版本中得到了解决
- 生态：国际乃至国内相较于react和vue都有着极少的使用人数，少到甚至难以搜索到近两年对此框架评价的文章，但这并不代表这个框架的思想是落后的，不少的开发者对ng都有着较好的开发体验，高自由的开发风格最终都将走向一个统一的标准，正如天下大势，分久必合一般，而ng会不会是那个标准，有待进一步的观望
总结
??从以上介绍中不难看出，vue是取react和angular二者特点所诞生的中庸之道，没有绝对的自由，但又给予开发者自由的渠道；而尤雨溪本人起初也是受angular的启发，创造了vue这一框架；三者的互相比较论战也可以上演一场精彩激烈的宫斗戏了；总之要客观的看待开发框架，框架只是一种开发工具，不是pvp论战的工具，再者不要过分纠结三门框架学习哪个，都去学习一点加深了解并不是坏事，最后只有深入了解了，才能知道每个框架的优缺点以及这个项目真正需要使用的是哪个框架
??省流助手：
- 英文好用react
- 中小型交互简单短期维护项目用vue，长线维护交互复杂大项目用react
- 水平不够不要轻易碰angular
【项目开发之——前端】附图：三者下载量比较

文章图片
推荐阅读