前端工程化学习笔记

橘子洲头361
182 阅读8分钟

前端是HTML+CSS+JavaScript三剑客 标签+样式+脚本 构成了浏览器页面的效果

HTML 诞生一个初步形象 CSS 经过一些修饰 显得更美观 JavaScript 赋予其生命

前端入门就是掌握以上三种语法，古早的网站就是美工画页面，后端拿到这个页面用jsp生成新html三件套渲染，或者把php跟前端结合起来（所以说PHP是最好的语言），那会前端工程师的概念还比较少，就是美工加开发。用很多html页面，主要做展示信息的这种模式称为Web 1.0。

后来Ajax诞生了，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax技术促成了 Web 2.0 的诞生。 Web 1.0：静态网页，纯内容展示 Web 2.0：动态网页，富交互， 前端 数据处理。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离 把Model和View关联起来的桥梁就是ViewModel View 和 Model 之间的同步工作完全是自动的，无需人为干涉 因此开发者只需关注业务逻辑，不需要手动操作DOM（Document Object Model）, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理，区别于jquery的$取元素。

这时移动4G网络的兴起，手机浏览器和app有着巨大的商机，前端工程师和Java后端到了风口上。

三大MVVM框架

  • Vue
  • React
  • Angular

对应还有一些技术如下：

webpack，它基本上包办了本地开发、编译压缩、性能优化的所有工作。webpack之于前端开发，像spring全家桶之于java。Vue一开始是直接用webpck的，最后作者嫌弃webpack打包慢热加载慢、配置复杂自己整了一个vite，下面细说。

TypeScript （ ts ） 是微软开发和维护的一种面向对象的编程语言。它是JavaScript的超集，包含了JavaScript的所有元素，可以载入JavaScript代码运行，并扩展了JavaScript的语法。 TypeScript增加了静态类型、类、模块、接口和类型注解，在开发大型项目时使用TS更有优势。

Node.js是一个Javascript运行环境(runtime environment)，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。nodejs的作者想集成一个包管理工具进来，npm的作者由于自己人微言轻连jquery都没谈下来，俩人抱团取暖发展壮大。

后来nodejs作者离开node团队又开发了deno，也是基于V8引擎的环境 用 Rust 来原生支持了 TypeScript

随着技术的更新和npm受人诟病的慢、大，催生出新一代包管理器的诞生，yarn是其中之一。

  • yarn在下载和安装依赖包采用的是多线程的方式，而npm是单线程的方式执行，速度上就拉开了差距

  • yarn会在用户本地缓存已下载过的依赖包，优先会从缓存中读取依赖包，只有本地缓存不存在的情况才会采取远端请求的方式；反观npm则是全量请求，速度上再次拉开差距

  • yarn把所有的依赖躺平至同级，有效的减少了相同依赖包重复下载的情况，加快了下载速度而且也减少了node_modules的体积；反观npm则是严格的根据依赖树下载并放置到对应位置，导致相同的包多次下载、node_modules体积大的问题

因为低代码使用了vue所以从vue开始了解

vue之前用vue CLI脚手架 使用webpack启动和打生产环境包的

目前出于更加快速、轻量化，从webpack转到了vite上。

cli.vuejs.org/zh/

//安装nodejs配环境变量没啥说的，用npm安一个vue脚手架
npm install -g @vue/cli

vue init（经典场景）
vue init命令是vue-cli2.x提供创建Vue项目的方式，可以使用github上面的一些模板来初始化项目。
比如webpack就是官方推荐的标准模板。
使用方式：vue init [options] <template> <app-name>。

vue ui
vue ui命令也是vue-cli3.x提供创建Vue项目的方式，可以通过操作可视化页面来创建和管理Vue项目。

vue create
vue creat命令是vue-cli3.x提供创建Vue项目的方式，模板是固定的，模板选项可自由配置（也能是vue2.x）。
使用方式：vue create [options] <app-name>。

用npm初始化一个vite
npm init vite-app <project-name>
或者 npm create vite@latest 进行选择创建

最粗暴的方法也是现在vue开发者建议的方法
npm create vue@3

经典场景下初始化项目 结构介绍

目录结构
├── README.md                            项目介绍
├── index.html                           入口页面
├── build                                构建脚本配置文件目录
│  ├── build.js                          生产环境构建脚本
│  ├── utils.js                          构建相关工具方法
│  ├── webpack.base.conf.js              wabpack基础配置
│  ├── webpack.dev.conf.js               wabpack开发环境配置
│  └── webpack.prod.conf.js              wabpack生产环境配置
├── config                               项目配置文件目录
│  ├── dev.env.js                        开发环境变量
│  ├── index.js                          项目配置文件
│  ├── prod.env.js                       生产环境变量
├── package.json                         npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src                                  源码目录 
│  ├── main.js                           主入口 js文件
│  ├── App.vue                           根组件
│  ├── components                        公共组件目录
│  ├── assets                            资源目录(这里的资源会被wabpack构建)
│  │    └── logo.png                     Vue 的logo图片
│  ├── routes                            前端路由目录
│  │  └── index.js
├── static                               纯静态资源（不会被wabpack构建）

代码规范，可在vue项目创建的时候引入，也能在之后npm安装。项目中的.eslint文件就是代码规范的配置

github上比较受欢迎的有airbnb和standard，国内各大厂商也有自己的规范。

自动化部署

gitLab上有完整的自动部署方式，通过webhook 监听项目提交 自动打包部署到所配置的环境上去。

日志、错误监控、性能优化等需要在生产中学习。。。

路由

  1. 前端路由的由来

说前端路由由来之前，先看下后端路由：

在前后端不分离的时代，路由都是通过服务端指定的，服务端根据客户端发来的HTTP请求，将返回的数据于模板引擎响应结果结合后进行渲染，将渲染完毕的页面发送给客户端。 优点：SEO友好，爬虫爬取到的页面就是最终的渲染结果。 缺点：每次发起请求都要刷新页面，用户体验不好，服务器压力大。

SPA是单页面应用Single Page web Application的简写。简单理解就是一个web项目只有一个html文件，一旦页面加载完成，SPA不会因为用户的操作进行重新加载或跳转，而是用JS动态变换html的内容（使页面无需重新加载，用户体验更加流程），页面本身的url并没有变化，这将导致两个问题：

1.SPA无法就记住用户的操作：刷新 & 前进 & 后退。

2.实际只有一个url，对SEO不友好，爬虫获取到的html只是模板而不是最终的页面。

前端路由的由来可以理解成是基于SPA页面局部更新特点的，但是要解决SPA的两个问题，实现：

改变url不让浏览器向服务器发送请求

监听url的变化，执行对应的操作

  1. hash模式

hash模式：www.baidu.com/#hashhash

hash指的就是url的#及后面的字符，如上面的“#hashhash”

hash模式的特点：

hash值的变化不会导致浏览器向服务器发送请求，不会引起页面刷新

hash值变化会触发hashchange事件

hash值变化会在浏览器的历史中留下记录，使用的浏览器的后退按钮可以回到上一个hash值

hash永远不会提交到服务器，即使刷新页面也不会。

由以上特点可见，hash模式完全满足前端路由的需求，因此在h5的history模式出现之前，基本都是使用hash模式实现前端路由。

优点：兼容性好，支持低版本和IE浏览器，实现前端路由无需服务端支持

缺点：url带有#符号，略丑

  1. history模式

在HTML5之前，浏览器就有history对象了，只能用于多页面之间的跳转

history.go(n) // n>0前进n页；n<0后退n页
history.forward() // 前进一页
history.back() // 后退一页

在HTML5规范中，history中增加了新的API：

/*
  参数说明：
    state：合法的JavaScript对象，可以用在popstate对象中
    title：标题，基本忽略，用null
    url: 任意有效的url，将要跳转的新地址
*/
history.pushState(state, title, url) // 保留现有记录的同时，将url加到历史记录中
history.replaceState(state, title, url) // 将历史记录中的当前页面替换成url
history.state // 返回当前状态对象

Vue在新的规范下兼容了hash和history模式，使得二者除了url上几乎没什么差别。

  1. 路由懒加载：

将router文件里的

import HelloWorld from '@/components/HelloWorld'

替换成以下

const HelloWorld = （）=>import('@/components/HelloWorld')
or
component：resolve=>(['@/components/HelloWorld'，resolve])

就把本来应该进入主页就加载的路由先放着，等点击的时候再加载。

把第一次进入页面加载路由的时间和占用浏览器资源 均摊给每一次操作，用户体验更佳。

avatar
文章
阅读
粉丝