mengjoy / bugcheck Goto Github PK

git-hook有很多钩子，很多博客都只写出了一部分的钩子，如果需要使用钩子，请到官网去查询
1、git的钩子
首先要明确需要使用钩子做些什么，在git 的add，commit，push，checkout，那个阶段做什么事情，比如说想要在每次提交前，让每个人都能提交出正确的eslint规范，那么我们需要使用pre-commit这个钩子，如果只想在merge之前eslint检查所有的规范问题就好了，那么可以使用pre-merge-commit这个钩子，还有post-commit等钩子，要先明确自己需要在什么阶段想要做什么事情，再去选择钩子进行配置就好了
2、使用husky
husky是一个为客户端添加git钩子的工具，配置在package.json中就可以了

"husky": {
" hooks": {
"pre-commit": "echo 'husky' && npm run eslint",
.....
}
}
3、配置完之后就会在每次操作之后就会进行检查

参考链接：
git hook心得
husky+prettier

1、在开发中，有人把各种类似列表功能和筛选的页面写成一个“组件“,页面根据不同的类型，来显示筛选项和列表，我觉得像是写了所有可能的页面，但是这样一旦某个类型需要改，那就完蛋了。
2、组件化的意义？
组件化我理解的就是需要复用性高，怎么设计一个组件呢？专一性【一个组件只做一件事】，可配置【明确输入输出】
不要让一个组件拥有太多的功能。

 以前一些老项目是没有eslint的，现在要统一规范，所以需要在已有的项目中添加eslint，现在的解决办法是给每个项目添加eslint.js文件

1、需要添加eslint，则要先安装eslint的npm 包
2、eslint有官方推荐的规范，也有其他公司封装好的包，也可以选择自己写rules
我的项目vue版本是2.5.2,没有使用脚手架搭建,没有选择使用airbnb或者其他规范，选择了eslint-plugin-vue插件和官方推荐的一些规范。在自己配置了需要用到的rules

安装的包如下

"eslint": "^3.19.0",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-vue": "5.2.2",
"babel-eslint": "10.0.1",

3、包选用时的思考
eslint-friendly-formatter这个包是在终端输出错误报告的规范，默认是stylish，他会标记处那一行那一列出现了什么问题，不用去打开编辑器一个一个找，更准确定位问题。

eslint-plugin-html这个包是识别html，vue文件的

eslint-plugin-vue这个包是vue规范插件，规范参考链接： eslint-plugin-vue，这个包由多个版本，根据vue项目的版本来选用，规范要求也在链接中

babel-eslint这个包，是因为代码是es6所以，需要使用babel去解析

4、开始配置
安装完成后，在根目录创建一个.eslintrc.js文件
module.exports = {
root: true, // 和解析的时有关系，root：true，就不会再上目录去查询其他的eslint配置了
parserOptions: {
// 使用es6的话需要使用babel-lint解析器
parser: 'babel-eslint',
// 代码是ECMAScript模块
sourceType: 'module'
}
// vue/base,vue/essential,vue/strongly-recommended,vue/recommended(最严谨，完全按照vue来check)
extends: ['eslint:recommended','plugin:vue/recommended'],
// 可以在html中使用eslint,elsint-plugin-vue检查template和script的js代码
plugins: ['html','vue'],
// settings的import/resolver会传递给每个规则项，每个规则项都是用到这个fomatter
'settings': {
'import/resolver': {
'webpack': {
'config': 'build/webpack.base.conf.js'
}
}
}
rules: {
// 配置自己的rules，可以覆盖默认的一些规则
}
}

webpack.base.conf.js
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre', // 优先处理
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范，默认是stylish
}
}

5、忽略文件
因为项目比较大，不可能一次性吧所有的都改完，因此可以写个忽略文件先改一部分的格式
eslint有一个.eslintignore文件，里面可以配置需要忽略的eslint检查的文件路径
举个🌰
build/.js
config/.js

6、.editorConfig文件配置

其他公司的规范： 其他公司的规范
参考链接：
eslint总结
eslint的学习，配置的参数代表什么
.editorConfig文件配置

二分法适合有序的数组

1. 二分法顾名思义，将数组分成两半进行查找，因为数组是有序的，可以判断当前middle值与target的比较。
2. middle > target时，当前数组为升序，那么target应属于前半段到middle的范围内
3. middle<target时，当前数组若为升序，那么target应属于后半段的范围内
4. 二分法使用的各种算法，需要注意边界条件以及边界值，middle+1 or middle -1,midlle是向上取整还是向下取整。

var search = function(nums, target) {
let left = 0, right = nums.length - 1, tmp;
while(left <= right) {
tmp = Math.floor((left + right) / 2)
if(nums[tmp] === target) {
return tmp;
}
// 相当于已经比较完mid，就不再使用这个值
if(nums[tmp] < target) {
left = tmp+ 1
} else {
right = tmp - 1
}
}
return -1
};

参考：https://limeii.github.io/2019/05/js-prototype/
1.hasOwnProperty用来判断一个对象是否包含自定义属性而不是原型链上的属性。他是js唯一一个处理属性但不查找原型链的函数。

2.原型链就是对相同__proto__连接起来的路径。当对象不存在某个属性，会通过原型链向上找，直到最后一层object对象

3.prototype是构造函数的属性，proto__是实例的属性。
对象的__proto === 构造函数的prototype

4.new 出来的对象和Object.create()区别？
create出来的没有constrctuor

问题前提：
1、项目中使用lottie，lottie可以处理ae导出的动画，对动画进行控制播放。
lottie做了横竖屏两个json文件，但是横竖屏的部分资源是重叠的，所以优化的方向是合并资源。
2、webpack中图片大小影响打包格式？什么时候图片用file-loader什么时候用url-loader?
url-loader配置中有个limit属性，当小于limit使用base64，大于时使用url-loader
3、Tree Shaking
描述移除js上下文的未引用代码，但是他依赖es6语法，所以未使用esm 那么无法tree shaking。
sideEffects在package.json时说明那些文件是pure。
babel-loader
4、

1、硬件加速的属性
perspective，backface-visibility，transform等。

1、

储备知识
1、vue-router的路由元信息，meta标签里面可以设置属性
参考：路由元信息
2、vue-router的addRoutes()方法
参考：addRoutes方法
3、vue-router的beforeEach
参考：beforeEach
思路
1、如何根据权限去判断某个人是否有权限访问某个页面？

• 能否访问是不是可以根据路遇的配置，一般配置了的路由就能访问到，没配置的路由就访问不到，如果访问了，会被拦截到404页面。
  2、如何动态的插入路由呢？
• 导航守卫，可以在此植入路由导航。
  3、

1、 为什么会出现跨域的问题？
出现跨域，主要就是同源策略的限制。（省略很多解释····）

2、 解决跨域遇到的问题？
公司使用的cors解决跨域，前端一般不用处理什么的，但其中遇到一些问题，跨域的时候是不能携带cookie的，但是将withCredentials设置为true的时候就可以携带cookie，但是如果服务端返回的access-control-allow-origin不能为 “” 如果返回的是“”，前端的code不会报错，但是在控制台会报错“cookie”的问题。说携带cookie的是服务端不能返回“*”

当前项目是没有webpack的，某个文件修改了东西，在部署上去，用户本地缓存不会在请求新的资源，所以需要添加一个会变的字符串添加在url上防止缓存。
想到的办法是给url后面添加时间戳，new Date().getTime()
webpack打包的时候会根据contenthash或者chunkhash给文件添加东西
但是自己没办法根据content是否变化去添加，所以使用时间戳防止缓存
加时间戳的缺点：
1、每次打开页面时都会请求这个文件，不管是否有变动，每次都会拉去新的资源

wepack中的url-loader中limit的限制内

1、icon引入的时候出现了问题，在线上请求icon链接的时候，发现路径不对，请求的链接是https://host/static/css/static/css/font/icons.tff， 然后发现可能是打包的问题，就去找了打包的配置，发现在config.js中配置的时候，
dev:{ assetsSubDirectory: 'static', assetsPublicPath: '/', }
build: {index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static', assetsPublicPath: '',}

发现在build的时候，那个assetsPublicPath配置是没有/的,然后它匹配到的路径是/static/css/static/font····

去了看vue-cli中关于PublicPath的配置，（参考链接：https://cli.vuejs.org/zh/config/#baseurl） 当publicPath为 '' 或者为 '/'的时候都是相对路径，然后在build的时候一般root是配置的打包完之后的dist文件路径，如果使用publicPath为了相对路径的话那么找到的引用的资源文件就是相对于/static/css，因为这个是打包出来static的路径，他会在这个文件下找你你的font的路径，所以拼接出来时 ：url/static/css/static/font····

1、需求描述

• 有一个表单，表单中需要插入图片

• 图片上传的过程：先上传到七牛云上，将七牛云返回的key值，提交给服务端的是这个key值

2、七牛云上传

• 七牛云上传所需参数：https://developer.qiniu.com/kodo/manual/1272/form-upload

3、使用的组件

• 使用的是elment中的el-upload的http-request覆盖el-upload的默认提交：https://element.eleme.cn/#/zh-CN/component/upload

4、过程
既然使用http-request干掉了本身的提交功能，那么需要将auto-upload这个属性置为false，before-upload应该是不能用了，所以使用on-change这个事件去监听文件的变化，当on-change变化的时候去请求后段的接口获取token，因为上传到七牛云的时候需三个必须的必须的参数（file，key，token）,key和token都是后端返回的，file是on-change事件的一个默认参数，这三个三处都有了的时候，需要手动提交，才能上传，手动提交使用了submit() ,当submit提交之后才能执行http-request定义的方法。
http-request绑定的事件方法里面主要是处理了上传七牛云的请求，这里需要注意上传非json数据的时候需要将'Content-Type':字段设置成'multipart/form-data'，以及提交七牛云所需要的数据的时候，使用formData格式上传的，这里需要先new FormData() ,使用append('key',value)这个方法将所需要的参数添加，完成之后，发送请求，七牛云会返回一个key，将baseurl+key就是图片的链接。

5、遇到问题

• 上传的时候data数据格式必须是formData
  let formData = new FormData() let config= { 'Content-Type': 'multipart/form-data' } formData.append('file', req.file) formData.append('key', this.data['key']) formData.append('token', this.data['upload_token'])

• 文档中:这个不需要bucket,上传的时候只要key

• 文档写的不是很清晰⚠️
  <input name="token" type="hidden" value="<upload_token>"> <input name="key" type="hidden" value="<resource_key>">
  这里的是token，和key字段，但是文档中的参数介绍里面写的是resource_key 和upload_token，注意参数

• 需要安装七牛云的包
  npm install qiniu-js

• 七牛上传时候七牛的url不同地区是不一样，需要 找自己所在的地区，华北华东什么的。

6、代码粘贴

<template v-for="(prove,index) in form.proves">
    <el-upload 
         ref="uploadProve"
         action="http://upload.qiniup.com/"
         :auto-upload="false"
         list-type="picture-card"
         :show-file-list="false"
         :on-change="(file,fileList) => changeUpload(file, fileList, 'uploadProve',index)"
         :http-request="(req) => uploadImageQiNiu(req,index,'proof_file')"
         class="avatar-uploader">
            
         <img v-if="prove['proof_file']" :src="prove['proof_file']" class="avatar">
         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
</template>

changeUpload(file,refs,index) {
    axios.get(http://获取token的url)).then((res)=>{
    this.data['upload_token'] = res.data.data.token
    this.data['key'] = res.data.data.key
    this.$refs[refs][index].submit()
  }).catch((err) => {
this.$message.error({
    message: err.message
  })
 }).finally(() => {
this.$refs[refs][index].clearFiles()
 })
},

uploadImageQiNiu(req, index, imgName) {
    let formData = new FormData()
   let config= {
     'Content-Type': 'multipart/form-data'
    }
   formData.append('file', req.file)
   formData.append('key', this.data['key'])
   formData.append('token', this.data['upload_token'])

  axios.post('https://upload-z1.qiniup.com/', formData, config)
  .then((res) => {
    let imgUrl = `https://baseurl/${res.data.key}`
    this.form.proves[index][imgName] = imgUrl
  })
},

------------------------··································-bug补充··································································---------
昨晚发现，如果我上传多次的话，在uploadImageQiNiu中会把所有的change过的file全部上传，但是不能限制limit，所以采用了在每次获取到token的之后就将fileList清除掉，这样只会上传 成功获取tokende文件。

来自MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
来自博客：https://limeii.github.io/2019/05/js-execution-context/
相关知识：

1.词法分析
登记变量声明，函数声明，函数声明。

2.词法环境
词法分析登记的地方就是词法环境
词法环境有两个部分，环境记录【声明式环境记录，对象式环境记录】和对外部词法环境的引用
词法环境实在代码定义时决定的，和代码在哪里调用没关系。所以js的词法作用域是静态作用域。

3.作用域链
沿着词法环境到找变量的值就是作用域链。

4. 变量提升&函数提升
   v8引擎执行代码三步骤，先做分词和词法分析，然后解析ast【语法抽象树】，最后生成机器码执行代码。
   词法分析的时候会生成词法环境登记变量。

var c
function functionDec() {
console.log(c)
c = 30;
}
functionDec();

5.执行上下文
每次执行回调函数时会把方法以执行上下文的方式压入执行栈，执行完以后会被弹出执行栈。
可执行代码包含四种，global，function，module，eval。执行上下文有三个部分组成，词法环境【LexicalEnvironment】，this，还有一个和词法环境指向同一个词法环境的环境【VariableEnvironment】。
代码执行步骤：

• 创建一个新的执行上下文
• 创建一个词法环境
• 把le和ve指向新创建的词法环境
• 吧执行上下文压入执行栈并成为正在运行的执行上下文
• 执行代码
• 执行结束弹出执行栈

ve的环境使用登记var function变量声明，le是用来登记let const class的变量声明的。
function updown() {
let a = 1;
let b = 2;
{
let c = 3
function down() {
console.log('down')
}
}
down()// 可以调用
// console.log(c) // 报错
}
updown()

6.this指向
this指向和执行环境有关
严格模式下，在function里的this指向是undefined，若是this没有被传进来。
全局的this指向window
箭头函数的this，在调用时不会绑定this。也不会去词法环境链上寻找this，this取决于它定义的位置

window.a = 10
const foo = () => {
console.log(this.a)
}
foo.call({a: 20}) // 10

let obj = {
a: 20,
foo: foo
}
obj.foo() //10

function bar() {
foo()
}
bar.call({a: 20}) //10

7.闭包
闭包就是执行完上下文被弹出执行栈，但是在这种情况下，还保留对词法环境的引用，通过这个引用访问失联的词法环境，这个引用就是闭包。