摘要：
需求背景 目前node端的服务逐渐成熟，在不少公司内部也开始承担业务处理或者视图渲染工作。不同于个人开发的简单服务器，企业级的node服务要求更为苛刻： 高稳定性、高可靠性、鲁棒性以及直观的监控和报警 想象下一个存在安全隐患且没有监控预警系统的node服务在生产环境下运行的场景，当某个node实例挂 阅读全文
摘要：
模块加载痛点 大家也或多或少的了解node模块的加载机制，最为粗浅的表述就是依次从当前目录向上级查询node_modules目录，若发现依赖则加载。但是随着应用规模的加大，目录层级越来越深，若是在某个模块中想要通过 require 方式以依赖名称或相对路径的方式引用其他模块就非常麻烦，影响开发效率和 阅读全文
摘要：
管道 通过“child_process”模块fork出来的子进程都是返回一个ChildProcess对象实例，ChildProcess类比较特殊无法手动创建该对象实例，只能使用fork或者spawn，而且与process对象不同的是，ChildProcess实例的stdin为可写流，stdout和s 阅读全文
摘要：
Transform流特性 在开发中直接接触Transform流的情况不是很多，往往是使用相对成熟的模块或者封装的API来完成流的处理，最为特殊的莫过于through2模块和gulp流操作。那么，Transform流到底有什么特点呢？ 从名称上说，Transform意为 处理 ，类似于生产流水线上的每 阅读全文
摘要：
移动端开发在某些场景中有着特殊需求，如为了提高用户体验和加快响应速度，常常在部分工程采用SPA架构。传统的单页应用基于url的hash值进行路由，这种实现不存在兼容性问题，但是缺点也有 针对不支持onhashchange属性的IE6 7需要设置定时器不断检查hash值改变，性能上并不是很友好。 而如 阅读全文
摘要：
在node中，只要涉及到文件IO的场景一般都会涉及到一个类－Stream。Stream是对IO设备的抽象表示，其在JAVA中也有涉及，主要体现在四个类－InputStream、Reader、OutputStream、Writer，其中InputStream和OutputStream类针对字节数据进行 阅读全文
摘要：
前端开发过程中会接触各种各样的编码，比较常见的主要是UTF－8和HTML实体编码，但是web前端的世界却不止这两种编码，而且编码的选择也会造成一定的问题，如前后端开发过程中不同编码的兼容、多字节编码可能会造成的XSS漏洞等。因此，本文旨在更好的全面了解涉及前端开发领域的字符编码，避免可能出现的交互和 阅读全文
摘要：
XSS（Cross Site Scripting），又称跨站脚本，XSS的重点不在于跨站点，而是在于脚本的执行。在WEB前端应用日益发展的今天，XSS漏洞尤其容易被开发人员忽视，最终可能造成对个人信息的泄漏。如今，仍然没有统一的方式来检测XSS漏洞，但是对于前端开发人员而言，仍是可以在某些细微处避免 阅读全文
摘要：
@(js) reduce函数 ，是ECMAScript5规范中出现的数组方法。在平时的工作中，相信大家使用的场景并不多，一般而言，可以通过reduce方法实现的逻辑都可以通过forEach方法来变相的实现，虽然不清楚浏览器的js引擎是如何在C＋＋层面实现这两个方法，但是可以肯定的是reduce方法肯 阅读全文
摘要：
@(Angular) $compile ，在Angular中即“编译”服务，它涉及到Angular应用的“编译”和“链接”两个阶段，根据从DOM树遍历Angular的根节点（ng app）和已构造完毕的 \$rootScope 对象，依次解析根节点后代，根据多种条件查找指令，并完成每个指令相关的... 阅读全文
摘要：
objC 语言不仅仅有着面向对象的特点（封装，继承和多态），也拥有类似脚本语言的灵活（运行时），这让objC有着很多奇特的功能－可在运行时添加给类或对象添加方法，甚至可以添加类方法，甚至可以动态创建类。。。 [TOC] 运行时 runtime，即运行时，这里不详述其概念，我们可以类比... 阅读全文
摘要：
@(node,watcher) watcher ，在如今的前端领域已经数见不鲜了。目前流行的gulp流程工具提供了watcher的选项，是我们在开发过程中不需要手动进行触发构建流程，转而根据文件（目录）内容改变来触发。 深入到watcher实现层，其实是基于node的fs.watch API，但是f 阅读全文
摘要：
@(webpack) webpack 是一款功能强大的前端构建工具，不仅仅是针对js，它也可通过各种loader来构建相关的less，html，image等各种资源，将webpack配合流程制定工具gulp结合起来，则更为方便的自定义工作流程。 [TOC] webpack的alias... 阅读全文
摘要：
前端资源迁移
目前公司的前端资源托管在svn服务器上，由于团队的逐渐扩大，svn的分支管控越来越不灵活，而且对于以后前端流程一体化的处理支持不是很好，因此决定在版本控制上转向git。git的好处不用多说：多分支并行开发，自动化构建，持续集成等等，这也是促使我们转向它的原因。 具体操作中... 阅读全文
摘要：
为何放弃第一种方案 UIWebView的JSContext获取
上篇中，我们通过简单的kvc获取UIWebVIew的JSContext，但是实际上，apple并未给开发者提供访问UIWebView的方法，虽然通过KVC可达到目标，但是当APP采用该种hack方法时，有很大几率不能通过A... 阅读全文
摘要：
JavaScriptCore引擎
我们都知道WebKit是个渲染引擎，简单来说负责页面的布局，绘制以及层的合成，但是WebKit工程中不仅仅有关于渲染相关的逻辑，也集成了默认的javascript引擎－－JavaScriptCore，目前Safari的js引擎也基于JSC构建，不过有一些私... 阅读全文
摘要：
来由
纯粹的无聊，一直在搜索JavaScriptCore和SpiderMonkey的一些信息，却无意中学习了如何在ios的UIWebView中判断其js解析引擎的方法： if (window.devicePixelRatio) { //If WebKit browser var st =... 阅读全文
摘要：
开篇 笔者刚刚结束淘宝的工作，现在加入了一家有青春活力的垂直电商公司，正对着阿里巴巴的西溪园区，最近一直在熟悉新的工作环境和规范，因此博客有好些时间没有更新了，在此抱歉！ 在忙碌完公司的发布系统之后，逐渐接触到具体的业务。在这里主要介绍下关于css3草案的position：sticky属性的兼... 阅读全文
摘要：
场景 在移动端开发中，最为流行的开发模式就是hybmid开发，在这种native和h5的杂糅下，既能在某些需求中保证足够的性能，也可以在某些列表详情的需求下采用h5的样式控制来丰富内容。但是在大型产品的开发中，往往前端的职责不仅仅是h5的编写，还包括基本业务逻辑的实现，比如在h5页面中确定当... 阅读全文
摘要：
回顾 在web后台开发中我们经常需要存储一些变量到session中进行暂存，最为特殊的就是“购物车”，由于http的无状态特性，因此我们需要在客户端打上一个标记，唯一的标示客户端并和服务端session一一对应，因此就有了通过cookie和url进行存储或传递这个标示－－sessionID。 ses 阅读全文
摘要：
## 现状 目前我们对异步回调的解决方案有这么几种：回调，deferred/promise和事件触发。回调的方式自不必说，需要硬编码调用，而且有可能会出现复杂的嵌套关系，造成“回调黑洞”；deferred/promise方式则对使用者而言简洁明了，在执行异步函数之前就已经构造好了执行链--then... 阅读全文
摘要：
前言 本文翻译自Why Moving Elements With Translate() Is Better Than Pos:abs Top/left，本文有改动，添加了一些作者自己的理解，不当之处还请看客指出。翻译正文 目前我们对文档中的某个元素进行移动有两种方式， 1，使用trans... 阅读全文
摘要：
介绍 目前使用ionic+cordova完成hybmid app开发，在安装geolocation插件时爆出来一个莫名的错误：Fetching from npm failed: CERT_UNTRUSTED Error: CERT_UNTRUSTED at SecurePair. ... 阅读全文
摘要：
grunt与seajs grunt是前端流行的自定义任务的脚手架工具，我们可以使用grunt来为我们做一些重复度很高的事情，如压缩，合并，js语法检查等。通过定义grunt的配置文件Gruntfile.js，配置并注册grunt的任务，最终我们可以通过命令行来执行任务。 seajs主要用于模块化，通... 阅读全文
摘要：
前言 在使用React进行构建应用时，我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上，将任务交给浏览器，进而进行layout和paint等步骤，这个函数就是React.render()。首先看下该函数的接口定义：ReactComponent render( ReactElement... 阅读全文
摘要：
由于本人最近身体有恙，做了个小手术，暂时卧床休息，不能继续更新博客，还请他人谅解！ 阅读全文
摘要：
本文翻译自React的官方博客，详情请阅读原文。React非常适合构建组件化的应用，它注重高性能，因此组建的重用，项目的扩展都十分灵活，Facebook和instagram的不少商业项目使用了此框架。本文主要通过“输入查询数据”这个简单的demo来说明或者学习如何用React来架构。数据模型 我们... 阅读全文
摘要：
开篇 随着javaEE的spring框架的兴起，依赖注入（IoC）的概念彻底深入人心，它彻底改变了我们的编码模式和思维。在IoC之前，我们在程序中需要创建一个对象很简单也很直接，就是在代码中new Object即可，有我们自己负责创建、维护、修改和删除，也就是说，我们控制了对象的整个生命周期，直到对... 阅读全文
摘要：
起因 最近接触了一道有意思的题目，就是单击表格的表头，根据表头的那一栏进行排序。恰好有一栏的数据全部是中文汉字，如果仅仅对于汉字数组使用默认的sort排序，那么是针对汉字的unicode值进行比较排序，结果肯定与我们习惯的根据汉字的拼音排序大不相同。但是对于一个简单易用的程序而言，没有必要写个复杂的... 阅读全文
摘要：
困境 在响应式布局中，我们应该小心对待iframe元素，iframe元素的width和height属性设置了其宽度和高度，但是当包含块的宽度或高度小于iframe的宽度或高度时，会出现iframe元素溢出的现象：这样溢出的iframe会破坏页面的布局。我们可以采用一种方法让iframe元素也具有响应... 阅读全文
摘要：
flex的一些属性 CSS3中引入了另一种框--flexbox，flexbox有一些block和inline不同的性质，比如： 现在就大体讲述下这个具体属性的表示含义。 设置flexbox的兼容性 将一个容器设置为flexbox（又称伸缩容器）很简单，但是却存在一些兼容性的问题，比如在IE10下，早 阅读全文
摘要：
简介 在清除浮动一文中提到BFC不会被浮动元素遮盖，并没有详细探究表现行为。规范中指出，在同一个BFC内，作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box。其实，浏览器在内部通过隐式的给子BFC设置margin值来防止覆盖。例证 创建两个浮动元素和一个B... 阅读全文
摘要：
从头讲讲编码的故事。那么就让我们找个草堆坐下，先抽口烟，看看夜晚天空上的银河，然后想一想要从哪里开始讲起。嗯，也许这样开始比较好……很久很久以前，有一群人，他们决定用8个可以开合的晶体管来组合成不同的状态，以表示世界上的万物。他们看到8个开关状态是好的，于是他们把这称为"字节"。再后来，他们又做了一... 阅读全文
摘要：
入口方法 每个程序都有个入口方法，类似于c的main函数，seajs也不例外。系列一的demo在首页使用了seajs.use()，这便是入口方法。入口方法可以接受2个参数，第一个参数为模块名称，第二个为回调函数。入口方法定义了一个新的模块，这个新定义的模块依赖入参提供的模块。然后设置新模块的回调函数，用以在loaded状态之后调用。该回调函数主要是执行所有依赖模块的工厂函数，最后在执... 阅读全文
摘要：
模块类和状态类 参照上文的demo，我们结合源码分析在简单的API调用的背后，到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出。 首先定义了一个Module类，对应与一个模块function Module(uri, deps) { this.uri = uri this.depen... 阅读全文
摘要：
简述 前端开发模块化已经是大势所趋，目前模块化的规范有很多，众所周知的有commonJS，Module/Wrappings和AMD等，而且ES6也着手开始制定模块化机制的实现。类似于c/c++的include，java中的import关键字，在js中也定义了require关键字，用以引进依赖模块。 ... 阅读全文
摘要：
"被申遗"不是指"没申遗"，而是全都经过了中国人重新包装。近日，有报道称韩国计划将火炕申报世界遗产，联系近年来韩国多起"申遗事件"，国内网民纷纷吐槽东北土炕也要被韩国抢走了。实际上，国内流传的有关韩国的各种"申遗事件"全都经过中国人重新包装，要么完全是子虚乌有，要么带有事实偏差的误导性"被火炕"：韩... 阅读全文
摘要：
简述 我们都知道无法通过delete关键字针对变量和函数进行操作，而对于显示的对象属性声明却可以进行，这个原因需要深究到js的实现层上去，让我们跟随 Understanding delete 来探究一番，另外本文并不考虑浏览器的兼容性实现问题。理论 为什么我们可以这样： var o = { x:... 阅读全文
摘要：
David Flanagan最近写了一个关于全局eval的简单表达式，可以用一行式子表示：var geval = this.execScript || eval; 尽管看起来很简短，但是跨浏览器的兼容性并不好。仔细考虑了下这个话题，我觉得还有一些方法来实现代码的全局执行。而且有些方法--间接eval... 阅读全文
摘要：
Gradient Filter和AlphaImageLoader Filter 这两个属性是legend IE(IE6,7,8)中的渐变滤镜和透明滤镜，我们先详细介绍下这两个属性的用法，详情可查看MSDN。 透明滤镜的使用方式很简单，只需在样式中定义 "filter:progid:DXIm... 阅读全文