- 博客(91)
- 收藏
- 关注
RSS订阅转载 webpack 插件拾趣 (1) —— webpack-dev-server
结束了一季的忙碌，我这封笔已久的博客也终究该从春困的咒印中复苏，想来写些实用易读的作为开篇，自然是最好不过。新开个 webpack 插件/工具介绍的文章系列，约莫每周更新一篇篇幅适中的文章聊以共勉，兴许合适。原本期望每篇文章里可以介绍若干个插件，但鉴于部分插件略为复杂，且单篇内容不想写的唇焦舌敝惹人倦烦，所以像本文要介绍的webpack-dev-server 就独立一文了。...
2017-06-17 12:09:00
348
转载 gulp源码解析（三）—— 任务管理
上篇文章我们分别对 gulp 的 .src 和 .dest 两个主要接口做了分析，今天打算把剩下的面纱一起揭开 —— 解析 gulp.task 的源码，了解在 gulp4.0 中是如何管理、处理任务的。在先前的版本，gulp 使用了orchestrator 模块来指挥、排序任务，但到了 4.0 则替换为undertaker 来做统一管理。先前的一些 task 写法会有所改变：...
2017-02-09 00:13:00
298
转载 gulp源码解析（二）—— vinyl-fs
在上一篇文章我们对 Stream 的特性及其接口进行了介绍，gulp 之所以在性能上好于 grunt，主要是因为有了Stream 助力来做数据的传输和处理。那么我们不难猜想出，在 gulp 的任务中，gulp.src 接口将匹配到的文件转化为可读（或 Duplex/Transform）流，通过 .pipe 流经各插件进行处理，最终推送给 gulp.dest 所生成的可写（或 Dup...
2017-01-31 20:49:00
310
转载 gulp源码解析（一）—— Stream详解
作为前端，我们常常会和 Stream 有着频繁的接触。比如使用 gulp 对项目进行构建的时候，我们会使用gulp.src 接口将匹配到的文件转为 stream（流）的形式，再通过 .pipe() 接口对其进行链式加工处理；或者比如我们通过 http 模块创建一个 HTTP 服务：const http = require('http');http.createServe...
2017-01-27 22:12:00
232
转载 腾讯云上免费部署HTTPS
接上篇《腾讯云下安装 nodejs + 实现 Nginx 反向代理》，想从头一步到位的同学建议从上篇文章开始阅读。本文将继续介绍如何通过 Nginx 免费部署HTTPS。留意下，这里的“免费”指的是HTTPS证书的获取，至于域名还是需要额外购买（其实域名真心很便宜了）。笔者在腾讯云上购买了 vajoy.org 的域名，并根据官方指引进行了解析处理，绑定到服务器ip上（留意处理后大...
2016-11-23 16:20:00
249
转载 腾讯云下安装 nodejs + 实现 Nginx 反向代理
本文将介绍如何给腾讯云上的 Ubuntu Server 12.04 LTS 64位主机安装 node 及 nginx，并简单配置反向代理。笔者在整个安装过程中遇到不少麻烦（不赘述），如果你希望少踩坑，可以按本文的步骤进行安装部署。一. 新版 nodejs 安装这里强烈推荐使用nvm（Node版本管理器），其它方式的安装或多或少都有些问题。具体步骤如下：1. 通...
2016-11-22 01:15:00
263
转载 从零开始，DIY一个jQuery（3）
在前两章，为了方便调试，我们写了一个非常简单的jQuery.fn.init 方法： jQuery.fn.init = function (selector, context, root) { if (!selector) { return this; } else { var elem...
2016-08-15 01:44:00
133
转载 从零开始，DIY一个jQuery（2）
在上篇文章我们简单实现了一个 jQuery 的基础结构，不过为了顺应潮流，这次咱把它改为模块化的写法，此举得以有效提升项目的可维护性，因此在后续也将以模块化形式进行持续开发。模块化开发和编译需要用上 ES6 和 rollup，具体原因和使用方法请参照我之前的《冗余代码都走开——前端模块打包利器 Rollup.js 入门》一文。本期代码均挂在我的github上，有需要的童鞋自行下载...
2016-08-02 23:02:00
130
转载 从零开始，DIY一个jQuery（1）
从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅途，在整个系列的实践中，我们会把 jQuery 的主要功能模块都了解和实现一遍。这会是一段很长的历程，但也会很有意思 —— 作为前端领域的经典之作，jQuery 里有着太多奇思妙想，如果能够深入理解它，对于我们稳固js基础、提升前端大法技能来说大有裨益。另外，本系列的相关代码均可以从我的github上获取到。...
2016-07-31 02:47:00
105
转载 来看看机智的前端童鞋怎么防盗
很多开发的童鞋都是只身混江湖、夜宿城中村，如果居住的地方安保欠缺，那么出门在外难免担心屋里的财产安全。事实上世面上有很多高大上的防盗设备，但对于机智的前端童鞋来说，只要有一台附带摄像头的电脑，就可以简单地实现一个防盗监控系统~纯 JS 的“防盗”能力很大程度借助于 H5 canvas 的力量，且非常有意思。如果你对 canvas 还不熟悉，可以先点这里阅读我的系列教程。s...
2016-07-10 12:19:00
129
转载 FastClick 填坑及源码解析
最近产品妹子提出了一个体验issue —— 用 iOS 在手Q阅读书友交流区发表书评时，光标点击总是不好定位到正确的位置：如上图，具体表现是较快点击时，光标总会跳到 textarea 内容的尾部。只有当点击停留时间较久一点（比如超过150ms）才能把光标正常定位到正确的位置。一开始我以为是 iOS 原生的交互问题没太在意，但后来发现访问某些页面又是没有这种奇怪体验的。然后...
2016-05-24 23:26:00
259
转载 冗余代码都走开——前端模块打包利器 Rollup.js 入门
之前翻译过一篇文章，介绍了通过 ES2015 的解构赋值语法引入模块，可以让打包工具（browserify）最终编译出来的代码量最小化。殊不知在 webpack 1.X 版本是无法利用该特性来避免引入冗余模块代码的，导致打出来的 bundle 文件大小难免略有臃肿。今天则向大家介绍一个当红炸子鸡——Rollup.js，通过它可以让你的 bundle 最小化，有效减少文件请求大小—...
2016-05-23 02:17:00
259
转载 几款主流 NoSql 数据库的对比
最近小组准备启动一个 node 开源项目，从前端亲和力、大数据下的IO性能、可扩展性几点入手挑选了 NoSql 数据库，但具体使用哪一款产品还需要做一次选型。我们最终把选项范围缩窄在HBase、Redis、MongoDB、Couchbase、LevelDB 五款较主流的数据库产品中，本文将主要对它们进行分析对比。鉴于缺乏项目中的实战经验沉淀，本文内容和观点主要还是从各平台资料搜...
2016-05-11 21:36:00
4162
转载 ReactNative入门 —— 动画篇（下）
在上篇动画入门文章中我们了解了在 React Native 中简单的动画的实现方式，本篇将作为上篇的延续，介绍如何使用Animated 实现一些比较复杂的动画。动画组合在 Animated 中提供了一些有趣的API方法来轻松地按我们的需求实现组合动画，它们分别是 Animated.parallel、Animated.sequence、Animated.stagger、Ani...
2016-04-24 00:35:00
159
转载 浅谈浏览器http的缓存机制
针对浏览器的http缓存的分析也算是老生常谈了，每隔一段时间就会冒出一篇不错的文章，其原理也是各大公司面试时几乎必考的问题。之所以还写一篇这样的文章，是因为近期都在搞新技术，想“回归”下基础，也希望尽量总结的更详尽些。那么你是否还需要阅读本篇文章呢？可以试着回答下面这个问题：我们在访问百度首页的时候，会发现不管怎么刷新页面，静态资源基本都是返回 200（from cache）...
2016-04-04 15:10:00
246
转载 ReactNative入门 —— 动画篇（上）
在不使用任何RN动画相关API的时候，我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式。我们来个简单的示例：var AwesomeProject = React.createClass({ getInitialState() { return { w: 200, h: 20 } },...
2016-03-26 23:22:00
170
转载 ReactNative入门（安卓）——API（下）
LayoutAnimation - layout动画当布局发生改变时的动画模块，它有两个方法：1. 最常用的方法是 LayoutAnimation.configureNext(conf<Object>)，用于设置布局变化时的动画类型，在调用 setState 之前使用。其中 conf 参数格式为： { ...
2016-03-13 12:35:00
206
转载 小小改动帮你减少bundle.js文件体积（翻译）
我已经从事过好多年的SPA开发工作，我发现很多的程序猿都从来不往bundle.js文件的体积上动脑筋，这让我有点懵逼。“安心洗路，等俺把代码混淆压缩后就一切666了”，若是有人这么说，我会翻白眼。其实当我们压缩 bundle.js 的时候，我们可能会凭空折腾出一个庞大的应用，导致其加载时间抑或在移动端的连接时间变慢。那么问题就来了——我们是否有办法给 bundle 显著...
2016-02-29 08:39:00
279
转载 ReactNative入门（安卓）——API（上）
Alert - 弹窗通过 Alert.alert() 方法调用唤起原生弹窗，点击会触发 onPress 回调（参考下方代码）并清除弹窗。import React, { AppRegistry, Component, StyleSheet, Alert, Text, View} from 'react-nati...
2016-02-28 20:20:00
166
转载 《高性能javascript》一书要点和延伸（下）
第六章 快速响应的用户界面本章开篇介绍了浏览器UI线程的概念，我也突然想到一个小例子，这是写css3动画的朋友都经常会碰到的一个问题：<head> <meta charset="UTF-8"> <title>Title</title> <style> div{width...
2016-01-03 19:41:00
115
转载 巧用 mask-image 实现简单进度加载界面
最近给 nzoo 折腾官网，拿 angular2.0 + webpack 实现SPA，然后觉得最终打包后的出口文件有点大，用户首次访问会有一个时间较长的白屏等候界面，感觉体验不太好。于是希望在用户下载整个bundle 时能够先看到一个“加载中”的UI做过度，鉴于 nzoo 的LOGO也较简洁，便舍弃笨重的雪碧图+step动画的形式，转以 mask-image + transitio...
2016-01-03 01:01:00
325
转载 降低首屏时间，“直出”是个什么概念?
早几年前端还处于刀耕火种、JQuery独树一帜的时代，前后端代码的耦合度很高，一个web页面文件的代码可能是这样的：这意味着后端的工程师往往得负责一部分修改HTML、编写脚本的工作，而前端开发者也得了解页面上存在的服务端代码含义。有时候某处页面逻辑的变动，鉴于代码的混搭，可能都不确定应该请后端还是前端来改动（即使他们都能处理）。前端框架热潮有句俗话说的好——“...
2015-12-27 15:08:00
282
转载 AlloyTeam2015前端大会都说了啥
昨天在腾讯大厦参与了鹅厂AlloyTeam召开的AC2015前端大会，度过了充满精彩和收获的一个下午，用一句话形容这次前端Event应该是“诚意满满，干货满满”。说实话，这次AlloyTeam没有对与会人员做严格的身份认证，基本到了就能参与，因此整个腾大的多功能厅下午是爆满了人。我去的其实算早了，却也只能抢到很后面的座位。许多去的晚的同行都只好站着或坐地板上参与。本次AC大会也做...
2015-12-13 13:32:00
187
转载 作为前端er，写在年末的一些话
写惯了技术类的文章，这种总结和唠嗑型的我基本也就在年末才来一篇。说实话，这种轻松类的文章往往比技术类的要受欢迎的多，因为其受众更广，看起来也不烧脑。说来愧疚，这一年其实产出有点低，大致就写了不到二十篇技术随笔，特别下半年入职腾讯后就更少有时间动笔了。但再忙也没打算摒弃写文章的习惯，一来是为了自己沉淀，二来也是希望自己能为国内的前端分享出点贡献——这想法虽然有些滑稽，却也是我本人确...
2015-12-11 23:39:00
178
转载 React单元测试——十八般兵器齐上阵，环境构建篇
一个完整、优秀的项目往往离不开单元测试的环节，就 github 上的主流前端项目而言，基本都有相应的单元测试模块。就 React 的项目来说，一套完整的单元测试能在在后续迭代更新中回归错误时候给与警示，但鉴于 React 本身的特殊性，我们又常常将其与 webpack 等工具相结合，其单元测试的部署相比常规的项目要折腾的多。本文将作为 React 单元测试系列的开篇，和大家一同逐...
2015-10-31 21:46:00
274
转载 ES6 箭头函数中的 this？你可能想多了（翻译）
箭头函数=>无疑是ES6中最受关注的一个新特性了，通过它可以简写 function 函数表达式，你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”。箭头函数的句法规则甚至早已延伸到各项标准和技术文档中去了，虽然它早已不稀奇，却给我们一种刚刚发现的新鲜感。粉我的人都知道俺因为某些原因不怎么喜欢 => 的语法，不过别担心，本...
2015-10-22 21:59:00
179
转载 《高性能javascript》一书要点和延伸（上）
前些天收到了HTML5中国送来的《高性能javascript》一书，便打算将其做为假期消遣，顺便也写篇文章记录下书中一些要点。个人觉得本书很值得中低级别的前端朋友阅读，会有很多意想不到的收获。第一章 加载和执行基于UI单线程的逻辑，常规脚本的加载会阻塞后续页面脚本甚至DOM的加载。如下代码会报错：<!DOCTYPE html><html l...
2015-10-03 18:06:00
122
转载 送干货，实用内联gulp插件——gulp-embed
现在npm上有很多gulp内联工具，用于把脚本和样式内嵌到HTML页面上，之前搞项目我也在这些插件中寻觅许久，但均不满足公司项目的一个需求—— HTML上同时插入了开发（dev版，src文件夹下，比如 src/index.html）和gulp处理后（build版，dest文件夹下,比如 dest/index.html）的两种版本的脚本，要求运行src文件夹下的该页面时，能忽略掉引入的bu...
2015-09-19 12:49:00
136
转载 ReactJS实践（一）—— FrozenUI React化之Loading组件
在前面我们通过四篇文章入门了React的大部分主要API，现在则开始进入实践环节。实践系列的开篇打算拿我司的FrozenUI来试验，将其部分UI组件进行React化，作为第一篇实践文章，将以较简单的Loading组件来入手，官网demo的效果如下图：为了更好地开发，后续将以webpack工具来辅助，对其不了解的童鞋可以先查阅我的《webpack 入门指南》一文。鉴于我...
2015-09-13 17:49:00
231
转载 ReactJS入门（四）—— 组件API
本篇将介绍 React 组件的API，其中主要的几个API我们在第一篇的时候便已介绍过，这里可以做个温故知新。本篇的代码你也可以在我的Github上获取到。setState参数：nextState（object）, [callback（function）]设置 nextState 的某个键（属性）值（别忘了我们可以在 shouldComponentUpdate 方...
2015-09-12 21:45:00
106
转载 NodeJS入门（五）—— process对象
process对象用于处理与当前进程相关的事情，它是一个全局对象，可以在任何地方直接访问到它而无需引入额外模块。 它是EventEmitter的一个实例。本章的示例可以从我的Github上下载到。事件'exit'当进程将要退出时触发。这是一个在固定时间检查模块状态（如单元测试）的好时机。需要注意的是 'exit' 的回调结束后，主事件循环将不再运行，所以计时器也会失效...
2015-09-05 23:04:00
320
转载 NodeJS入门（四）—— path对象
很快Node就会迎来4.0的时代，届时将并入现有的iojs，所以先前写过的iojs入门系列直接更名为NodeJS入门。本篇开始将逐个介绍Node的各主要模块，依循API文档走一遍，但会给出比API文档更详尽的示例。所有的示例都可以在我的Github上下载到。API系列的开篇打算以 path 对象开始，因为之前在写一些gulp插件，发现path的使用频率实在太高了，掌握之有助于...
2015-09-04 00:53:00
120
转载 一小时包教会 —— webpack 入门指南
什么是 webpack？webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（l...
2015-07-16 14:45:00
584
转载 ReactJS入门（三）—— 顶层API
本文基本跟着官方文档把API都走一遍，但会有实例来解释应该怎么用，木有比我更详细的API文档咯。React.createClass参数：CONFIG（object）创建一个ReactClass（组件类），参数是一个对象且必须带有 render 属性方法，该方法必须返回一个封闭的容器（容器内可以有其它不限结构的容器）或 null/false（表示啥都不渲染）： ...
2015-07-10 11:43:00
159
转载 ReactJS入门（二）—— 组件的生命周期
如果你熟悉avalon，使用过data-include-rendered 和 data-include-loaded 等回调方法，那么你会很好地理解React组件的各个生命周期。说白了其实就是React组件状态变化前后的时间点，我们可以利用生命周期的接口在相应的时间点做回调操作。React的官方文档提及了如下几个组件的生命周期：Mounting/组件挂载相关:comp...
2015-06-27 17:23:00
133
转载 ReactJS入门（一）—— 初步认识React
React刚开始红的时候，由于对其不甚了解，觉得JSX的写法略非主流，故一直没打算将其应用在项目上，随着身边大神们的科普，才后知后觉是个好东西。好在哪里呢？个人拙见，有俩点：1. 虚拟DOM —— 在DOM树的状态需要发生变化时，虚拟DOM机制会将同一Event loop前后的DOM树进行对比（自然通过一系列高效的算法），如果俩个DOM树存在不一样的地方，那么React仅仅会针对...
2015-06-21 18:06:00
141
转载 谈谈石豆官网改版的前端优化
（注：本人现已不在石豆任职，且石豆官网又进行了一次新的改版，故本文章内容已不再匹配石豆现有官网）这俩星期主要致力于公司官网的改版，今天也算是比较完整地上线（暂时还是全静态的），可以在 http://www.shidou.com查看效果（旧版是http://www.shidou.com/sdcm/ ）。效果还不错，主要提升了交互以及首屏速率。就加载速度来说，从下图（上方为旧版，下...
2015-04-16 13:55:00
130
转载 smartComplete——轻量级的autoComplete插件，开源
项目后端觉得autoComplete响应略慢，于是花了两天时间写了这插件，基于jQuery 1.7+，仓库地址 https://github.com/VaJoy/smartComplete ，欢迎各种star。要注意的是，smartComplete只处理从后端接收到响应数据的情况就生成数据选择列表的情况，数据匹配工作交给后端去做了，没有前端匹配功能。smartComplete具有...
2015-03-13 15:22:00
284
转载 浅谈WEB跨域的实现（前端向）
同源策略/SOP（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击（可以参考我的这篇文章）。SOP要求两个通讯地址的协议、域名、端口号必须相同，否则两个地址的通讯将被浏览器视为不安全的，并被block下来。比如“http页面”和“https页面”属于不同协议；“qq.com”、“www.q...
2015-02-19 14:03:00
148
转载 io.js入门（三）—— 所支持的ES6（下）
（接上篇）标准ES6特性6. 新的String方法/New String methods7. 符号/Symbols8. 字符串模板/Template strings新的String方法/New String methodscodePointAt() 和 String.fromCodePoint()JS内部是以UTF-16的形式（每个字符长度都固定为16位元、...
2015-02-11 12:27:00
107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人