一起写几个JS函数（call、防抖节流）
call函数先从改变this指向上简单实现一个方法添加到Function的原型链上：
12345Function.prototype.myCall = function (content) { content.fn = this const result = eval(`content.fn()`) return result}
这就实现了call函数核心部分，因为使用了字符串的形式，所以函数的参数部分还需要进行特殊处理：
1234567891011Function.prototype.myCall = function (content) { content.fn = this /** 处理参数 */ const args = [] for (let i = 1; i < arguments.length; i++) { args.push(`arguments[${i}]`) // 直接push会导致强转字符串时出现:[] } /** */ ...
JS面向对象编程及原型继承全面解析
面向对象编程的特点
封装：使用对象的人无需考虑内部实现，只考虑功能的使用。
继承：为了代码的可复用。
多态：不同对象 作用于同一操作产生不同结果。
JS如何创建对象普通方式123const A = new Object()A.attribute = '' // 定义属性A.fn = function() { } // 定义方法
工厂模式123456function Creat(attr) { // .... 同上面普通方式 return A}const aa = Creat('...')const bb = Creat('...')
存在问题：往实例化对象上层找不到父类，只能知道是一个Object
构造函数/实例12345678910function Player(name) { this.name = name this.run = function() { console.log('...'); ...
一次搞懂前端this、闭包、作用域
闭包的应用
闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)
0. 封装私有变量123456789101112131415161718192021function Person0() { this._attackVolume = 100;}Person0.prototype = { /** ... **/};var p0 = new Person0(); console.log(p0._attackVolume); // 100// 工厂方法function Person1() { var _attackVolume = 100; return { attack() { console.log('attack ' + _attackVolume); _attackVolume++ } };}var p1 = new Pe ...
浅谈浏览器Dom事件、Ajax、Bom
0. 事件流以及事件委托机制
假设一段DOM结构如下：
12345<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li></ul>
js中对body注册点击事件(也可以对ul注册点击事件)
1234567document.body.addEventListener('click', e => { console.log('捕获阶段');}, true)document.body.addEventListener('click', e => { console.log('冒泡阶段');}, false)
true表示捕获阶段触发，false表示冒泡阶段触发
如果我们为每个li赋予点击事件，会注册多个方法，但是在ul(外层父层)中只需要注册一次，利用捕获冒泡的原理，相当于每个li都能触发事件，这就是事件委 ...
那些奇怪怪的JavaScript
JS浮点数丢失精度问题10.3 - 0.2 !== 0.1 // true
JS最大数字长度1Number x = 9007199254740992 // 即2的53次方，js数字长度最大不能超过这个数值
parseInt 太小的数字会产生 bug12parseInt(0.00000000233) // 2parseInt(0.00000000456) // 4
NaN更像是一个范围，在JS中比较特殊，它并不会等于自身12const x = NaN;x !== x // true
isNaN也存在bug，ES6中对其进行了修复12isNaN('abc'); // trueNumber.isNaN('abc') // false
null的设计问题123456789101 + null // 11 ...
Jenkins自动化前后端项目部署记录以及一些坑
Jenkins依赖Java环境，默认服务器已经安装好Jdk与Tomcat
0. 开始安装下载war包，启动Tomcat安装，此时Jenkins已经运行，打开网页后按照提示在服务器对应文件中找到密码，输入并进入新手安装，选择默认的安装，这时别管它，应该会出现一系列失败，先进入tomcat刚安装的对应目录中：找到路径 \WEB-INF\detached-plugins 文件夹下确认是否存在 cloudbees-folder.hpi 这个文件，如果缺少则这里手动下载后放进去。
进入工作目录（不是安装目录，一般是root文件夹下的.jenkins文件夹），找到hudson.model.UpdateCenter.xml这个文件，将URL改为https://updates.jenkins-zh.cn/update-center.json
工作目录下updates文件夹default.json文件中，将所有 http://updates.jenkins-ci.org/download/ 替换为 https://updates.jenkins-zh.cn/
进行完以上所有步骤，重启Jenkins， ...
一些总会用到前端小姿势
CSS篇0. 文本自动换行bug假设一个宽度固定的div内有一段文字，那么浏览器默认处理方式会比较傻，纯中文下乍一看没问题，但英文与数字混搭等情况容易出现bug，此时解决方法有两种css方法：
12word-wrap: break-word; // 对过长单词会先另起一行word-break: break-all; // 粗暴地拆掉单词并换行，比较常用
1. css实现iPhone系列黑边适配以往的iPhone X 适配比较简单粗暴，通常是正则判断机型来做出相应处理，如今需要适配的iPhone机型早已不止X系列，好在css有对应的处理方案，非常实用，那就是 viweport-fit 属性：
需要设置页面内容完全覆盖整个窗口：
1<meta name="viewport" content="width=device-width, viewport-fit=cover">
只有设置了 viewport-fit=cover，env()才生效，根据情况来使用：
12padding-bottom: constant(safe-area-in ...
我的宿舍桌面版本迭代历史
这篇文章就稍微记录一下近两年来桌面的一些变化吧
最初经过一系列不重要迭代后的1.0版本，藏在屏幕后的ps4是我每天下班后的最大消遣，核心是利用分线器控制屏幕的切换，当时买的小分线器还有个遥控，不过很少用到。
后面往桌子旁加了两张几十块的小桌子，作用基本只是用来放笔记本电脑，因为没有买椅子，只是淘宝随便买了个休闲沙发椅，不适合办公学习，基本上坐上去就想打游戏 (⊙ˍ⊙)，桌面离得也有点远，双手要抬起来久了会酸，所以操作区域基本是键盘抽屉那里，键盘和手绘板的位置实际会一直切换，加了个键盘托夹在键盘抽屉那稍微解放右手，此时整体规模已经定型🤨
当时的键盘换了一些键帽🤠，这个是国产机械键盘樱桃茶轴，黑轴青轴都敲过，现在只用红轴了，很多事情兜兜转转最后会发现平淡才是真。
后面换了台明基的显示器，当时冲着支持hdr买的，但事实证明两千块以下的显示器感受起来都差不多，hdr效果也是跟更大尺寸的更大流明度有关，玩具车。
于是之前的显示器竖着放到地上，铺上地毯直接盘腿坐地上打打码 ﾍ(ﾟ∀ﾟﾍ)
—- 搬了一波宿舍 —-
搬了宿舍房间空空如也，直接买了张1米6长 ...
React学习笔记
主要APIReact.createElement12345React.createElement( type, // 必填，元素类型，可以是html 标签字符串 / React 组件 [props], // 可选，元素属性，以对象形式展现 [...children] // 可选，嵌套在元素内的子元素)
eg：
12345var rElmLi1 = React.createElement('li', {id:'li1'}, 'one');var rElmLi2 = React.createElement('li', {id:'li2'}, 'two');var rElmLi3 = React.createElement('li', {id:'li3'}, 'three');var reactElementUl = React.createE ...
vue项目前端性能优化总结
三个层面：网络请求，JS优化，CSS优化
减少http请求
图片懒加载
使用字体图标或svg，尽量不使用png，png尽量使用css图片精灵
避免使用闭包，减少DOM回流重绘，避免使用css表达式
不使用cookie，不使用iframe，不使用flash
尽量减少引用大量第三方库 (减少资源大小)
使用webpack插件压缩混淆去注释 (减少资源大小)
开启Gzip压缩 (减少请求资源大小)
vue可以使用路由懒加载 (避免一次性加载资源过多)
0. 路由懒加载路由组件不使用直接引入，而是匿名函数返回形式，如下注释可以定义编译后的js文件名，在未进入该路由时此js文件的内容将不会被请求到：
1234{ path: '/home', component: () => import(/* webpackChunkName: 'base' */ '@/views/Index.vue')}
1. 开启gzip压缩1.1. 需要服务端做配置开启gzip功能，例如我的是nginx.conf配 ...