FED

开始这个话题之前，我们先看一下下面的几个例子：结果有时候会让我大吃一惊，这是为什么呢？今天就和大家讨论一下JavaScript的对象转换。先让我们了解一下JavasScript转换的“原始类型(primitivevalue)”：...

Express是目前node社区最主要的Web框架，目前已经到了4.x版本。与3.x版本比，4.x版本拥有一个全新设计的Router模块，开发者可以更方便的对middleware进行隔离与重用。在express3.x版本中，一个控制器往往不是业务逻辑的全部，中间件才是业务逻辑的大头。例如一个处理用户订单的服务，往往验证用户权限、读写数据库等主要逻辑工作都在中间件中就完成了，而控制器所做的大部分工作就是拼数据给视图(view）。...

用Node搭建一个Web服务是一件很轻松的事情，例如经典的HelloWorld例子，三行代码实现一个Web服务:但是，要做一个稳定可靠的线上Web服务，并不简单。例如异常处理、日志、部署、服务更新等等。本文主要讨论NodeWeb服务的更新。在Web服务更新的过程中，有两个主要步骤，停止旧服务以及启动新服务。如果不能妥善的停止旧服务，那么对于已经在使用旧服务的用户，就会看到一个出错页面。比如这个BadCase:...

在许多面向对象语言中（Java，Python），都在语法层面的基础上提供了面向对象编程的特性支持，包括最基本的继承与多态，以及一些语法糖特性：引用父类，调用父类同名方法。在JavaScript中，并没有像Java,Python这样在语法层面提供类式继承，而是借鉴了Self和Scheme的设计原则，提供了原型链的语法特性。在JavaScript中，继承的实现正是基于原型链特性。本文首先介绍了两种基于原型链的继承思想，接着将详细描述ria框架体系中oo库中面向对象特性的实现方案，包括基础特性：类创建，继承，语法糖模板：自身类引用，父类引用，父类同名方法调用。...

最近在公司的一个移动端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()方法来检测：...

CSS语法flex-flow属性是flex-direction和flex-wrap属性的速记属性。flex-direction属性规定灵活项目的方向。flex-wrap属性规定灵活项目是否拆行或拆列。...

一个Flexbox布局是由一个伸缩容器（flexcontainers）和在这个容器里的伸缩项目（flexitems）组成。Flex容器不是块容器，因此有些设计用来控制块布局的属片在Flexbox布局中不适用。特别是：多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上没有作用。...

通常被我们用来干嘛呢？比如：height：*px;line-height:*px;是这样的么？我们常常用它来对文字进行居中。为什么这样就能居中呢？因为行高是元素基线之间的距离，行高会减去字体的高度然后上下平分去建立一个行内框（inlinebox），如果这个时候高度和行高一致，自然就体现为居中。那么它有什么可研究之处呢？比如：有时候设置了line-height却仍然不能将内容居中怎么办？设置了vertical-align：middle;没用是为什么？...

当我在查阅每个浏览器的发展过程时，我感受到了Mozilla的倔强，IE的恐惧，Opera无可奈何下的不甘心，感受到了Safari在他的家族培养下一定会更加优秀以及Chrome这位技术先锋的美好前景。balabala………了一大堆，没办法，因为我是妹子，所以就爱关心“邻里之间的杂事”~Piu——切入正题。浏览器的主要组件有以下几部分：...

很久很久以前，93年，在我一岁的时候，有一个浏览器名叫NCSAMosaic，诞生在美国，他是第一个普遍使用和能够显示图片的浏览器（百科上说，他不是第一个能够显示图片的浏览器而是第一个普遍大众接受的浏览器。那第一个呢？魏培源发明的ViolaWWW）。不过这个浏览器也只是发行了三个版本，直到1997年1月是Mosaic的最会一个版本。...

人物：前端实习生「阿树」与切图工程师「玉凤」事件：设计师出设计稿，前端实现页面玉凤：树，设计稿发给你啦，差那么点像素，就叼死你┏(￣へ￣)=☞阿树：~(>_<)~毛问题噶啦~...

irefox和Opera有一个新特性，名叫“往返缓存”（back-forwardcache，或bfcache），可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发load事件。尽管由于内存中保存了整个页面的状态，不触发load事件也不应该会导致什么问题，但为了更形象地说明bfcache的行为，Firefox还是提供了一些新事件。...

像素（Pixel）对于WEB开发者来说很是熟悉，在PC互联网时代没少与其打交道。进入移动互联网之后，随着移动设备屏幕的解析度越来越高，衍生了一些关于屏幕和像素的一些新概念，比如DPI，DP，PT，Retina，4K等等，本文对这些概念做一个简单的介绍。DPI（DotsPerInch）是印刷行业中用来度量空间点密度用的，这个值是打印机每英寸可以喷的墨汁点数。计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的原子单位不是墨汁点而是像素，所以就创造了PPI（PixelsPerInch），这个值是屏幕每英寸的像素数量，即像素密度（Screendensity）。由于各种原因，目前PPI(主要是iOS)和DPI(比如在Android中)都会用在计算机显示设备的参数描述中，不过二者的意思是一样的，都是代表像素密度。...

所谓的keep-alive，就是当有多个http请求同一个域名时，如果每个请求都创建一个tcp链接发送接收数据，然后断开，然后再创建，就会导致过多的创建tcp链接开销（在第一部分中有描述）。http中，可以通过connection:keep-alive，似的后面的http请求可以复用之前请求的tcp链接，继续发送数据。...

首先缓存有很多种，这里大致介绍下和前端有关的缓存，着重说下http协议相关的缓存。接下来详细解释下http的缓存机制。http主要是通过时间和内容两种办法来处理缓存的。首先，client发起一个http请求之后，server会在http响应头里面告诉client，这个请求能否被缓存。这里有两个响应头可以用来做这件事儿。...