1.前端基础

从浏览器原理到工程化架构：现代前端开发的核心能力体系

前端技术一览

1.基础

1.1.HTML

• HTML常用声明.txt
• HTML常用标签.txt

1.2.JavaScript

• 1基础语法.txt
• 2基本对象与BOM.txt
• 3DOM与事件.txt

1.3.Ajax

• AJAX.txt
• 获取xmlhttpQequest对象.txt

1.4.jQuery

• 1CSS风格选择器.txt
• 2对DOM访问，操作.txt
• 3功能与事件.txt
• 4动态效果.txt
• 5ajax.txt
• 6json.txt

1.5.前端模板

• BUI前端框架模板.zip
• layui-admin.zip
• 气象局项目原型.zip

2.JavaScript库

为了调整困难且耗时的JavaScript高级程序设计而产生的；所有js框架都提供针对常见JavaScript任务的函数，包括动画、DOM 操作以及Ajax处理。

也就对JavaScript进行了高级封装，更像是一种新的语音。

2.1.vue

VueJS是一个渐进的JavaScript框架，用于开发交互式Web界面。聚焦更多的是视图，也就是前端部分。与其他项目和类库整合是非常容易的。 VueJS的安装非常简单，初学者可以轻松理解并开始构建自己的用户界面。内容分为不同的章节，包含相关的主题，简单而有用的例子。

• 官方中文网:https://cn.vuejs.org/
• 简单教程： https://www.yiibai.com/vuejs/

2.2.React

React 是市场上最大的前端 JavaScript 框架（完美的前端 Web 开发工具）之一，因其易用性和高性能而广受欢迎。 中文网http://react.caibaojian.com.cn/

2.3.Angular

Angular 使用一种称为 TypeScript 的脚本语言，与其他 JavaScript 框架相比，它更直观、更易于使用。但也是最复杂的。 中文网https://angular.cn/

2.4.jQuery

中文网https://www.jquery123.com/

3.UI 类库

对常用的功能页面进行了封装，通常会提供vue、React、Angular、原生js等的支持。

3.1.EasyUI

easyui是一种基于jQuery、Angular、Vue和React的用户界面插件集合。 功能齐全、但是页面非常简约，适合做办公类的应用。 官网https://www.jeasyui.net/

3.2.Bootstrap

支持多种语音，但是操作比较繁琐。中文网https://www.bootcss.com/

3.3.layui

Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。 其风格简约，而内在丰盈，利于实现网页界面的快速构建。 国内做开源项目失败，已经转为完全的开源项目。 中文网https://layui.github.io/

3.4.ant design【UI设计器】

Ant Design 源自蚂蚁金服体验技术部的后台产品开发。是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 中文网https://ant.design/index-cn

3.5.element ui【UI设计器】

是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面 中文网https://element.eleme.cn/#/zh-CN

4.前端组件

4.1.图表

• highcharts： https://www.highcharts.com.cn/
• echarts： https://echarts.apache.org/zh/index.html

5.node.js

5.1.介绍

Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

官网： https://nodejs.org/zh-cn/

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

我们可能不会用到nodejs，但是npm是前端的重要的使用工具

npm install
npm run build ## 自定义后面的构建内容，命令会不同
npm config get registry #查看仓库地址
npm config set registry http://registry.npm.taobao.org/repository/npm-public # 切换阿里源

5.2.多版本管理

• nvm下载: https://github.com/coreybutler/nvm-windows/releases
• 安装教程：http://www.manongjc.com/detail/26-nbmqbsbnrxxzspj.html

下载版本：nvm install 16
切换版本：nvm use 16

5.3.依赖引入流程

• npm install命令输入 >
• 检查node_modules目录下是否存在指定的依赖 >
• 如果已经存在则不必重新安装 >
• 若不存在，继续下面的步骤 >
• 向 registry（本地电脑的.npmrc文件里有对应的配置地址）查询模块压缩包的网址 >
• 下载压缩包，存放到根目录里的.npm目录里 >
• 解压压缩包到当前项目的node_modules目录中。

6.性能优化

京东亿级体量微信小程序优化实践

7.跨端

所谓跨平台，就是用同一套代码，运行在 iOS、Android、Web 甚至桌面端。

常见的方案：

1. uni-app： WebView 渲染 + JS 引擎
   • 核心：App 就是内置浏览器你写的 Vue 代码 → 编译成 HTML/CSS/JS → 在 App 内的 WebView 中运行。
   • 优点：开发极快！前端同学无缝上手；生态无敌，npm 随便装；多端统一，H5、小程序、App 一把梭。
   • 缺点：性能天花板低，复杂动画、长列表滚动易卡顿；受限于浏览器渲染机制，无法突破 Web 层性能瓶颈
2. Flutter：自绘渲染（Skia）
   • 核心：Flutter 直接调用 Skia 图形引擎（Chrome 和 Android 底层都在用），自己计算每一个像素，直接输出到屏幕。
3. React Native：原生渲染 + JS 引擎
   • 核心：你写 JSX → JS 引擎（Hermes）运行 → 通过 Bridge（桥） 发指令 → 原生系统创建真实控件。

经典的配色方案