LiuHe

最近对浏览器的事件处理感兴趣了：function pressEnter() { var e = window.event; alert(e.keyCode);}firstName:lastName: 这样当用户在文本输入框中按下键盘时，显示出键盘的键码值。然而上面的代码在firefox下却不能运行，原因是在IE中,事件对象是作为一个全

在Web应用越来越复杂的今天，消息推送已经成为一个非常重要的功能了，有了消息推送，Web页面就能够及时的接收到来自服务端的消息，为用户展现最好的交互体验。过去我们在实现Web页面的消息推送时，一般都是由页面发起请求，以轮询的方式向服务器获取数据，实现起来极为不便，业务逻辑也相对较为复杂。为了解决这个问题，进而实现真正意义上的消息推送，HTML5定义了一套新的规范，这就是WebSocket。下面

关注React也已经很久了，一直没能系统地深入学习，最近准备好好研究一下，并且亲自动手做一些实践。 学习一门语言也好，学习一个框架也好，都是从最初的hello world程序开始的，今天我们也来用React写一个hello world出来，了解一下如何编写及运行React。 在官方文档中，有一种方式是基于npm的，我比较喜欢这种方式，这也是官方比较推荐的，下面我们就一步一步创建一个React的...

上次我们介绍了React入门的Hello World程序，还搭建了一个简单的React运行环境，今天就来写一个TodoList程序，逐步学习React开发。 注意，下面的程序是基于上篇文章中的react-dev项目的，如果没有看过，大家可以移步至：React入门之HelloWorld及环境搭建 根据React的开发思想，一切皆为模块和复合组件，所以我们要做一个TodoList，首先要对这个功能进

Today handheld devices are so popularly spreading over our around, and the position feature plays an vital role in the application developed for these devices. Some applications, such as Uber, can find the near

你必须像水那样无形：当你把水倒进杯子中，水就变成了杯子的形状；当你把水倒进瓶子中，水就变成了瓶子的形状；当你把水倒进茶壶中，水就变成了茶壶的形状。 — 李小龙 之前读《响应式Web设计实践》，这大概是我印象最深的一句话了。李小龙的功夫了得，可他的功夫哲学更是令人叹服。如今的前端，面临着更多的挑战，尺寸大小不一的设备涌现出来，就像形状各异的容器，而我们的网页必须像水一般， 能够接受各式各样的考验。

在上篇文章中，我们使用React实现了一个TodoList，可以显示基本的待办事项的列表，今天我们继续添加一些功能，比如选中一个TodoItem的checkbox进而可以改变它的完成状态，添加一个搜索框，在搜索框中输入关键字可以对多条数据进行过滤。 我们还是在原来的基础上做改动，下面是最新的TodoList模块：var TodoList = React.createClass({ getIni

defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。 在介绍他们之前，我们有必要先了解一下页面的加载和渲染过程： 1. 浏览器通过HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM； 2. 在构建DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件； 3. 样

当ES5还没有完全普及时，ES6就接踵而来了，2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015，我们也简称它为ES6或ES2015。在发布之后的将近一年内，很多小伙伴都踊跃的学习这门新的语言，之所以说是一门新的语言，是因为跟ES5相比，语法方面变化确实有点大，可以说新的JavaScript语法看上去有种脱胎换骨的感觉。博主也曾跃跃欲试，看了很多语法方面的...

注：本文翻译自CHRIS COYIER的A Complete Guide to Flexbox这篇文章，点击链接可前往原版博文：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Tips: This tutorial is translated from the most popular article in CSS-Tricks -

Lately I did some research on new techniques of HTML5, and I really want to write down these knowledges I have leant, one hand, it can deepen my understanding of these new features, and on the other hand, I hope I can help the beginners to understand and m

在javascript中处理文本框输入值的时候，经常要用到"去掉前后空白"的功能。用过jQuery的朋友都知道，jQuery提供了一个trim()这样的功能函数，可以很轻松帮我们实现这样的效果。但是如果项目没有用到jQuery等框架的话，js本身又没有这样的函数，我们不得不自己写这样的函数，下面是函数的具体实现：//供使用者调用function trim(s){ retu

正则表达式一般有以下功能:  测试字符串的某个模式。例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证  替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字  根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字 在js中可以通过以下方式建立以个正则表达式

Nowadays Web Application becomes increasingly complex, hence, message pushing is playing an vital role in Web Application functionalities. With message pushing, Web page will be able to receive the me

现如今JavaScript早已不仅仅是网页特效脚本了，更多是用来构建大规模的Web应用，所以语言规范的制定者们也逐渐意识到要对JS进行语法方面的规范，并且有意地引导开发者编程习惯，消除一些不规范和不安全的语法，进而更好的满足以后大规模开发的要求，ES5规范中的严格模式就是其中重要的一环，今天我们就来详细介绍一下严格模式的使用以及它对语法的种种限制和规范。启用严格模式只需使用'use strict';这条语句即可，对于支持严格模式的浏览器，在声明'use strict';语句之后的代码都将会在严格模式的限制

由于平时忙于工作，已经有很长时间没有更新博客了，偶尔会进来看一眼，发现有很多朋友在下面留言，我很庆幸当时能写下这些有价值的文章，直到现在还能够帮助这么多朋友解决Android方面的一些问题。最近研究了一下HTML5方面的一些新技术，很是想记录下来成文，一方面可以加深自己对技术的理解，另外希望能帮助初学者理解和学习这些技术。今天我们先来讲解一下桌面通知，即Web Notificatons技术

Communication是众多HTML5新特性中比较重要的一个，它提供一种基于安全策略的跨站交互的机制，即使来自不同的站点的应用之间也能自由的通信，正是这一特性的出现，使得不同站点内容的集成简化了许多。我们都知道，基于安全方面的考虑，浏览器会合理地限制脚本的执行，禁止访问其他站点的数据服务或操作非本站点的DOM对象，这些安全机制在一定程度上解决了安全攻击的隐患，但也给前端开发者带了一定的麻烦

Communication is one of the most important HTML5 Features, it provides an interaction mechanism based on the security policy of cross origins, and web applications can message each other even though t

The rise of Ajax technology has brought new vitality to Internet since few years ago, in the meantime, it has achieved a qualitative leap on user experience. The page can easily fetch new data without

几年前，Ajax的兴起给互联网带来了新的生机，同时也使用户体验有了质的飞跃，用户无需刷新页面即可获取新的数据，而页面也以一种更具有交互性的形式为用户展现视图，可以说这种变化对互联网发展的贡献是史无前例的。但随着Ajax大规模应用，越来越多的开发人员开始注意到其中存在的问题，因为Ajax的视图展现是在页面无刷新情况下进行的，这也就意味着在用户做了一系列操作之后，页面的URL是没有任何变化的，这些

我们知道浏览器端JavaScript是以单线程的方式执行的，也就是说JavaScript和UI渲染占用同一个主线程，那就意味着，如果JavaScript进行高负载的数据处理，UI渲染就很有可能被阻断，从而造成用户体验的大打折扣。Web Workers作为HTML5新特性之一，为浏览器端JavaScript开创了一种新的运行模式，使之能够在另外的线程中创建新的运行环境，以便使JavaScript能够

As we know, client-side JavaScript runs in single thread, in other words, JavaScript and UI rendering program share the main thread, that means, UI rendering will be blocked when JavaScript is working on high-loading processing, thereby user experience wil

在ES5规范中，还有一个比较重要的改进，就是Object对象的增强，ES5为Object新增了一系列函数，用于编写安全健壮的程序，今天我们就来一一介绍它们的使用方法。下面就是ES5中Object新增的函数：Object.defineProperty(object, propertyName, descriptor);Object.defineProperties(object, descriptors);Object.getOwnPropertyDescriptor(object, property

近两年当中使用Angular开发过很多项目，其中也涉及到一些树形结构的显示，最近的在项目中封装了大量的组件，其中一些组件也涉及到树形结构，所以写出来总结一下。相信大家都知道，树结构最典型的例子就是目录结构了吧，一个目录可以包含很多子目录，子目录又可以包含若干个子孙目录，那咱们今天就以目录结构为例来说明一下Angular中树结构的实现。首先，我们希望封装一个组件，用于显示整个目录的树形机构，代码如下：angular.module('treeDemo', []) .controller("TreeCo

在手持设备如此普遍的今天，位置信息对于应用程序来讲是极其重要的，打车应用可以根据用户的位置信息呼叫附近的车辆，团购软件可以根据当前的位置推荐附近的影院和美食，地图应用可以根据用户的位置快速规划到目的地的路线，可以说位置信息对于移动应用是不可或缺的。为了顺应这个潮流，HTML5为我们提供了Geolocation库，有了它我们就能够在Web应用中轻而易举地实现上述这些功能。那么今天我就为大家介绍一下这个库的使用。

ES5即ECMAScript 5.1，在JavaScript语言基础之上添加了很多新的特性，对现有的对象和语句进行相应的增强和规范，主要包括一些新增函数、对象类型增强，以及严格模式编程规范。今天我们先来介绍以下几个新增的函数：Array.isArray(obj);Array.prototype.forEach();Array.prototype.indexOf();Array.prototype.lastIndexOf();Array.prototype.filter();Array.prot

在上一篇文章里我们分析了ES5对几个常用类新增的函数，今天就重点来讲解一下Function中的bind函数。简单来说，bind函数用于将当前函数和指定对象绑定，返回一个新的函数，当新函数被调用时，代码会在指定对象的上下文中执行。这就涉及到JavaScript程序执行上下文Context的知识了，在JavaScript中函数内部如果存在与Context有关的代码，如果我们在调用之前改变其Context，那么执行结果就不同，这一点我们可以用一个最基本的例子来说明：