2018-02-15
Lightman Wang
互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分。
那时的网站开发,采用的是后端 MVC 模式。
前端只是后端 MVC 的 V。
以 PHP 框架 Laravel 为例。
那时的前端工程师,实际上是模板工程师,负责编写页面模板。
后端代码读取模板,替换变量,渲染出页面。
<html>
<head><title>Car {{ $car->id }}</title></head>
<body>
<h1>Car {{ $car->id }}</h1>
<ul>
<li>Make: {{ $car->make }}</li>
<li>Model: {{ $car->model }}</li>
<li>Produced on: {{ $car->produced_on }}</li>
</ul>
</body>
</html>
Ajax 技术诞生,改变了一切。
前端不再是后端的模板,可以独立得到各种数据。
Ajax 技术促成了 Web 2.0 的诞生。
从那时起,前端变得复杂了,对前端工程师的要求越来越高。
前端通过 Ajax 得到数据,因此也有了处理数据的需求。
前端代码变得也需要保存数据、处理数据、生成视图,这导致了前端 MVC 框架的诞生。
Backbone 将前端代码分成两个基本部分。
Backbone 只有 M 和 V,没有 C。因为,前端 Controller 与后端不同。
所以,前端 Controller 相对比较简单。Backbone 没有 C,只用事件来处理 UI 逻辑。
var AppView = Backbone.View.extend({
// ...
events: {
"keypress #new-todo": "createOnEnter",
"click #clear-completed": "clearCompleted",
"click #toggle-all": "toggleAllComplete"
},
});
前端还有一种天然的方法,可以切换视图,那就是 URL。
通过 URL 切换视图,这就是 Router(路由)的作用。以 Backbone 为例。
App.Router = Backbone.Router.extend({
routes: {
'': 'index',
'show': 'show'
},
index: function () {
$(document.body).append("调用了 Index 路由");
},
show: function () {
$(document.body).append("调用了 Show 路由");
},
});
另一些框架提出 MVVM 模式,用 View Model 代替 Controller。
本质:view 绑定 view-model,视图与数据模型强耦合。数据的变化实时反映在 view 上,不需要手动处理。
前端可以做到:
- 读写数据
- 切换视图
- 用户交互
这意味着,网页其实是一个应用程序。
SPA = Single-page application
2010年后,前端工程师从开发页面,变成了开发“前端应用”(跑在浏览器里面的应用程序)。
传统的架构
单页应用的架构
多了一个前端 MVC 层
Google 公司推出的 Angular 是最流行的 MVVM 前端框架。
它的风格属于 HTML 语言的增强,核心概念是双向绑定。
Vue.js 是现在很热门的一种前端 MVVM 框架。
它的基本思想与 Angular 类似,但是用法更简单,而且引入了响应式编程的概念。
这两个原因,导致前端开发方式发生根本的变化。
前端不再是后端 MVC 中的 V,而是单独的一层。
前后端分离以后,它们之间通过接口通信。
后端暴露出接口,前端消费后端提供的数据。
后端接口一般是 REST 形式,前后端的通信协议一般是 HTTP。
2009年,Node 项目诞生,它是服务器上的 JavaScript 运行环境。
Node = JavaScript + 操作系统 API
前端工程师正在转变为全栈工程师
怎样才能称为全栈工程师?
历史演变:前后端不分 -> 前后端分离 -> 全栈工程师
动力:更加产业化、大规模地生产软件
通用性好、能够快速产出的技术最终会赢,单个程序员的生产力要求越来越高。
为什么 H5 技术会赢得移动端?
现在基于 Web 的前端技术,将演变为未来所有软件的通用的 GUI 解决方案。
IT Support 训练营01期
2025/11/10 06:13 (Sydney)
CCNA考证班01期
2025/09/06 08:37 (Sydney)
商业数据分析实战班第17期
2025/03/15 06:13 (Sydney)
地址
Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)Level 2, 171 La Trobe St, Melbourne VIC 3000四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号Business Hub, 155 Waymouth St, Adelaide SA 5000Disclaimer
JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.
匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。 JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议
© 2017-2024 JR Academy Pty Ltd. All rights reserved.
ABN 26621887572