FED

ETHANMARCOTTE的文章《响应式Web设计》讲述了在可伸缩的网页基础上使用MediaQuery来实现响应的响应式设计。而本文试从前端角度整理了近年来可供实现"可伸缩基础"和"响应“的前端技术。http://jsdm.com/anon/paint/eiscz...

你可能知道事件断点，那你知道ajaxxhr断点吗？xhr：XMLHttpRequest。先看图通过监听xhr的断点，可以轻而易举的找到事件的触发点和调用堆栈，这一点和上一节说到的DOM断点几乎是一样的，只不过此处换成了xhr了而已。...

先说说啥是Api吧，以下摘自百度百科：API（ApplicationProgrammingInterface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。其实对于我们接触的web端开发而说，Api就是协商好的一种规范，大家都按这个规范做事，这里主要针对前&后端交互的接口进行说明～...

escape,encodeURI,encodeURIComponent之间的关系及使用场景你清楚吗？escape()函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。string必需。要被转义或编码的字符串。...

url、href、src之间的关系及使用场景你清楚吗？统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名，如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源标志符语法看上去如下：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志...

为了不被喷得太惨，给标题加了这么多的限制定语也是相当不容易的了。此文讨论的是我所处的环境下对JavaScript构建的一些简单探索，因此有相当多的前提限制。首先，何为大型。从我们的系统来看，20多个业务模块，近100个页面组成的单页系统，对应的业务源码代码量如下：...

你是否会遇到，当前页面内容变化了，但是却不知道哪个脚本影响了它？神奇的chrome控制台可以帮到你。子节点（内容、属性）修改通知如上图，添加了body节点的子节点修改通知。...

接着第一节，这节我们来看下，编译阶段的dom,文本节点处理，我归为编译的第一部分，现在看下面完整例子：htmljavascript上节说了，newVue的初始化，这节来说下，$mount方法的第一部分，为方便阅读，代码已经进行过删减。...

首先看最简单的一个twoway:上面是一个最简单的双向绑定，今天要说的就是“初始化的过程”，这个过程相对比较简单，主要有以下：以下代码解释:与双向绑定关键为最后2个:...

为了看css3过渡动画和帧动画效果，你是不是需要把时间改成很长：现在不需要啦，只要你打开chrome浏览器的控制台：如上图，打开浏览器的控制台，点击图示按钮，拖动滑块即可。该动画速度将会影响css3中的过渡动画和帧动画。...

经过这一段时间项目的洗礼后，我明白很多时候项目的技术要求是跟项目的阶段挂钩，不要第一眼看到别人项目代码不好看就说不行，可能我到人家项目当时的阶段做的还不如人家，当然事实也正是如此。项目的阶段深深的影响到你的技术成本和技术的层次，这也要多感谢@文斌，这时候我已经深深明白境界就是境界的意思。ps:针对中小型项目，我的理解...

在前端交互中难免会与用户交互，比如评论啊，用户中心啥的都需要用户是已登录状态，然后传统的登录方式是在需要登录的地方加判断，如果没登录则跳转到登录页，并在登录成功后返回当前页，功能是实现了，但整个交互略繁琐，如果说用户是在评论呢，输入了100个字，然后一点发布就跳转了，然后发现登录后字没了，是不是会哭，然后去12305举报呢？（ps：当然可以把这些数据存下来，但整个过程还是繁琐）再后来很多大站都使用弹出层的登录方式，比如百度，土豆，然而在前2年（差不多），那时候土豆做的特帅气，于是我就萌生一种想法，我也做一个这样的模块方便全局使用（2012年）...

chrome控制台你完全了解吗？接下来几篇文章，来说说那些你可能不知道的chrome控制台。通常，页面上弹出多个alert之后：在页面上弹出alert（阻塞页面的模态对话框）的情况下，不能对浏览器做大部分界面操作了。...

<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。...

微软已经将最新版本的Windows操作系统的发布日期定在了2015年7月29日,同时发布的还有他们的最新的浏览器产品:Edge,这也将代替IE成为新版Windows的标配浏览器.在Edge的开发过程中,微软移除了超过300个的API(相对于IE的功能而言).此篇文章介绍了其中7个前端开发人员耳熟能详的特性.#ActiveXAtciveX这个玩意儿最早在1996年就被提出来了,旨在用于通过借用Windows系统的特性或功能来增强网站的功能.不幸的是这个功能同时又导致了不计其数的各种问题以至于微软不得不在IE11里面将ActiveX默认关闭掉了,因为仍有很多企事业单位的网站在使用这项技术,所以暂时还不能完全移除.然而在Edge浏览器里面将完全见不到ActiveX的踪影....

随着Html5的正式定稿，移动前端步入APP世界的步伐也随之加速。目前主流的两大手机系统厂商（google、苹果）都是Html5的参与者，所以这两大系统在对html5的支持上基本是没什么问题的。然而对于很多开发者来说，也许仅仅是因为使用前的一番可行性分析便放弃这种方案。因为很多资料都叙述着Html5相比原生App的各种不足。其中最尴尬的一条莫过于“性能”问题。因为这个问题，刚开始接触的时候我也有很强的抵触情绪。但后来慢慢的发现，其实很多时候性能本就不是问题。适当的调整Html和Css，我们的网页同样可以无限接近原生程序。而且个人认为，大多数时候程序是否流畅并非取决于某种编程语言，而是取决于写程序的人。相比通过各种代码填充来完成目标任务，我更喜欢把技术当做艺术，写代码也应该有所追求。（扯淡扯远了。）...

前一篇文章我们介绍了虚拟DOM的实现与原理，这篇文章我们来讲讲React的直出（服务器直接生成）。比起MVVM，React比较容易实现直出，那么React的直出是如何实现，有什么值得我们学习的呢？为什么MVVM不能做直出？对于MVVM，HTML片段即为配置，而直出后的HTML无法还原配置，所以问题不是MVVM能否直出，而是在于直出后的片段能否还原原来的配置。下面是一个简单的例子：...

作为React的核心技术之一VirtualDOM，一直披着神秘的面纱。实际上，VirtualDOM包含：接下来我们分别探讨这几个部分：VTree模型非常简单，基本结构如下：...