前端工程化的浅析

更新日期: 2018-10-15阅读: 3.7k标签: 工程化

什么是前端工程化

大体的来说,前端工程化有两层含义:

1.广义的前端工程化

前端工程是软件工程的一个子类,指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效开发,有效协同,质量可控。

2.狭义的前端工程化

前端工程是指将 开发阶段 的代码转变成生产环境的代码的 一系列步骤。 主要包括 构建 , 分支管理 , 自动化测试, 部署 等。

简单总结一下就是:

广义的前端工程是一个系统工程,需要从软件生命周期的各个方面入手,本质上属于管理科学的方法论。

狭义的前端工程是前端开发流程中的一部分,本质上属于软件技术的范畴和开发的最佳实践。我们平时提到的前端,如果特别说明,一般指的就是狭义上的前端工程。


为什么要前端工程化? 

Web前端页面的开发避免不了与dom的交互操作。前端框架的一次次变化,从提升效率的阶段,慢慢走向改善性能的阶段。 


1.DOM操作时代

对于开发者来说,所有数据内容都可以通过DOM结构来组织和展示的。数据的处理和操作的核心其实就是DOM的处理和操作。DOM api可以分为:节点查询型、节点创建型、节点修改型、节点关系型、节点属性型和内容加载型。


随着AJAX技术盛行,SPA(Single Page Application,单页面应用)开始广泛被认可。其基本思路:将整个应用内容都在一个页面中实现并完全通过异步交互来根据用户操作加载不同的内容。在这期间,DOM操作和事件绑定将变得十分混乱,不便于管理,于是MV*框架应运而生。 


2.MV*交互模式

MVC模式

将页面DOM相关的内容抽象成数据模型、视图、事件控制器Model、View、Controller三部分。各部分之间的通信方式如下:


·View 传送指令到 Controller
·Controller 完成业务逻辑后,要求 Model 改变状态
·Model 将新的数据发送到 View,用户得到反馈
·Model

Model管理应用程序的数据。不涉及用户界面,也不涉及表示层,而是代表应用程序可能需要的独特形式的数据。当Model改变时,它通常会通知它的观察者(如View)。一个Model模型可能有多个观察它的View。
总而言之,Model主要与业务数据有关。


View

View是Model的可视化表示。一个View通常检测一个Model,并在Model更改时进行通知,使View本身能够相应地更新。
用户可以和View进行交互,包括读取和编辑Model。由于View是表示层,通常我们能够以一种更友好的方式进行编辑和更新。而更新Model的实际任务其实是在Controller上的。

Controller

Controller是Model和View之间的中介,当用户操作View时,它通常负责更新Model。

MVC的优点
MVC的关注点分离有利于进一步简化应用程序功能的模块化,并能够实现:
·整体维护更容易。
·解耦Model和View,意味着它能够更直接地编写业务逻辑的单元测试
·这种模块性可以让负责核心逻辑和负责用户界面的开发人员同时工作。

MVP模式

MVP是MVC的一种衍生模式,专注于改进表示逻辑。
MVP中的P代表表示器。这是一个包含用于View的用户界面业务逻辑的组件。


1、各部分之间的通信,都是双向的。

2、View 与 Model 不发生联系,都通过 Presenter 传递。
3、View 非常薄,不部署任何业务逻辑,称为“被动视图”(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。


MVP与MVC
MVP适用于有非常复杂的View和大量用户交互的应用程序。
这样的程序如果用MVC的话意味这要极度依赖于多个控制器。而在MVP中,所有这些复杂的逻辑可以封装在一个表示器中,大大简化维护工作。

MVVM模式

MVVM 模式将 Presenter 改为 ViewModel,基本与 MVP 模式完全一致。


唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

View与ViewModel
MVVM中的View是主动而不是被动的。
被动View只输出显示并不接受任何用户输入。
而MVVM中的View和ViewModel之间通过数据绑定和事件进行信。
优点:
·MVVM使得UI和为UI提供驱动的行为模块的并行开发变得更容易。
·MVVM使View抽象化,从而减少代码背后所需的业务逻辑量。
·ViewModel在单元测试中的使用更容易

缺点:
·对于简单的UI来说,使用MVVM有些大材小用
·数据绑定难以调试

vue是典型的MVVM框架,它实现双向数据绑定的技术是数据劫持结合发布者-订阅者模式的方式。通过 Object.defineProperty() 方法来劫持(监控)各属性的 getter 、setter ,并在数据(对象)发生变动时通知订阅者,触发相应的监听回调


3.Virtual DOM交互模式

react 基于 Virtual DOM 的数据更新与UI同步机制:


初始渲染时,首先将数据渲染为 Virtual DOM,然后由 Virtual DOM 生成 DOM。


数据更新时,渲染得到新的 Virtual DOM,与上一次得到的 Virtual DOM 进行 diff,得到所有需要在 DOM 上进行的变更,然后在 patch 过程中应用到 DOM 上实现UI的同步更新。


Virtual DOM 作为数据结构,需要能准确地转换为真实 DOM,并且方便进行对比。



4.前端MNV*时代

使用JavaScript调用原生控件或事件绑定来生成应用程序的交互模式称为前端MNV*开发模式。如果说Virtual DOM减少了DOM的交互次数,那么MNV*想要做的就是完全抛弃使用DOM。这种模式仅适用于移动端Hybrid应用,因为需要依赖原生应用控件的调用支持。将JSBridge和DOM编程的方式进行结合,让前端快速构建开发原生页面的引用,从而脱离DOM的交互模式。
综上所述,前端开发在前端发展的过程中,随着前端技术的更新,前端工程化的核心特点:模块化、组件化、自动化、规范化得以形成和显现。


前端工程化是大趋势

为什么前端工程化是趋势?总结原因大概如下:

1、前端工作范畴不断扩大。

以前的前端只需适配桌面浏览器,现在需适配不同类型和不同尺寸的设备,包括移动端网页、app应用等。


2、前后端分离。

早期的前端只是后端MVC框架的一层模板,现在则是获取数据、编写处理逻辑,各类前端MV*框架也得到普遍应用。


3、模块化开发的出现。

现在的前端不再试从零写起,重复造轮子,而是会引用大量内部和外部的组件和模块,这也导致前端必须进行模块管理。


4、转码器的盛行

为了提高效率,前端工程往往不会直接写html,css,和js代码,而是改用其他格式书写,再用工具编译为目标格式。比如用Jade 写HTML,用less/sass/stylus 编写CSS,用ES6/Typescript/.. 编写JavaScript。


5、开发流程和团队

早期的前端团队往往只有几个人,而现在的前端团队可以扩展到几十人,甚至上百人。每个人只负责自己的一块内容。所以,如何协调多人多团队的工作,保证沟通顺畅,保证权限管理,越来越成为一大问题。
此外,像webpack等工具的成熟和广泛使用,也在间接支持前端工程化的稳步前进和发展。



小结

前端工程化的本质是将可以用工具来完成的事情用工具来完成。前端工程化在目前的开发中是不可逆的趋势,每一个身处工作岗位的前端,都应该确立前端工程化的开发思维和开发方法,如此,才能更好更快的完成繁重的开发任务写出更有时代感更健壮更可靠的代码。

来自:米么骚客,作者:李秋橙   


链接: https://fly63.com/article/detial/1149

前端工程化的的理解,浅谈web工程化的开发流程

一个完整的前端工程体系应该包括:统一的开发规范;组件化开发;构建流程。开发规范和组件化开发面向的开发阶段,宗旨是提高团队协作能力,提高开发效率并降低维护成本。

web前端工程化/构建自动化

前端工程化的概念在近些年来逐渐成为主流构建大型web应用不可或缺的一部分,在此我通过以下这三方面总结一下自己的理解。为什么需要前端工程化。前端工程化的演化。怎么实现前端工程化。

Node.js项目拆包工程化

在我们开发的过程中,经常会遇到这样的问题,开发完了一些代码或者一个接口,别的小伙伴过来问你,代码可不可以给他复用,接口可以给他调用。这说明代码的复用和抽象对团队协作是很重要的

聊聊前端工程化_我对工程化的理解

工程师是个古老的职称了。耳熟能详的有建筑工程师,电器工程师等,往往他们在人们脑海中的印象是刻板,严谨,可靠。随着互联网的发展,软件工程师出现了!他们不用一砖一瓦,也不用尺子电钻,计算机是他们的施工现场,代码是他们的工程部件

谈谈前端工程化是个啥?

Web业务日益复杂化和多元化,前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题,比如:如何进行高效的多人协作?如何保证项目的可维护性?如何提高项目的开发质量?

谈谈前端工程化 js加载

在没有 前端工程化之前,基本上是我们是代码一把梭,把所需要的库和自己的代码堆砌在一起,然后自上往下的引用就可以了。 那个时代我们没有公用的cdn,也没有什么特别好的方法来优化加载js的速度。最多用以下几个方案。

前端工程化:构建、部署、灰度

优秀的技术方案很多,大部分时候我们感觉只是在现有技术方案里面做排列组合、求笛卡尔积、选择最优解,做出一个最适合当前项目的方案。未来,人类应该编写最核心的业务代码、设置规则

前端工程化的一些设想

最近几年前端工程化这个事情随着模块化标准(曾经的事实标准 commonjs,今天的 ES Module )的落地和工具链的成熟,大家普遍都在采用一体化的策略来完成工程从构建到发布的过程。

你了解 Browserslist 吗

细说起来,它是现代前端工程化不可获取的工具,无论是处理 JS 的 babel,还是处理 CSS 的 postcss,他们的背后都有 browserslist 的身影。

前端工程化配置指南

本文讲解如何构建一个工程化的前端库,并结合 Github Actions,自动发布到 Github 和 NPM 的整个详细流程。我们经常看到像 Vue、React 这些流行的开源项目有很多配置文件,他们是干什么用的?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!