什么是前端工程化?如何实现前端工程化?
一、什么是前端工程化
前端工程化是使用软件工程的方法来解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。
二、为什么需要前端工程化?
Web业务日益复杂化和多元化,现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。代码量可能从以前的千行到如今的万行,甚至十万行。人数从一个人变成了N个一起协作开发。所以在业务上,我们要去思考这些复杂和多元的场景,而产生的问题,如:
- 如何扩展javascript、html、css本身的语言能力
- 如何进行高效的多人协作
- 如何解决功能复用和变更问题
- 如何保证项目的规范性
- 如何实现重复的劳动简单化
要实现前端工程化,就要解决以上的几个问题。
三、如何实现前端工程化?
1.如何扩展javascript、html、css本身的语言能力?
(1)TypeScript
typeScript是javascript的超集,扩展了语法(类Classes,接口interfaces,模块Modules,类型注解Type annotaions,编译时类型检查Compiletime type checking,Arrow函数(类似c#的Lambda))使得JavaScript变得更强大,对于面向对象编程更好的支持。
(2)CSS预处理器:SASS 、LESS、 Stylus。
它们基于CSS扩展了一套属于自己的DSL(Domain Specific Language领域特定语言 ),来解决我们书写CSS时难以解决的问题:
- 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;
- 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。
所以这就决定了CSS预处理器的主要目标:提供CSS缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。
2.如何进行高效的多人协作
模块化
简单来说,模块化就是将一个大文件拆分成相互依赖的小文件,再进行统一的拼装和加载。只有这样,才有多人协作的可能。
JS的模块化
浏览器端模块化的问题:
- 效率问题:精细的模块划分带来了更多的JS文件,更多的JS文件带来了更多的请求,降低了页面访问效率
- 兼容性问题:浏览器目前仅支持ES6的模块化标准,并且还存在兼容性问题
- 工具问题:浏览器不支持npm下载的第三方包
在ES6之前,JavaScript一直没有模块系统,这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案,如CommonJS、AMD和CMD等,某些框架也会有自己模块系统,比如Angular1.x。现在ES6已经在语言层面上规定了模块系统,完全可以取代现有的CommonJS和AMD规范,而且使用起来相当简洁,并且有静态加载的特性。
规范确定了,然后就是模块的打包和加载问题:
- 用Webpack+Babel将所有模块打包成一个文件同步加载,也可以打成多个chunk异步加载;
- 用SystemJS+Babel主要是分模块异步加载;
- 用浏览器的<script type="module">加载
目前Webpack远比SystemJS流行。Safari已经支持用type="module"加载了。
CSS的模块化
(1)类名冲突
当你写一个css类的时候,你是写全局的类呢,还是写多个层级选择后的类呢?
你会发现,怎么都不好
- 过深的层级不利于编写、阅读、压缩、复用
- 过浅的层级容易导致类名冲突
一旦样式多起来,这个问题就会变得越发严重,其实归根结底,就是类名冲突不好解决的问题
解决类名冲突
一些第三方机构提出了一些方案来解决该问题,常见的解决方案如下:
命名约定:即提供一种命名的标准,来解决冲突,常见的标准有:
- BEM
- OOCSS
- AMCSS
- SMACSS
- 其他
(2)重复样式
这种问题就更普遍了,一些重复的样式值总是不断的出现在css代码中,维护起来极其困难。
比如一个网站的主题颜色改变,这些颜色会充斥到背景、文字、边框中,一旦颜色调整,就是一个非常大的工程。
解决重复样式的问题:
- css in js
这种方案虽然可以利用js语言解决重复样式值的问题,但由于太过激进,很多习惯写css的开发者编写起来并不是很适应
它的核心思想是:用一个JS对象来描述样式,而不是css样式表,至于如何把样式应用到界面上,不是它所关心的事情,你可以用任何技术、任何框架、任何方式将它应用到界面。
- 预编译器
有些第三方搞出一套css语言的进化版来解决这个问题,它支持变量、函数等高级语法,然后经过编译器将其编译成为正常的css
这种方案特别像构建工具,不过它仅针对css
常见的预编译器支持的语言有:
- less
- sass
(3)css文件细分
在大型项目中,css也需要更细的拆分,这样有利于css代码的维护。
不同的功能依赖不同的css样式、公共样式可以单独抽离,这样就形成了不同于过去的css文件结构:文件更多、拆分的更细
而同时,在真实的运行环境下,我们也希望文件越少越好,这种情况和JS遇到的情况是一致的,因此,对于css,也需要工程化管理。
解决css文件细分问题
这一部分,就要依靠构建工具,例如webpack来解决了:利用一些loader或plugin来打包、合并、压缩css文件
3.如何解决功能复用和性能问题
为了解决复用问题,引入组件化的概念。何以提高代码的复用性。
组件化
首先,组件化≠模块化。好多人对这两个概念有些混淆。
模块化只是在文件层面上,对代码或资源的拆分;
而组件化是在设计层面上,对UI(用户界面)的拆分。从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件。
其实,组件化更重要的是一种分治思想。页面上所有的东西都是组件。页面是个大型组件,可以拆成若干个中型组件,然后中型组件还可以再拆,拆成若干个小型组件,小型组件也可以再拆,直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件,作为组件的基本单元。
4.如何保证项目的规范性
模块化和组件化确定了开发模型,而这些东西的实现就需要规范去落实。
规范化其实是工程化中很重要的一个部分,项目初期规范制定的好坏会直接影响到后期的开发质量。
比如:
- 目录结构的制定
- 编码规范(eslint)
- 前后端接口规范(swagger)
- 文档规范( js注释规范jsdoc)
- 组件管理
- Git分支管理
- Commit描述规范(commitlint)
- 定期CodeReview
- 视觉图标规范
5.如何实现重复的劳动简单化
为什么要借助自动化工具呢?
在浏览器端,开发时态(devtime)和运行时态(runtime)的侧重点不一样
开发时态,devtime:
1. 模块划分越细越好
2. 支持多种模块化标准
3. 支持npm或其他包管理器下载的模块
4. 能够解决其他工程化的问题(模块化、组件化、规范化)
运行时态,runtime:
1. 文件越少越好
2. 文件体积越小越好
3. 代码内容越乱越好
4. 所有浏览器都要兼容
5. 能够解决其他运行时的问题,主要是执行效率问题
这种差异在小项目中表现的并不明显,可是一旦项目形成规模,就越来越明显,如果不解决这些问题,前端项目形成规模只能是空谈
解决办法
既然开发时态和运行时态面临的局面有巨大的差异,因此,我们需要有一个工具,这个工具能够让开发者专心的在开发时态写代码,然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。
这样的工具,叫做自动化构建工具
用网上比较流行的话来说就是,前端工程化的很多脏活累活都应该交给自动化工具来完成。现在比较流行的前端自动化构建工具有 gulp、webpack、vite
在之后的章节会详细讲解 webpack 的基本使用和构建原理,敬请期待~
推荐阅读:
高性能WEB开发:Javascript自身执行效率
JS事件冒泡、事件捕获、默认事件、事件对象那些事
高性能WEB开发:深入理解页面呈现、重绘、回流
40 行代码简单实现vue3的响应系统
什么是前端工程化?如何实现前端工程化?相关推荐
- 前端进阶之路: 前端架构设计(2)-流程核心
可能很多人和我一样, 首次听到"前端架构"这个词, 第一反应是: "前端还有架构这一说呢?" 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视 ...
- 什么是HTML5前端开发?HTML5前端要学哪些技术?
什么是HTML5前端开发?HTML5前端要学哪些技术? 什么是HTML5前端开发?前端开发一般指网页开发,前端开发是从网页制作上演变过来的,网页上软件化的交互形式都是基于前段技术实现的.程序员指从事程 ...
- 前后端分离后的前端时代,使用前端技术能做哪些事?
什么是前后端分离,要区分前端和后端,需要有个明确的界限.一般,用户可以直接看到的东西,都是属于前端的范畴,除了前端之外都属于后端了. 在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的 ...
- 自学前端第一天:认识前端工程与网页
自我介绍 列夫一个来自广东的咸鱼 ( 半角空格&ensp小, 全角空格&emsp大) 一.前端的基本含义: 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.随着 ...
- 从前端到未来,前端发展闲聊
1. 前情提要 毋庸讳言,在我刚工作的时候,前端是还是一个不受重视的岗位.切图狗,写网页的这种侮辱性绰号绑在前端开发身上.我自己体验到的一个很明显的标志是:招聘网站上,前端开发的工资是其他开发工资的9 ...
- 2023年中高级前端养成指南-需要关注和学习的13大类80余个前端技术栈与前端趋势-看这篇就够了系列
今天是兔年开工的第一个星期一,我们又要投入到忙碌的工作了. 以下是imqdcn研究整理的2023年中高级前端养成指南,收藏起来,从开工第一天起,立下全新的计划和目标,愿你在兔年大展宏兔,扬眉兔气. 文 ...
- 前端劝退之前端知识体系(前端面试体系)
关注公众号 前端开发博客,领27本电子书 回复加群,自助秒进前端群 写文的目的主要是梳理下知识,能对复习有点帮助就行,本文主要针对前端知识体系相关,涉及的内容有: 浏览器 计算机网络 前端基础(htm ...
- 5 位阿里前端技术专家论:前端工程师的成长和发展
前端夜话.活动邀请到了前端大咖 winter.百姓网技术顾问贺师俊(Hax).Swift 大神王巍(喵神).<CSS 世界>作者张鑫旭.阿里前端技术专家狼叔等 5 位前端大牛,聊聊前端工程 ...
- “但行好事,莫问前程”,淘系技术部前端团队p9资深前端技术专家晋升经历总结...
本文来源:阿里技术公众号,作者舒文 阿里妹导读 :今 年的双11已经是阿里资深前端技术专家舒文来阿里的第11年,从应届生到双11前端PM,他一路升级打怪,实现了岗位上从P4到P9的晋升. 这第11届双 ...
- 什么人适合学习web前端?怎样学好web前端开发?
web前端在IT互联网行业的发展前景是非常可观的,越来越多的人都在学习web前端技术,那么什么人适合学习web前端?怎样学好web前端开发?相信大家都想了解这些问题,我们来看看下面的详细介绍. 什么人 ...
最新文章
- ELK学习7_ELK文档资料:《ELK stack 权威指南/饶琛琳》勘误
- SAP S4CRM和C4C的技术比较
- 清除谷歌浏览器的dns缓存
- Java自动化测试框架-06 - 来给你的测试报告化个妆整个形 - (下)(详细教程)
- 开机时提示F1continue, F2 setup
- 几种常见的模式识别算法整理和总结
- c语言如何输出动态数组,C语言动态数组的使用实现代码
- 虚拟机中【临时使用】泰阿红队单兵作战系统(TaieRedTeamOS)
- 敏捷开发快速入门(四):Scrum开发流程
- 中国行政区划代码,包括五级行政区划详细代码,县级以上区划地理围栏
- python学习视频
- MATLAB机器人工具箱(二)机器人模型建立
- 中国人为何无缘诺贝尔奖
- android应用程序设计_UED干货 | 一篇文章知晓小程序设计
- 读完研继续读博还是先工作几年再读博好一些?
- 中西入门哲学史差异记录
- MySQL从删库到跑路(8):聚合函数——让我们来统计一下漂亮妹子的信息
- 腾讯云公布大数据平台最新数据,日实时计算量超40万亿
- 木瓜移动:从KOL到内容营销,出海品牌如何争夺流量新战场
- 自考计算机数据结构导论,自考数据结构导论……
热门文章
- PVE系列教程(十七)、安装Redis服务器
- 珠宝店小程序:利用科技提升珠宝店的品牌形象
- 使用Konva操纵HTML5画布:第3部分,复杂的形状和精灵
- MFC 对话框 背景图片 以及消除 字体重影 字体重叠
- JSP实现基本的注册功能
- extern使用方法总结
- Linux内核学习笔记(6)-- 进程优先级详解(prio、static_prio、normal_prio、rt_priority)...
- js-xlsx基本使用(vue)
- Python-pptx Chart
- 超定方程组最小二乘matlab,超定方程组的最小二乘解.ppt