我是做前端工作的，我会把工作分为三个部分。
比如说：项目前、项目中期和项目后期。
这样的话，我们在前、中、后期三个节点上面的效率就会得到最大的提升。
注：你做自我介绍的时候，兴趣爱好、学历啥的简历上都有，不用拿来介绍。
我叫xxx，我掌握的技能有哪些？如：H5、C3、js、element-plus、node、vue等等。
在工作中我的打包工具用的是什么？如：webpack、vite。
我的版本控制工具(分布式)用的是什么？如：git
说完这些之后，最好加一些，在以前的工作当中，我们前端经常遇到的是什么问题？比如说接口安全的问题、常见的一些攻击的问题、适配的问题等等。
在这个时候，对于成熟的前端人员来说的话，想问的相对来说多一些：
个人信息：以简洁明了为主。姓名、学历、毕业院校、电话、邮箱，不要超过6项。
专业技能：以充实为主。把会的技能多写上一些。
过往的经历：过往的公司和时间要搭配，不要有空窗。
项目介绍：一到两年(包装2-3个项目)、三年(3-4个项目)。你工作3年就只有这3个项目吗？回答：我放到简历上的项目，是我认为比较好的，其实其他的一些小的项目，有一些雷同的地方，我没有往上写，所以从中挑选了基本较好的项目。
注意点：
自我评价：本人比较善于沟通，团队协作能力比较强，能够完成领导交待前端相关的工作任务。
注意：聊的时候，一定不要跟人家谈年限，最近两年要干什么。。。
回答：我作为一个前端来说，我近期的职业规划是把咱们公司的项目做好，另外呢，学无止境，把我的技术得以提升。多学一些组件、插件，多学一到两款框架。
对于中长期的规划来说的话，我打算呢将来我再研究一门后台语言，比如说像Java、PHP、Python这些我研究一门，争取研究一门之后，可以更加方便咱们前端跟后端去沟通，为咱们公司更好的去服务。另外呢，我也相信，咱们公司有合理的晋升机制和制度。所以呢，如果将来公司有这样的机会，这种机会放在我跟前，我也是会毛遂自荐，服务好公司。
这就是我近期、中期和长期的一个职业规划。
如果公司录用我了，我将会带着我以前的技术和经验，把这些东西带到咱们的项目中，让咱们的项目更好，更人性化。
我会快速的掌握咱们现在所写的项目。包括它的路由是怎么架构的，接口的请求是怎么来处理的，还有它里面的一些难点重点的技术，我以前有没有处理过。
这些都是我们前端人员在刚入职的时候要做的事情。以避免后边在开展工作中遇到这些问题，再去处理就比较难处理了。
要考虑我是不是需要后台或者其他的技术人员去配合，这个也要有一个正确的评估。为啥要评估这个呢？如果问题到了跟前再去跟后台沟通，这样的话，很可能会打乱后台的工作计划。
进入公司以后，我打算基于以上三个方面开展工作。
注意点：
回答：
我可以接受加班，不管是自己的原因还是其他的一些什么原因，都是可以免费接受的。
在我们公司以前技术部分这么几个角色：
产品经理、UI、前端人员、后台(后台是一个统称：Java、PHP、Android、iOS都是在写后台的业务逻辑)，以上这些角色去进行项目开发。
前端在项目中的地位和工作流程：
产品经理： 当一个项目进来，最先跟这个项目客户去接触的一般是产品经理，产品经理的作用是：和客户进行聊天，聊天的过程中，他会做一个产品需求文档(说白了，就是客户想要什么？)，在这里面有一个重要的职责，有时候客户很盲目，他不知道自己的需求到底是什么(比如说他想做一个卖菜的网站，他可能不知道什么是APP，但是他们会使用)，这个时候产品经理要做的就是正确引导客户需求。然后，产品经理需要把这些需求跟UI、前端等技术人员去讲明白。
UI： 出了需求文档之后，产品经理会把文档给到UI、前端、后台各一份。UI 把需求文档做成原型图(黑白的，像黑白照片)和设计图，UI在整个工期里面大概要占到三分之一。当设计稿出来后，同时交给前端和后台，因为基本上前端和后端干活是并行的。
前端： 开始根据页面去制作各种各样的效果。或者是DIA(diagram 图表)或者是小程序。在这个过程中后台也在干活。
后台： 后台就要开发它对应的数据管理部分。除此之外，后台还需要去做 API 接口的东西，这个接口是为前端去开发的。
等到前端的页面布局完了，后台的接口也写完了，剩下的就是前端去渲染数据，调用接口里面相对应的数据就可以了。这些完了之后，就是一个测试阶段。
测试阶段： 测试阶段是 UI、前端、后台都需要参与的，如果有专业的测试，他们的工作量就稍微会少一点。都参与可以保证出现问题可以及时得到处理。
部署： 测试完成之后，再把这个项目部署到客户的服务器上去。
基本上整个工作流程就是这样子的。
如：10k为例，我上家公司是这样发放的：
基本工资：5000
岗位工资：如前端 3000
绩效工资：2000左右(总工资的15%-20% )
绩效工资是一个考核标准，干得好才有，你负责的部分出了问题会扣一部分或者扣除全部。
补贴补助：1000以内(话补、餐补、车补等等)。
社保公积金：一般情况下公积金+社保占 10%左右。
扣税：5000以上需要交税
真正到手的大概是九千左右的一个范围
如果这个时候我走了，我会得到什么，我会失去什么？
我得到了：我得到的肯定是一份新工作，需要吃饭穿衣嘛这个很正常。
我失去了：我会失去老板和领导对我的信任，俗话说：“患难见真情”，如果我跟他们共渡难关，在工作中共同努力克服了困难，挺过这一关，那我在这个公司的价值会大大提升。而且我的口碑也会好很多。
每一个员工应该各司其职，尽职尽责把自己的工作做好，做好之后，才能够让公司踏踏实实，放心去解决问题。当然在自己的事情完成得很好的情况下，在力所能及的范围之内去帮助其他的同事。如果一个团队、一个公司的人都有这样的想法，我觉得老板和领导一定会想尽办法去解决公司的困难。
注：我说15000，HR压榨成9000
做两手准备：
这个时候跟 HR 去较劲，很大概率是会谈崩的。
Async：
async 用来定义函数的，异步函数，打印函数名会得到一个promise对象。可以使用函数名称来调用.then方法，如：函数名称.then
async 内部实现，有返回值。其实是内部调用了 promise.resolve()，然后把它转换成一个promise对象。如果出错的话，调用的是promise.reject()。它用catch捕获了一下
Await：
await 理论上来说后面可以跟任意的表达式。但是一般是跟promise的表达式
async function add() {
const res = await 123
console.log(res) // 123
return res
}
console.log(add()) // 成功的promise，值是123
await 等待后边的promise对象执行完毕，拿到了promise.resolve()的返回值之后，在往后继续去执行后边的代码，所以await有一个等待的意思。
await关键字只能写在async的函数里。
await 后边的表达式可能是失败的，await 只能拿到成功的结果，如果失败会向浏览器控制台抛出错误。所以建议把await的代码放到try…catch语句中捕获错误会比较好。
async function test() {
const res = await Promise.reject(123)
return res
}
console.log(test()) // Uncaught (in promise) 123
async function test() {
try {
const res = await Promise.reject(123)
} catch (error) {
console.log('error', error) // 2. error 123
}
}
console.log(test())
console.log(111) // 1. 111
promise 和 async await 区别：
命令：npm run build
需要在vue.config.js中配置 entry, output
处理方案：
打包后，会在dist下生成.map文件，那么这个文件其实是不必要的
解决：在vue.config.js中配置文件中：productionSourceMap: false。这样就不会生成.map文件了。
使用组件和路由懒加载
组件和路由懒加载是按需加载的，这样会降低一些文件的大小。
对于文件和图片，最好压缩一下。可以使用这个组件(此组件需要安装)：compression-webpack-plugin
导入组件：compression-webpack-plugin
配置：
安全问题是一个很宽泛的问题，如：xss和csrf攻击等等。
这里主要谈论的是接口的安全问题。
接口安全：防止传输过程中，数据被抓包。我们会在数据传输的时候(前台传给后台，后台传给前台)进行加密和解密。
常用的加密算法：
aes rsa SHA1 SHA256 md5 … 有很多的算法
胡哥用过的有 aes rsa
aes加密工具的使用：
安装：npm i crypto-js –save -dev
在utils工具文件夹下创建crypto.js文件
crypto.js中写入
import cryptojs from 'crypto-js'
export default {
encrypto(str) { // 加密
// 生成秘钥
// 秘钥是前端和后端都知道的，但是网络上是不知道的，所以他们截取去了也没有用。比如说我们前端生成秘钥是11111，那么后端也要用11111去解密
let key = crytojs.enc.utf8.parse('11111')
// 生成偏移量 --- 一般都是传进来的字符串
// 生成偏移量作用：如果字符串内容长度不够，会自动补齐
let srcs = cryptojs.enc.utf8.parse(str)
// 加密 --- 参数：偏移量，秘钥，配置加密的参数
let encrypted = cryptojs.AES.encrypt(str,key,{
mode: cryptojs.mode.ECB, // 加密模式
// ECB 表示等量加密，就是说长度跟你的str相同
padding: crytojs.pad.pkcs7 // 加密、解密的标准
})
return encrypted.toString()
},
decrypto(str) { // 解密
let key = crytojs.enc.utf8.parse('11111')
// 解密不需要偏移量
// 加密 --- 参数：偏移量，秘钥，配置加密的参数
let decrypted = cryptojs.AES.decrypt(str,key,{
mode: cryptojs.mode.ECB, // 加密模式
// ECB 表示等量加密，就是说长度跟你的str相同
padding: crytojs.pad.pkcs7 // 加密、解密的标准
})
return decrypted.toString()
}
}
注意：
padding: crytojs.pad.pkcs7，而后端是padding: crytojs.pad.pkcs5jsencrypt 算法是一种非对称加密算法，它得生成一对秘钥，即公钥和私钥。前后端一样的，加密的时候使用公钥，解密的时候使用私钥。
长度可以能是1024也可能是2048。已知破解的密码长度为：768位。
rsa加密工具的使用：
安装：npm i jsencrypt
在utils工具文件夹下创建jsencrypt.js文件
jsencrypt.js文件中写入：
这里是生成公钥 - 加密
function enjsencrypt(str) {
var jsObj = new jsencrypt()
var pubkey = ""
jsObj.setPublicKey(pubkey)
return jsObj.encrypt(str)
}
这里是生成私钥 - 解密
function denjsencrypt(str) {
var jsObj = new jsencrypt()
var prikey = ""
jsObj.setPublicKey(prikey)
return jsObj.dencrypt(str)
}
keep-alive 组件缓存，刷新的时候保持状态。
keep-alive 缓存组件，避免组件内的数据重复渲染，直接可以在页面中调用。
注意看描述：我有一个导航栏，一级导航栏新闻、房产两个。二级导航栏，新闻下有体育、财经。我给整个一级导航栏新闻做了组件缓存。如：
问题：我先点击新闻，然后点击体育，我再点击房产。当我点击新闻的时候，我希望它能回到上一次的状态体育。但是它不会。直接停留到新闻页面了。
需求：点击新闻–》点击体育–》点击社会–》回到新闻下的体育页面
解决：
当点击新闻的时候，有两个方法会触发：activated 和 deactivated
在新闻组件中写:
let url;
beforeRouteLeave() {
url = this.$route.path
}
activated() {
this.$router.push(url)
}
vuex存放数据的状态
需要安装：npm i vuex
state 公共数据 组件中this.$store.state.变量名
mutations 同步方法 更新state中的数据
actions 异步方法，组件通过this.$store.dispatch(‘方法名’， 参数)
getters 读取state中的数据
commit 状态提交，对mutation进行提交
vuex页面刷新，数据会重置。这里涉及到持久化的问题
解决：
把vuex中的数据放到localStorage中
插件vuex-persistedstate 这个插件需要安装，然后在vuex中添加配置。
plugins: [createPersistedState({
storage: window.sessionStorage
})]
persistedstate 本质是使用了localStorage
返回顶部：到达一定距离才会出现。
监听浏览器的滚动时间，返回当前滚动条与顶部的距离。
<div>里面的内容足够多，让其有滚动条出现div>
<script>
function showTop() {
// 兼容获取滚动条位置
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log('滚动条位置', scrollTop)
}
window.onscroll = showTop
<script>
问题：滚动条滚动时，方法触发太频繁
防抖
第一次触发事件，不要立即执行，给出一个事件间隔，比如200ms
<= 200ms 大于等于200毫秒，没有触发，那就执行函数
<= 200ms 大于等于200毫秒，再次触发滚动，当前的计时取消，重新计时
思路：如果短时间内，大量执行事件，那就执行一次
实现：setTimeout + 闭包
<div>里面的内容足够多，让其有滚动条出现div>
<script>
function showTop() {
// 兼容获取滚动条位置
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log('滚动条位置', scrollTop)
}
function debounce(fnName, delay) { // 实现间隔调用showTop
let timer = null
return function() {
// 1000毫秒以内，这个timer存在了，那么就清除timer
if(timer) {
clearTimeout(timer)
}
// 1000毫秒以内，这个timer不存在。setTimeout 返回的是一个ID号，从1开始
timer = setTimeout(fnName, delay) // setTimeout(showTop, 1000)
}
}
window.onscroll = debounce(showTop, 1000)
script>
节流
个人感觉这里用节流会更好(沛华的代码)
原理：在一定时间内只执行一次，降低触发频率
实现：闭包
<div>里面的内容足够多，让其有滚动条出现</div>
<script>
function showTop() {
// 兼容获取滚动条位置
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log('滚动条位置', scrollTop)
}
function throttle(fnName, delay) { // 实现间隔调用showTop
let lastTime = 0
return function() {
// 获取当前时间
let nowTime = Date.now()
// 如果当前时间 - 上一次的时间 < 传进来的时间
// 如：100 - 0 < 1000 吗？如果小于1000，那就直接return了
if(nowTime - lastTime < time) {
return
}
// 大于传进来的时间就会执行下面的代码
fnName.call(this)
lastTime = nowTime
}
}
window.onscroll = throttle(showTop, 1000)
<script>
定义：
从入口文件开始出发，根据入口文件的依赖关系找到所有的模块
调用各种loader进行处理，如果遇到处理不了的调用babel进行语法转换。(babel-loader core preset)
如果一些功能性的，如压缩等这个时候就要调用plugins中相应的插件来进行处理
编辑阶段 —》根据出口的路径，打包多个chunk，如果把css和html等都摘出去了，那么就会打包多个chunk，最后统一生成一个bundle
loader plugin babel 的区别
babel是一个独立的工具，可以不在webpack中使用。工程化：
狭义上的理解： 将开发阶段的代码发布到生产环境，包含：构建，分支管理，自动化测试，部署
广义上理解： 前端工程化应该包含从编码开始到发布，运行和维护阶段
什么是 webpack(熊键)
五大“护法”(熊键)
理解 Loader
loader常处理的文件类型(天禹)
常用的 loader 有(熊键)：