项目： 手Q群成员分布直出 基本概念：直出其实并不算是新概念。只不过在Web2.0单页应用流行的年代，一直被人遗忘在身后。其实在Web1.0时代，前后端没有分离的时候，程序员直接用后台程序渲染出模板，这便是直出。而到了今天，当Node大大提高了前端开发者的能力时，前端人员也可以做一些后台的事情，通过Node来实现模板的渲染和数据的吞吐。框架及技术：由AlloyTeam开发的，建基于Koa之上的玄武直出框架。该框架的优势在于：(1) 安装与本地开发简单：只需要几行命令安装和几行代码部署本地开发环境。(2) 完善的文档和规范的开发实践：经过数个项目的试验，文档已经日臻完善，并总结出一套可供大部份业务使用的实践方案。(3) 部署测试和发布成熟：目前已有兴趣部落、群搜索等数个项目成功发布。(4) 较好的容错功能： 通过公司的L5负载均衡服务，完美兼容直出与非直出版本，即使直出挂了，也能顺利走非直出版本，让前端可以安心睡大觉。 注：即使不使用这套框架，还是可以利用Koa或者Express这些Node的web框架轻松实现直出的。 直出方案：1. 数据拉取玄武框架提供一个封装了开源request库的一个同名request框架，并且提供异步拉取数据方案。文档代码如下：function(req, res, next) { var hander = fu ...继续阅读 (90)

背景：1. 对构建的改造已经完成，目前构建的能力可以较为灵活地支撑进一步的优化2. 希望进一步减少首屏时间，将首屏时间控制在2秒以内 页面情况：优化之前，并没有上报首屏时间，页面加载时间约为2.4秒。研究认为，用户最满意的网页打开时间是2秒以内。作为一个相对简单的页面，我们就应该最可能将首屏时间甚至加载时间控制在2秒以内，让用户体验到最佳的页面体验。定义页面的首屏与加载时间：首屏时间，英文称之为above the fold(首屏线之上)。我们以手Q群成员分布的页面作为例子。在iPhone5屏幕下，这个页面在没有往下滚动的时候，如左图。滚动到底部时，如右图。我们所说的首屏时间，就是指用户在没有滚动时候看到的内容渲染完成并且可以交互的时间。至于加载时间，则是整个页面滚动到底部，所有内容加载完毕并可交互的时间。在这个页面中，我们可以划分成四个部份，分别是活跃 群成员、男女比例、省市分布及年龄。我们将前三个部份归入首屏渲染时间。剩下的内容加载时间加上首屏加载时间即是页面加载时间。另外值得一提的是，由于之前项目的开发将动画渲染时间也纳入统计，因此为了方便对比，我也将渲染时间纳入统计。实际上，如果除去动画渲染时间，首屏及加载时间会快300 – 500ms。 已经做好的优化:除非各种性能优化书籍提出的要点之外，在这篇优化之前已经做到的优化并值得简单提出来的有两点。 ...继续阅读 (49)

背景：1. 接手新项目，发现项目最基本的文件压缩没有，离线包有多余文件，md5也并没有做好，2. 构建是用coffeescript写的，维护成本及交接成本大，关键的是，构建维护的人离职了3. 作为新人，希望从头写一个构建，这样为以后独立开展项目获取经验 页面情况：示例连接，需要QQ登录态，可到腾讯网门户进行登录:http://web.qun.qq.com/statistics/index.html?_bid=149&_wv=3&gc=60478266目标：1. 对文件进行压缩2. 删除离线包冗余文件，精简大小3. 对文件名md5化 成果：1. 构建工具搭建的思路及原则总结 这次的构建优化主要带来的思考是，一个基本的构建、优秀的构建分别是怎么样的。我们应该引入怎么样的评判标准呢？ 市面上还没有人做过标准的回答。一般而方，作为构建，它的使命是提高开发人员的效率，并能对项目进行足够的性能优化。也就是说， 开发效率及性能优化应该作为两个最基本的评判标准。对于一个前端项目而言，基本的构建功能应该包括下面的功能。 (1)  文件复制(2)  文件压缩(3) 文件md5(4) 文件打包及合并(5) 文件内联(6) 合图 在构建工具的选择的时候，如果包含这些功能的话，那么称得上是“合格”的 ...继续阅读 (28)

继 Facebook 提出 Flux 架构来管理 React 数据流后，相关架构开始百花齐放，本文简单分析 React 中管理数据流的方式，以及对 Redux 进行较为仔细的介绍。React" A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES "在 React 中，UI 以组件的形式来搭建，组件之间可以嵌套组合。另，React 中组件间通信的数据流是单向的，顶层组件可以通过 props 属性向下层组件传递数据，而下层组件不能向上层组件传递数据，兄弟组件之间同样不能。这样简单的单向数据流支撑起了 React 中的数据可控性。那么，更全面的组件间通信形式该怎么实现呢？嵌套组件间，上层组件向下层组件传递回调函数，下层组件触发回调来更新上层组件的数据。以事件的形式，使用发布订阅的方式来通知数据更新。Flux —- Fackbook 提出的管理 React 数据流的架构。Flux 不像一个框架，更是一种组织代码的推荐思想。就像 “引导数据流流向的导流管”。其他的 “导流管”。ReFlux，Redux 等。前两种形式其实也足够在小应用中跑起来。但当项目越来越大的时候，管理数据的事件或回调函数将越来越多，也将越来越不好管理了。 对于后两种形式，个人 ...继续阅读 (67)

        作为一只网瘾少女，各种酷炫的网页效果已经不能再引起我的注意了，直到有一天我看到了这个http://matthew.wagerfield.com/parallax/ ，瞬间晕船了。嗯，我喜欢这种微醺的感觉。这时我的脑洞突然开了一下，想起了前段时间票圈疯转的各种360°全景摄影。当手机绕着你360°转动的时候，就好像置身照片中的场景一样，那这个框架应该可以做成这样的效果～（虽然后来知道这个效果并不是用parallax.js做的）。于是开启了我用parallax.js来变身炫酷少女之路。 Parallax.js到底干嘛的        Parallax.js是一种轻量级的JavaScript框架（技术文必备语句），也可以作为jQuery插件来使用。它可以对移动设备的横竖屏自适应，还支持自定义行为（data属性或是JavaScript的api）。最最适合我装逼的是它可以对智能设备的方向作出反应。但是即使没有陀螺仪或是其他重力感应硬件的时候，它还可以用光标来控制方向。真是个能屈能伸的好汉子 快闪开，我要开始装逼了        首先，素材很重要。要做成下面的样子。      ...继续阅读 (37)

这一片文章技术上基本上都是后台相关的，不过比较浅~可以当做知识扩展来看~做项目的时候遇到RPC通信，就研 zhe 究 teng 了一些相关的玩意，这是背景注意标题：本文C的代码需要在window下执行首先我们得知道什么是IPC通信Inter-Process Communication 翻译过来是进程间通信，进程间通信。进程是什么就不用解释了吧~有两种类型的进程间通信1、LPC 本地过程调用2、RPC 远程过程调用 这些调用有什么乱用？它们可以 数据传输、共享数据、通知事件、资源共享等等可以看到IPC调用还是很重要的，缺之不可 那么接下来的问题就是该如何实现IPC通信呢？先说几个常见和通用的1、管道2、文件映射3、共享内存4、Socket还有一些不同操作系统下面特有的，比如window下的邮件槽，剪切板，动态数据交换，动态链接库linux下特有的信号、消息队列、信号量在这里我们也主要讲前四种~当然我也不会原因是后面的我也没研究~ 一、管道netstat -a | grep node上面这条命令对用过linux的童鞋来说应该很熟悉吧，这是linux里面的管道符“ | ” 的基本用法，管道的原理是什么呢？看图~管道是一个内核的缓冲区，它的一端连接一个进程的输出，管道的另一端连接另外一个进程，负责输出，有没有一种抽象的概念了？管道分为两 ...继续阅读 (24)

为什么先讲数组数据结构可以简单的被分为线性结构和非线性结构。线性结构大致包括：数组（连续存储）；链表（离散存储）；栈（线性结构常见应用，由链表或数组增删和改进功能实现）；队列（线性结构常见应用，由链表或数组增删和改进功能实现）；非线性结构大致包括：树；图；其中，数组是应用最广泛的数据存储结构。它被植入到大部分编程语言中。由于数组十分容易懂，所以它被用来作为介绍数据结构的起点非常合适。JavaScript数组基础知识在ECMAScript中数组是非常常用的引用类型了。ECMAScript所定义的数组和其他语言中的数组有着很大的区别。那么首先要说的就是数组在js中是一种特殊的对象。特点：数组是一组数据的线性集合；js数组更加类似java中的容器。长度可变，元素类型也可以不同；数组的长度可以随时修改（length属性）；常用操作方法：push、popshift、unshiftsplice、sliceconcat、join、sort、reverse等JavaScript数组操作一、 数组方法：1、 数组的创建var array = []; var array = new Array();　//创建一个数组 var array = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var array = new Array([element0[, ...继续阅读 (31)

使用 window.performance 提供了一组精确的数据，经过简单的计算就能得出一些网页性能数据。配合上报一些客户端浏览器的设备类型等数据，就可以实现简单的统计啦！额，先看下兼容性如何：http://caniuse.com/#feat=nav-timing这篇文章中 Demo 的运行环境为最新的 Chrome 的控制台，如果你用的是其他浏览器，自查兼容性哈~先来看看在 Chrome 浏览器控制台中执行 window.performance 会出现什么：简单解释下 performance 中的属性：先看下一个请求发出的整个过程中，各种环节的时间顺序：// 获取 performance 数据 var performance = { // memory 是非标准属性，只在 Chrome 有 // 财富问题：我有多少内存 memory: { usedJSHeapSize: 16100000, // JS 对象（包括V8引擎内部对象）占用的内存，一定小于 totalJSHeapSize totalJSHeapSize: 35100000, // 可使用的内存 jsHeapSizeLimit: 793000000 // 内存大小限制 }, // 哲学问题：我从哪里来？ ...继续阅读 (177)

什么是依赖注入呢，我的理解，简单点就是说我的东西我自己并不像来拿着，我想要我依赖的那个人来帮我拿着，当我需要的时候，他给我就行了。当然这只是简单的理解，还是用代码解释比较清楚一些。这里有一个function，很简单。var a = function(name){ console.log(name); }我们调用它：a('abc')；//abc那么，就像我上面说的，我能不能自己不传参数呢，例如：a();//undefined如何才能实现让别人帮我们注入这个参数呢：var inject = function(name,callback){ return function(){ callback(name); } }像这样，我们在定义参数的时候这样传：a = inject('abc',a)我们再调用a方法：a()；//abc这其实就是最简单的依赖注入了，当然这么简单是不行的，其实这是很无意义的，下面我们来看一下高深的angularjs： var MyController = function($scope){ $scope.test = 1; }上面这段代码定义了angularjs的controller里面用到了scope，这样还看不出问题，在看下面：var MyController = function($scope,$http){ ...继续阅读 (28)

在Web中使用ES 2015想要在浏览器端使用ES 2015最新语法，其实很简单，只需要一个转换器即可，Babel是ES 2015最流行的转换器之一，Babel加上各种插件和polyfill能基本上支持绝大部分新语法。在你的构建中，插入一步使用Babel将ES 2015的代码转换成完全兼容ES5的代码的任务，你甚至都不必了解Babel的具体用法，就可以爽爽的开始写ES 2015代码了。使用gulp-babel在需要的地方转换一下即可。 var gulp = require('gulp'); var babel = require('gulp-babel'); gulp.task('babel', function () { return gulp.src('src/js/*.js') .pipe(babel()) .pipe(gulp.dest('dist')); });笔者在实际生产中已使用到一些ES 2015新特性，通过Babel转换成完全兼容ES5的语法，然后发布到正式环境，大大提高了开发体验。下面将一部分使用的较多，能改善编码体验的点列出来，当然也有一些坑，希望读者能尽早熟悉尽早投入ES 2015的怀抱。最基本的：let和constlet a = 1; const A = 2;转换成var a = 1; var A = 2 ...继续阅读 (29)

EventEmitter简单介绍在Nodejs中，异步的I/O 操作在完成时会触发事件队列中的具体事件。这里的主要原因是这些对象本质上是通过继承EventEmitter来实现对事件的处理和回调，如文件的file读写等。（这里的事件与DOM树上事件不同，不存在事件冒泡和捕获的情况。）我们也可以让自定义的对象通过继承EventEmitter来让其走观察者模式（事件监听与触发），主要通过EventEmitter的on和emit这些方法来构成。也有更为具体的API。如emitter.once(event,listener)添加一次性 listener（这个 listener 只会被触发一次，触发完成后就被删除）。EventEmitter主要APIemitter.on(event, listener) 注册一个事件。emitter.once(event, listener) 注册一个一次性的事件，触发后就被抹掉。emitter.removeListener(event, listener) 在时间队列中剔除某一个事件emitter.removeAllListeners([event]) 删除整个事件队列，或多个事件emitter.listeners(event) 返回某些事件 emitter.emit(event, [arg1], [arg2], […]) 触发事件，可传入具体参 ...继续阅读 (27)

位置传感器 N.3.1 GPS与基站定位位置传感器通常主要指手机内部的Global Positioning System (GPS)模块，GPS又称全球卫星定位系统，该系统包括太空中的24颗GPS卫星；地面上1个主控站、3个数据注入站和5个监测站及作为用户端的GPS接收机。最少只需其中3颗卫星，就能迅速确定用户端在地球上所处的位置及海拔高度；所能收联接到的卫星数越多，解码出来的位置就越精确。获取位置信息，核心在于获取经纬度坐标，继而在手机地图中标注出自身坐标，从而确定当前所处的位置。目前手机定位的方式有两种，一种是基于GPS的定位，一种是基于移动运营网的基站的定位。基于GPS的定位方式是利用手机上的GPS定位模块将自己的位置信号发送到定位后台来实现手机定位的。基站定位则是利用基站对手机的距离的测算距离来确定手机位置的。后者不需要手机具有GPS定位能力，但是精度很大程度依赖于基站的分布及覆盖范围的大小，有时误差会超过一公里。前者定位精度较高。[图N.3.1 ublox生产的GPS模块]实际应用中，设备位置信息的来源，除了GPS和基站定位，还包括通过IP地址、RFID、WIFI和蓝牙MAC地址推断，以及用户主动输入。 N.3.2 Geolocation API从安全性考虑，地理位置信息属于用户隐私 ...继续阅读 (29)

       在如今机器的CPU都是多核的背景下，Node的单线程设计已经没法更充分的"压榨"机器性能了。所以从v0.8开始，Node新增了一个内置模块——“cluster”，故名思议，它可以通过一个父进程管理一坨子进程的方式来实现集群的功能。快速上手使用十分的简单，如下var cluster = require('cluster'); var http = require('http'); var numCPUs = require('os').cpus().length; // 获取CPU的个数 if (cluster.isMaster) { for (var i = 0; i < numCPUs; i++) { cluster.fork(); } cluster.on('exit', function(worker, code, signal) { console.log('worker ' + worker.process.pid + ' died'); }); } else { http.createServer(function(req, res) { res ...继续阅读 (28)

        最近读了Steve Krug的《Don’t Make Me Think》，这本书对于Web和移动可用性设计有着很有趣的见解。对于其他可用性设计的书来说，这本书更加的浅显易懂。 一、Don't make me think！！！        贯彻本书的一大定律就是：别让我思考！        作为这个信息爆炸的社会的一员，我们已经失去了耐心去仔细浏览Web或移动端页面内容的习惯。“扫描”，变成了人们使用网络的方式。中国传统观念对于“不求甚解”多含贬义，然而对于如今的我们，不求甚解已经成为了常态，那么如何让用户得到最舒服的体验呢？那就是不要让用户动脑思考。 二、那么我们应该怎样做呢？       首先，尽量利用习惯用法。例如我们的习惯阅读文字的方式是从左向右，如果网页文字方向是从右向左，那真的不失为逼疯处女座的一种好方法；人们见到红色的第一反应是禁止，而绿色是可以通过，如果页面的禁止或拒绝标志被用了绿色，处女座就又一次疯掉了。所以，使用习惯用法是最安全的手段。    &nbs ...继续阅读 (23)

本文主要阐述使用js实现思维导图的关键技术点，如果还不知道什么是思维导图的同学，请自行度娘。以下是demo和源码的传送门：demo：http://rockyren.github.io/mindmaptree/源码：http://github.com/RockyRen/mindmaptree/tree/master在源码中我使用了svg绘制思维导图。与canvas相比，svg将图像当成对象，我们可将思维导图中节点和线等图形表现为对象，而且svg更适合用于动态交互的应用下面介绍几个关键技术点： 子节点位置的重绘一个基本的思维导图工具应该拥有增加节点和删除节点的功能。在某个节点上增删节点时，为了使得所有子节点的高度相对于该节点垂直居中，都会重新渲染子节点的垂直位置。如图1所示，首先求得父节点的中心点F的坐标为(hfx, hfy)，设父节点与子节点的水平距离为interval，父节点的宽为parentWidth。作水平线段FC，C点的横坐标即为子节点的横坐标childX。如下图所示：为了让子节点间垂直隔开，每一个子节点上下都有补白，所以一个子节点所占的区域高度为该子节点的节点高度加上两个补白高度。迭代所有子节点，求取所有子节点的区域高度areaHeight，然后在线段FC的C点上作一条长度为areaHeight的垂直平分线AB，所有子节点的垂直区域都在垂直平分线AB内，这样可以保 ...继续阅读 (30)

写在前面这个东西其实是有价值的东西。因为在软体模拟、数学方程可视化、流体模拟、数据可视化等等方面都有其用武之地。如水的模拟： 心形函数方程转图像线性报表其原理都是通过三次贝塞尔曲线将有限个数的点平滑化。问题建模已知若干个点，绘制出该点连接的曲线。​<canvas width="480" height="480"></canvas> <script> function drawPath(path){ //实现 } drawPath([{ x: 50, y: 50 }, { x: 200, y: 100 }, { x: 250, y: 50 }, { x: 350, y: 150 }, { x: 370, y: 100 }, { x: 570, y: 200 }]) </script>这里实验平台使用浏览器环境，即Canvas相关API以及javascript语言。这里canvas的上下文对象拥有了bezierCurveTo方法，故免去了自己实现bezierCurveTo的一些事情。​context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);实现图解实现目标具体过程代码Vector2，一般用来表示向量 ...继续阅读 (26)

咳，以探索技术的精神进行一些猥琐的实现，先说明，如果你只想看最后乳摇的结果那就请ctrl+F4吧，因为网上有那些乳摇的APP，制作出来绝对比我这个初探的方法好，我这个只是介绍我实现乳摇的过程思路与方法。关于乳摇如何实现，我第一个想法是使用metaball，因为是两个球嘛，然而发现根本就不行，Fail。最终使用的是液化算法去实现。好了，下面是对液化算法的介绍。如果你从来不使用ps，暂时想不起来液化是什么不要紧，请看下图这个是采用液化使一只静态的小狗有了动的感觉总而言之，液化是使一张图片的部分进行平滑的有规律的变化，这个变化有扭曲的平移之感是如何实现的呢，来看算法，先给一张图局部变化以一个圈为变化环境，C点是圆心，r是半径，当C移动到M这个点时，U移动到X。通过以上这句话我们得出了这样的结论：液化的变化只在半径为r的圆内发生，距离圆心越近，变化越明显。这是不是和乳摇这一现象特别的吻合？下面是算法公式公式终于实现的是你知道X点的坐标，可以推算出U点的坐标，反之知道U点也可以推算出X的坐标怎么推算出来的这个我也不知道，需要结合圆的范围，进行插值处理，但是具体如何得到这个结论，感兴趣的同学可以阅读Andreas Gustafsson 的 Interactive Image Warping一文，这个公式就是从这而来 好了，接下来该码程序了乳摇首先你得有图var sImg = ...继续阅读 (23)

不作死就不会死， 不捣鼓就不会活 — via 菲利克斯·肖恩莱特什么是作死？作死就是不懂原理乱写代码，不懂环境乱配，不懂工具乱用，打掉一个 bug 再怀上一个 bug，伤元气瞎折腾。什么是捣鼓？捣鼓和作死相反，在解决问题时力求寻因导果，既能解决问题，又能学到新知识拓展新视野。在最近折腾 VPS 的时候，我就不断在作死，才捣鼓出了新乐趣，写下来和大家分享一下。作为一个没有服务器端编程经验的小前端，为何要去折腾 VPS 呢？因为能学到很多东西啊，举几个栗子:搭建个博客写点文章啊既然搭建博客了，那要搞域名啊、CDN啊、加缓存啊、打补丁啊、流量分析啊、性能分析啊、写主题啊、优化访问速度啊、提高 SEO 啊搭建个 VPN/shadowsock 配个代理锻炼锻炼身体又能科学上网啊，还可能省点钱啊哎呀好多操作都是 Linux 还是纯命令行操作的，能学到不少 Linux 知识啊女朋友不陪你折腾你还可以折腾 VPS 啊 从购买一个 VPS 开始要过情人节，首先你得上淘宝买个不会漏气的女朋友。同理，你想折腾 VPS 你得买个靠谱的服务器。比如，你想访问速度快一些，可以选择购买腾讯云或阿里云提供的服务器；如果你想更自由一些，可以选择国外 Linode 或者 DigitalOcean 等提供的服务器。选择腾讯云可以使用我们的推荐链接, 选择 Linode 则可以使用这个链接。腾讯 ...继续阅读 (23)

腾讯AlloyTeam开始社会招聘啦，想加入AlloyTeam的Web+（UI、JS、Server、Client）工程师们请抓紧！工作职责主要负责腾讯手机QQ、PC QQ中的Web业务开发。如果你热爱面向Web的开发工作，欢迎前来应聘，机会难得，各种挑战等着你～～岗位名称：Web前端开发工程师（T2-T3级别）岗位要求：计算机专业或相关专业大学本科以上学历，2年以上工作经验（如果你足够牛，可以尝试挑战一下这一条）。精通W3C标准的网站构建，有构建高性能的Web应用的经验。熟悉Web性能优化，有移动Web开发经验者优先。熟悉WebView性能优化，有相关终端开发经验者优先考虑。熟悉Javascript、OOP及主流js库，有框架开发经验者优先考虑。熟悉HTML5和CSS3等新技术。具有良好的代码风格、接口设计与程序架构。掌握至少一门服务器端编程语言对业界最新的前端技术和实现有浓厚的兴趣及深入的见解。逻辑分析能力强，善于沟通，较强的学习能力，具备良好的沟通能力和团队协作精神。工作职责：负责腾讯手机QQ、 PC QQ的Web前端开发构建前端生态的工具开发移动Web性能探索和调优其他Web相关开发工作地点：深圳腾讯大厦（总部）如果你相信自己，相信W3C标准，也相信爱情，请发送简历至：Kinvix[a]QQ.com ...继续阅读 (41)

来源：How fast are web workers?下一版本的 Firefox OS 移动操作系统将通过使用其多核处理器来充分利用设备的性能，JavaScript虽然在单线程上执行，但通过使用web workers可以实现代码的并行执行，这样将释放浏览器中任何可能阻塞主线程的程序，UI动画也将因此更顺畅的执行。web workers 简介有几种类型的web workers：Web workersShared workersService workers他们各自拥有不同特性，但有着相似的设计形式，worker中代码将在自己开辟的独立线程上执行，与主线程及其他worker并行执行，不同类型的workers维护着一个共同的接口。web workers专用的web workers将在主线程上被实例化，并且其他worker将只能通过它来进行通信Shared workersShared workers 允许同源中的所有页面或脚本(包含不同的浏览器标签, iframes或者其他 shared workers)之间进行通信.Service workers近期，Service workers 得到了大量的关注，他可以作为web代理服务器(开发者能够对页面请求进行控制)将内容传递给请求者(如主线程)。不仅如此，它还能够支持离线应用。Service workers是一个非常新的API，现在仍没有兼容 ...继续阅读 (28)

Angular2开发者预览版出来已有一段时间，这个以速度与移动性能为目的的框架到底如何，今天我们来尝试一下。在官网有一段号称5分钟入门的教程：quick start：https://angular.io/docs/js/latest/quickstart.htmlAngular团队在这个版本上所做的改变可以用激进来形容，我们可以看得到无论是在代码书写亦或是结构组织上都有了非常大的差异，那么，既然Angular1.x已经如此成熟了，那为何我们还需要Angular2这样大的改变呢？其实无论是Angular2还是ReactNative，他们都肩负了前端许多的愿景，既然目前的前端环境调优已经基本达到巅峰，那么从原生、另一门语言的角度去审视改良只是我们突破与超越的小小尝试而已。那么Angular2与1.x对比在写法与上手难度上到底有什么区别呢？下面我将用Angular2来制作一个Todo示例应用：在完成了初始化任务后，首先，确保我们的TypeScript编译监控处于启用状态，以下语句是作为ts文件修改编译监控：$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts 整理一下我们的思路，文件结构应该是这样的：我们看到了熟悉的app.js文件,这是以app.ts编译过后的产物，app.ts:///import {Compon ...继续阅读 (29)

起源众所周知，js是一门弱类型的语言，类型转换往往隐含在各种业务代码中，同时也埋下了不少的坑。比如以下代码// return string function getEnvVersion(){ return '1.1.1'; } // '1.1.1' > 0 => false, so nothing happen if(getEnvVersion() > 0){ // doSthAwesome(); }function size(obj){ return obj.length; } // uncaught error size(null);类似的情况数不胜数，通过jshint工具做一些编码规范可以规避一些问题，但由于js过于灵活，还是有许多无法检查到的隐患。FLOW于是flow出现了。flow是facebook推出的js类型检查工具，可以在编码时检查到类型错误并做出提示，避免将问题带上线。安装目前flow仅支持MacOS与Linux，可以直接在官网wget最新的二进制包到本地运行。MacOSMac用户推荐使用brew install flow完成安装。快速上手只需要在待检查的js文件头部添加一行注释/* @flow */，然后在同一目录下运行flow check即可。代码中增加类型检查，即可通过flow的检测了。详细使用类型标注正如前文所说，js的类型转换很 ...继续阅读 (30)

不得不聊到的重构简介要实现软件演化基本准则，最关键的策略就是重构，Martin Fowler将其定义为”在不改版软件外部行为的前提下，对其内部结构进行改变，使之更容易理解并便于修改“。复用的理由重复的代码，几乎是代表着对最初设计彻底分解方面的一个失误。无论何时，如果需要对某个地方进行修改，你都不得不在另一个地方进行完成同样的修改，这样你就陷入了两线作战的境地。重复的代码同样违背了代码哲学DRY原则：”Don’t Repeat Yourself“复用的例子举个例子，现在很多第三方库已经默认支持不同规范的引用，开放给第三方使用的组件能兼容不同的规范。然而很多时候如果我们引用第三方组件或者自己的组件时，并没有采用模块化开发抑或单一支持一种模块化，通常我们自己需要包装一下支持模块化引用依赖，如下示例：使用seajs规范进行模块化加载，所以定义的模块都是以这样的形式加载，该模块c依赖a,bdefine(['./a', './b'], function (require, exports, module) { // dosometing });那么，在服务器做node直出的时候，如何使用同一个文件进行复用呢;(function (root, factory) { if (typeof module === 'object' && typeof module.ex ...继续阅读 (28)

为什么是2.0?Abstract 1.0去哪了？1.0就在这里Abstract 1.0并非凭空产生，而是来自兴趣部落这样千万级访问量大型项目的最佳实践，经过了千万客户端的检验，也证明了Abstract是一款优秀的框架。Abstract 2.0是否是轮子？用过Abstract的同学都知道答案是否定的，就拿当下最流行的框架来举例，使用了AngularJS、React之后，是否就可以不用Abstract了，答案也是否定的，Abstract解决的问题的层面是高于AngularJS和React的，在抽象层面上Abstract更高于AngularJS、React。更为简单的叙述是，AngularJS、React会帮你写业务逻辑么？肯定不会，但Abstract会帮你写业务逻辑，这就是Abstract和其他框架的区别所在.如果React宣称自己处于抽象层面的V(view)层，那么Abstract是处于C(controller)层的框架Abstract为兴趣部落这样大型的项目解决了什么问题？Abstract带来的优势是很可观的统一风格的代码清晰的逻辑解决代码复用与耦合的问题快速开发页面Abstract 怎么去构建页面？我们来做一个对比，看普通的写法是怎么做的，用Abstract是怎么做的假设我们来完成部落头部的信息的渲染，普通的写法可能是这样的var renderTop = function(){ ...继续阅读 (23)

通信是发送者通过某种媒体以某种格式来传递信息到收信者以达致某个目的（摘至维基百科）。前两天为了练习react，自己写了如下一个Demo，功能很简单，展示学生成绩列表，支持按性别和姓名筛选。效果如下：从上面的效果图，我们也可以看到如下的组件树结构：StudentScoreTable有三个子组件：GenderFilter, NameFilter, ScoreTable。其中，ScoreTable又包含若干个子组件ScoreItem。从功能上，我们知道：当选择性别后，要对ScoreItem做筛选当输入姓名后，要对ScoreItem做筛选当同时选择性别，输入姓名，两个筛选条件对ScoreItem生效点击某ScoreItem的删除按钮后，删除此ScoreItem也就是说：当GenderFilter发生改变（change）时，ScoreItem要能感知到这个变化并做出相应反馈（进行筛选）当NameFilter发生改变时，ScoreItem也要能感知这个变化并做出相应反馈当某ScoreItem删除后，可能StudentScoreTable, GenderFilter, NameFilter要做出相应反馈，即以后筛选，少了一个ScoreItem下面是我的第一版本实现// 测试数据 var _score = [ {name: '张三', gender: '男', chinese: 85, m ...继续阅读 (28)

不得不说的废话随着前端工程化的推进，相信越来越多的项目都用上了自动化构建。对前端构建来说，使用最多的莫过于grunt和gulp。本文的主角是gulp，所以花一两句话来介绍gulp还是有必要的。gulp是一款基于stream的前端构建工具，由于底层使用stream，可以将多个任务无缝串连在一起，相比使用临时文件的grunt要快不少；同时也不用像grunt一样写一大堆配置文件，每一个任务都可以可编程的来完全控制逻辑。gulp比grunt“快”这是公认的事实，这里不再过多比较两者之间的差异，还是那句话，各有千秋吧。gulp 4.0的变化扯完了废话，开始进入正题。gulp团队大概在两个月前提交了4.0分支，新版本带来了新的api，新api给任务流程控制带来了“革命性”的进步。但新版本并未提交到npm，可能现在连alpha都算不上吧，不过还是可以先进行体验的。安装gulp 4.0想体验4.0只有通过github安装，执行以下两条命令即可在本地畅爽地使用gulp 4.0了。npm install gulpjs/gulp#4.0 -gnpm install gulpjs/gulp#4.0 --save-devgulp 4.0相对以前的版本发生了不少变化使用新的任务系统bach，替换了老版本使用的orchestrator也许会更快些？实际上gulp已经很快了，除非是超大型项目，否则几乎不用担心gu ...继续阅读 (30)

CSDN原文链接：http://www.csdn.net/article/2015-07-17/2825243-alloy-team-leehey 摘要：深JS大会近日在深圳举办，涵盖了JS领域众多热点话题，很多专家的精彩分享更是引起参会者的诸多思考，如赫门演讲中提出的“每18至24个月，前端都会难一倍”。本文来自腾讯AlloyTeam李成熙，分享了他参会的所见所感。JS中国开发者大会于7月11-12日在深圳成功举办。该大会号称JavaScript和Node.js领域含金量最高的技术分享大会，聚集了来自国内外20多位讲师及大量JS技术爱好者，几乎涵盖了JS领域的所有热点话题。会后，腾讯AlloyTeam李成熙特别撰写了该文章，分享了他参会的所见所感。“每18至24个月，前端都会难一倍”（注：2015深JS大会上，赫门在《前端服务化之路》主题演讲中说的一句话）。难，是前端发展史偶然中的必然。但难，也造就着前端当下的繁荣。Ryan Dah之所以选择用Javascript作为Node.js的基础语言，主要是因为它是单线程的，没有服务器I/O，没有历史包袱，有较低的门槛和比较良好的社区（更多内容可见：Node.js Interview: 4 Questions with Creator Ryan Dahl）。这看似是偶然，但实际上正是Javascript的这些优秀特性必然被历史选择，承担推 ...继续阅读 (31)

虽然标题是画椭圆，但是我们先来说说Canvas中的圆相信大家对于Canvas画圆都不陌生oGC.arc(400, 300, 100, 0, 2*Math.PI, false);如上所示，直接调用API就可以了，但是计算机内部却是使用光栅学，利用bresenham算法画圆的，这个我们放到最后来说，先说说利用圆的参数方程画圆circle(oGC, 400, 300, 100); function circle(context, x, y, a) { // x,y是坐标;a是半径 var r = 1/a; // ①注意：此处r可以写死，不过不同情况下写死的值不同 context.beginPath(); context.moveTo(x + a, y); for(var i = 0; i < 2 * Math.PI; i += r) { context.lineTo(x + a * Math.cos(i), y + a * Math.sin(i)); } context.closePath(); context.fill(); }原理是什么，相信三角函数不错的童鞋理解起来很容易的，如果不知道的话，注意注释①，我变化一下r的值，相信就立竿见影了~r和2*Math.PI配合就是圆的精细程度，在半径为100的时候，r取1/ ...继续阅读 (24)

场景描述有时候我们会碰到这样的任务场景，需要在一个界面上展示，许多图表内容，而获取图表数据的CGI做得非常原子化，也不方便更改，那么只能发很多个请求来拉取数据，展示图表，大致像下面的界面。或者有时候，希望一系列函数按照一定顺序自动执行，但里面内嵌各种回调，完全不知道函数何时执行。可能不得不使用标志位来记录执行阶段。(当然可以使用promise,这里是尝试给出另外一种解决方案和思路),这样代码看来一团糟，作为有处女座潜质的程序员多少有些纠结。背景交代完毕，现在是正题，小技巧分享。其实呢，我们需要的只是一个有加载顺序的队列来完成任务。但是这里有个思维难点是程序执行流程并非线性推进，而是通过事件推进，不符合常规的线性思维方式。我就想了一种可以让代码看起来更线性的一种方案.代码如下:var queuePool = (function(){ var pools = [] , isRunning = false ; function walk(){ var runner = pools.shift(); if( runner ){ runner( walk ); }else{ isRunning = false ; } } return { ...继续阅读 (19)

效果展示 实现原理利用HTML5的canvas，将解锁的圈圈划出，利用touch事件解锁这些圈圈，直接看代码。function createCircle() {// 创建解锁点的坐标，根据canvas的大小来平均分配半径 var n = chooseType;// 画出n*n的矩阵 lastPoint = []; arr = []; restPoint = []; r = ctx.canvas.width / (2 + 4 * n);// 公式计算 半径和canvas的大小有关 for (var i = 0 ; i < n ; i++) { for (var j = 0 ; j < n ; j++) { arr.push({ x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r }); restPoint.push({ x: j * 4 * r + 3 * r, y: i * ...继续阅读 (22)