我对前端开发的粗浅认知

我对前端开发的粗浅认知

静态页面阶段

后端采用MVC模式开发，模型层提供保存数据，控制层处理数据，实现业务逻辑，视图层展示数据，前端只是后端的视图层

1. 前端只负责展示信息
2. 前端只负责处理交互

Ajax 阶段 Asynchrounous JavaScript and XML

2004年，google产品，脚本独立向服务器请求数据，拿到数据以后，处理并更新网页
后端只是负责提供数据，前端处理，前端不再是后端的模板，而是完整的业务逻辑 获取数据 -> 处理数据 -> 展示数据

• 对于Ajax的理解

1. asynchrounous 异步，由于JavaScript代码的运行机制，异步是为了不阻塞浏览器页面的加载
2. JavaScript 是Ajax的实现方式，原生是通过 xhr 对象 (XMLHTTPRequest) 来发起异步请求
   随后jQuery封装了xhr对象为ajax对象，原生又加入了fetch方法，以及现在常用的 Axios 库来发起异步请求
3. 那么既然是异步请求，我们保存和处理请求回来的数据的时间点就比较关键，因此ES6封装了Promise对象，就是为了
   保证异步请求完成后，再来处理数据
4. XML 既然是数据的传递，就要有一个格式或者一个载体，XML 的写法其实就是标记语法，要求是前后标签闭合，是第一代的
   数据传输格式。因为 XML 格式写法的繁琐，JSON 作为第二代数据传输格式出现了，其原理就是前后端通信通过传递 JSON 格式的
   字符串，JSON.stringify() 方法可以用于把对象序列化， 然后JSON.parse() 方法再把字符串反序列化，这样前后端就可以
   通过字符串的传递和字符串转换为对象来使用和保存数据

前端 MVC 阶段

2010年，第一个MVC框架 Backbone.js， 没有处理数据， 数据处理放在了后端
MVVM 用 View Model代替 Controller, 读写数据，展示数据，数据处理 -> 数据改变更新视图，视图更新数据

• 对于 MVC 和 MVVM 的理解

1. MVC 模型层用于保存数据，视图层用于展示数据，控制层用于处理数据，分工非常清晰，
   在传统的网页开发中，Model 模型层和 View 视图层其实是紧密联系的，我们直接把模板数据写在了HTML代码中，例如

<div>标题一：....div>

那么在这里控制层的工作就变得相当繁琐，（至少对于程序员来说）， 我们想要去改变标题一的内容，

var title = document.getElementsByTagName("DIV")[0];
title.innerHTML = "....";

无论是jQuery也好原生也罢，我们处理一个单行文本都需要两行代码，变得极其复杂，交互逻辑就更不必说
因此，对此jQuery spaghetti （意大利面）这个说法就油然而生，去维护和开发 jQuery 代码，对于程序员来说，极其复杂
这里并不是要吐槽 jQuery 比不上当前的主流前端框架，他在他产生的那个年代是牛X的，就像诺基亚一样，他在安卓苹果没出来之前
是统治地位，是最先进的手机，大家趋之若鹜。

2. 一段时间以后，大佬们觉得框架可以进一步封装，就搞了 Angular, React, Vue， 也就是 MVVM 模型出现了！
   在 MVVM 模型之下，控制层的逻辑被视图层分担了一部分，就是JS代码被HTML代码封装了一部分！这里就是数据更新视图，视图更新数据，
   也是 MVVM 的精髓所在。
   用 Vue 举例，我们的视图层现在变得相当清晰

<div>{{ title }}div>

我们去修改和操作数据也变得非常简单了！

new Vue({
    el:"#app",
    data:{
        title:"..."
    },
    methods:{
        changeTitle () {
            this.title = "123";
        }
    }
})

在这里我们的写法虽然略微繁琐，但是我们结构异常清晰，this.title 的改变会直接更新视图，我们再也不需要
去找元素，改数据，这样的操作了，后期维护也异常简单

SPA 阶段 Single Page Application

• 对于 SPA 的理解

1. Single Page （单页面）的实现其实就是脚手架帮我们把代码都编译打包进去了一个index.html文件中，在 vue/angular 脚手架
   之下，大家也可以很容易找到这个文件
2. Application （应用）其实就是把之前不管是手机端APP，或者桌面端应用放到了浏览器里，前端嘛，运行环境就是浏览器，比如说之前的QQ控件，
   其实就是一个传统的前端页面，现在什么网页版微信啊网页版QQ其实就是应用级别了 Application
3. 对于框架理解的误区：其实框架所做的事情，就是方便程序员的开发，编译性能啊神马的大佬们都已经帮我们解决好了，你所做的事情就是
   在大佬们制定的规则之下，做事情，当然，大佬们制定的规则是非常有灵性的，他们的规则是非常合理的，至少我这么认为。在这个规则之下，
   编译打包完成其实还是原生的JS, 以前天真的以为，Controller的工作真的就减轻了，哈哈，其实不然，在框架之下，我们能写出 {{ title }} 这样的东西，
   其实是框架找到了他，记录了他，然后方便我们修改，框架帮我们做了大量的类似 document.getElement…这样的工作，或者帮我们生成了 DOM 节点

• 那么再简单说说框架， 前端主流框架就是 Vue / Angular / React， 在这里一两句话肯定是说不清楚这么牛逼的东西啊！

1. 首先从渲染机制上来说，框架构建的其实都是虚拟DOM，不论是Vue, Angular 里面指令啊，双花括号啊， React jsx + ES6 之类的骚操作，浏览器怎么能认识呢？当然是框架爸爸把这些东西编译出来了啊！
2. 数据流 - 这个词感觉用的不太好，大家应该也知道我想表达什么， Angular 和 Vue 整了一个 ng-model 和 vue-model 来实现所谓数据双向绑定，
   React 也是所谓的的单向数据流，就是通过 state (setState) 这样的骚操作来改变数据和模板
3. 全局数据管理 - vue 使用 vuex 或者第三方组件来搞，React 大家常用就是 redux redux-saga 之类的，angular 内置了 service 这种东西来管理数据
4. 局部数据管理 - 也可以叫组件状态管理，vue 里的 data, react 里的 state 基本就是这个套路，数据只能在这个组件里用
5. 异步请求 - vue 有 vue-resource, angular 封装了 HttpModule 这样的东西，react 不是用 fetch 这样的原生操作，现在又比较流行 Axios 的请求方法，其实都无可厚非，用就完事了
6. 路由分配 - vue-router react-router-dom router-module之类的东西都是为了实现单页面内容的跳转，也就是所谓的前端路由
7. 性能 - 就是编译的快慢，不管是脏查，数据劫持这样的东西，性能大佬们每年都提升，然后浏览器厂商也在做好浏览器，硬件升级，
   这个性能对于我们业务的需要肯定是供大于求的，放心用就行，不要纠结
8. 最后！！！！！最重要的就是程序员友好程度了！
   vue 开发其实是非常方便的， router, vuex这样的东西学习成本不高，组件开发也很方便，非常适合新手学习，他是Angular 和 React 的集大成者，
   吸取了两者的优势，真的牛逼，我个人也是 Evan You 的粉丝，经常看他的演讲啊 LIVE 之类的， 大佬牛逼！！！！
   Angular 把你要用的东西都给你了，想用就用，学习成本稍微有点高，但是学会之后，他对于 seperation concern 的解决，真的太舒服了，而且
   service这个东西，设计真的有、东西
   最后，哈哈， React， 我们公司用的框架，jsx 这个东西上来就很怪，然后各种指令都是 es6 语法来实现的，最痛苦的就是 flux (redux) 这样的东西，
   看了好几天才明白，react 这些东西吧，上来啥都没有，然后需要小伙伴们东拼西凑把项目搭起来，蚂蚁金服的 umi + dva + antd 这一套 react 解决方案呢，真的叼！但是有点买肯德基的薯条去蘸麦当劳的番茄酱的感觉，或者说，React 就是不给你番茄酱，让你自己去调一个酱出来，这样好吗？对于新手来说，这个过程绝对是痛苦的，react 为的就是给程序员更多空间去表演，但是，当你熟练 react 开发之后，代码功力（打番茄酱的能力）就上去了！

最后

纯粹是胡说一顿，粗浅的理解分享给大家，三大框架，存在就是合理的，没有谁好谁坏，有点像独孤求败的几把剑一样，不同的境界，不同的对手，选不同的兵器，道理貌似是这样的昂！加油啦！