@babel/preset-env 主要的功能是依据项目经过 babel 编译构建后产生的代码所对应运行的目标平台。@babel/preset-env 内部依赖了很多插件： @babel/plugin-transform-*。这些插件的工作主要就是 babel 在处理代码的过程当中对于新的 ES 语法的转换，将高版本的语法转化为低版本的写法。例如 @babel/plugin-transform-arro...

文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手进阶（二）Webpack Loader 高手进阶（三） Webpack Loader 详解 前2篇文章主要通过源码分析了 loader 的配置，匹配和加载，执行等内容，这篇文章会通过具体的实例来学习下如何去实现一个 loade...

上篇文章主要讲了 loader 的配置，匹配相关的机制。这篇主要会讲当一个 module 被创建之后，使用 loader 去处理这个 module 内容的流程机制。首先我们来总体的看下整个的流程：

文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手进阶（二）Webpack Loader 高手进阶（三） Webpack loader 详解 loader 的配置 Webpack 对于一个 module 所使用的 loader 对开发者提供了2种使用方式： webpack config 配置形式，形如： {代码...

Vue源码是选用了rollup作为bundler，看Vue的源码时发现：npm script对应了不同的构建选项。这也对应了最后打包构建后产出的不同的包。

首先让我们从最简单的一个实例Vue入手: {代码...} 通过查阅文档，我们可以知道这个options可以接受: 选项/数据 data props propsData(方便测试使用) computed methods watch 选项 / DOM 选项 / 生命周期钩子 选项 / 资源 选项 / 杂项 具体未展开的内容请自行查阅相关文档，接下来让我们来看看传入的选项/数据是如何管理...

Decorate模式 Decorate模式的几个常见的应用场景: throttle(函数节流) debounce(函数防抖) AOP 装饰者模式基本的套路就是在不改变原有的函数提供的功能的情况下，再次封装提供额外的功能 函数防抖即在一定的时间间隔s秒内重复触发某个动作的话，这个动作都会被延迟执行，只有等到这s秒没有再触发这个动作的时候再去执行....

显然，在需要建立依赖关系不多的几个对象中，使用Observer模式可以很好的将不同对象之间进行解耦：定义一个被观察者的主体，然后添加观察者对被观察者的依赖关系。但是需要建立依赖关系的对象一旦多起来，那么大家也可以想象下，自己手动去维护这些依赖关系是多么的蛋疼。

前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开发工作。同时在日常的工作当中，不同的项目使用的技术栈也会不一样。当需要对部分项目进行国际化改造时，由于技术栈的差异，这时你需要去寻找和当前项目使用的技术栈相匹配的国...

最近的工作当中有个任务是做国际化。这篇文章也是做个简单的总结。 部分网站的当前解决的方案 不同语言对应不同的页面。在本地开发的时候就分别打包输出了不同语言版本的静态及模板文件，通过页面及资源的url进行区分,需要维护多份代码。 在线翻译 统一模板文件，前端根据相应的语言映射表去做文案的替换。 面对的问题 ...

底下评论说是标题党，或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么？我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码，教大家用我所提到的技术栈搭建一个blog，我的出发点就是这么简单。这个项目才开始2天，就是每天晚上抽点时间写写，速度不会很快，这周末前将前端...

和其他语言相比,javascript中的对于undefined的理解还是有点让人困惑的。特别是试着理解ReferenceErrors错误("x is not defined")以及在编码过程中如何去避免这些错误总让人感到比较困惑。

这篇文章主要是记录下HTML5中history提供的pushState, replaceStateAPI。最后通过这些API自己实现小型的路由。

macaca提供了命令单独启动webdriver server.然后我们在REPL作为client，向server端发送模拟操作命令。 首先启动server: {代码...} 启动server后，接下来首先给server发送命令，让server唤起模拟器： {代码...} ↑图是client和server端进行http通讯的log. 使用REPL去编写测试用例的比较方便的地方就是，整个测试过程不会因...

macaca是阿里开源的基于Node.js开发的自动化测试工具，支持native,hybird,moblie web,关于macaca具体的内容参见官网macaca.

部分基本概念及内容： 单元测试： 以模块为单元，测试你代码的本身，确保你编写的模块还有逻辑正确。只要输入的值不变，输出的值也应该不发生改变 前端自动化测试： 界面回归测试 测试界面是否正常，包括文案，图片等。 功能测试 包括交互逻辑和功能模块是否符合预期。 性能测试 页面性能越来越受到关注，并且性能需要在...

先从一个小题目开始吧： 要实现一个加法函数，这个时候向函数当中传递个数大于0的若干个整形数据，求所有这些数据的和。 Function.prototype.call Function.prototype.apply Function.prototype.bind 其中call方法: {代码...} call和apply的区别就在于传递方式的不同，call在接收指定参数的形式是someMethod.call(obj, a...

Object desctructing {代码...} Array desctructing 数组结构适用于具有Iterator接口的数据： {代码...} 哪里可以用到解构赋值？ {代码...} 还可以在for-of的循环过程中使用 {代码...} 背景：构造数据和解析数据 js通过一些操作来新建一个对象 {代码...} 同时通过其他的一些操作来解析这个数据 {代码...} 我们可以通过对...

let和const 标签（空格分隔）： es6 let命令 这个命令是用来申明变量的，但是和es5不同的是，用它来声明的变量是局部变量，存在于局部作用域(blocked scope): {代码...} 此外，在写es5的时候经常会遇到变量提升的情况，比如： {代码...} 即，如果使用let进行变量申明的话，一定要先申明再使用 const命令 声明一个immutab...

还没用express写过server，先把部分源码撸了一遍，各位大神求轻拍。 express入口文件在lib文件夹下的express.js，其向外界暴露了一些方法。 最主要的(express.js 第36-47行)： {代码...} 我们经常在自己的业务代码中这样写: {代码...} 其实就是调用createApplication方法.这样就实例化了一个app。这个app比较特殊,通过mi...

上周做一个关于移动端图片压缩上传的功能。期间踩了几个坑，在此总结下。 大体的思路是，部分API的兼容性请参照caniuse： 利用FileReader,读取blob对象,或者是file对象，将图片转化为data uri的形式。 使用canvas,在页面上新建一个画布,利用canvas提供的API,将图片画入这个画布当中。 利用canvas.toDataURL()，进行图片...

Form表单是不存在浏览器的兼容性的，同时在js被禁用的情况下也能进行文件的传输，因此可以大胆使用。Form表单提交不同于Ajax，Ajax提交数据还需要利用脚本进行数据的处理，而Form是不需要进行任何数据处理的。

第一个点，要了解下： DOM value $viewValue $modelValue scope上挂载的属性的值 一般有2个流程: $viewValue -->> $modelValue -->> scope 上挂载的属性的值 scope上挂载的属性的值 -->> $modelValue -->> $viewValue ngModel常用的场景就是如果你使用第三方的插件例如时间插件，每...

其中第一题，因为found为true，则接下来要对someUndefinedVariable这个变量求值，但是未定义，因此会报错，第二题found为false，则接下来要对someUndefinedVariable这个变量求值，同样未定义，也会报错。第三题输出2，第四题输出0；

最近看了一篇关于Promise内部实现原理的文章Javascript in wicked detail。作者从简明的例子入手，一步一步的构建健壮的Promise实现。我就拿作者文中的代码实例梳理下文章的核心内容。

<script type="text/ng-template" id="templateId.html"></script>

采用了基于像素的计算方法来记录在发布商上投放的广告展示次数。当某个广告完全展示的时候，一个1x1的像素请求会被发送到我们的ad server上，那么这次的展示就会被记录。即广告的展示计数是通过这个1x1像素图发送请求次数作为展示的数量。如果是ad serving的话，那就是server上广告物料被请求的次数。一些第三方的广告服...

在js部分书写控制器的时候，更像是在写构造函数，然后在view层实例化一个ViewModule。那么在view里面可以直接调用挂载在这个vm上的属性和方法。这样的写法的好处就是避免在嵌套的controller里面使用$parent去获取父controller里面的方法或值。因为在angular里面scope是基于原型进行继承的。

然后在这个小demo里面涉及到了vue的个别指令: v-for v-model v-bind等。还有父组件和子组建的数据共享，过滤器等功能。

当页面一开始加载完毕之后，通过在parent的input里面输入内容的时候，在child的input里面也会发生响应。这个时候，subController里的info的值，是继承parent里面的mainController的值。