jqMobi 成为 Intel 的应用框架
今天 Intel 发布了其对 jQMobi 框架的改造版本 Intel App Framework。这个新的 HTML5 开发环境可完全免费下载，侧重于构建见人 iOS、Android 和 Windows Phone 8 甚至是 Kindle、Nook、Facebook 和 Windows 8 的移动应用。 App Framework 是专门为移动设备而设计，支持最新的 CSS3 和 HTML5...
View Article使用能力检测编写跨浏览器代码
编写跨浏览器代码的核心原则 以下原则来自 IEBlog： DO 特性检测（Feature Detection）：使用之前检测浏览器是否支持这个特性。 行为检测（Behavior Detection）：应用解决方法时先测试已知问题。 DON’T 检测具体浏览器（Detect Specific Browsers）：即浏览器检测。不要根据浏览器标识（如...
View Article用户代理检测
用户代理检测（User-agent Dtection）通过检测用来代理字符串来确定实际使用的浏览器。每一次 HTTP 请求过程中，用户代理字符串作为首部发送的，该字符串可以通过 JS 的 navigator.userAgent 访问。...
View Article将HTML和CSS解耦
多年来，Web 标准社区一直在谈论关注分离（separation of concerns），就是将 CSS 、JavaScript、HTML 分开放在各自的文件里。我们也已经这样做了。 CSS Zen Garden （CSS 禅意花园）证明相同的 HTML 结构可以通过改变 CSS 来实现许多不同设计，但我们只看到了一面。我们在项目中经常可能发生的是： HTML 结构变化。我们修改了 HTML...
View ArticleCSS3 滤镜
特殊的时期，会有特殊的需求。尽管我不太赞成这种流于形式的做法，不过这并不影响我们了解相关技术原理。 CSS 滤镜最早出现在 IE4 中，在 CSS3 中被纳入标准，不过语法和原来 IE 里的实现完全不同，目前被 W3C 列为工作草案。CSS3 标准的滤镜包含几个预定义好的函数，也可以指定 URL 引用 SVG 实现自定义效果。 IE10 已经废弃了原来 IE 特有的滤镜，但 IE10...
View ArticleHTML5 拖放
早在 IE4，微软就引进了 JavasScript 拖放。当时只有图像和文本两种对象可以拖放，唯一有效的放置目标是文本框。到了 IE5，拖放功能得到扩展，添加了新事件，几乎网页中的任何元素都可以作为放置目标。IE5.5 则让网页中的任何元素都可以拖放。HTML5 以 IE 的实例为基础制定了拖放规范。Firefox 3.5+、Safari 3+、Chrome 也根据标准实现了原生拖放功能。...
View ArticleAJAX 及其跨域实现
Ajax 概念始于 2005 年的一篇文章，此前这种技术叫远程脚本（Remote Scripting）。早在 1998 年就有人用不同的手段实现了类似的技术（比如借助隐藏框架或内嵌框架）。再往前推，JavaScript 需要借助 Java applet 或者 Flash 等中间层向服务器发送请求。 1. XMLHttpRequest 对象 Ajax 的核心是 XMLHttpRequest （简称...
View ArticleClik here to view.
基于 Promises 的表单验证
Promises 理念已经改变了编写异步 JavaScript 的方式。近一年来，许多框架都集成了 Promise 模式，让编写、阅读、维护异步代码更加容易。比如，jQuery 添加了 $.Deferred() API， NodeJS 有服务器端和客户端都能用的 Q 和 jspromise 模块。客户端 MVC 框架，诸如 EmberJS 、 AngularJS 也实现了自己的 Promises。...
View ArticleClik here to view.
纯 CSS3 菜单生成工具及教程
CSS3 的引入给网页设计师和开发者带来了巨大的可能。通过3D 变换、CSS3 动画及其他高级的样式，不使用 JavaScript 也能创建令人印象深刻的导航菜单。 下面是一些纯 CSS3 菜单生产工具及教程。 CSS3 Menu Generators Pure CSS Menu CSS3 Menu CSS Menu Maker CSS3 Menu Generator CSS3 菜单教程...
View Article@font-face 二三事
@font-face 其实不是什么新鲜技术了。早在 IE5 就实现了 CSS 字体导入，当时微软的实现方式是一种叫做 Embeddded OpenType（EOT） 的字体格式。CSS3 将 @font-face 纳入规范并进行扩展，说它是新瓶装旧酒也不为过。新技术的普及需要大环境的支持，只能说最早的 @font-face 技术生不逢时。 @font-face 用法 语法和值 @font-face...
View ArticleClik here to view.
等宽列背后的表格布局算法
引子 网页开发中，经常需要实现等宽列效果，比如 Web App 中的 TabBar、Slider 底部的等宽指示条，而且往往元素的个数是不确定的，无法设定固定的百分比宽度。 虽然借助 flexbox 可以轻松实现： .container { display: flex; } .item { flex: 1; } 但是，你别忘了国情，我朝一些倔强的 UA 并不支持 flexbox，得找祖（qí...
View Article使用 ES2015 重构 React 组件
React 组件 ES2015 Class 改写细节 createClass 工厂函数转换为 ES2015 Class ES5: var MyComponent = React.createClass({ // ... }); ES2015: class MyComponent extends React.Component { // ... } 提取 propTypes 和...
View ArticleClik here to view.
理解 React 生命周期
React「just the UI」，相比 Angular、Ember 等完整的解决方案，上手相对容易。不过，React 生命周期还是会让新手迷惑，而掌握每个生命周期方法扮演的角色和执行时间又是至关重要的： 什么时候进行事件绑定、数据请求、解除绑定等操作？ 如何减少不必要的重渲染，提高性能？尽管 React 已经通过特定的算法优化渲染，但折中的处理方式仍会触发一些不必要的渲染。...
View Article前端性能优化最佳实践
本文主要考量客户端性能、服务器端和网络性能，内容框架来自 Yahoo Developer Network，包含 7 个类别共 35 条前端性能优化最佳实践，在此基础上补充了一些相关或者更符合主流技术的内容。 同时，建议关注及时更新的 Google 性能优化指南。 目录： 页面内容 减少 HTTP 请求数 减少 DNS 查询 避免重定向 缓存 Ajax 请求 延迟加载 预先加载 减少 DOM 元素数量...
View Article移动 Web 开发之浏览器
「移动 Web 开发」系列文章为 PPK 所著的 The Mobile Web Handbook 读书笔记。除书中内容，还补充了部分中国的实际情况，以及个人的经验、观点。 本文乃此系列的浏览器篇。 移动浏览器类型 移动浏览器可以分为四种： 内置浏览器 用户安装浏览器 WebView 代理浏览器 它们有时是重叠的，比如代理浏览器可能是内置的，也可能是用户安装的，如 Opera Mini。 内置浏览器...
View Article纯粹的 JavaScript 对象
最近在 EventEmitter3 源码 中看到了 Object.create(null)，做一下考证。 传统的 JavaScript 对象 在 JavaScript 中，通常使用对象字面量语法来创建空对象。 var foo = {}; // create new object foo.bar = 'bar'; // string -> string foo.baz = function ()...
View Article在 Web 内容中使用系统字体
某天（2016.07.12）发现 GitHub 的字体比原来宽了一些，打开开发者工具一看，字体设置中多了两个奇怪的玩意： body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI...
View ArticleBabel 配置技巧
当下，每个写 JavaScript 的猿可能都在或多或少地使用 Babel。借助 Babel，我们可以使用最新的 ECMAScript 特性，而不用太关注浏览器支持。Babel 在背后进行了许多复杂的转换，我们要做的，就是写配置文件，告诉 Babel 我们想要什么。下面就来看看一些配置技巧吧。 在 .babelrc 中使用 JS All Babel API options except the...
View ArticleBabel 6 松散模式
想必每个写 JavaScript 的都或多或少了解过 ES5 引入的严格模式，Babel 6 在把 ES6+ 代码转换为 ES5 时，也提供了「松散模式」（loose mode）的选项。Babel 的松散模式和 ES5 没有任何关系，这里提 ES5 严格模式只是在概念上作一个比对，方便理解 Babel 的松散模式。 两种模式 一些 Babel 插件有两种工作模式： 标准模式：转换时尽可能遵循、接近...
View Article
