序言这里假设本文读者对FIS已经比较熟悉，如还不了解，可猛击官方文档。虽然FIS整体的源码结构比较清晰，不过讲解起来也是个系统庞大的工程，笔者尽量的挑重点的讲。如果读者有感兴趣的部分笔者没有提到的，或者是存在疑惑的，可以在评论里跑出来，笔者会试着去覆盖这些点。下笔匆忙，如有错漏请指出。Getting started如在开始剖析FIS的源码前，有三点内容首先强调下，这也是解构FIS内部设计的基础。1、 FIS支持三个命令，分别是fis release、fis server、fis install。当用户输入fis xx的时候，内部调用fis-command-release、fis-command-server、fis-command-install这三个插件来完成任务。同时，FIS的命令行基于commander这个插件构建，熟悉这个插件的同学很容易看懂FIS命令行相关部分源码。2、FIS以fis-kernel为核心。fis-kernel提供了FIS的底层能力，包含了一系列模块，如配置、缓存、文件处理、日志等。FIS的三个命令，最终调用了这些模块来完成构建的任务。参考fis-kernel/lib/目录，下面对每个模块的大致作用做了简单备注，后面的文章再详细展开。lib/ ├── cache.js// 缓存模块，提高编译速度├── compile.js// （单）文件编译模块├── co ...继续阅读 (55)

chrome.webRequest.XXX 用于网络流量的统计监控、修改请求和响应chrome.proxy.XXX 用于代理的管理抓包的时候偶尔会遇到返回的json串在prevew窗口不能显示成对象的形式，如下：理想的：这种情况是响应头content-type不正确造成的，可以使用chrome.webRequest.onHeadersReceived.addListener() 修改响应头相应的可以用chrome.webRequest.onBeforeSendHeaders.addListener()修改请求头两个接口可以修改几乎所有的头，包括cookie相关的，因此可以实现一个cookie的管理自定义请求/响应头的插件：https://github.com/feix760/chrome_custom-headers某个tab cookie独立的插件(可以让浏览器登录多个账号)：https://github.com/feix760/Chrome_CookieSeparatorchrome.proxy.XXX可以实现 SwitchySharp 的功能chrome.webRequest.XXX 不能做到修改响应数据、host映射等。虽然从安全的角度思考这是异想天开，但有自由访问文件系统的接口（需要用户2次确认这种权限），如果能做到真想把fiddler的功能集成到chrome里去 ...继续阅读 (25)

标准浏览器的事件模型是先捕获再冒泡，由于考虑到兼容问题，事件绑定一般都是基于冒泡来做的，那么什么情况下可以考虑利用捕获来做事件绑定呢？最近在做的课程查找页上报需求的时候，有两个问题要解决：清理之前做的上报重新添加新的上报如果在原来的基础上直接改当然可以，但是将上报和业务代码耦合显然不是理想的解决方案，由于内嵌的webview是chromium， 不用考虑兼容问题，于是尝试利用捕获来处理。大多数的上报都是点击上报捕获先于冒泡，不用考虑 stopPropagation 的影响所以可以在最外层，基于捕获来绑定事件：vargetReportKey =function($ele, max) {// 这里需要设置一个 max 值, 避免死循环max = parseInt(max,10) ||5;varkey = [];varid ='';do{ id =$ele.attr('id');if(id) { key.push('#'+ id); }else{ key.push($ele.prop("tagName").toLowerCase());$ele=$ele.parent(); } }while(!id && --max);returnkey.reverse().join(' '); }; ...继续阅读 (19)

想让markdown高亮，找了点插件，比如https://github.com/jonschlinkert/sublime-markdown-extended可以让代码块高亮。但没有达到我想要的效果，我想让markdown的每个部分高亮，比如# 标题高亮。然后找到了sublime-monokai-extended这个达到了我的效果，但是将整个的color scheme都改了，自然不行。现在的问题是——在当前的 color scheme 高亮 markdown继续寻找，然后找了这个markdown.xml按照上面说的，将代码复制到我的Obsidian.tmTheme，成功了。在现有color scheme上高亮了markdown。但是头疼的是，我不喜欢他的标题颜色，想改。看了代码，摘录一段：nameMarkup: Underlinescopemarkup.underlinesettingsfontStyleunderlineforeground#839496一头雾水，完全不知道how does it working，也就无从改起。没有解决不了的问题，找了半天，这篇博客Tips For Creating Sublime Text Color Schemes解决了我的问题。其中的tip1尤其好——Sublime text color schemes work by defining co ...继续阅读 (9)

写在前面各大MVVM框架的双向绑定太难以观察，很难直观地从业务代码里知道发生了什么，我不是双向绑定的反对者，只是认为双向绑定不应该糅合进底层框架，而应该出现在业务代码中，或者是业务和框架之间的代码上，由开发者实现，由开发者决定观察什么，决定响应什么。以及Object.observe的支持度不够好（http://caniuse.com/#search=observe），再者Object.observe的功能太弱（如对象内数组的变化无法监听）。所以就有了observejs。observe.js意义* 监听任意对象的任意数据变化* 作为业务和框架之间的中间件存在* 作为mv*框架中的监听模块（当然我是相当反对）3分钟精通observe.js对象字面量var obj = { a: 1 }; //watch obj observe(obj, function (name, value) { console.log(name + "__" + value);//a__2 }); obj.a = 2;数组var arr = [1, 2, 3]; //watch obj observe(arr, function (name, value, old) { console.log(name + "__" + value+"__"+old); }); arr.push(4);//ar ...继续阅读 (28)

前一篇文章我们介绍了虚拟DOM的实现与原理，这篇文章我们来讲讲React的直出。比起MVVM，React比较容易实现直出，那么React的直出是如何实现，有什么值得我们学习的呢？为什么MVVM不能做直出？对于MVVM，HTML片段即为配置，而直出后的HTML无法还原配置，所以问题不是MVVM能否直出，而是在于直出后的片段能否还原原来的配置。下面是一个简单的例子：Hello {name}!上面这段HTML配置和数据在一起，直出后会变成：Hello world!这时候当我们失去了name的值改变的时候会导致页面渲染这个细节。当然，如果为了实现MVVM直出我们可能有另外的方法来解决，例如直出结果变成这样：Helloworld!这时候我们是可以把丢失的信息找回来的，当然结构可能和我们想象的有些差别。当然还有其他问题，例如直出HTML不一定能反向还原数据，由于篇幅问题，这里不展开讨论。React如何直出？如图：React的虚拟DOM的生成是可以在任何支持Javascript的环境生成的，所以可以在NodeJS或Iojs环境生成虚拟DOM可以直接转成String然后插入到html文件中输出给浏览器便可具体例子可以参考，https://github.com/DavidWells/isomorphic-react-example/，下面是其渲染路由的写法：// https://github.com ...继续阅读 (27)

前言html css javascript可以算是前端必须掌握的东西了，但是我们的浏览器是怎样解析这些东西的呢 我们如何处理html css javascript这些东西来让我们的网页更加合理，在我这里做了一些实验，总结起来给大家看看。最简单的页面DOCTYPE htmltest我们打开chrome的控制台查看timeline由上图 可得结论1 图中蓝色透明条标识浏览器从发起请求到接收到服务器返回第一个字节的时间，时间还是挺长的，而蓝色实体条则为真正的html页面下载的时间 还是很短的。2 图中红框内的这部分时间则表示浏览器从下载完成html之后开始构建dom，当发现一个image标签时所花费的时间，由此可见dom是顺序执行的，当发现image时便立即发起请求，而紫色透明条则是image发起请求时在网络传输时所消耗的时间。3 图中timeline蓝色竖线所处的时间为domComplete时间，红色竖线为dom的onload时间，由此可见两种事件的差异。而浏览器构建dom树所花费的时间可以算出即domComplete时间 减去 html下载完成后的时间大概80ms。含有css的页面DOCTYPE htmltest我们打开chrome的控制台查看timeline1 在添加了外部引入css之后，并没有发现什么异常，但是有一点指的注意，也就是红色竖线和蓝色竖线挨得更进了，这表明domCom ...继续阅读 (17)

HI经过2年准备，7个月写作，8个月修改，《JavaScript设计模式与开发实践》即将出版（5月20号左右）。预售地址将于51假期过后放出，感兴趣的同学可以关注。：）目录：前言：更多样章可以移步到图灵社区：http://www.ituring.com.cn/book/1632 ...继续阅读 (22)

前言上期，本菜在《前端抢后端饭碗 — Node.js + Socket.io 制作简易聊天室》一文中谈到如何用node.js中的express框架。如要阅读此文，请先阅读前文。虽然时至今日, express框架依然是时下node.js网页开发的主流，但后起之秀koa大有赶超之势。他融合了ES6的一些新特性，列如generator, promise等。利用这些新特性能很好地解决传统javascript中的多层回调噩梦。我们AlloyTeam旗下iPresst会在5月底6月初的版本中发布用koa重构的版本，敬请期待!Koa里Generator的作用有关回调的基础知识，可以阅读我的同事JJ的两篇博文：《ES6 Generator介绍》《使用Generator解决回调地狱》Generator究竟在koa中发挥什么作用呢？我从koa官网搞来这幅图（已经了解koa的同学可以略过）。这个gif展示了这种函数写法运行的步骤:创建 date 记录花费时间将控制 Yield 到下一个 middleware创建另外 date 记录响应时间将控制 Yield 到下一个 middleware立刻 Yield 控制, 因为 contentLength 只对 response 起作用将 upstream Yield 到 Koa 的 空middleware.如果请求路径不是 "/", 则跳过设置 bo ...继续阅读 (22)

什么是VM？VM模块是NodeJS里面的核心模块，支撑了require方法和NodeJS的运行机制，我们有些时候可能也要用到VM模板来做一些特殊的事情。通过VM，JS可以被编译后立即执行或者编译保存下来稍后执行（JavaScript code can be compiled and run immediately or compiled, saved, and run later.）VM模块包含了三个常用的方法，用于创建独立运行的沙箱体制，如下三个方法vm.runInThisContext(code, filename);此方法用于创建一个独立的沙箱运行空间，code内的代码可以访问外部的global对象，但是不能访问其他变量而且code内部global与外部共享var vm = require("vm"); var p = 5; global.p = 11; vm.runInThisContext("console.log('ok', p)");// 显示global下的11 vm.runInThisContext("console.log(global)"); // 显示global console.log(p);// 显示5vm.runInContext(code, sandBox);此方法用于创建一个独立的沙箱运行空间，sandBox将做为global的变量传入cod ...继续阅读 (23)

写在前面因为用React就会需要写jsx。React会将jsx编译成js。然后append到head当中。从fiddler的请求和JSXTransformer源码来看，当在页面使用下面的html时候：会发送两次请求react_test.js文件，一次是JSXTransformer发送的，一次是浏览器识别script标签自动发送的。上面的react_test.js里面全是jsx语法，和javascript有点像，如：var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, ...继续阅读 (31)

写在前面不读文章，只对代码感兴趣可以直接跳转到这里https://github.com/AlloyTeam/AlloyGameEngine然后star一下，多谢支持:)。前几天发了篇向ES6靠齐的Class.js，当初jr为什么不把父类的实例暴露给子类，其原因还是为了延续原型继承的习惯，子类重写就会覆盖掉父类的方法，父类的方法就会丢，如下面的代码，就堆栈溢出了：var Parent = function () { } Parent.prototype.a = function () { } var Child = function () { } Child.prototype = new Parent(); Child.prototype.a = function () { this.a(); } var child = new Child(); child.a();而jr的Class.js可以让你通过this._super访问父类同类方法，修复了原型继承同名无法访问父类的弱点，当然也可以hack一下，先赋给变量或者某个属性。如：var Parent = function () { } Parent.prototype.a = function () { alert(1) } var Child = function () { } Child.prototyp ...继续阅读 (26)

想做一个好用的在线编辑器，不管是地图编辑器、PPT创作平台还是通过拖拽快速创建活动页面的编辑器等等，必然要给用户提供各种快捷的操作方法。如非常常用的复制粘贴功能。举个例子，在iPresst创作平台，我们的作品在好几页都要用到同一张图片，总不能每次都点击上传一次图片吧？右键复制粘贴或者直接按快捷键无疑是最符合用户预期的操作方式，然而我们编辑器用到的元素一般比较特别，而且我们复制粘贴的时候经常要做一些特殊处理，此时我们就需要覆盖浏览器给我们提供的复制粘贴功能了。实现的原理也挺简单：方法1：监听键盘事件document.addEventListener('keydown', function(e){ if(e.ctrlKey) { switch(e.keyCode) { case 88: console.log('Ctrl + X, cutting'); break; case 67: console.log('Ctrl + C, copying'); break; case 86: console.log('Ctrl + V, pasting'); break; default: } } }, false);此时我们要覆盖掉浏览器的默认右键菜单，不然快捷键和右键菜单的复制粘贴操作效果不一致。这并不奇怪， ...继续阅读 (19)

（图片来源于互联网）回调地狱相信每一个JS程序员都曾被或者正在被回调地狱所折磨，特别是写过Nodejs代码的程序员。asyncFun1(function(err, a) { // do something with a in function 1 asyncFun2(function(err, b) { // do something with b in function 2 asyncFun3(function(err, c) { // do something with c in function 3 }); }); });JS的后续传递风格（回调）是这门语言的优点也是这门语言的缺点，优点之一是我们可以很轻易的写出异步执行的代码，而缺点也是由异步引起的，当太多的异步步骤需要一步一步执行，或者一个函数里有太多的异步操作，这时候就会产生大量嵌套的回调，使代码嵌套太深而难以阅读和维护，即所谓的回调地狱。解决方案随着JS这门语言的发展，出现了很多处理回调地狱的解决方案。具名函数如最基本的，使用具名函数并保持代码层级不要太深function fun3(err, c) { // do something with a in function 3 } function fun2(err, ...继续阅读 (14)

写在前面不读文章，只对代码感兴趣可以直接跳转到这里https://github.com/AlloyTeam/AlloyGameEngine然后star一下，多谢支持:)。游戏或者应用中，不是所有的地方都是贴图，Shape也有很常见的应用场景，如游戏中显示HP的血条。大量的Shape可以组成矢量图。矢量图的好处是放大不失真，也就是不会变模糊；而位图放大失真，失真的程度要看其平台插值算法的牛B程度，但放大效果越好的算法，速度越慢，所以大部分平台会在速度和效果上取个折中。绘制Shape根绘制位图本质不一样，绘制位图可以充分利用GPU渲染（当然也可以不用），绘制Shape必须经过CPU先进行数学计算和图形学相关算法（比如你可以尝试不使用api，而使用点去绘制贝塞尔曲线、圆形、线条等，你做的所有数学工作，就是计算机做的工作），然后再进行渲染。所以很显然，绘制大量的Shape会造成帧率下降。那么又想使用Shape，又不想降低帧率怎么办？绘制Shape和绘制图片又不冲突。Shape可以转成图片进行渲染，跟Shape类似的还有文字，文字也可以转成图片再进行绘制以提高绘制帧率，意思就是：1.经过CPU先进行数学计算和图形学相关算法2.渲染至某个备份Canvas3.以后游戏或者应用中的core loop直接把备份Canvas绘制上去，而不用去重新计算4.当Shape有更改的时候才去更新备份Canvas ...继续阅读 (26)

前言笔者驽钝，最近由于工作关系才去学习了Angular，发现在合适的项目下使用Angular开发真是非常畅快！MVC框架需要一些学习成本才能上手，再加上Angular采用现在通行的约定优于配置（convention over configuration）理念，框架本身做了很多封装，所以实现起来需要开发人员对框架足够的熟悉。Angular一个典型的使用场景就是单页应用，那么如何在一个单页面中改变URL，请与笔者一同学习。$locationAngular中使用内置的$location服务来监听、操作URL，包括如下功能：获取、监听、改变地址栏的URL与URL实现双向数据绑定（地址栏变动、前进后退或者点击页面的链接均会触发）。将URL对象封装成了一套方法（protocol、host、port、path、search和hash）相对于BOM原生的window.location，使用$location更利于测试用例的编写（通过$location来注入假数据），提供的接口也更友好（官方一直强调是jQuery-style getters and setters，我的理解就是支持链式写法），与URL实现了双向绑定，内部集成了HTML5的History API，所以建议使用$location服务。如果想实现类似history.replaceState()的功能，可以使用replace方法，代码如下。 ...继续阅读 (14)

1. 前言看到这个题目的时候干后端的别打我。在接触Socket.io之前曾经用PHP + jQuery写了一个低效的长轮询只有消息同步功能的小聊天室就已经耗尽心力，更不用说利用PHP的Socket接口写WebSocket的聊天室，那更是灾难。刚才一口气说了一堆大家都困惑的术语，接下来等我解释一下。一般来说，浏览器在接收到客户端请求(request)的时候，会发送给服务器端进行处理，服务器端处理完毕后会返回结果(response), 这样就完整地完成了一次HTTP的请求。当客户端想再更新页面信息的时候，需要刷新浏览器，再完成一次HTTP请求。后来， AJAX的流行貌似使网站更加用户友好，增强了互动性，但实际上在效率上并没有提高，AJAX与后台的交互实际也是在一次又一次地完成HTTP请求。终于， 人们为了更好地实现实时应用，想出了一些办法，老办法叫Comet, 新办法叫Websocket.老办法Comet是改良自AJAX（轮询）。拿PHP作为例子，其原理就是，利用AJAX给PHP后台发送请求，后台PHP设置运行时间为无限，并用一个死循环使HTTP请求不返回而达到持续监听后台的效果。一旦死循环里的代码检测发现数据/文件被修改，则跳出循环，返回更新后的数据。这种办法简明易懂，后台代码不需要写太多，但因为连接不断开而大量服务器资源。新办法就是HTML5新的API叫做WebSocket.Web ...继续阅读 (22)

前提：介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto.js功能清单:1 快速实现页面全屏滚动效果。并提供多种翻页效果，兼容大部分ios和android系统。2 支持在页面中添加多种动画元素效果 来实现淡入，滑入等效果。3 支持配置音乐功能。4 支持摇一摇接口功能。组件核心代码原理：1 页面滚动在移动页面上如果想使用滚动，如过没有任何动画效果，那么肯定大家首先想到的就是用滚动条来滚动，但这样的滚动比较单调，实现动画效果比较困难，于是就想出了利用css3和div的绝对定位来实现。然后给每个div设置绝对定位样式.item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background-position: center; }这样页面上的每个div都相当于一个页面 只不过重叠了而已，接下来就要利用javascript和css让这些页面可以滚动(利用touch时间改变div的transform来实现滚动)function touchStart(event) { ...继续阅读 (49)

React 简单介绍先说 React 与 React Native他们是真的亲戚，可不像 Java 和 Javascript 一样。其实第一次看到 React 的语法我是拒绝的，因为这么丑的写法，你不能让我写我就写。但当我发现 React Native 横空出世后，它学习一次到处运行的理念非常诱人。React Native 可以写出原生体验的 iOS/Android 应用？那不就多了一门装逼技能？所以我们调研小组试了一下，感觉 "Duang" 一下，很爽很舒服。写 React Native 需要两门基础技能：React 语法 和 iOS 基础知识。很爽很舒服，索性就研究一下，算是入门。 了解之后发现，React 真是有另一番天地，值得学习。接下来总结以下我对 React 的理解，分享给大家。至于 React Native，有机会再好好探究下。这部分废话太多，喜欢实战的可以直接看代码部分。React 是 Facebook 出品的一套颠覆式的前端开发类库。为什么说它是颠覆式的呢？内存维护虚拟 DOM对于传统的 DOM 维护，我们的步骤可能是：1. 初始化 DOM 结构 2. 从服务器获取新数据 3. 使用新数据更新局部 DOM 4. 绑定各种事件首先，我们操作 DOM 是最昂贵的开销，对于 需要反复更新 DOM 的网页，无疑是噩梦。其次，对 DOM 局部的更新以及事件绑定加大了维护的难 ...继续阅读 (21)

写在前面在2008年的时候，John Resig写了一Class.js，使用的方式如下：var Person = Class.extend({ init: function(isDancing){ this.dancing = isDancing; }, dance: function(){ return this.dancing; } }); var Ninja = Person.extend({ init: function(){ this._super( false ); }, dance: function(){ // Call the inherited version of dance() return this._super(); }, swingSword: function(){ return true; } });init为构造函数，通过this._super()访问父类同名方法。这种看上去很酷很方便的继承方式，居然有一个致命的缺陷。那就是：当父类A有一个方法a,子类B也有一个方法a的时候，仅仅只有子类B中的方法a才能访问父类A中的方法a，子类B中的其他方法从此就无法访问到父类A中的方法a。虽然这种场景很少，但是不完美啊不完美！！ 所以就有了今天向ES6看齐的Class. ...继续阅读 (32)