浅谈前端工程师的进化 带你理解在不同模式中前端工程师的角色

写了3月的博客 有一个粉丝 以及一个热心前辈的评论鼓励 ， 我很欣慰， 也更加坚定了我写博客的决心， 虽然本人技术尚浅 ， 但我乐于将自己的所读的好的咨讯总结分享给大家， 将自己在工作中的经验在这里记录， 以便初入职场者查看翻阅。 如有任何技术上的错误， 也欢迎各位技术大牛们 随时评论 。。我定虚心接受。

一：前端与后端的开发区别。

前端：主要是针对浏览器开发。 代码运行在浏览器端。

后端： 主要是针对服务器开发。代码运行在服务器端。

二：前后不分离的情况下网页制作的流程。

后端收到请求-----生成静态页面-----返回到浏览器呈现给客户

三：ajax的产生

ajax的产生,使得前端可以获得数据并展现出来。使得前端也可以有自己的controller，但是前端的controller比较简单， 他不需要处理业务逻辑， 只需要处理ui的逻辑。 

四：mvc模式 和mvvm模式的比较

mvc模式：

model：（模型层）：提供、保存数据

controller：（控制层）：数据处理，业务逻辑的实现

view：（视图层）：用户页面

mvc（前后不分离）的开发模式下， 前端负责view层， 也就是写模版， 后端负责m c层

1.模型的代码少

2.控制器的代码却是越写越多

3.由于写的代码较多,故不好进行性能测试

mvvm模式：

model（模型层）：

View-Model：简化的 Controller，唯一作用就是为 View 提供处理好的数据，不含其他逻辑。

本质：view 绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view 上，不需要手动处理。

这种模式下前端可以读写数据，切换界面，用户交互

代表框架 angualr vue  react

1.低耦合:view/viewController可以独立于Model而进行变化和修改,与此同时,一个viewModel可以绑定到不同的view/ViewController上

2.可重用性:可以把一些视图逻辑放在一个ViewModel里面,让很多view/ViewController进行重用

3.独立开发:通过MVVM,开发人员可以专注于逻辑开发在viewModel里面,而设计人员也可以专注于页面设计,并且使用ExpressionBlend可以更加容易设计页面和生成XAML(Extensible Application Markup Language)代码.

4.可测试:通常来说,要进行,界面测试比较困难,而MVVM可以对viewModel进行测试.

1.view 可以引用viewModel,但反过来却是不行

2.viewModel 可以引用model,但是反过来也不行

3.如果我们违背了上述规则,那么我们将会无法正常使用MVVM