Creeper

Webpack 日常使用与优化

21

> 请注意，webpack >= 3.0 *记录下日常使用 webpack 的一些注意点/优化点，记忆和自用更多一点，同学们谨慎阅读。* ### 1. `webpack.optimize.CommonsChunkPlugin` 比你想的更强大／配置更复杂 **实际项目：** - 入口文件： `['babel-polyfill', './src/client.js']` - chunks：入口文件及其依赖文件里通过 `import()` (split point) 分离出 chunk 文件。 **webpack 配置：** ```js new webpack.optimize.CommonsChunkPlugin({ name:...

了解 Babel 6 & 7 生态

29

## 了解`Babel 6`生态 现在写一个babel的简介好像已经不太必要了（太晚了😄 ）。但大多数情况下，会配置`babel`来编译代码，不代表我们清楚`babel`的概念，而且`Babel 6`相关的多个`babel-xx`包还是容易让人混淆的。所以这里还是希望帮助理清整个`Babel 6`生态。 参考： - [Clearing up the Babel 6 Ecosystem](https://medium.com/@jcse/clearing-up-the-babel-6-ecosystem-c7678a314bf3) - [6.0.0 Released](https://babeljs.io/blog/2015/10/29/6.0.0) ### `Babel 6`的核心特性（相比5的巨大变化） 我刚开始用`babel`的时候，版本是5，一个月后`Babel 6`发布——变化简直天翻地覆。 相比前一版本，`Babel 6`最大的变化是更**模块化**，各种内置库都被分散到独立的模块；其次，让所有插件可选，这意味着Babel默认不会编译ES2015代码，并且所有的transformer完全独立；同时，为了减少配置的复杂性，引入了preset；最后，提升了性能。 下面列出一些`Babel 6`的核心模块/变化： 1. `babel` package被弃用。...

You-Dont-Know-JS笔记之类型和语法

9

[You Don't Know JS: Types & Grammar](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20&%20grammar/README.md#you-dont-know-js-types--grammar) # JavaScript的类型和语法 ## 第一章：类型（Types） 很多开发者认为动态语言没有类型。但ES5规范定义： > 此规范内的算法在处理每个值时都有一个关联的类型。可能的值类型都定义在这个条款中。类型可以进一步分为 ECMAScript 语言类型和规范类型。 > ECMAScript 语言类型和使用ECMAScript语言的程序员处理的值相符。ECMAScript语言类型有：Undefined, Null, Boolean, String, Number, 和 Object。 ### 内置类型 内置类型有：`null`，`undefined`，`boolean`，`number`，`string`，`object`，`symbol`（ES6新加）。 除了`object`都是基础类型（primitives）。 `typeof`操作符检查给定操作数的类型。类型是`undefined`，`boolean`，`number`，`string`，`object`，`symbol`，`function`七种中的一个。...

从零开始学习 Android （笔记）

2

> 工作需要，开始写原生安卓项目；本文记录一个前端学习安卓相关知识的历程 😄 ## 一、前置Java知识 > 可用于快速补充一些Java的基础知识，作为一个基本的工具手册。 Java 是一门强类型的面向对象的解释型语言，通过JVM可以在多平台运行。 ### 1. 基础类型 8种**内置类型**，六种数字类型（四个整数型，两个浮点型），一种字符类型，还有一种布尔型： - `byte`：8位，有符号整数，-128（-2^7）-- 127（2^7-1）； - `short`：16位，有符号整数，-32768（-2^15）-- 32767（2^15 - 1）； - `int`：32位，有符号整数，-2,147,483,648（-2^31）-- 2,147,483,647（2^31 - 1）； - `long`：64位，有符号整数，-9,223,372,036,854,775,808（-2^63）-- 9,223,372,036,854,775,807（2^63 -1）；...

学习内存，缓存和垃圾回收相关知识

1

## 1. 垃圾回收 > 此段为 **朴灵 《深入浅出 Node.js》** 阅读笔记。 在 V8 中，所有 JavaScript 的对象都是通过 **堆来分配** 的。 当我们在代码中声明变量并赋值时，所使用对象的内存就分配在堆中。如果已申请的堆空闲内存不够分配新的对象，将继续申请堆内存，直到堆大小超过V8的限制。 **那为什么 V8 要限制堆大小？** - 表层原因：V8 最初为浏览器而设计，无大内存场景。 - 深层原因：V8 垃圾回收机制限制。以 1.5GB 的垃圾回收为例，V8 做一次小的垃圾回收需要 50...

GraphQL 快速入门

2

### GraphQL 简介 > GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL...

# Vue源码解析一：observer 要理解Vue，从observer开使是一个不错的选择。因为从本质上来讲，除去生命周期函数，虚拟DOM，组件系统等以外， Vue首先建立在数据监测之上，可以收集依赖，并在数据变化时自动通知到Vue的实例。 observer的相关代码在[`core/observer`](https://github.com/creeperyang/blog/tree/master/codes/vue/src/core/observer)下，数据绑定的逻辑主要集中在`dep/watcher/index/traverse`4个文件中。 ## observer工作原理简述 当有一个表达式，我们可以收集它的依赖，并在数据变化时，让依赖反过来去通知表达式这种变化。用一个例子来示意整个工作流程： 1. 首先假设我们有个expOrFn函数，内部返回一个表达式的值： ```js function expOrFn(vm) { return vm.user } ``` 很显然，expOrFn依赖`vm.user`，当`user`变化时，expOrFn应该自动重新执行。但，怎么知道这种依赖关系呢？ 2. Vue引入getter来帮助检查依赖，通过运行一次函数来确定依赖。 对数据vm来说，假设我们用getter来改写它的所有属性；那么当我们访问`vm.user`的时候，getter函数会执行， 所以，只要我们执行一次`expOrFn`，它的所有依赖就都知道了！bingo！ ```js const vm = { user: 'creeper'...

比较与理解React的Components，Elements和Instances

4

React是目前（2017.04）流行的创建组件化UI的框架，自身有一套完整和强大的生态系统；同时它也是我目前工作中的主力框架，所以学习和理解React是很自然的需求。 本文在**翻译**[React Components, Elements, and Instances](https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html)的基础上，主要专注理解React的一个核心理念：用Elements Tree描述UI。本文也应该是接下来几片React相关文章的开头，所以更合适的标题可能是： ## React学习笔记一：Components，Elements和Instances *请注意，阅读本文最好对React有基本的了解，但React新手也应该可以畅通阅读。* ### 从JSX出发 现在我们写React应用，相当部分都是在写JSX。 JSX本身是对JavaScript语法的一个扩展，看起来像是某种模板语言，但其实不是。但正因为形似HTML，描述UI就更直观了，也极大地方便了开发；你想如果我们没有HTML，必须手写一堆的`document.createElement()`，我想前端们肯定已经崩溃了。 不过如果你一直写JSX，并且从来没脱离过JSX，可能某种程度上会阻碍我们理解React。当我们有一个JSX片段，它实际上是调用React API构建了一个Elements Tree： ```javascript var profile = {[user.firstName, user.lastName].join(' ')} ; ``` 借助[babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/7.0/packages/babel-plugin-transform-react-jsx)，上面的JSX将被转译成： ```javascript var profile...

这些年兼容的坑

4

虽然早放弃IE6/7，然而兼容仍然是前端必须面对的事。 ## 1. data uri兼容Edge 今天（2015/08/21）产品突然报了个bug：Microsoft Edge浏览器内，报表下载无法正常使用。 然而我并不是win10用户:joy: 花了一番力气，成功定位到错误：  真是一头雾水，``在`chrome`,`firefox`甚至`ie9-11`都能工作，怎么你号称更标准的`Edge`就这样子？ 查阅文档，终于弄明白了这迷惑的警告信息： 1. 当你点击``，我大`Edge`准备**跳转到**`data:text/csv;charset=utf-8,xxxxxxx'`； 2. 我认为`data:text/`是协议，然后这:shit:内容`csv;charset=utf-8,xxxxxxx`完全不认识啊！ 3. 你是不是给个`doctype`提示下？ 而`Edge`为什么没法智能识别data uri？ 1. ``的`download`属性并没有被[`Edge`支持](https://dev.modern.ie/platform/status/adownloadattribute/)； 2. [微软以安全原因禁止用data uri来导航](https://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx)。 **怎么解决？** 万幸的是`Edge`支持`msSaveBlob`，所以可以用它来代替data uri。 详细的可查阅http://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side

编码简介：utf8,utf16以及其它

3

## UTF-8 **UTF-8（8-bit Unicode Transformation Format）** 是一种针对Unicode的可变长度字元编码，也是一种前缀码。它可以用来表示Unicode标准中的任何字元，且其编码中的第一个字节仍与ASCII兼容，这使得原来处理ASCII字元的软件无须或只须做少部分修改，即可继续使用。 UTF-8使用一至六个字节为每个字符编码（尽管如此，2003年11月UTF-8被RFC 3629重新规范，只能使用原来Unicode定义的区域，U+0000到U+10FFFF，也就是说**最多四个字节**）。 ### 编码规则 Unicode字元的比特被分区为数个部分，并分配到UTF-8的字节串中较低的比特的位置。在U+0080的以下字元都使用内含其字元的单字节编码。这些编码正好对应7比特的ASCII字符。在其他情况，有可能需要多达4个字元组来表示一个字元。这些多字节的最高有效比特会设置成1，以防止与7比特的ASCII字符混淆，并保持标准的字节主导字符串运作顺利。 | 代码范围（十六进制） | 标量值（scalar value，二进制） | UTF-8（二进制／十六进制） | 注释 | | --- | --- | --- | ---...