2023-杨章恒sys

VIP_前端训练营学员 0 159

主要是了解大家前端当前掌握的情况，然后根据每个人具体情况结合大纲提一些建议。如果完全是 0 基础就不用写了，可以根据训练营的大纲开始学习。

是否题直接答是否，如果有a补充的并且补充下。选择题在选项后补一个 ✅。

html/css，能否独立还原下边的卡片：

轻轻松松半天内即可 ✅
磕磕绊绊，通过查资料一天即可
完全没有思路

js 部分

是否熟悉基本语法，例如 if、for、function、while。

是的话，能否应用语法轻松完成下边的题目：

1、https://leetcode.cn/problems/two-sum/

2、https://leetcode.cn/problems/palindrome-number/

3、https://leetcode.cn/problems/climbing-stairs/

全部独立完成，不需要参考其他人题解
部分独立完成，其他题参考题解后可以明白✅
无法独立完成，看了题解也不理解

vue

完全没用过
了解过基本语法，没有写过相应代码
了解过基本语法，按照教程写过代码✅
可以自己独立完成想做的项目

react

完全没用过✅
了解过基本语法，没有写过相应代码
了解过基本语法，按照教程写过代码
可以自己独立完成想做的项目

小程序

完全没用过
了解过基本语法，没有写过相应代码
了解过基本语法，按照教程写过代码✅
可以自己独立完成想做的项目

node.js

是否知道 koa 等 HTTP 框架并且用过。否

是否自己使用过第三方的 node 包。✅

ts

完全不了解
听说过✅
听过并且在项目中用过些
听过，并且知道类型体操，刷过一些题

webpack

完全没用过
仅使用过✅
不仅使用过，对一些配置项也了解
知道 eslint
知道 babel
知道 less/sass
会自己写 webpack 插件

数据结构和算法部分

是否知道树、链表 ✅
是否知道递归、动态规划 ✅
在LeetCode刷过多少题目 50

高阶部分

构建打包工具，webpack/esbild/swc/vite 异同否
SSR 原理，Nuxt 框架使用否
原子化 css，Tailwind CSS，Windi CSS 否
测试框架，Jest 等否
Webassebmly 学习了解否
PWA 了解否
Lerna 进行否
Monorepo 项目管理否
跨端框架，RN、electron 否
低代码平台 ✅
微前端前端否
3D，three.js，webgl 否
深度学习，TensorFlow.js 否

以上哪些名字只是听过，但不太了解：✅

以上那些名字不仅听过，而且用过或者可以讲出它们的概念是什么。

其他

是否有自己的项目？有 github 仓库链接吗

有，但没有上传到git上，一个小程序购物商城

是否自己总结过文章，有的话可以贴一下地址。

有总结过文章，有过一些记录；https://blog.csdn.net/qq_58956016?spm=1000.2115.3001.5343

参加训练营的最终目标，校招找工作 or 社招找工作 or 仅兴趣或者其他，并且写一下预计达成目标的时间，其他想补充的也想到这里

校招找工作，想得到成都较大公司的offer，想冲击滴滴或者美团，达成目标时间明年二月底、三月份左右，三个月时间，算法部分刷题以及是比较久之前的事了，忘记的较多

【windliang：看「前端进阶」部分的 js、Vue，看面试准备部分的「项目」，项目拉下来，理清逻辑。每周在这篇文章做一下学习进度的更新，我再根据具体情况和你沟通】

2022-12-5
前端响应式原理
实践这个概念的时候是在第一家公司工作时，还原设计稿使用的媒体查询，制作手机页面和PC端页面，针对不同的媒体类型定义不同的样式，当窗口变换时，页面根据浏览器的宽度和高度重新渲染页面。
@media screen and (min-width:320px){
html{
font-size:50px;
}
}

@media screen and (min-width:640px){
html{
font-size:100px;
}
}

-百分比布局
通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度变化而变化，从而实现响应式的效果，需要注意的点是要弄清楚css中子元素的百分比到底是相对谁的百分比

-rem布局
rem是css3新增单位，移动端较多，是相对于根目录html的font-size来决定的。即rem的可以写定，通过font-size来决定大小即可。
缺点：在响应式布局中，必须通过js来动态控制根目录font-size的大小，即css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前。
小说软件，屏幕越小的移动设备如果用了rem肯定文字就越小，就会导致看文章的时候特别费眼。
还有个问题就是屏幕越大，元素也会越大，导致电脑打开没有适配的手机网站惨不忍睹。

-视口单位（只是了解）
vw 相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh 相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin vw和vh中的较小值
vmax vw和vh中的较大值

Vue的响应式原理
又叫做数据双向绑定，需要通过object.defineProperty()方法把数据设置成setter和getter访问形式，这样在数据被修改时在setter方法设置剪视修改页面信息，也就是是每当数据被修改，就会触发对应的set方法，我们就可以在set方法中调用操作dom的方法。

除此之外，如果页面有input用v-model绑定数据，我们需要在这种绑定了data的input元素上添加监听，添加input事件监听，每当input事件被触发时，就修改对应的data。

Git
诞生：c语言编写
集中式 VS 分布式
CVS及SVN都是集中式的版本控制系统，而Git是分布式版本控制系统，
集中式版本控制系统，版本库是集中存放在中央服务器的，干活的时候，用自己的电脑，从服务器取文件，干完活后还回去，类似于借书。集中式版本控制系统最大的毛病是必须联网才可以工作。

分布式没有中央服务器，但是他有一台充当“中央服务器”的电脑，此电脑仅仅是用来方便“交换”大家的修改，没有他一样干活，只是交换不方便而已
分布式安全性高，每个人都有完整的版本库；不必联网。

指令
回退到之前的版本
上一版本 git reset –hard HEAD~
上上版本：HEAD
~~上一百个：HEAD~100~~

回退后又想回去，首先找到回退前的那个版本对饮的id：git reflog

接着：git reset –hard 1094adb

WebPack打包工具
问题打包出来的文件夹需要html在浏览器中查看js文件，但是html中的js文件每次都要手敲到script标签中很麻烦。
解决在入口文件夹src中直接创建一个html文件，使用HtmlWebpackPlugin生成html文件，这样生成的html文件中自动绑定了js文件。

流程从src/index.js入口文件中打包生成到dist/index.js中，文件路径和文件名都可变

让修改过的文件立即生效到打包文件中，而不是每次修改了都要 npm run build一下
使用webpack-dev-server

meta viewport

meta viewport是用来做移动端适配的，可以让网页在移动端上得到很好的呈现

width = device-width 宽度等于设备宽度
initial-scale = 1 页面的初始缩放比例为1
minimum-scale = 2 maxumum-scale = 1 用户能够放大和缩小的比例都为1。用来禁止用户缩放
user-scalable = no 也是用来禁止用户缩放
之所以重复禁止用户缩放，是因为在有些浏览器中其中一个会失效。

常用的meta标签属性
1.定义网页文档的字符集

2.网页作者

3.网页授权信息

Web Worker

在HTML页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完毕之后，页面才变成可响应的。Web Worker是运行在后台的js，独立于其他脚本，不会影响页面的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
如何创建Web Worker？
1.检测浏览器对于web worker的支持性
2.创建web worker文件（js、回传函数等）
3.创建web worker对象

CSS引入方式

导入式
@import "./mystyle.css";

2.外链式
“

3.行内式
<div style="border:1px red solid">测试信息</div>

4.内嵌式
div{ margin:0; padding:0; }

回流和重绘

1.回流
DOM树改变、由结构性的改变，例如：窗口大小改变、字体大小改变、CSS伪类等
２.重绘
视觉效果引起的，比如颜色或者背景进行了改变

Display:none 指的是元素完全不陈列出来，不占据空寂，涉及到了DOM结构，产生了reflow和repaint

Visibility:hidden 指的是元素不可见但存在，保留空间，不影响结构，故只产生了repaint（脱离文档流），子元素可以通过设置visibility:visible来取消隐藏

opacity:0；元素仍然存在，不影响结构，不和动画属性一起不会产生reflow和repaint

利用koa写一个接口，然后自己写一个html访问接口中的数据

koa代码
`
const Koa = require(“koa”);
const router = require(“koa-router”)();
const app = new Koa();

router.get(“/api/data”, async (ctx, next) => {
ctx.response.body = {
status: true,
data: [1, 2, 3],
msg: “获取数据成功”,
};
});
// add router middleware:
app.use(async (ctx, next) => {
ctx.set(“Access-Control-Allow-Origin”, “*”);
ctx.set(
“Access-Control-Allow-Headers”,
“Content-Type, Content-Length, Authorization, Accept, X-Requested-With”
);
ctx.set(“Access-Control-Allow-Methods”, “PUT, POST, GET, DELETE, OPTIONS”);
if (ctx.method = “OPTIONS”) {
ctx.body = 200;
} else {
await next();
}
});
app.use(router.routes());

app.listen(8888);
`

html代码是写在webpack环境当中的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>前端工程化</title>
 <script>
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:8888/api/data");

// state change event
xhr.onreadystatechange = () => {
  // is request complete?
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // request successful
    console.log(JSON.parse(xhr.responseText));
  } else {
    // request not successful
    console.log("HTTP error", xhr.status, xhr.statusText);
  }
};

// start request
xhr.send();
</script>
 </head>
  <body>
    <div id="app" />
    <script src="bundle.js"></script>
  </body>
</html>

主要涉及到的是跨域问题
跨域的问题产生是因为访问的域名不同，一个是8888端口，一个是3000端口
“
跨域产生的原因是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务器之家是不存在跨域的。
所谓同源指的是两个页面具有相同的协议、主机和端口，三者有任一不相同就会产生跨域。

解决跨域的解决方式
1.”Access-Control-Allow-Origin”, ““)
在响应头字段中设定可以访问的域名，代表所有。
如果要发送cookie时，其的值不能为*

2.设置代理服务器
经过网关的在网关统一处理,没经过网关的在nginx做处理

3.JSONP
原理：利用了script标签不受浏览器同源策略的限制，和后端一起配合起来解决跨域问题。
具体实现：在客户端创建一个script标签，然后把请求后端的接口拼接一个回调函数名称作为参数传给后端，并且赋值给script标签的src标签，然后把script标签添加到body中，当后端接收到客户端的请求时，会解析得到回调函数的名称，将数据和回调函数名称拼接成函数调用的形式返回，客户端解析后会调用定义好的回调函数，然后再回调函数中就可以获取到后端返回的数据了。

页面中可能存在多个jsonp，所以可以封装一个jsonp方法
function jsonp({url,params,callback}){return promise(resolve,reject) => {}}

调用的时候

jsonp({
    url:'http://127.0.0.1:8081/user',
    params:{id；1}，
    callback:'getUserData'
}).then(res => {
    console.log('res:',res)
})
})

4.搭建Node代理服务器解决跨域

5.postMessage

6.Websocket
”
需要在其中给要访问的地址加上权限
app.use(async (ctx, next) => {
ctx.set(“Access-Control-Allow-Origin”, “*”);
ctx.set(
“Access-Control-Allow-Headers”,
“Content-Type, Content-Length, Authorization, Accept, X-Requested-With”
);
ctx.set(“Access-Control-Allow-Methods”, “PUT, POST, GET, DELETE, OPTIONS”);
if (ctx.method = “OPTIONS”) {
ctx.body = 200;
} else {
await next();
}
});

*号代表所有的请求地址都可以访问

接着是访问的方式运用的是XHR方式

onreadystatechange回调函数在请求的生命周期中运行好几次；XHR对象的readystate属性则返回当前状态：
1. 0 – 请求未初始化
2. 1 – 服务器连接建立
3. 2 – 请求收到
4. 3 – 处理请求
5. 4 – 请求完成。响应准备就绪

TS学习

https://github.com/mqyqingfeng/Blog/issues/227
JS无法提前预测代码的运行结果，无法提前知道传入的数据是什么类型。不知道需要传入的代码是什么类型的
解决方式是使用静态类型系统，在代码运行之前就预测需要什么样的代码

TS的作用：在代码运行之前就找到错误。静态类型系统描述了值应有的结构和行为。
例子
const message = "hello"; message();
在这个例子中，TypeScript会在运行之前就会抛出错误信息。
//This expression is not callable.
//Type “String” has no call signatures.

JS和TS的区别
1.JS

const user = {
    name:"Dan",
    age:26,
};
user.location;

//return undefined

2.TS

const user = {
    name:"Dan",
    age:26,
};

user.location;

//Property 'location' does not exist on type "{ name:string; age:number;}".

一句话总结来说：
就是TS能捕获很多合理的错误，能捕获更多，比JS知道的更多。

实践

tsc TypeScript编译器
1.安装 npm install -g typescript
2.创建一个空文件夹，写第一个TS程序：hello.ts:
console.log("Hello World");
3.执行 tsc hello.ts；
如果没有出错的话就直接生成一个新的js文件，如果是有问题的话就直接在cmd中报错。

特点

1.类型抹除

原来给的TS中的类型批注会被编译器抹除

2.降级

原来运用的是模板字符串 ES6语法
Hello ${person},today is ${date.toDateString()}!;
编译之后变成
"Hello" + person + ", today is " + date.toDateString() + "!";
默认编译ES3语法，可以使用 tsc –target es2015 hello.ts 编译为ES2015

3.严格模式

noImplicitAny
当其为any类型的时候，就会抛出一个错误，如果不开启的话检查就更为宽松

strictNullChecks
用于识别null和undefined

算法

基础

二分法查找法 O(logn) 所需执行指令数：alogn
寻找数组中的最大/最小值O(n) 所需执行指令数：bn
归并排序算法O(nlogn) 所需指令数：cnlogn
选择排序法O(n^2) 所需指令数：dn^2

a、b、c、d 都是常数复杂度与其关系不大所以都是看后面的，其均用大O表示

大O表示最低上界

第一步分析时间复杂度

数据规模概念

如果想在1s之内解决问题
O(n^2)的算法可以处理大约10^4级别的数据
O(n)的算法可以处理大约10^8级别的数据
O(nlogn)的算法可以处理大约10^7级别的数据

空间复杂度是指我们开辟了多大的一个空间

简单的复杂度分析
O（1）数据交换

O（n）for循环

O(n^2) 双重for循环

特例打印n个班中每一个同学的编号看似是双重for循环，但其实是30n次基本操作：O(n)