开始之前
2017年结束还有一个月；总想学点前端的知识；甚至学习前端框架思想。这里将会开启一个前端的学习摘要和笔记记录。
前端工程——基础篇
从本质上讲，所有Web应用都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。
前端工程的四个阶段
1.库/框架选型
根据项目特征进行技术选型；解决项目：项目从零开发的问题，基于框架的快速开发；站在巨人的肩膀上开发
框架
2.简单构建优化
构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并；解决问题：自动化构建工具；代码压缩，验证，资源管理自动化处理
构建框架
3.JS/CSS模块化开发
JS模块化方案很多，AMD/CommonJS/UMD/ES6 Module等；CSS模块化开发基本都是在less、sass、stylus等预处理器的import/mixin特性支持下实现的。解决问题：
大体量：多功能、多页面、多状态、多系统；
大规模：多人甚至多团队合作开发；
高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。
4.组件化开发与资源管理
解决问题：
- 大体量：多功能、多页面、多状态、多系统；
- 大规模：多人甚至多团队合作开发；
- 高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。
开发方式：
- 组件化开发
- “智能”静态资源管理
重点推荐：前端工程——基础篇
这个摘要主要参考了以上了文章的观点内容；个人做了摘要理解；具体内容请参考这个文章内容；文章质量非常好；强力推荐。
前端框架选择对比:
1.前端框架有哪些？
前端框架榜单 推荐网站：前端框架库
Angular
基本介绍：
基本理念
AngularJS 的作用简单说就是就是把后台的json值直接用html进行渲染，然后html的操作又直接在形成json传回后台。未来的后台MVC，试图不再是模板了，而是一段结构整齐标准的JSON，而这个JSON作为前台的model直接在AngularJS直接使用。或者说后台的试图是前台的模型，而整个前台就是后台的视图。后台程序再也不做模板的任何处理了。
特点：
- 基于单页应用的模式使用MVC设计模式(MVVM)
Model
用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法
ViewModel
用来提供特别数据和方法从而维护指定view的对象
Controller
负责设置初始状态和参数化$scope方法用以控制行为。
View
AngularJS解析后渲染和绑定后生成的HTML
- 双向数据绑定
- 依赖注入
angular中的ngController指令在实例化控制器对象时，会根据指令的形参名，创建出控制器所依赖的对象，并注入进来---依赖注入（Dependency Injection）
- 指令
指令可用来创建我自定义的HTML标签，作为新的自定义组件。它们也可以用来“装饰”元素上的行为，并以有趣的方式进行DOM操作。
- 基于路由的单页应用
React
- 组件
构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中
- JSX
类似 HTML 的语法，但它实际上会被编译成 JavaScript。将标签与代码混写在同一个文件中意味着输入一个组件的函数或者变量时你将享受到自动补全的福利。这里也体现了React中以Javascript为中心的思想。
- Virtual DOM
虚拟DOM结构的方式；实现html的渲染
- Data Flow
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
Vue
Vue作为新奇之秀；建立在前人的基础；吸收其他的特点，作为“轻量级”开发框架有着独特优势。这里官网给出对比；概括的说，Vue在设计方面不同；但是对于功能的特点都基本融合其他框架的内容。无论是VirtualDom还是JXS中；都在新的版本中融合其他的特性内容。
Angular vs. React vs. Vue
关于这个三者的对比其实官网提供的数据比较详细；对于具体的对比参考如下链接：
前端框架天下三分：Angular React 和 Vue的比较
框架对比
在技术选型和技术实现：
这方面说实在自己没有太多的发言权；推荐文章Vue创作人的访谈
其实写到这里的时候；个人其实已经推荐使用Vue的学习了；（可能有些绕）但是个人视图从客观的方式和实际中阶段前端的框架开发；同时最为一名后端开发的人员；也需要在对前端的框架有个总体把握。
尾记
Vue HelloWorld
网友评论