前端语言的发展[通俗易懂]

前端语言的发展[通俗易懂]本文转自自阮一峰的个人博客什么是前端?维基百科是这样说的:前端(front-end)和后端(back-end)是描述进程开始和结束的通用词汇。前端作用于采集输入信息,后端进行处理。计算机程序的界面

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

本文转自自阮一峰的个人博客

 

 

什么是前端

维基百科是这样说的:前端(front-end)和后端(back-end)是描述进程开始和结束的通用词汇。前端作用于采集输入信息,后端进行处理。计算机程序的界面样式,视觉呈现属于前端。

这种说法给人一种很模糊的感觉,但是他说得又很对,它负责视觉展示。在MVC结构或者MVP中,负责视觉显示的部分只有view层,而今天大多数所谓的View层已经超越了View层。前端是一个很神奇的概念,但是而今的前端已经发生了很大的变化。

你引入了Backbone、Angluar,你的架构变成了MVP、MVVM。尽管发生了一些架构上的变化,但是项目的开发并没有因此而发生变化。这其中涉及到了一些职责的问题,如果某一个层级中有太多的职责,那么它是不是加重了一些人的负担?

说到Web前端开发,我们必须先从其的过去了解:上个世纪 90 年代初,第一个网站便诞生,当时的网页完完全全是由文本所构成,除了一些小图片就是毫无布局可言的标题与段落。但是,随着时代的不断进步,接下来就出现了表格布局,随后是 Flash,最后是基于 CSS 的网页设计。简单来说,前端页面重构技术经历着这样的一个过程:table布局页面 → DIV+CSS→ HTML5+CSS3,并且面对众多的浏览器与平台,Web前端已不再是以前那样简单的重复性工作。

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

前端语言的发展[通俗易懂]


前后端不分的时代

互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分。

  1. 后端收到浏览器的请求
  2. 生成静态页面
  3. 发送到浏览器

后端 MVC 的开发模式

那时的网站开发,采用的是后端 MVC 模式。

  • Model(模型层):提供/保存数据
  • Controller(控制层):数据处理,实现业务逻辑
  • View(视图层):展示数据,提供用户界面

前端只是后端 MVC 的 V。


以 PHP 框架 Laravel 为例。

前端语言的发展[通俗易懂]


前端工程师的角色

那时的前端工程师,实际上是模板工程师,负责编写页面模板。

后端代码读取模板,替换变量,渲染出页面。


典型的 PHP 模板

<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 技术诞生,改变了一切。

  • 2004年:Gmail
  • 2005年:Google 地图

前端不再是后端的模板,可以独立得到各种数据。


Web 2.0

Ajax 技术促成了 Web 2.0 的诞生。

前端语言的发展[通俗易懂]

  • Web 1.0:静态网页,纯内容展示
  • Web 2.0:动态网页,富交互,前端数据处理

从那时起,前端变得复杂了,对前端工程师的要求越来越高。


前端 MVC 框架

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

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

  • 2010年,Backbone.js

前端语言的发展[通俗易懂]


Backbone.js

Backbone 将前端代码分成两个基本部分。

  • Model:管理数据
  • View:数据的展现

前端语言的发展[通俗易懂]


前端 Controller

Backbone 只有 M 和 V,没有 C。因为,前端 Controller 与后端不同。

  • 不需要,也不应该处理业务逻辑
  • 只需要处理 UI 逻辑,响应用户的一举一动

所以,前端 Controller 相对比较简单。Backbone 没有 C,只用事件来处理 UI 逻辑。

  var AppView = Backbone.View.extend({ // ... events: { "keypress #new-todo": "createOnEnter", "click #clear-completed": "clearCompleted", "click #toggle-all": "toggleAllComplete" }, });

Router

前端还有一种天然的方法,可以切换视图,那就是 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 路由"); }, });

示例:Backbone Router

打开demos/backbone-demo/index.html,按照《操作说明》,查看示例。

前端语言的发展[通俗易懂]


MVVM 模式

另一些框架提出 MVVM 模式,用 View Model 代替 Controller。

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

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

前端语言的发展[通俗易懂]


SPA

前端可以做到:

  • 读写数据
  • 切换视图
  • 用户交互

这意味着,网页其实是一个应用程序。

SPA = Single-page application

2010年后,前端工程师从开发页面,变成了开发”前端应用“(跑在浏览器里面的应用程序)。


传统的架构

前端语言的发展[通俗易懂]

单页应用的架构

前端语言的发展[通俗易懂]

多了一个前端 MVC 层


Angular

Google 公司推出的 Angular 是最流行的 MVVM 前端框架。

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

前端语言的发展[通俗易懂]


示例:Angular 的双向绑定

浏览器打开demos/angular-demo/index.html,可以看到一个输入框。

前端语言的发展[通俗易懂]


<div ng-app=""> <p> 姓名 : <input type="text" ng-model="name" placeholder="在这里输入您的大名" > </p> <h1>你好,{{name}}</h1> </div>

Vue

Vue.js 是现在很热门的一种前端 MVVM 框架。

它的基本思想与 Angular 类似,但是用法更简单,而且引入了响应式编程的概念。

前端语言的发展[通俗易懂]


示例:Vue 的双向绑定

Vue 的模板与数据,是双向绑定的。

打开demos/vue-demo/index1.html,按照《操作说明》,查看示例。

前端语言的发展[通俗易懂]


HTML 代码

<div id="journal"> <input type="text" v-model="message"> <div>{{message}}</div> </div>

JS 代码

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

前后端分离

  • Ajax -> 前端应用兴起
  • 智能手机 -> 多终端支持

这两个原因,导致前端开发方式发生根本的变化。

前端不再是后端 MVC 中的 V,而是单独的一层。


REST 接口

前后端分离以后,它们之间通过接口通信。

后端暴露出接口,前端消费后端提供的数据。

后端接口一般是 REST 形式,前后端的通信协议一般是 HTTP。


Node

2009年,Node 项目诞生,它是服务器上的 JavaScript 运行环境。

Node = JavaScript + 操作系统 API

前端语言的发展[通俗易懂]


Node 的意义

  • JavaScript 成为服务器脚本语言,与 Python 和 Ruby 一样
  • JavaScript 成为唯一的浏览器和服务器都支持的语言
  • 前端工程师可以编写后端程序了

前端开发模式的根本改变

  • Node 环境下开发
  • 大量使用服务器端工具
  • 引入持续集成等软件工程的标准流程
  • 开发完成后,编译成浏览器可以运行的脚本,放上 CDN

全栈工程师

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

  • 一个人负责开发前端和后端
  • 从数据库到 UI 的所有开发

全栈技能

怎样才能称为全栈工程师?

  • 传统前端技能:HTML、JavaScript、CSS
  • 一门后端语言
  • 移动端开发:iOS / Android / HTML5
  • 其他技能:数据库、HTTP 等等

软件行业的发展动力

历史演变:前后端不分 -> 前后端分离 -> 全栈工程师

动力:更加产业化、大规模地生产软件

  • 效率更高
  • 成本更低

通用性好、能够快速产出的技术最终会赢,单个程序员的生产力要求越来越高。


H5 就是一个最好的例子

为什么 H5 技术会赢得移动端?

  • 开发速度快:Native 需要重新编译才能看到结果,H5 是即时输出
  • 开发成本低:Native 需要两个开发团队,H5 只要一个
  • 快速发布:安卓 Native 新版本需要24小时,iOS 需要 3 ~ 4 天,H5 可以随时更新

未来软件的特点

  • 联网
  • 高并发
  • 分布式
  • 跨终端

现在基于 Web 的前端技术,将演变为未来所有软件的通用的 GUI 解决方案。


未来只有两种软件工程师

  • 端工程师
    • 手机端
    • PC 端
    • TV 端
    • VR 端
    • ……
  • 云工程师
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167737.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Codeforces Round #441 (Div. 2, by Moscow Team Olympiad)

    Codeforces Round #441 (Div. 2, by Moscow Team Olympiad)

  • oracle误删数据怎么恢复_oracle数据库恢复数据

    oracle误删数据怎么恢复_oracle数据库恢复数据学习数据库时,我们只是以学习的态度,考虑如何使用数据库命令语句,并未想过工作中,如果误操作一下,都可能导致无可挽回的损失。当我在工作中真正遇到这些问题时,我开始寻找答案。今天主要以oracle数据库为例,介绍关于表中数据删除的解决办法。(不考虑全库备份和利用归档日志)删除表中数据有三种方法:·delete(删除一条记录)·drop或truncate删除表格中数据1.delete

  • Iocomp 5.12 SP6 ActiveX Crack

    Iocomp 5.12 SP6 ActiveX Crack不需要安装,免去大家下载,Q578867473安装需要注册账号的麻烦的IocompActiveX/VCL标准包是由29个控件组成的套件,Q578867473用于使用ActiveX或VCL开发环境创建专业的仪表应用程序。这些控件可用于科学,工程,医学,石油和天然气,半导体,工厂自动化,航空航天,军事,机器人技术,电信,楼宇和家庭自动化,HMI,SCADA以及数百种其他类型的应用程序。所有Iocomp控件均启用OPC。如果您的项目需要OPC连接,则可以将任何属性连接到OPC项/标签。所有连接都可

  • 安装试用国产系统 ——中标麒麟V7.0

    安装试用国产系统 ——中标麒麟V7.0     安装试用国产系统——中标麒麟V7.0首先自然是下载个系统的安装镜像了。下载完镜像,创建一个新的虚拟机 配置好镜像文件,开始安装了 这个倒是和一般的Linux系统没什么区别,反正中标麒麟也是基于Linux的。 加载十几秒,下面开始正式安装:  使用默认的分区就好了。  安装完成,重启一下。  然后是对系统进行简单的配置,结果忘截图了。。。。登陆进去。 中标麒麟系统的默认桌面:是不…

    2022年10月20日
  • stat 函数的作用「建议收藏」

    stat 函数的作用「建议收藏」stat()—获得文件状态相关函数:fstat,lstat,chmod,chown,readlink,utime头文件:#include  #include定义函数:intstat(constchar*file_name,structstat*buf);函数说明:stat()用来将参数file_name所指的文件状态,复制到

  • java 除法取整_java 除法运算只保留整数位的4种方式

    java 除法取整_java 除法运算只保留整数位的4种方式1.情景展示根据提供的毫秒数进行除法运算,如果将毫秒数转换成小时,小时数不为0,则只取整数位,依此类推…2.情况分析可以使用3个函数实现Math.floor(num)  只保留整数位Math.rint(num)  余数四舍五入Math.ceil(num)  取整位,再+1举例:doublenum=3.1415926;System.out.println(Math.floor…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号