Biu-blog
Biu-blog copied to clipboard
CommanderXL
个人博客
## hash 生成规则 hash 的生成过程是在 seal 阶段，当 chunk 和 module 建立起联系，module 被分配完 id 后开始进行。对应于 compilation 实例上的 createHash 方法： 最终生成的 hash 又分为好几种，例如代表本次 compilation 编译的 hash，每个 chunk 的 hash，每个 module 的 hash。所生成的这些...
上周做一个关于移动端图片压缩上传的功能。期间踩了几个坑，在此总结下。 大体的思路是，部分API的兼容性请参照[caniuse](www.caniuse.com)： 1. 利用[FileReader](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader),读取`blob对象`,或者是`file对象`，将图片转化为`data uri`的形式。 2. 使用`canvas`,在页面上新建一个画布,利用`canvas`提供的API,将图片画入这个画布当中。 3. 利用`canvas.toDataURL()`，进行图片的压缩，得到图片的`data uri`的值 4. 上传文件。 步骤1当中，在进行图片压缩前，还是对图片大小做了判断的，如果图片大小大于200KB时，是直接进行图片上传，不进行图片的压缩，如果图片的大小是大于200KB，则是先进行图片的压缩再上传: ```javascript ``` ```javascript var fileChooser = document.getElementById("choose"), maxSize = 200 * 1024; //200KB fileChoose.change = function() {...
## DI18n 前端通用国际化解决方案 ## 背景 前端技术日新月异，技术栈繁多。以前端框架来说有`React`, `Vue`, `Angular`等等，再配以`webpack`, `gulp`, `Browserify`, `fis`等等构建工具去满足日常的开发工作。同时在日常的工作当中，不同的项目使用的技术栈也会不一样。当需要对部分项目进行国际化改造时，由于技术栈的差异，这时你需要去寻找和当前项目使用的技术栈相匹配的国际化的插件工具。比如: * `vue` + `vue-i18n` * `angular` + `angular-translate` * `react` + `react-intl` * `jquery` + `jquery.i18n.property` 等等，同时可能有些页面没有使用框架，或者完全是没有进行工程化的静态前端页面。 为了减少由于不同技术栈所带来的学习相关国际化插件的成本及开发过程中可能遇到的国际化坑，在尝试着分析前端国际化所面临的主要问题及相关的解决方案后，我觉得是可以使用更加通用的技术方案去完成国际化的工作。 ##...
在之前做一些前端国际化的项目的时候，因为业务不是很复杂，相关的需求一般都停留在文案的翻译上，即国际化多语言，基本上使用相关的 I18n 插件即可满足开发的需求。但是随着业务的迭代和需求复杂度的增加，这些 I18n 插件不一定能满足相关的需求开发，接下来就和大家具体聊下在做国际化项目的过程中所遇到的问题以及所做的思考。 因为团队的技术栈主要是基于 Vue，因此相关的解决方案也是基于 Vue 以及相关的国际化插件(vue-i18n)进行展开。 ## 一期 ### 背景 我们借助 vue-i18n 来完成相关国际化的工作。当项目比较简单，没有大量语言包文件的时候，将语言包直接打包进业务代码中是没有太大问题的。不过一旦语言包文件多起来，这个时候是可以考虑将语言包单独打包，减少业务代码体积，通过异步加载的方式去使用。此外，考虑到国际化语言包相对来说是非高频修改的内容，因此可以考虑将语言包进行缓存，每次页面渲染时优先从缓存中获取语言包来加快页面打开速度。 ### 解决方案 关于分包相关的工作可以借助 webpack 来自动完成分包及异步加载的工作。从 1.x 的版本开始，webpack 便提供了 `require.ensure()` 等相关 API 去完成语言包的分包的工作，不过那个时候 `require.ensure()` 必须要接受一个指定的路径，从...
本文为了解决以下问题： * `__proto__`(实际原型)和`prototype`(原型属性)不一样！！！ * `constructor`属性(原型对象中包含这个属性，实例当中也同样会继承这个属性) * `prototype`属性(**`constructor.prototype`原型对象**) * `__proto__`属性(**实例指向原型对象的指针**) 首先弄清楚几个概念： ##什么是对象 若干属性的集合 ##什么是原型？ 原型是一个**对象**，其他对象可以通过它实现继承。 ##哪些对象有原型？ 所有的对象在默认情况下都有一个原型，因为原型本身也是对象，所以每个原型自身又有一个原型（只有一种例外，默认的对象原型在原型链的顶端） ##任何一个对象都可以成为原型 接下来就是最核心的内容： ## constructor 属性 > `constructor`属性始终指向创建当前对象的构造函数。 ```javascript var arr=[1,2,3]; console.log(arr.constructor); //输出 function Array(){}...
本文旨在解释闭包里的**微观世界**。 内容包含:`值类型`、`作用域`、`闭包` > **JS当中所有的function都是闭包，一般说来，嵌套的function的闭包性更强。这也是我们平时接触和研究比较多的地方。** 在进入本文的核心部分以前，首先来理解几个概念： * 值类型 声明一个值类型变量，编译器会在栈上分配一个空间，这个空间对应着该值的类型变量，空间存储的就是这个变量的值。存储在栈(stack)中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。 * 引用类型 引用类型的实例分配在堆(heap)上，新建一个引用类型的实例，得到的变量值对应的是该实例的内存分配地址。存储在堆(heap)中的对象，也就是说，存储在变量中的值是一个指针(point)，其指向存储对象的位置。 ```javascript //值类型 var a="xl"; var b=a; a="XL"; console.log(b); //输出 "xl" //引用类型 var a={name:"xl"}; var b=a; a.name="XL"; console.log(b.name);//输出 "XL" ```...
本文主要解释在JS里面this关键字的指向问题(**在浏览器环境下**)。 首先，必须搞清楚在JS里面，函数的几种调用方式: * 普通函数调用 * 作为方法来调用 * 作为构造函数来调用 * 使用apply/call方法来调用 * Function.prototype.bind方法 * es6箭头函数 但是不管函数是按哪种方法来调用的，**请记住一点：谁调用这个函数或方法,this关键字就指向谁**。 接下来就分情况来讨论下这些不同的情况： ##普通函数调用 ```javascript function person(){ this.name="xl"; console.log(this); console.log(this.name); } person(); //输出 window xl ``` 在这段代码中`person`函数作为普通函数调用，实际上`person`是作为全局对象`window`的一个方法来进行调用的,即`window.person()`;...
由于项目要兼容到IE9，因此将之前flex布局全部给换掉。今天leader让我看了kitecss这个css框架(里面的一些布局方式能比较好的兼容IE8+，里面有一些比较好的栅格布局，垂直居中等方案)。然后具体的学习了里面的一些css技巧和方法，总结如下： [github地址](https://github.com/hiloki/kitecss) ##display:table 源码里面很多将父元素`display`属性设为`display: table`。这个时候再将子元素`display`属性设置为`inline-block`属性后，运用`text-align`属性即可进行水平居中，水平靠左，水平靠右。 ##负margin 负margin的使用技巧和应用场景其实还是挺广泛的，比如使用`float`和`负margin`现实圣杯布局，双飞燕布局等等。 具体的使用技巧和参照文章： [由浅入深漫谈margin属性](http://www.planabc.net/2007/03/18/css_attribute_margin/) [不要告诉我你懂margin](http://www.hicss.net/do-not-tell-me-you-understand-margin/) [我知道你不知道负margin](http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/) 然后在kitecss里面的时候主要是运用在了栅格布局上面。 ```javascript html结构： .is-4of12 .is-4of12 .is-4of12 css： .kite { font-size: 0 !important; } .kite--grid.has-gutter { display: block; width: auto;...
还没用`express`写过`server`，先把部分源码撸了一遍，各位大神求轻拍。 `express`入口文件在`lib`文件夹下的`express.js`，其向外界暴露了一些方法。 最主要的(`express.js` 第36-47行)： ``` function createApplication() { var app = function(req, res, next) { app.handle(req, res, next); //各中间件的处理入口,handle方法通过mixin拓展于proto }; mixin(app, EventEmitter.prototype, false); mixin(app, proto, false); app.request = { __proto__:...
## Node.js Readable Stream的实现简析 `Readable Stream`是对数据源的一种抽象。它提供了从数据源获取数据并缓存，以及将数据提供给数据消费者的能力。 接下来分别通过`Readable Stream`的2种模式来学习下可读流是如何获取数据以及将数据提供给消费者的。 ### Flowing模式  在`flowing`模式下，可读流自动从系统的底层读取数据，并通过`EventEmitter`接口的事件提供给消费者。如果不是开发者需要自己去实现可读流，大家可使用最为简单的`readable.pipe()`方法去消费数据。 接下来我们就通过一个简单的实例去具体分析下`flowing`模式下，可读流是如何工作的。 ```javascript const { Readable } = require('stream') let c = 97 - 1 // 实例化一个可读流 const rs...