本文翻译自We have a problem with promises，同时也为原文题目，翻译时重新起了一个题目并且对原文有删改。各位JavaScript程序员，是时候承认了，我们在使用promise的时候，会写出许多有问题的promise代码。 当然并不是promise本身的问题，A+ spec规范定义的promise非常棒。 在过去的几年中，笔者看到了很多程序员在调用PouchDB或者其他promise化的API时遇到了很多困难。这让笔者认识到，在JavaScript程序员之中，只有少数人是真正理解了promise规范的。如果这个事实让你难以接受，那么思考一下我给出的一个题目：Question：下面四个使用promise的语句之间的不同点在哪儿？1234567891011doSomething().then(function(){return doSomethingElse();})；doSomethin().then(functiuoin(){doSomethingElse();});doSomething().then(doSomethingElse());doSomething().then(doSomethingElse);如果你知道这个问题的答案，那么恭喜你，你已经是一个promise大师并且可以直接关闭这个网页了。但是对于不 ...继续阅读 (54)

我跟你说，我最讨厌“简介”这种文章了，要不是语文是体育老师教的，早就换标题了！Decorators是ECMAScript现在处于Stage 1的一个提案。当然ECMAScript会有很多新的特性，特地介绍这一个是因为它能够在实际的编程中提供很大的帮助，甚至于改变不少功能的设计。先说说怎么回事如果光从概念上来介绍的话，官方是这么说的：Decorators make it possible to annotate and modify classes and properties at design time.我翻译一下：装饰器让你可以在设计时对类和类的属性进行注解和修改。什么鬼，说人话！所以我们还是用一段代码来看一下好了：1234567891011121314151617181920functionmemoize(target, key, descriptor){letcache =newMap();letoldMethod = descriptor.value;descriptor.value =function(...args){lethash = args[0];if(cache.has(hash)) {returncache.get(hash);}letvalue = oldMethod.apply(this, args);cache. ...继续阅读 (60)

作为一个前端，不可避免同时与三个语言打交道：JS、CSS 和 HTML。而 HTML，超文本标记语言，是其中可编程性最弱的，一直以来得到的关注都较少。加上浏览器对 HTML 逆天的容错支持，即使是错误百出的文档也可以在浏览器里边表现得中规中矩。这样的背景下，绝大部分被产出的 HTML 代码都存在着各种各样的小问题，比如缺少必要的元信息（meta），比如混乱的 class、id 或属性的取值格式；这些问题或影响页面在不同浏览器下的表现，或增大了页面的开发、维护成本。因此，选用一个合适的工具对 HTML 代码进行质量控制会是一件很有意义的事情。本文选择了 Bootlint、AriaLinter、htmllint、HTMLHint 及 htmlcs 这五个目前最活跃的相关项目进行对比。除此之外还存在如 tidy、W3C/Mozilla HTML validator 等工具，但它们专注于 HTML 规范，几乎不涉及代码风格上的检查，这里就不做比较。对比角度将主要包括以下几个方面：使用及配置规则实现及自定义性能亮点为了后续说明的便利，这里先对语法风格的规则进行简单的分类，第一类包括attr-value-double-quotes（使用双引号包围属性值），max-length（限制单行最大长度），tag-pair（要求需要显式闭合的标签显式闭合）等；第二类包括script-in-tail（Ja ...继续阅读 (49)

前端模块化背景在大部分单页式应用中，前端代码都是以 MV* 的结构来组织的，好处自然不必多说。在开始一个项目时，我们往往会将项目的业务功能纵向切分成多个子业务功能， 以模块的形式分配给团队各个开发人员，以达到最大的并行开发。随着业务的发展，新的项目也越来越多，我们会发现很多新的项目和现有的项目是有不少功能交集的。从业务角度来看，一个项目就是由各个模块组合而成：A 项目由 m1, m2, m3 组合而成， B 项目则可能由 m1, m3, m4 组合而成。在业务上将各个功能拆分明确后，很明显的 m1, m3 两个功能在 A 项目都是存在的，从工程角度来说，开发 B 项目的时候如果能够直接将A项目已经开发完毕的 m1, m3 直接复用， 那么必然是能够带来很明显的人力节约。接下来就是从技术上去实现功能的复用，对于后端来说，通常的做法是服务化接口，而对于前端来说，我们目前的方案正是前端模块化：将功能打包为模块，发布至内部中央仓库， 使用方通过自己的方式（如：npm, bower, link[import], 百度的 edp, fis 等）导入模块包使用。按照前端模块化的思路，开发新项目时，开发人员的工作从原来的开发所有功能变为：接入已有的功能模块，开发不存在的功能模块。前端模块化中遇到的技术障碍唯一不变的就是变化 – by 马云这句话同样适用于技术领域，如果一个功能模块可以无缝引入，而无 ...继续阅读 (33)

Content-Type在开发baidubce-sdk的时候，遇到了在不同浏览器（主要是 Firefox 和 Chrome）下调用xhr.setRequestHeader设置Request Header之后，内部的处理逻辑有一些细微的差别，导致baidubce-sdk无法正常的工作。12345varxhr =newXMLHttpRequest();xhr.setRequestHeader('Content-Type','foo/bar');// 当Method !== 'GET' 的时候xhr.open('POST','',true);xhr.send('');对于上面这段儿代码，因为我们显式的设置了Content-Type，所以我们期望的是服务器收到的Request Header中Content-Type应该是foo/bar，实际上在Firefox里面会自动添加charset=UTF-8，也就是服务器得到的信息是foo/bar; charset=UTF-8因为根据 ak 和 sk 计算签名的时候，Content-Type作为其中的一个因子参与计算的。Firefox下面的这个问题，导致 client 和 server 计算出来的签名不一致，所以 server 就拒绝了某些请求。Content-Length第二个兼容性的问题是关于Content-Length的，因为baidubce- ...继续阅读 (36)

自鸿蒙初判，Brendan Eich10 天捏出 Mocha 之后，即便进化成 EcmaScript，这个语言依旧毁誉相随。那些经过重重劫难，侥幸渡劫成功的苦主标识了诸多天坑（见JavaScript Garden） —— 当然，你也可以称之 feature。据无责任乱猜，Douglas Crockford 也没少踩坑，于是才有了蝴蝶书《JavaScript: The Good Parts》，下雨天与JSLint一起使用会更配哟。《JavaScript: The Definitive Guide》 V.S. 《JavaScript: The Good Parts》时至今日，代码的静态质量检查在项目质量保障方面的重要性与必要性已毋庸置疑。越来越多的开发者意识到了这一点，纷纷在项目构建流程或者源码控制系统中添加静态检查的hook。本文将依时间顺序，选出JavaScript史上的主要几个Linter作横向比较，最终属意谁家，那就见仁见智了。JSLintJSLint的名字源于早期用于检查C语言代码质量的Lint，老道把认为非Good Parts、有陷阱的部分全部报 warning，而且绝不允许妥协（当前版本已经允许部分的可配置项），固执得令人心疼。虽然这个在 2002 年的 JSLint 代表着先进的方向，但是前端的发展一日千里，严格不妥协的JSLint开始阻碍前端的发展 —— 例如函数内变 ...继续阅读 (33)

作为《嵌套条件的重构》的姊妹篇，补充说明箭形代码的缺点，并以函数分解的方式扁平化箭形代码。原文：http://blog.codinghorror.com/flattening-arrow-code/经常看到这种代码：12345678910111213141516171819202122232425262728if(rowCount > rowIdx) {if(drc[rowIdx].table.columns.contains("avalId")) {do{if(attributes[attrVal.attributeClassId] ==null) {// do stuff}else{if(!Array.isArray(attributes[attrVal.attributeClassId])) {// do stuff}else{if(!isChecking) {// do stuff}else{// do stuff}}}rowIdx++;}while(rowIdx < rowCount &&parseInt;(drc[rowIdx],10) === Id);}else{rowIdx++;} ...继续阅读 (30)

用户总是希望在窗口明显的地方方便找到自己想要的操作项，例如停留在浏览器窗口顶端的菜单栏，筛选栏等。所以我们会把用户最常用到或者我们希望用户注意到的内容一直展现在窗口的可视区域，让用户能够一眼就看到。这当中常需要用到一种页面滚动然后元素固定在窗口的某个位置的布局方式（下面简称粘性布局）。要实现这种粘性布局，我们常常都是通过js来模拟，实现方案是通过js监听window的scroll事件，当需要固定的元素滚动到窗口顶部时，把元素的position属性设置为fixed，否则，取消fixed，简单的js代码如下：123456varnav =document.querySelector('.nav');varnavOffsetY = nav.offsetTop;functiononScroll(e){window.scrollY >= navOffsetY ? nav.classList.add('fixed') : nav.classList.remove('fixed');}window.addEventListener('scroll', onScroll);上面的实现在桌面浏览器的表现还是挺好的，但是在移动端浏览器上粘顶的效果就显得不那么平滑了。特别是在iOS设备上，iOS下的浏览器会在页面滚动的时候，暂停所有js的执行，直到滚动停止才会继续去执行js（注意暂停了 ...继续阅读 (36)

某天早上阳光明媚，挺风和日丽的，刚嚼一口早餐就被同学问到一个奇怪的问题，大概情况是这样的：12345varstr ='7172328d6ddf0296e7e7d4a8';varn =parseInt(str,16);// false ...console.log(n.toString(16) === str);一个巨大的16进值字符串转化成数字后再转化成对应的字符串就不相等了，实际输出的值还差得蛮远的… 这个问题的第一反应就是精度丢失啰，不过同学们可不是这么好打发的，都不说一个为什么怎能了事呢？那就让我们稍微挖一挖，看看究竟是为什么吧～根据规范JavaScript 中的数字都是以64位双精度浮点类型存储，遵循IEEE 754标准。双精度浮点是个什么货？简单的说就是用科学记数法的形式来表示数字，比如数 N 可以表示为 x * 10 ^ y ，相应的，13000 就可以表示为 1.3 * 10 ^ 4，通过这种方式可以使用有限的存储空间表示很广的值域，比如限定 x 与 y 是两位数，那么这四位数字可以表示的数值范围是 0 ~ 9.9 * 10 ^ 99（99后面98个零 够大吧…）。但同时有限的存储空间必定会导致精度缺失，比如 123 这个数虽然在能被表示的数值范围内，但是却不能被精确的表示，只能近似的表示为 1.2 * 10 ^ 2。这其实就是之前那个问题的答案：在将字符串转化成数字 ...继续阅读 (33)

一直以来我们实现边框的方法都是设置border: 1px solid #ccc，但是在retina屏上因为设备像素比的不同，边框在移动设备上的表现也不相同：1px可能会被渲染成1.5px, 2px, 2.5px, 3px....，在用户体验上略差，所以现在要解决的问题就是在retina屏幕实现1px边框。如果你去google类似问题，诚然会找到所谓的”答案“，然后很开森的用到项目中了。运气好的话，Yeah成功模拟1px了，运气不好了可能遇到各种奇葩的表现让你抓狂。这篇文章总结了目前常用的模拟1px的方法，并分析各个方法的利弊。实现方案1、软图片‘软图片’，即通过CSS渐变模拟，代码如下：1234567891011121314.retina(@top: transparent,@right: transparent,@bottom: transparent,@left: transparent,@w:1px) {@mediaonly screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2) {border: none;background-image:linear-gradient(180deg,@top,@top50%, transparent ...继续阅读 (14)

本文翻译自Ariya Hidayat的Hardware Accelerated CSS: The Nice vs The Naughty。感谢Kyle He帮助校对。每个人都痴迷于60桢每秒的顺滑动画。为了实现这个顺滑体验现在用的最流行的一个做法就是使用『CSS硬件加速』。在一些极端例子中，强制使用translate3d意味着大大提高应用程序的性能。现代浏览器大都可以利用GPU来加速页面渲染。在GPU的众多特性之中，它可以存储一定数量的纹理（一个矩形的像素点集合）并且高效地操作这些纹理（比如进行特定的移动、缩放和旋转操作）。这些特性在实现一个流畅的动画时特别有用。浏览器不会在动画的每一帧都绘制一次，而是生成DOM元素的快照，并作为GPU纹理（也被叫做层）存储起来。之后浏览器只需要告诉GPU去转换指定的纹理来实现DOM元素的动画效果。这就叫做GPU合成，也经常被称作『硬件加速』。不幸的是，浏览器是一个很复杂的软件（Firefox有几百万行代码）。因此一句简单的『使用translate3d来提高性能』并不能囊括所有的情况。如果碰巧有效那不过是瞎猫碰上死耗子而已。所以有必要知道更多的运行机制，才能更好地处理实际情况。想象使用GPU加速的动画就像是Vin Diesel（速度与激情的主角）开着Dominic标志性的汽车 —— Dodge Charger。它的定制900 hp引擎可以让它在一瞬 ...继续阅读 (38)

ECMAScript6已经于近日进入了RC阶段，而早在其处于社区讨论时，我就开始一直在尝试使用ES6进行开发的方案。在Babel推出后，基于ES6的开发也有了具体可执行的解决方案，无论是Build还是Debug都能得到很好的支持。而在有了充足的环境、工具之后，我们面临的是对ES6众多新特性的选择和分析，以便选取一个最佳的子集，让我们可以享受ES6带来的便利（减少代码量、提高可读性等）的同时，也可以顺利运行于当前以ES3-ES5为主的浏览器环境中。经过分析后，本文试图对ES6各个特性得出是否适合应用的初步结论，并一一解释其使用场景。ES6的特性列表选自es6features。★★★ 推荐使用★★ 有考虑地使用★ 慎重地使用☆ 不使用特性推荐程度arrows★★★classes★★★enhanced object literals★★★template strings★★★destructuring★★default + rest + spread★★★let + const★★★iterators + for..of★★generators★unicode☆modules★★module loaders☆map + set + weakmap + weakset★★proxies☆symbols★subclassable built-ins☆promises★★★math + num ...继续阅读 (25)

关于web字体图标，市面上已经有一些好的在线工具来管理和生成，iconfont和icomoon都可以将svg图标转换成font图标以便在网页上使用。但是如果你想要更多：ttf、woff、eot、otf统统拿来用，svg、图片统统可导入，图标效果实时可调整，只需要在线动动鼠标，就可以完成呢。 那就需要一个好用的在线font编辑工具，FontEditor，你需要的东西都在这里。为什么会出现FontEditorEverything Happens for a ReasonFontEditor会出现只是因为我比较懒。如果我想用webfont做图标，又不想了解一大堆专业术语，又不想一次一次的导入和导出，又不想一次一次的调整fontsize以适应图标变化，又踏破铁鞋无觅处，那只能自己整一个了。FontEditor是一款纯前端字体编辑和管理软件，支持字体项目管理，支持导入ttf、woff、eot、otf格式字体，支持svg和图片导入，支持生成ttf、woff、eot、svg格式字体，支持批量调整字形和单个字形轮廓编辑，支持实时预览，支持实时同步字体到本地。如何使用svg制作webfont打开chrome浏览器，输入http://font.baidu.com/，创建名为fonteditor（看个人喜好）的项目，开始制作字体。在主菜单点击导入->导入svg按钮，打开文件选择框，拖选svg文件将svg ...继续阅读 (38)

最近微软出了个Visual Studio Code，听说很diao，尤其是对JavaScript的补全支持很令人惊艳！如果你是一个vim党，那么请淡定！在JavaScript开发过程中，使用vim内置的ins-completion再加上一些插件，我们同样可以获得很牛逼的completion支持！ins-completionvim其实已经提供了很好的代码补全支持。整行快捷键：文件名快捷键：当前文件中的关键字快捷键：或complete选项所指定的范围中的关键字快捷键：或、跟、类似，但是查找范围更广，不局限于当前文件。如上图所示，我打开两个文件，在src/echarts.js中补全src/component.js中的关键字，就可以使用或。具体查找范围由complete选项所规定，详见:help E535。dictionary中的关键字快捷键：假设你有一个javascript.dict文件，其内容如下：1Promise Proxy let class extends设置:set dictionary+=/path/to/es6.dict之后就可以用来补全这些关键字了。omni completion快捷键：这个是基于语义上的补全，vim会猜测光标之前的关键词，然后给出补全。更多补全方式，请看:help ins-completion。YouCompleteMe按 ...继续阅读 (26)

维恩图（venn），也叫文氏图，用于显示元素集合重叠区域的图示。我们准备在echarts中提供这类图表。第一期支持两个集合的韦恩图，后期准备支持三个集合乃至多个集合的韦恩图准备使用zrender框架，画出两个circle使之重叠，即可产生一个韦恩图。但是，互相重叠的部分会相互遮挡，（如下图）解决方案是对每个circle都调整透明度至50%。venn 透明度确定位置下面最困难的就是在确定一个圆的位置的情况下，根据两个集合的大小与交集的大小，确定第二个圆的位置。对于这一点，我进行了几个尝试。尝试一————估值由于韦恩图本身可以看做一个非精确图标。所以，猜测了一个值。即两个圆心的距离的表达式是1varcoincideLengthAnchor = ((r0 + r1) /2) *Math.sqrt(data[2].value) /Math.sqrt((data[0].value + data[1].value) /2);两个圆心的距离与两圆半径均值之比等于交集与两集合均值的开方之比。 但我们知道，同等半径、边长等情况下，圆的面积最大。所以这种方法计算的距离是偏小的，公共面积是偏大的。 而且当一个集合为另一个的子集时，误差过大。（如下图）venn 子集不精确尝试二————计算既然估计是不可行的，那么我就采取计算的方法。凭借我深（xue）厚（zha）的数学功底，应该能算出来圆心的距离。 省略1 ...继续阅读 (26)

如果有人看过我写的《AMD系列三部曲一二三》，就会知道我是个唐僧。这次，唐僧想说说ETpl。ETpl是一个JavaScript的模板引擎。JavaScript最广泛被应用于浏览器端，通常JavaScript模板引擎的作用就是生成HTML串。ETpl当前的版本是3.0，也就是说，算上最初设计时，它经历了3次技术上比较大的选型。今天，ETpl号称是一个强复用、灵活、高性能的JavaScript模板引擎，有很多别人有或者别人没有的功能，这些都是what。而我一直认为why比what更重要，了解背后的原因、了解思考的过程比知道是什么有更大的收获，所以这次想要啰嗦的，是ETpl在走到今天的过程中，那些what背后的why。如果你能忍受我的八婆把它看完，应该多少能有点收获，越到后面技术点越多噢。因为本篇比较长，开始先求个star支持下呗，反正不花钱1.0时，我们做了这些事情ETpl是没有独立的1.0版本的。在2010年初，我们为一个SPA应用做重构的时候，开发了ER - Enterprise RIA框架的1.0版本，当时ER框架自带了一个模板引擎，这就是ETpl的1.0。当时的想法很简单，我们要解决下面这些最基本的问题：在JavaScript里面写HTML片段的字符串是不人道的，应该写到另外的文件中有的HTML片段是需要被复用的同样的数据在一个片段中可能会重复出现多次Command语法我们认为 ...继续阅读 (31)

ECharts-X 发布啦！3D 的 Glob Visualization，3D 的 markPoint， markLine，艺术的风场洋流可视化，一切都有可能！ECharts the next generation ！好奇的小伙伴们快去官网看看吧！ECharts-XECharts，缩写来自 Enterprise Charts，开源的商业级数据图表库，来自百度EFE数据可视化团队。相信一直关注大数据，特别是关注数据可视化的朋友对 ECharts 已经并不陌生了，据最近的一份中国 Github 年度报告里的统计显示，ECharts 已经成为了 Github上Star 数最多的中国开源项目，也是Github Explorer Data Visualization 板块上第一个也是目前唯一一个来自中国的开源项目，在这样一个精专的领域内近6000的star已经足以说明这条小鲸鱼的影响力。而且不仅是在国内， ECharts 还受到了国外技术团队，领域专家们的关注，ECharts Datamatic Edition（英文版的百度图说）的出现，twitter、Hacker news、 Medium Daily Digest 等媒体上也越来越多的看到ECharts的影子。2013年6月30日发布1.0以来，1年多时间来 ECharts 已经迭代发布了20多个版本，就在一周前（1月30号）EChar ...继续阅读 (27)

ECharts的创始人，Kener-林峰在网易云课堂上发布了《ECharts基础教程》视频，定价99元。是的，你没看错，这次不是免费的。在EFE，我们要求所有业务无关的技术产品必须开源。我们知道即使开源也可能没什么人会和你一起玩，但开源代表的是我们开放的态度，欢迎别人一起玩，欢迎大家用，更欢迎大家监督，这对我们自己也是一种鞭策。所以ECharts一开始就是开源的，而且是BSD协议，可以免费用在任何地方。相比之下，HighCharts商业使用是要收费的，这是越来越多的用户开始使用ECharts的原因之一。但是更重要的，ECharts能有今天的成绩，是因为林峰。作为林峰的战友，我目睹了他在这两年多来的努（wan）力（ming）。我经常能够看到他晚上两点im工具的头像还是亮的。有时候他会凌晨三四点钟梦到一个feature，兴奋得睡不着，又为了不打扰到家人，就开车到公司来干。这时候公司的地下停车场还没开门，车就只能停在地上。我相信这是梦想和他本身的热情。和很多技术geek不同，他很注重技术产品的API易用性。大家在谈论一个lib怎么拆分才能更好扩展的时候，他会更关注提供的API是怎样别人用的才更舒服。我也看到很多技术产品本身很厉害但是例子和文档都不全导致感兴趣的人无从下手，这些脏活累活的周边重要度甚至超过了产品本身，但技术人员往往排斥这些事情。他和别人不同，他花费了很大的时间和精力去制作了 ...继续阅读 (29)

在五一劳动节的前一天，ECharts发布了一个非常2的版本，2.2.2。在本版本中，我们一共做了以下重大升级：新增韦恩图(venn)及Treemap发布 ECharts 在线构建工具新增对数轴并且修复了一些反馈较多、优先级较高的问题：增加了大规模折线图添加数据抽希策略配置。解决原有抽希策略导致的数据精度缺失问题symbolSize 支持通过数组分别设置宽高修复mac safari饼图性能问题支持 z, zlevel 的配置韦恩图韦恩图（维恩图），也叫文氏图，用于显示元素集合重叠区域的图示。诞生于1880年，韦恩（Venn）在《论命题和推理的图表化和机械化表现》一文中首次采用固定位置的交叉环形式用封闭曲线（内部区域）表示集合及其关系的图形。韦恩图可以通过访问ECharts官网的示例了解如何使用ECharts制作韦恩图Treemap这是一个中文名很长的图表类型，比如叫做：矩形式树状结构绘图法，或矩形式树状结构图绘制法，或者树状结构矩形图绘制法，或者甚至称为树状结构映射。其实指的是一种利用嵌套式矩形来显示树状结构数据的方法。Treemap可以通过访问ECharts官网的示例了解如何使用ECharts制作Treemap。ECharts在线发布工具我们提供了最新的ECharts在线发布工具，方便用户可以自由的选择，仅仅打包你在项目中使用到的图表及组件代码。减少整体需要加载的ECharts文件 ...继续阅读 (32)

谈到颜色，前端工程师首先想起的便是基于 RGB 的 16 进制颜色代码，这也是我们工作中最常用到的数值表示方式。但是当我们的谈话再深入一些，话题远不止这些：前端：「我在 hackathon 时做了个网站，配色怎么看都丑，你帮我看看？」设计：「这俩颜色不搭，光晕现象都出来了，还有把这里的饱和度调低一点，亮度调高一点。」前端：「……」（你™在说什么！）这时你应该去向设计小伙伴要最熟悉的 16 进制颜色代码了，但被抱怨缺乏设计感的挫折还是有一点的。想要和小伙伴愉快的交流下去，我们要了解颜色的「基础知识」，还要对「色彩空间」、「颜色搭配」、「颜色与情感」等各个方面都有些了解。作为一个边看书边查百科的伪设计师，我想通过这个系列与大家一起从颜色开始，培养点设计感。本篇我们一起复习一下基础知识。原理我们在中学的物理课上学过，颜色本质上是特定范围的电磁波（如下图1）。我们看到的色彩，是电磁波谱的一小部分但从生理来看，人们能看到颜色，是因为人类每只眼球视网膜大约有 600-700 万的视锥细胞，他们是处理可见光谱颜色的感光器2。 人类的视锥细胞有三种，分别是短波（S 或蓝色）视锥细胞、中波（M 或绿色）视锥细胞、长波（L 或红色）视锥细胞；这些视锥细胞响应的组合，让我们能够分辨出大约一千万种颜色。无障碍我们能够看到色彩，是我们的身体硬件附带了相应功能的传感器。其他生物与我们的硬件构造不同，看到的世界 ...继续阅读 (25)

Fontmin是一个纯 JavaScript 实现的字体子集化方案。提供了ttf子集化，eot/woff/svg格式转换，css生成 等功能，助推 webfont 发展，提升网页文字体验。See the PenFontmin Exampleby Firede (@firede) onCodePen.Why Fontmin浏览器的季风已撩拨起 webfont 的热浪，中文字体却依旧寂寞如雪。与西文字体不同，由于字符集过大，中文字体无法享受 webfont 带来的便利。为了让中文字体也乘上这道风，我们需要对其进行min:子集化：提取字体中的部分字型，最小化打包字体webfont 格式化：利用@font-face，把自定义字体嵌入到网页中，支持ttf、woff、eot、svg等格式已有工具sfnttool.jar(Java)，Fontforge(Python)，Font Optimizer(Perl)，为什么还要造轮子呢?Any application that can be written in JavaScript, will eventually be written in JavaScript. – Jeff Atwood噗，开个玩笑。靠谱的说，是这样的：专注，面向前端工程师，专注字体的 web 应用工程化，自动化开发流程，告别刀耕火种的人肉操作社区，依靠社区的力量，可以有更多的 ...继续阅读 (66)

先说结论：在项目模块拆分的时候，先考虑使用了 git submoudle 的方案，因为遇到一些问题，又研究了一下 git subtree 的方案，最后发现 git subtree 的成本更高，最后还是选择了 git submodule 的方案git submodule 最初作为项目模块拆分时候的方案，在使用的过程中发现了几个问题：同步代码比较麻烦冲突解决起来不方便（因人而异）有时候不确定是否应该PUSH本次的改动（主要是 new commits 的状态）代码的重复性很高，占用硬盘（各个模块依赖的 common 和 dep 的体积很大，重复了很多次）查询了一些相关资料之后，看到有同学提到使用 git subtree 的一种解决方案，因此在bce-console/console上面弄了一个subtree的分支尝试了一下。首先，我们还是把 bce-console/console 作为整个项目的集合来进行管理。第一步：检出代码12git clonehttp://git.server/bce-console/console.git all-bce-consolegit checkout subtree此时我们发现，这个分支上面基本上什么都没有，src目录是空的第二步：添加一些 remote123git remote add x-dephttp://git.server/bce-console ...继续阅读 (37)

移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。iOS下的 Fixed + Input BUG现象让我们先举个栗子，最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局，可能使用如下布局（以下仅示意代码）：1234567891011121314151617fixed定位的头部header>可以滚动的区域内容在这里...main>fixed定位的底部提交button>footer>body>对应的样式如下：12345678910111213141516171819202122232425header,footer,main{display:block;}header{position:fixed;height:50px;left:0;right:0;top:0;}footer{position:fixed;height:34px;left:0;right:0;bottom:0;}main{margin-top:50px;margin-bottom:34px;height:2000px}然后看起来就是下面这个 ...继续阅读 (22)

CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭。网上已经有不少对比目前最主流的三个预处理器 Less、Sass 和 Stylus（按字母顺序排名）的文章了，但是似乎都不是很详细，或者内容有些过时。下面我会更详细地探讨一下这三种预处理器的特性和它们的差异。下面主要会分为如下几方面来讨论：基本语法嵌套语法变量@import混入继承函数逻辑控制事先声明一下，平时我在开发中主要使用的是 Less，所以可能对 Sass 和 Stylus 的熟悉程度稍差一些，比较时主要参考三者官网的语言特性说明，有一些正在开发的功能可能会遗漏。本文中对 CSS 语法的话术与 MDN 的CSS 语法介绍一致。基本语法Less 的基本语法属于「CSS 风格」，而 Sass、Stylus 相比之下激进一些，利用缩进、空格和换行来减少需要输入的字符。不过区别在于 Sass、Stylus 同时也兼容「CSS 风格」代码。多一种选择在 ...继续阅读 (22)

关于字体，长久以来，前端工程师们 进行了各种探索：图片，siFR，Cufon，@font-face…@font-face似乎是个不错的方案，Adobe TypeKit,Google Fonts都在使用这个方案。但是，中文字体 因为字符集巨大，浏览器、操作系统国情 等原因，发展受到了很大限制。所以，时至今日，大多数网站的中文字体还是上图片。图片字体的悲伤：SEO 不友好，不具备的可编辑性，不支持Accessibility原则 … 差评！随着PC的更新换代，操作系统的升级，移动设备的崛起，@font-face兼容性已经不足为患。ttf,svg,eot,woff总有一款适合您。那么剩下的主要问题就是中文字符集过大了。以上，我们的解决方案就是：基于edp和fontmin，按需提取字型，多格式转换，自动化构建字体。首先，你要有个edp1$ npminstall-g edp示例1234$ gitclonehttps://github.com/junmer/edp-build-fontmin-demo# 下载 示例项目$cdedp-build-fontmin-demo# 进入 示例项目 路径$ npm install edp-build-fontmin# 安装 edp-build-fontmin 依赖$ edp build-f# 开始构建配置1234567varFontProcessor =re ...继续阅读 (40)

嵌套的条件判断会导致方法的正常执行路径不明晰，使代码可读性下降。本文提供一种对嵌套条件重构的方法，能有效提升代码的可读性。原文：http://sourcemaking.com/refactoring/replace-nested-conditional-with-guard-clauses条件判断会导致方法的正常执行路径不明晰。特例一概使用Guard Clauses。1234567891011121314151617181920functiongetPayAmount(){varresult;if(_isDead) {result = deadAmount();}else{if(_isSeparated) {result = separatedAmount();}else{if(_isRetired) {result = retiredAmount();}else{result = normalPayAmount();}}}returnresult;}改成：123456789101112131415functiongetPayAmount(){if(_isDead) {returndeadAmount();}if( ...继续阅读 (23)

在很多 OO 的语言中，都提供了某种便捷的语法糖去调用基类中被子类覆盖的方法，比如在 Java 中：123456789101112publicclassA{voidmethod(){System.out.println("A");}}publicclassB{voidmethod(){super.method();System.out.println("B");}}在 Python 中：12345678class Adef method():print('A')class B(A)def method():super(B, self).method()print()这种调用方式的好处在于：基类名称变化后，子类不用多处的修改，同时语义也比直接引用父类方法更加清晰。在 JS 中，我设想了以下方式的语法调用：1234567891011121314151617varA =function(){};A.prototype.method =function(){console.log('A#method');};varB =function(){};B.prototype.method =function(){this._super(argume ...继续阅读 (22)

前提为了不被喷得太惨，给标题加了这么多的限制定语也是相当不容易的了。此文讨论的是我所处的环境下对JavaScript构建的一些简单探索，因此有相当多的前提限制。首先，何为大型。从我们的系统来看，20多个业务模块，近100个页面组成的单页系统，对应的业务源码代码量如下：对应的依赖库，除underscore和moment外均为公司内部库，代码量为：其次，所谓的“模块化”指我们使用AMD进行构建，使用符合社区AMD标准的Loader进行模块的加载。而“PC 端单页式商业内容管理系统”则代表着系统的不少特性：使用是相对强制的，对用户来说这是一项工作，而不是爱用不用的用户产品。商业公司通常拥有较好的网络环境，面向PC设计更使得带宽不是一个需要着重考虑的因素。单页系统使得所有功能被包含在一个HTML页面内，不存在页间的跳转，因此资源不以页面为单位进行切分。为何要构建第一个问题是，AMD有自然的按需加载的属性，按需加载也是一直被提倡的一种模式。那么，如果不进行任何的构建，让模块自然地按需加载，是否可行？如果看了这个图，你还相信按需加载的话，可以停止此文的阅读了：简单来说，按需加载与构建并不冲突，我们不能将所有资源最细粒度地使用按需加载进行管理，必要的构建来减少资源请求是必要的。随之而来的，我们会考虑标准的代码合并方案。相当多的站点会将所有的JavaScript合并为一个文件，这也是最简单粗暴有效 ...继续阅读 (26)

ESL是一个浏览器端、符合AMD的标准加载器，适合用于现代Web浏览器端应用的入口与模块管理。通过右键另存的方式可以下载ESL:压缩代码 (Compressed)源码 (Source)今天，ESL release 了 2.0.4。到这里本应该完了，不过好像内容少了点。为了凑数，还是多扯几句吧：为什么使用ESL而不用RequireJS很官方的答案是，ESL比RequireJS：体积更小 (Smaller)性能更高 (Higher performance)更健壮 (More Robustness)不支持在非浏览器端使用 (Browser only)依赖模块用时定义(Lazy define)作为ESL的主要开发者，我个人的答案是：上面的吹牛都不是吹牛，都是真的。蚊子再小也是肉，有更小性能更高的干嘛不用？反正换个Loader没成本的咯，就改个script的src，分分钟的事。不行再换回来也是分分钟的事。只有选Framework选对象这种事情，选错了替换成本才会比较高。诚信是做人之本，欺瞒消费者是令人痛恨的行为。所以在这里要说一下：RequireJS提供了一些非AMD标准的功能，比如data-main、比如可以直接require一个url。ESL是不支持的。如果你用到这些功能，并且觉得这些功能很有用的话，还是不要换了。2.x和1.x相比是breaking change吗有的ESL 1.x的使 ...继续阅读 (16)