FED

这篇文章翻译自JulianShapiro的CSSvs.JSAnimation:WhichisFaster?。JulianShapiro也是Velocity.js的创造者。这是一个非常高效、简单易用的JS动画库。他在Web动画方面有很高的造诣。Javascript动画怎么可能总是和CSStransition一样快，甚至更快呢？到底是什么秘密呢？Adobe和Google是怎么做到让他们的富媒体移动网站的速度和nativeapp媲美的？...

本文主要介绍JWT（JSONWebToken）授权机制在前后端分离中的应用与实践，包括以下三部分：前后端分离是一个很有趣的议题，它不仅仅是指前后端工程师之间的相互独立的合作分工方式，更是前后端之间开发模式与交互模式的模块化、解耦化。计算机世界的经验告诉我们，对于复杂的事物，模块化总是好的，无论是后端API开发中越来越成为规范的RESTfulAPI风格，还是Web前端越来越多的模板、框架（参见MVC，MVP和MVVM的图示），包括移动应用中前后端天然分离的特质，都证实了前后端分离的重要性与必要性（更生动的细节与实例说明可以参看赫门分享的主题淘宝前后端分离实践）。...

什么是模板引擎，说的简单点，就是一个字符串中有几个变量待定。比如：通过模板引擎函数把数据塞进去，那这玩意儿有什么作用呢？其实他就是一个预处理器（preprocessor），搞php开发的童鞋对Smarty必然是十分熟悉，Smarty是一个php模板引擎，tpl中待处理的字符通过数据匹配然后输出相应的html代码，加之比较给力的缓存技术，其速度和易用性是非常给力的！JSTemplate也是一样的，我们的数据库里保存着数以千万计的数据，而每一条数据都是通过同一种方式输入，就拿上面的例子来说，我们不可能在数据库里存几千条"Hei,myname..."，而是只保存对应的name和age，通过模板输出结果。...

相信很多人都用过seajs、requirejs等这些模块加载器，他们都是十分便捷的工程管理工具，简化了代码的结构，更重要的是消除了各种文件依赖和命名冲突问题，并利用AMD/CMD规范统一了格式。如果你不太明白模块化的作用，建议看看玉伯写的一篇文章。为什么他们会想到使用模块化加载呢，我觉得主要是两点。...

querystring指的是url上?符号后面、#符号前面的的字符串。一串示例的querystring：即：注：文章代码仅为示例，如decodeURIComponent、空值、+符号等情况未考虑在内。...

单例模式的意思是只需要实例化某个类一次，它的方法也比较简单，通过判断某个类是否已经被实例化了，再返回该值。可以通过各种方法来实现单例模式，下面我们采取以下这种实现方式：通过以上代码，我们简单地实现了该模式。在实际情况中，我们可能会需要创建一个组件，这个组件是唯一一个，比如遮盖背景。在这样的情况下采用单例模式是非常明智的选择。...

外观模式是为外部提供简单的接口一种方式，由于模块内部方法庞杂，不能一一对外公开，那么我们需要一个统一的和简单的对外方法(API)来调用这些内在的函数。这时候我们可以用到外观模式：在module中，所有的私有方法都不需要公开，我们只是暴露了一个f方法，作为桥接的接口，f里面会执行调用各个内部方法。我们不需要关系_q、_p的执行内容，只需要关心f这个公开的方法。在这里，f就是作为一个简单的api来访问这些方法的。...

观察者模式在设计模式中被重点提到，因为它应用的场景非常多，而且在模块化设计当中扮演着非常重要的角色。MVC模式中最底层的就是观察者模式，当下流行的javascript框架backbone就是很好地运用该模式的框架之一。观察者模式为我们提供了一些思路，在处理模块或者组件的之间的关系的时候，为了使它们之间的耦合度降低，我们可以采用这种模式思维来编写代码。简单的讲，观察模式的基本原理就是当一个目标需要告诉观察者发生了什么事情的时候，它会向观察者广播一个通知。下面我们来简单的代码阐述一下该模式。...

所谓的工厂模式，顾名思义就是成批量地生产模式。它的核心作用也是和现实中的工厂一样利用重复的代码最大化地产生效益。在javascript中，它常常用来生产许许多多相同的实例对象，在代码上做到最大的利用。比如现在有需求是项目中需要创建若干的组件，这些组件分门别类，但是又同属于某些类别下。这个时候我们不需要直接使用new运算符来单个创建，通过简单的代码封装，可以实现创建不同的组件实例。下面我们取简单的例子，创建不同的物种实例。...

在一些大的项目中经常使用到模块，在这里，我们将了解一下什么是模块模式。模块模式最简单的方法大家一定会用过，如下所示:这样一个对象的直接量其实就已经是可以表示一个模块的定义了。但是这里会有些问题：a对象里面的b和c属性是公有的，也就是说我们可以在外面任意改变其值。而模块化设计要求的是我们尽可能的实现模块中的值和方法都不被外部改变，形成独立或者说是私有的环境。所以我们可以这样写:...

四个轮子，一个方向盘，有刹车，油门，车窗，这些词首先让人联想到的就是一辆汽车。的确，这些都是是一辆车的最基本特征，或者是属性，我们把词语抽象出来，而听到这些词语的人把他们想象陈一辆汽车。在代码里面也是这样的，为了将所有的车辆统一描述，我们将车的特征抽象出来，作为一个理念，就像柏拉图说的那样，接下来，我们要这个理念描绘他，让人来认识。这也就是程序中的实例化:接下来我们来实例它，让柏拉图的理念在现象世界中得到展示:...

在《javascript设计模式》中，作者并没有向我们介绍策略模式，然而它却是一种在开发中十分常见的设计模式。最常见的就是当我们遇到一个复杂的表单验证的时候，常常需要编写一大段的if和else逻辑代码，这些代码维护起来非常麻烦，但是麻烦的事情远远不止于此。通常一个项目中不止涉及单个的表单或者数据的认证，他们往往成群结队地出现。所以一开始为了他们而编写的if和else逻辑代码不仅会显得非常臃肿，而且随着项目的扩展，使你的代码或变得越来越黏糊，就像。。。。。。。是的，就像意大利面条一样！为了改动小小的一个逻辑——姓名从以前的三个字的限制变成现在四个字限制——，为了这个，你必须把整个项目的所有关于验证的界面都查找替换个遍。但是如果你一开始采用合理的设计模式来设计你的代码的话，或许结果就并不是在漆黑的夜苦苦地加班了。在这里，我们以一个简简单单的数据类型为例，来了解一下我们的策略模式是怎么样帮助我们工作的。...

ECMAScript6是下一代Javascript标准，这个标准将在2015年6月得到批准。ES6是Javascript的一个重大的更新，并且是自2009年发布ES5以来的第一次更新。它将会在主要的Javascript引擎实现以下新的特性。ES6允许使用“箭头”（=>）定义函数。在语法上类似于C#、Java8和CoffeeScript的相关特性。它们同时支持表达式和语句体，和函数不同的是，箭头在上下文中共享相同的this关键字。...

Ifitistoostrong,thenyouaretooweak.随着ES2015的到来，JavaScript引进了许多新特性，很多很强大的特性完全可以弥补JS本身语法上的弱点，比如让很多初次尝试JS的程序员感到不习惯的变量提升问题、没有块级作用域问题等问题。ES5增加了strictmode（严格模式），现在V8又实现了一种新的模式——strongmode（强制模式）。strongmode是strictmode的升级版，在语法要求上更严格了，同时正因为这些严格的要求，让开发者得以规避语言本身一些糟粕或者让人困惑的地方。...

某天早上阳光明媚，挺风和日丽的，刚嚼一口早餐就被同学问到一个奇怪的问题，大概情况是这样的：一个巨大的16进值字符串转化成数字后再转化成对应的字符串就不相等了，实际输出的值还差得蛮远的…这个问题的第一反应就是精度丢失啰，不过同学们可不是这么好打发的，都不说一个为什么怎能了事呢？那就让我们稍微挖一挖，看看究竟是为什么吧～...

数值缩写是将长数值转换成短数值的表示。之前，这里的缩写单位弄混淆了，详见下表：通过while循环来相除1000步进值，直到相除次数到达缩写长度。...

难点在这个正则上。?=术语叫“先行断言”。x(?=y)称为先行断言（Positivelook-ahead），x只有在y前面才匹配，y不会被计入返回结果。上面的代码使用了先行断言，b在c前面所以被匹配，但是括号对应的c不会被返回。...

在使用webstorm编辑器时，你不必写gulp、grunt配置文件来监听css预处理文件来实时编译，也不必安装其他watch插件，webstorm自带就有了。打开配置（Tools-FileWatchers）就可以见到了，点击“+”号就可以新建监听配置了。...

从给定的字符串里随机取出字符，拼接出6位颜色值。随机数转换成十六进制，然后截取6个字符长度。如果有更好的方法，欢迎提供哦。...

#代码一行代码判断IE浏览器版本使用方法：通过IE独有的条件注释来判断版本。须知：...