chili 默默学编程

前端开发的历史和趋势


来源于阮一峰博客,链接在此:

https://github.com/ruanyf/jstraining/blob/master/docs/history.md


本文,是我写的一个简短的总结。

其实阮一峰原文已经很简洁了,谁想了解的话,建议看原文。


1、什么是前端、后端

前端:针对浏览器的开发,代码在浏览器运行

后端:针对服务器的开发,代码在服务器运行


2、互联网发展的早期,前后端不分的时代

访问一个网站的过程:

    - 后端收到浏览器的请求

    - 生成静态页面

    - 发送到浏览器


开发模式:(后端的 MVC 模式)

    - Model 保存数据

    - Controller 处理数据,实现业务逻辑(根据浏览器 POST GET 请求,改变数据或发送模板)

    - View 展示数据(渲染模板)


此时的前端,只是后端 MVC 中的 V;前端工程师,只是模板工程师,负责写页面模板。


3、Ajax 技术的诞生,改变了状况

AJAX :

    - AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

    - 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。


所以现在的方案,并不需要让服务器端发送整个渲染好的 HTML 文件,可以利用 Ajax 获取或更改后端数据;

浏览器提供了 HTTP 协议收发数据的接口,也就是 Ajax;

服务器提供收发数据的接口,也就是后端写好的一些 API;


后端接口一般是 REST 形式

REST:Representational State Transfer(表现层状态转化)。

    - 每一个URI代表一种资源

    - 客户端和服务器之间,传递这种资源的某种表现层

    - 客户端通过四个HTTP动词,对服务器端资源进行操作,实现"表现层状态转化"

    - 四个动词:GET、POST、PUT、DELETE


如:本网站的首页,如何使用框架?

1、浏览器首次访问 http://shenkeyang.cc 时,服务器返回一个 HTML 文件;

2、HTML 文件中引入 Angular 源码 以及 使用 Angular 框架写的文件;

3、解析后的 JS 文件初始化页面,获得首页信息;

4、此后的用户行为,通过 API 获得 JSON 数据,前端框架将数据渲染至当前页面;


4、前端 MVC 框架

前端通过 Ajax 获得数据,因此也有了处理数据的需求。

前端代码也需要保存数据、处理数据、生成视图,这就导致了前端 MVC 框架的诞生。

    - Backbone.js

    - Angular

    - Vue

    - React


5、Backbone.js

Backbone 只有 M V 没有 C。

Backbone 用事件来处理 UI 逻辑。

Backbone 用 Router(路由)来切换视图。

    - 路由中的 # 符号。

    - 对应 hashchange 事件:

    (

        原生 JS 实现办法:

            - 用 a 标签改变路由#符号内容(或者其他方式)

            - 用 window.addEventListener('hashchange', function() { …… }) 实现对应动作

        )


    

6、Angular

Google 公司推出的前端框架。

MVVM 模型。


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

本质:View 绑定 View-Model,视图与数据模型强耦合,数据改变实时反应在视图上面,不需要手动改变。

它的风格属于 HTML 语言的增强,核心概念是双向绑定。


7、Vue

阮一峰在 Vue 框架举了三个例子:


例子1: 在页面 input 内输入内容,输入的内容实时同步显示在下方 div 中

HTML 部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
</head>
<body>
<div id="journal">
<input type="text" v-model="message">
<div>{{message}}</div>
</div>
<script src="vue.min.js"></script>
<script src="app1.js"></script>
</body>
</html>

JS 部分(app1)

var journal = new Vue({
el: '#journal',
data: {
message: 'Your first entry'
}
});

逻辑解释:

    - journal 是一个 Vue 对象

    - journal 关联的 DOM 元素(el)是一个 div(通过 id #journal关联)

    - journal 的数据,可以显示在 DOM 元素中(通过 {{ message }}关联)

    - journal 的数据,可以在 DOM 中的 input 修改(通过 v-model 属性关联)


例子2: 在页面 input 输入内容,底下数据根据输入的内容实时过滤显示

HTML 部分

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
</head>
<body>
<div id="my_view">
搜索:<input v-model="search" type="text" />
<ul>
<li v-for="friend in friends | filterBy search in 'name'"> {{ friend.name }} </li>
</ul>
</div>
<script src="vue.min.js"></script>
<script src="app2.js"></script>
</body>
</html>

JS 部分(app2)

var myModel = {
name: 'Ashley',
age: 24,
friends: [{
name: 'Bob',
age: 21
}, {
name: 'Jane',
age: 20
}, {
name: 'Anna',
age: 29
}],
search: ''
};

var myViewModel = new Vue({
el: '#my_view',
data: myModel
});

逻辑解释:

    - myViewModel 是一个 Vue 对象

    - myViewModel 关联的 DOM 元素(el)是一个 div(通过 id #my_view关联)

    - myViewModel 的数据,显示在 DOM 元素中(通过 {{ friend.name }}关联)

    - 显示的数据,使用了遍历(通过 v-for 语句)

    - 显示的数据,使用了过滤(通过 filterBy 语句)

    - 过滤的条件,使用了 input 输入的内容(通过 v-model 关联)


例子3:

HTML 部分

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
</head>
<body>
<div id="app">
<div>{{ counter }}</div>
<button v-on:click="increment">Increment</button>
</div>
<script src="vue.min.js"></script>
<script src="app3.js"></script>
</body>
</html>

JS 部分(app3)

new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment() {
this.counter++;
}
}
});

逻辑解释:

    - 新建一个 Vue 对象(未命名)

    - 其关联的 DOM 元素(el)是一个 div(通过 id #app 关联)

    - 其数据,显示在 DOM 元素中(通过 {{ counter }}关联)

    - 其方法,被 DOM 中的 button 调用(通过 v-on:click 关联)

    - 调用方法时,其数据 counter 自增 1


所谓“双向绑定”:框架的对象(view-model),既与 view 绑定(html显示),又与 model 绑定

所谓“HTML 语言的增强”:在 HTML 语句中增加 JS 语法(过滤、遍历、模板之类的)


8、其他一些观点

前端工程师正在转变为全栈工程师

    - 一个人负责开发前端和后端

    - 从数据库到 UI 的所有开发


全栈工程师技能:

    - 传统的前端技能:HTML JavaScript CSS

    - 一门后端语言

    - 移动端开发:IOS / android / HTML5

    - 其他技能:数据库、HTTP 等等


未来只有两种软件工程师

    - 端工程师(手机端,PC 端,TV 端,VR 端)

    - 云工程师


reply ( 0 )