设计模式之MVC，MVVM，MVP
2020-06-02
阅读 1 分钟
1.4kM: modelV: viewC: controlerP: presenterVM: view-modelmvp 是mvc的演变，在mvp里，m和v不直接再有关联，他们的交互完全通过p层来管理mvvm vm里有数据和视图的双向数据绑定。
javascript 原型链，先有函数还是先有对象
2020-05-11
阅读 1 分钟
1.7k首先先看两种创建对象的方法，原型链是怎么走的我们可以看到1、f1 实例后的对象，__proto__指向f1的prototype，向上继续能找到Function2、Object 实例后的对象，__proto__ 指向Object.prototype, 向继续找发现，Object的原型对象是Function.prototype,也就是说，Object.__proto__.constructor === Function
前端算法之遍历二叉树
2020-05-09
阅读 2 分钟
1.6k背景：二叉树是一种数据结构，那么如果使用js遍历它呢 1、前序遍历，根--左--右 {代码...} 2、中序遍历，左--根--右 {代码...} 3、后序遍历，左--右--根 {代码...} 4、js的二叉数结构 {代码...} 执行 {代码...} 结果是：
前端搭建私服之nexus
2020-05-08
阅读 2 分钟
3.9k背景：团队中经常会有一些公用的轻量库可以抽离出来，这时候如果做成一个npm包，发布上去，每次建立一个新的项目时，npm i packagename就好，然后引用就能用了，很方便，但是有些东西是团队内部人员使用，不能放到公共的npm上托管，放到公司的内部服务器上比较好。
前端通用性能优化之cdn
2020-05-07
阅读 1 分钟
3.1k通过cdn的方式可以快速访问到静态资源在当前的前端框架下，结合webpack使用cdn更方便，分两部进行1、把dist下的图片，js，css上传到cdn2、在webpack里配置output.publicPath: '[链接]'，css的输出在css-loader里配置，同样图片的输出在url-loader里配置。
react性能优化之willunmount 销毁setTimeout，样式不要用行内式
2020-05-01
阅读 1 分钟
2.3kreact组件对于一些异步任务的话，要及时清理，否则频繁渲染的话会造成异步任务持续增多，不会释放解决方案1、在componentWillUnmount时clearTimout() clearIntever()2、在componentDidMount是clearTimout() clearIntever()之后再setTimeout() setIntever()
react性能优化之bind(this)
2020-05-01
阅读 1 分钟
2kbind在react组件中使用不当也会影响性能bind在render里面直接onClick = this.onClick.bind(this)这样写的话，render每次都会执行这段1、优化方案,使用箭头函数
react性能优化之scu，purecomponent, memo
2020-05-01
阅读 3 分钟
3.5k影响react性能的很重要的一个因素还有scu，也就是shouldcomponentupdate生命周期，在这里可以判断这个组件是否应该更新，最好都使用purecomponent，因为purecomponent会默认做一次浅比较。
react性能优化之key
2020-05-01
阅读 1 分钟
2.3kreact key比较，是diff算法中的一种情况首先diff算法能计算出更新的差异，减少更新dom的频次diff分为三种情况1、tree比较只会比较同一层级的dom，跨层级的不会比较，跨层级更新，直接销毁重建2、component比较先比较组件类型，类型相同，进入compondshouldupdate里进一步比较类型不同，销毁，重新创建3、同一级的dom比较...
react性能优化检测工具-官方出品-React Developer Tools
2020-05-01
阅读 1 分钟
3.8k需求：加载一个页面，特别复杂的时候会有很多的组件，我想知道每个组件渲染时间，清楚的定位到底哪个组件浪费时间多，然后优化。背景：react的性能优化一直很头疼，最早做过一个左右联动的列表页面，在本地运行没有任何问题，但是放到RN里，惨不忍睹，虽然过去了很久，但是记忆深刻，在andriod和ios里都有对应的性能检测...
webpack性能优化之开启babel缓存
2020-04-25
阅读 1 分钟
5.6kbabel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率 可以加上cacheDirectory参数 {代码...} 或者使用babel-plugin-transform-runtime {代码...}
webpack性能优化之热更新
2020-04-25
阅读 1 分钟
2.4kwebpack在本地开发提升效率的最有效的方法就是热更新了，热更新模块是在webpack中的devServer配置里进行配置的，相关代码如下
webpack性能优化之组件懒加载
2020-04-25
阅读 5 分钟
1.8k之前讲过，webpack4.0的optimization 下面的splitchunkplugin可以分割异步组件，从而减少过度的首页渲染问题。那么如何写一个异步组件呢？可以从下面几种方法入手：1、借助es6的import().then，手写一个异步高阶组件
webpack性能优化之hard-source-wepack-plugin
2020-04-24
阅读 2 分钟
14.1k在webpack4.0的时代，optimization下的splitchunk配置较多，尤其是cacheControls的权重配置，在4.0到5.0之间有一种过渡的使用缓存的方式，打包很快，借助hard-source-webpack-plugin，代码如下：
webpack性能提升之optimization.splitChunkPlugin
2020-04-24
阅读 2 分钟
2.5k分离代码的好处，1、同步的组件，分离后，有些公共的组件hash值不会改变，打包时候也会绕过直接使用缓存，页面加载时，Etag不变，直接从浏览器缓存里读取。2、异步的组件，分离后，在页面加载时点击页面切换或者组件切换，才会加载对应的组件分离code，减少了首页的体积，造成不必要的资源浪费。线上默认配置如下：
webpack 性能提升之DllPlugin
2020-04-23
阅读 4 分钟
5.2kwebpack打包优化策略一：DllPlugin:运行流程，1、生成dll文件新建一个webpack.dll.js 并运行webpack --config webpack.dll.js
vue和react的工作原理对比
2020-04-17
阅读 2 分钟
3.2k问题，vue很好上手，但是vue是如果做到双向数据绑定，最终又是如何渲染到dom上的呢。vue1、初始化vue的时候，在dom处理方面，vue会把template转化成render方法，拿到render方法后，转化成虚拟dom，在数据方面，会把data里的数据变成响应式的数据，每个节点都是响应式的。
前端设计模式之AOP
2020-04-15
阅读 1 分钟
1.5k设计模式类型：修饰者模式（AOP）问题1：移动端网页小游戏，点击play按钮，点击抽奖按钮，页面进入，等事件都要加上埋点，每次都要在事件的方法体里最后一句加上埋点上传的逻辑。问题2：队友写了个window.onload，一万行代码，看着头大，新需求需要在原来的逻辑执行完之后做业务逻辑。
linux安装jenkins
2019-08-06
阅读 1 分钟
1.8k期望：在服务上运行jenkins，实现自动化部署实现过程：1、找到jenkins下载地址：[链接]2、wget [链接]3、安装java环境，要跟jenkins要求的java版本保持一致4、如果已经有java环境了，下载后的java包直接执行：nohup /usr/local/src/java/jdk1.8.0_201/bin/java -jar jenkins.war --httpPort=80965、nohup是后台保持运行6...
linux安装git
2019-08-06
阅读 1 分钟
1.4k期望：在服务器上安装git实现过程：1、找到git的下载地址 [链接]2、wget [链接]3、使用make命令进行编译4、ln -snf /usr/local/bin/git(git 编译后的命令地址) /bin/git(放到全局bin下使用)5、cd到其他文件夹下面，输入git命令看是否正常识别
h5文字超出，两行显示，超出显示省略号
2019-08-06
阅读 3 分钟
5k预期目标：文字最多显示两行，超出两行的省略号显示实现方案：`<html> {代码...} </html>`最终效果： 细节描述：text-overflow:ellipsis 控制省略号-webkit-line-clamp:2 控制行号 感觉对你有用的话，打赏一下哈：
如何结合npm做一个前端脚手架
2019-07-26
阅读 3 分钟
5.6k背景需求：在日常开发中，随着项目越来越多，能重复利用的代码就越多，急需一套基本的模板来初始化项目，把代码放到自己的gitlab或github上，每次又得找到地址重新clone一下，很麻烦期望的结果：XXX init 。。。一行命令解决步骤：1、申请一个npm账号，[链接]2、写一个npm项目package.json:
RN中webview的一些思考
2019-07-26
阅读 1 分钟
3.5k遇到的坑：webview和h5通信时，会有一些延迟导致不能立即生效具体描述：在使用react-native时，需要加载外部网页，加载后，RN提供一个按钮可以关闭网页，但如果打开的是内部网页就需要隐藏这个按钮，h5代码使用react写的，在componentDidMount时，发送postmessage给客户端（RN），此时发现收不到，查阅react-native官方...
moment.js的简单使用
2019-05-06
阅读 1 分钟
2.3k日期格式化插件，moment.js 官方文档：[链接]; 使用方法： 1、moment(data).format("YYYY-MM-DD");//data为日期的字符串形式 2、moment().format("YYYY-MM-DD");输出当前日期 感觉对你有用的话，打赏一下哈