将前端项目中一些常用的代码封装成了一个单独的npm包放在私服上，其他项目使用时通过install安装后，webpack构建时提示找不到该npm包，

背景：因技术优化需要，打算将现有项目库的部分代码摘出来单独构建，所以在package.json加了新的打包命令,当然也要单独进行webpack配置。处理babel时发现有两种babel配置，既有babel.config.js，也有.babelrc。因为都在根目录下面，所以新的构建任务默认也会使用这两个babel配置。考虑到后续的单独维护，觉得用单独的bab...

突然想到es6+就有可以替代此功能的方法，padStart。因为担心这个方法的兼容性，就查了下，padStart和padEnd是es2017新增语法，需要polyfill。全局搜索了代码库，果然在core-js中搜索到了奇怪的是没有搜索到padEnd。又探索了一下，看到babel.config.js配置了useBuiltIns: "usage"，原来是按需引入了。确实项目代码里没有...

背景：项目中有一些公用的函数和业务逻辑，可能在好几个代码库(未使用现代构建工具管理的代码库)都被用到，所以就用webpack把这些代码打包成了单独的js文件，方便复用代码。因为还有其他开发人员，项目也在一直迭代，如果对打包的js文件一点也没有说明太不友好了。于是想到在打包的js文件顶部增加注释，说明打包时的一些...

背景：现有一未被webpack等现代工具管理的一个项目，很多页面引入了一个公共文件common.js。该common.js包括两部分内容，上一部分代码段A定义了不同环境(测试，UAT，生产等)的全局变量，下一部分代码段B是公共的发请求的代码，这个情况导致了如果需要修改B部分的代码，就要一下修改好几份（几个环境就要修改几份），虽然...

背景：兼容性测试流程中，遇到华为p9手机上的页面按钮点击无反应的问题。开发者工具查看后发现报错如下：根据报错信息检查了一下页面引用的vendors包，发现有...语法，来自于第三方依赖axios。原因：axios包有es6语法，而我的项目的webpack.config.js配置的babel-loader排除了所有的node_modules的编译。如下：

我们的项目是@vue/cli4生成的，基于webpack和vue2开发，未使用ts。用到了很多jquery、lodash、echarts等第三方依赖。

2、那么缓存的目标应该是：资源可以被缓存 + 保证不使用过期的资源 + 服务器资源部分更新的时候不能导致新旧文件内容不一致。所以可以结合实际情况，设置适当的缓存策略。

demo和细节如下：1、demo.html代码如下：可以看到babel.min.js往window上绑了Babel实例，打印如下：2、控制台会打印警告：原因如下：3、再多了解一点：4、babel6.26.0的工作原理如下：

（1）将浏览器的渲染过程交给GPU（graphics processing unit）处理，而不是使用自带的比较慢软件的渲染器，可以让animation和transition更加顺畅。（GPU和CPU的渲染机制不一样）（2）原理：创建一个新的复合图层（通过css的3D或者CSS transform；<video>和<canvas>标签；CSS filters；元素覆盖，比如z-index...

（1） v-model（input的修饰符.lazy, .number, .trim），.sync(父组件:title.sync="myTitle",子组件要this.$emit('update:title', this.title + ':: after update'))语法糖，在表单控件或者组件上创建“双向绑定”。

一、vue2.0的双向绑定是怎么实现的 {代码...} 二、数据不更新的问题 {代码...} 三、computed和watch和methods {代码...} 四、vue-router的模式区别 {代码...} 五、vuex解决了什么问题 {代码...} 六、nextTick是怎么是实现的 {代码...} 七、keep-alive内置组件和LRU算法（队列） {代码...}

原理：通过“不停轮询文件的修改时间“，缓存一批更新 {代码...} 以上只是达到了热重载，要想热更新，需要配合webapck-dev-server和HotModuleReplacementPlugin实现。

{代码...} 时间复杂度假设：每行代码执行的时间都一样，为unit_time分析原因：测试结果依赖测试环境和数据规模，所以不能事后分析，需要事前粗略估计。大O复杂度表示法：不具体表示代码真正的执行时间，只代表代码执行时间随数据规模增长的变化趋势，也叫渐进时间复杂度，简称时间复杂度。复杂度排序：O(1) < O(logn)...

数据结构和算法关系： {代码...} 重点 {代码...} 10个数据结构： {代码...} 10个算法： {代码...}

Vue.js允许使用Vue Webpack模板进行非常简单且准备就绪的测试设置，该模板已经包含用于单元测试（使用Karma和Mocha）和E2E测试（使用Nightwatch）的样板。

模块化表格对比 模块规范 导出命令 导入命令 静态还是动态 值是否被缓存 是否采用严格模式 加载是否是同步的 适应端 顶层this指向哪里 es6 module export import 静态 值的引用，不会缓存，运行时再根据引用去取值 是 浏览器和服务端 undefined commonjs module.exports require 动态，运行时加载 会缓存 同步 服务端 指...

继承对象 主要实现原理：通过原型链继承~~~~ 所以先来了解下原型链 {代码...} Parent是Function的实例。 {代码...} 所有函数的默认原型都是Object的实例。 {代码...} 继承的原型链图 继承模式总结比较 继承模式 优点 缺点 可以用instance或者isPrototypeOf判断类型吗 原型链基础 Child.prototype = new Parent();重写了...

此方法利用padding把每个子元素的高度撑的超出父元素，再利用margin的负值把父元素下面的块向上移和padding相同的距离，将加上的padding盖掉，不理解的可以尝试把下面的注释去掉，并自己调节margin的值看看效果。当然，此方法要记得把父元素设置为超出部分不可见，要不然，试试出滚动条的效果，就很尴尬了~

相信大家在开发过程中都遇到这样的问题：为了新建项目，要不停地拷贝文件，配置什么的，或者干脆从零开始，这样是非常浪费时间的。这个时候，一个善解人意的scaffold就很被大家需要了，它可以仅用简单的命令就帮助我们完成项目的创建，编译打包，发布等工作，让我们可以专注于我们的核心业务。总体来说，一个贴心的scaff...

日常的前端开发工作中，相信大家一定接触过前端工程化体系，而自动化构建工具，比如webpack，就是前端工程化体系中很重要的一部分。下面就结合自己在工作中的实践，总结一下所看所想：

除了传统的面向对象继承方式，还流行一种通过可重用组件创建类的方式，就是联合另一个简单类的代码。 {代码...} TODO： 这个方式让我想起了一个问题，接口和类的区别？（后端语言的和js在这里各有什么不同）

七种创建模式表格对比：循序渐进解决问题 当然不能忘记es6的class 创建模式 解决的问题 未解决的问题 是否能使用instanceof检测类型 工厂模式 解决了重复调用函数的问题 不能具体识别对象的类型（都是从Object来的） 可以 构造函数模式 解决了识别对象的问题 每个方法都要在实例上重新创建一遍，即每个Person实例都包含...

1、容器和虚拟机的区别：容器更轻便虚拟机：虚拟一套硬件，在其上运行一套操作系统，再运行应用容器:没有虚拟硬件，容器没有自己的内核，应用直接运行于宿主的内核

平时自己有一些本地的项目想把它们放到github上去，就需要关联一下。 步骤一： 在本地想放到github上的项目的根文件夹执行git init。 步骤二： 在github上新建一个仓库Repository，得到仓库地址。比如[链接] 步骤三： 本地项目根文件夹执行： {代码...} 步骤四： 关联之后，就可以进行拉取远程代码和提交本地代码到远程...

开发的时候手一抖，把新建的分支名字单词给写错了并且已推送到了远程，有洁癖的我绝对不能忍，那就赶紧改掉吧。照着网上的教程操作了一遍，果然没错，现总结给大家。比如，把远程的test-branch改成new-test-branch。

最近工作中有机会复习一下css的基本知识，那么先从css的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题：怎么把IE盒模型变成标准盒模型？

bug解决：情急之下，在所有需要点击的img标签外边都包了一层div，把点击事件移到div上，ok了，但是并不知道做了什么导致了这样的问题。

虽然自己知道数组和对象是引用类型，在赋值的时候要小心，但是今天还是翻了个错，所以再次写了个demo帮助自己： 1、众所周知，数组就是引用类型的 2、为了防止arr1被改变，所以我们要拷贝一份 3、我天真地以为数组再拷贝一份就不会出现1中的情况了，那么，如果数组里面的元素是对象呢？（对象也是引用类型） 4、所以要把...

最近读到了一篇介绍js中this的四种使用场景的文章，感觉总结的很好，所以我认真读了读，并且动手实践了其中的demo，与大家共享。原文链接：[链接]遇到this，一直要记得这句：函数执行时，this总是指向调用该函数的对象（即：判断this所在的函数属于谁）。