通常情况下其实遇不到style-loader与iframe纠缠的情况，不过由于自己所做项目的特殊性，所以不得不经常与iframe打些交道，并且往往遇到问题能参考的资料也非常有限。 style-loader是webpack的常用插件，作用是将CSS注入进DOM。正因其注入CSS是根据所处运行环境决定，所以如果页面中存在iframe的话，那么就会存在样式注入点与期望不同的情况。由于页面代码可能无法调整执行环境，而样式也无法再不同文档环境相互影响，所以有必要调整注入点。根据情况的不同，运行于父窗口向子iframe注入样式，以及运行于子iframe反过来向父窗口注入，甚至是多层嵌套iframe的情况等都可能遇到(至少我都遇到了)。 在保证同源的大前提下，好在大部分的样式注入库都提供了挂载点变更的配置（比如更早前自己遇到的JSS的修改注入点），甚至是运行时方法，style-loader也不例外，提供了相关配置insert： https://github.com/webpack-contrib/style-loader#insert。由于是所用于打包流程所以也只有配置可用。…
CSS in JS这个命题，是在内部小组的一个简单分享，现在单独拿出来整理一下。 自React流行以来，混写HTML和JS乃至CSS的做法变成日常，虽然CSS在react里只有一个简单JS实现，但只用JS解决所有问题的思路也逐渐为人们所接受。在过往的数年中，各种CSS in JS的框架也层出不穷，这里简单梳理一下，毕竟自己也是个和CSS有着相当缘分的人:) CSS & CSS in JSCSS最初被设计为简单直观的描述性DSL，10年前甚至部分是有设计师直接使用的。不过web的持续发展不可避免的让前端细分到技术领域，我也算是一路看着CSS各种演变，从最开始的避免多类简单直接，到有多类，有原子化描述，有CSS-reset，Normalise，Minimum Page，…
生成器(Generator)一词在JavaScript中常常受到误解，一些细微的概念差别的积累，慢慢导致了不少理解上的混淆。它时而在指一个函数，时而又在代指迭代器(iterator)。那么它在概念上到底是指什么？ 去前些时候在团队里做了一个redux-saga源码浅读的分享，由于redux-saga的实现机制核心就是Generator，为了写PPT我打算去抄个比较正式的定义，然后就又去翻了一下手边的两本参考书，阮一峰的《ES6入门指南》和Zakas的《深入理解ES6》，不过这次阅读却很快发现了后者的内容存在翻译上的错误。 ECMAScript6同时还引入了个生成器对象，它可以让创建迭代器对象的过程变得更简单。--深入理解ES6 这上面是摘抄自深入理解ES6里的中文版原文，乍看之下好像没什么问题，但其实严格意义上讲是错的，“生成器对象”概念上错了，因为联系上下文，创建迭代器对象的是“生成器函数”。难道Zakas写错了？…
今天写的书叫做《编写可测试的JavaScript代码》，英文原版名称《Testable JavaScript》，作者Mark Etban Trostlter，译者徐涛老师。我买到的是2015年2月第一版，印数3000册，字数31万。从出版信息可以看出这本书还是相当偏门的。好在时间上并不算很老，并且可以说是JavaScript里相当少见的专门谈论测试的书籍。…
一般而言，所有写JS的人都有一个通常的概念：“不要用with语句”。这个准则毫无疑问一直是正确的，但要说为什么的话，并不是每个人可以回答的很好。是否去回答这个为什么并无多大意义，因为只须记住结果“不去用”就完全足够。然而去深入的理由还是有的，刚好最近有人这么问起我...刚好自己想总结一下...刚好这个题目作为草稿在博客后台躺了很久... with语句 with的初衷是为了避免冗余的对象调用： foo.bar.baz.x = 1; foo.bar.baz.y = 2; foo.bar.baz.z…
最近整理了一下收藏夹，发现了很多有趣的陈年旧物。好几百个链接，很多都已经过期了，相对来说依旧是国外的链接存活率要高的多，可见国内网站生存条件之不易。用以前团队同事的话来说，这是“清理体内残留的代码”。 今天要写的是IBM developerworks在2010-05-04发布的JavaScript 框架比较，到现在整整7年之久。毫无疑问2010年的我们还在挣扎在IE的泥潭里，如今回过头来看其实时间过得也相当快。当时这篇JavaScript 框架比较是相当全面的，作者从各个角度详尽对面了当时流行的JavaScript框架： Prototype jQuery YUI ExtJS MooTools 每一个都是前端耳熟能详的名字，但如今有些却已罕有听闻。截止本文发布，简单对比了一下Github的数据： Prototype jQuery YUI…
three.js是一个JavaScript的3D库，可用于构建WebGL应用。2011年写过一篇《一个二进制的Web新世界》，从那时起就一直断断续续有接触这方面的资料。本文是three.js的一些入门，并用其实现一个飘雪的效果。 其实，对于web应用来说，3D一直以来都较少使用，不过2016年被称为是VR年，作为网页端的WebVR也趁此机会迅速发展了起来，而其核心库正是three.js。three.js的官方文档和Demo目前已经较为完善，由于一直在迭代演进，API的变化还是比较明显的，所以很多网上的例子相当多已经过时，市面上的书目也是如此。当然THREE渲染器运行后，会在控制台输出版本信息，当前是THREE.WebGLRenderer 83dev，后面的列子也会以当前的这个版本作为环境。这里也不讨论浏览器的兼容性，借以现代浏览器为准。…
《PPK谈JavaScript》(ppk on JavaScript)的作者ppk, Peter-Paul Koch一直是我所尊敬的大师，他的网站quirksmode.org也一直必备的参考资料。这也是为什么当我突然看到柜子里还有一本他早期的书的时候，尽管其中的内容已经相当的过时，但我还是拿起来打算好好看一遍。 ppk的这本书成书在2006年左右，前端刚刚兴起之时，内容相对于当时而言是相当不错的，只是放在现在难免显得过时无用。印象里这是淘宝UED早期翻译的第一批书之一，当时在图书馆里翻了几页买下后就一直没看过...就这么在书架上躺了快9年了吧，着实惭愧。回想起来，相比Zakas的系统化的《JavaScript高级程序设计》，ppk的这本内容就太散了，读起来有点像看博客的感觉，应该也是当时为什么自己放之于柜的主要原因吧。 翻开书，就仿佛是翻开历史的感觉...可能10年的时间对于互联网而言真的是相当漫长。如果是现在，…
