FED

在这么一个高墙林立的地方，不会翻墙肯定是不行的，所以这次就来看看chromeextension如何简单的控制chrome代理的。这是文档里的方法，很简单，当然要控制代理，还得加一些东西，比如value对应的值config.mode表明使用的是pac_script，什么是pac_script，可以看看维基百科：代理自动配置，可以把它简单的理解为一个js函数:FindProxyForURL(url,host)，也就是pacScript.data对应的值。它虽然是一个js函数，但是是以字符串的形式传给它的。具体情况如下：...

chrome中的本地存储其实也是用的HTML5中localStorage，唯一区别是chrome扩展有自己的localStorage，它属于这个扩展，而不属于一个域名。得用这一点可以很好的处理扩展自己的一些数据，而不受访问网站和域名的影响。localStorage是HTML5特性，所以有些浏览器不一定支持，不过我们这里讲的是chrome扩展，所以完全不用担心这个问题。如果想在WEB页面上使用，那就要检查一下是不是支持它...

chrome在一次更新之后，出于安全考虑，完全的禁止了content_script从https向http发起ajax请求，即使正常情况下也会在console里给出提示。这对于WEB来讲是好事，但对于扩展来讲就是坏事。平时可以很容易的请求数据，现在就没那么容易了。好在chrome还提供了background_script，利用content_script和background_script之前的通信来实现ajax的请求，就跳过了chrome的这一限制。...

首先说明，chrome的扩展并不它的插件，网上很多说写插件，其实都是说的扩展。写扩展并不复杂，只要根据chrome提供的一系列的API进行就可以实现很多的功能。只是对API的学习是有代价的，加上国内访问chrome官网文档并不顺利。虽然360提供了一个翻译文档，而且有不少例子，但它的内容还是太少，有些问题它仍然没有涉及。所以，如果是做一个简单的应用没有什么问题，但实际的项目开发往往得不到有用的介绍和解释。...

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

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

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进值字符串转化成数字后再转化成对应的字符串就不相等了，实际输出的值还差得蛮远的…这个问题的第一反应就是精度丢失啰，不过同学们可不是这么好打发的，都不说一个为什么怎能了事呢？那就让我们稍微挖一挖，看看究竟是为什么吧～...

<picture>标签提供可声明式的方式来加载图片。网页开发者不必非要用CSS和JS来处理响应式的图片加载。用这种方式的好处是提高加载速度—尤其是在移动端时网络情况不好的时候。随着新的属性srcset、sizes加入到<img>标签，<picture>标签给网页开发者更多的灵活性来定义图片的源。书写清晰的标记来让浏览器检测到下面不同的标记，忽略还是加载，来支持响应式设计并提高加载的时间：...

找了个简单的网页来录制network：上面的图是谷歌官网加载的部分截图，可以看到谷歌已经在使用http/2了，其实当时没看到这个protocol字段的时候，一直纳闷为什么keep-alive都是空的情况下，请求是如何保持TCP复用的。所以答案就在此了吧。参考h2-14。看下百度的加载过程：...

在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSSFont-Size:emvs.pxvs.ptvs.percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。真是进也难，退也难呀。最近在学习em的相关知识的时候，无意之间让我拾得一宝，就是使用rem来设置Web页面的字体大小。让我一下子就来劲了，一口气看完并测试了一回，还真是爽歪歪的呀。师傅说好东西不能吃独食，于我就在这里给大家吹吹这个从没见过的REM。...

最近在公司的一个移动端WEB产品中使用了React这个框架（并不是React-Native），记录一下在开发过程中遇到的各种问题以及对应的解决方法，希望能对读者有所帮助。React不多做介绍，就是Facebook的一个开源JS框架，专注的层面为View层，不包括数据访问层或者那种Hash路由（不过React有插件支持），与Angularjs，Emberjs等大而全的框架不同，React专注的中心是Component，即组件，React认为一切页面元素都可以抽象成组件，比如一个表单，或者表单中的某一项。...

那天朋友分享了一个面试题，自己当时不会，代码如下：很简单，alert的结果是1。但是题目却是另外一个说法，能不能通过r.m获取到u?当时听到这个问题也凌乱了，压根就不知道啥意思，通过r.m获取到u？...

当我们在日常开发中需要上线压缩文件时，通常的做法是整个目录的全部压缩一遍。当项目很大或者入口很多的时候，压缩这个过程非常痛苦，尤其是uglifyjs的压缩大文件速度让人发指。那么，如果想节约时间，最好的办法就是只压缩合并后有内容变更的文件。...

如果你根本不想往下看，就直接戳这个库：https://github.com/indexzero/node-portfinder代码很少，关键原理如下：找到一个端口不断试错，直到可用。看起来貌似有点不优雅啊……其实获得可用端口号有2种场景：...

html5的出现，让前端人员眼前一亮，大喊方便的同时，也空前重视标签使用的语义化，人们恨不得一下就去改变由div+css所带来满眼的div。新增的结构性标签有很多，比如header、nav、footer、aside、section、article等。但有个问题令不少人犯难，前面的几个都还比较好理解，后面两个到底是什么意思呢，如果按照直译过来的意思。section：“部分”，article：“文章”。这显然无法很好的去区分，为什么呢，因为“部分”这个词儿，意思太模糊，“文章”里面也可以有“部分”，“部分”里面也可以有“文章”。权威指南里是这么进行说明的。...

2级DOM定义了一个createRange()方法，如果是按照DOM此标准的浏览器（IE并不是支持此标准的，但是IE里的属性或方法却远比标准中定义的多得多），它属于document对象，所以创建一个range对象要这样做：如果你要检测你的浏览器是否支持此标准Range对象，可以用hasFeature()方法来检测：...

htmlcssjavascript可以算是前端必须掌握的东西了，但是我们的浏览器是怎样解析这些东西的呢我们如何处理htmlcssjavascript这些东西来让我们的网页更加合理，在我这里做了一些实验，总结起来给大家看看。最简单的页面...

这些都可以做调试输出，区别是：所以跟网站重构要求html语义化类似，当我们的调试输出比较多时，根据实际场景使用不同类型的输出函数能使我们的输出更有条理。值得一提的是console.error，我们使用它做输出除了可以输出错误信息外，还可以输出调用这个函数的一瞬间的调用栈！这无疑给我们调试带来很多方便（当然你也可以用js断点一步步跟踪），而这是console.log所不具备的。除了console.error，还有一个函数console.trace也可以打印出调用一瞬间的调用栈，不过它的输出样式和位置就跟console.log一样了：...