摘要：
Q：Grunt为何物？A：一个专为JavaScript提供的构建工具。Q：啥是构建工具？A：在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。 在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。 解决这一系列繁重工作的自动化工具，称之为构建工具。Q：grunt是如何工作的？A：刚刚接触grunt，举个例子可能不太恰当，但应该可以让你先比较准确的认识她。 就好像一个万能工厂（grunt），只负责执行任务（Task），不关心每个任务到底都干了什么。 这些任务比如：clean:删除临时文件uglify:压缩qunit:测试concat:合并1、建立 packa 阅读全文
摘要：
前一篇记录了Grunt的安装，这篇介绍下怎么使用Gruntjs来搭建一个前端项目，然后使用grunt合并，压缩JS文件。大概有如下步骤新建项目Bejs新建文件package.json新建文件Gruntfile.js命令行执行grunt任务一、新建项目Bejs源码放在src下，该目录有两个js文件，selector.js和ajax.js。编译后代码放在dest，这个grunt会自动生成。二、新建package.jsonpackage.json放在根目录下，它包含了该项目的一些元信息，如项目名称、描述、版本号，依赖包等。它应该和源码一样被提交到svn或git。 现在的项目结构如下package.j 阅读全文
摘要：
Gruntjs是JavaScript项目的构建工具，也是基于node的一个命令行工具。很多开源JS项目都是使用它搭建。如jQuery、Qunit、CanJS等。它有以下作用合并JS文件压缩JS文件单元测试（基于QUnit）一句话：完全自动化（automation）以下是它的安装过程。一、安装node参考nodejs入门（最新的node会自动安装npm）二、安装grunt命令行工具grunt-cli使用-g全局安装，这样可以在任何一个目录里使用了。命令:npm install -g grunt-cli需要注意的是在linux或mac下有时会报没有权限的错误，这时须在前面加一个sudo，安装后，可 阅读全文
摘要：
多年以来，我看到大量关于javascript函数调用的困惑。尤其，许多人抱怨函数调用中“this”的语意是混乱的。在我看来，大量这样的混乱可以通过理解核心函数调用原语被清理，然后再看所有其他在原语之上进行包装的调用函数的方法。实际上，这正好是ECMAScript规格对这个问题的考虑。在某些领域，这个是一个规格的简化，但基本思想是一样的。核心原语首先，我们来看核心函数调用原语，一个函数的调用方法[1]。这个调用方法是相对直线向前的（The call method is relatively straightforward.）。1.构造参数列表（argList）从参数1到最后2.第一个参数是thi 阅读全文
摘要：
创建，测试和维护大型的JavaScript代码库是很困难的，而且这边的资料和教程非常难找。Superhero.js集合这方面的最好的文章，视频和演示文稿资料。这个列表的文中是持续更新的，可以随时来关注！ 阅读全文
摘要：
浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工 作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。将讨论的浏览器今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。本文将基于一些开源浏览器的例子——Firefox、Chrome及Safari，Safari是部分开源的。根据W3C（World Wide Web Consortium万维网联盟）的浏览器统计数据，当前（2011年5月），Firefox、Safari及Chrome的市场占有率综合已接近60％。（原文为2009年10月，数据没有太大变化）因此 阅读全文
摘要：
补码在计算机系统中，数值用补码来表示。任何数值 n 的位反等于 -(n + 1):1~n === -(n + 1)可以得到：12345678~9 === -10~8 === -9~1 === -2~0 === -1~-1 === 0~-2 === 1~-9 === 8~-10 === 9很明显，只有 ~-1 才等于 0. 对非 -1 值取反永远不为 0.String#indexOfString 的 indexOf 方法，找到时，返回自然数；没找到，则返回 -1. 常见代码：123if (str.indexOf('sub') !== -1) {// code}利用位反操作，可简化 阅读全文
摘要：
克军做了一系列测试：js和css的顺序关系，给出了现象和结论，但未给出原因。JS 和 CSS 在页面中的位置，会影响其他资源（指 img 等非 js 和 css 资源）的加载顺序，究其原因，有三个值得注意的点：JS 有可能会修改 DOM.典型的，可能会有document.write. 这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。JS 的执行有可能依赖最新样式。比如，可能会有var width = $('#id').width(). 这意味着，JS 代码在执行前，浏览器必须保证在此 JS 之前的所有 css 阅读全文
摘要：
1. head里的顺序如下，考虑会对请求有何影响：a. 外部js在css前面<script src="1.js"></script><link rel="stylesheet" type="text/css" href="1.css?sleep=5s"><link rel="stylesheet" type="text/css" href="2.css?sleep=5s">b. 外部js在css后面<l 阅读全文
摘要：
不知道上下文的，请先阅读这篇博客：模块加载器获取 URL 的原理使用场景为了便于讨论，先做一些约定：模块原始代码为 S(ource)压缩打包后的模块代码为 C(ompressed)独立文件为 F(ile)内嵌到页面中为 P(page)独立文件中是原始代码时，记为 SF；独立文件中是压缩打包后的代码时，记为 CF内嵌的原始代码记为 SP；内嵌的压缩打包后的代码记为 CP压缩打包是指代码压缩、模块信息补全、编译、合并等操作。使用场景可概况为一句话：SF, CF, SP 和 CP 可直接在浏览器中运行，并可同时存在。几点说明：可直接在浏览器中运行，这点很重要。对前端开发来说，浏览器即编译器。增加一层 阅读全文
摘要：
浏览器端的模块管理JavaScript 构建的应用越来越复杂，为了提高代码的可维护性，第一步是拆分为多个文件：a.jsb.jsc.js...文件拆开是第一步，为了彼此能互相调用，但又不污染全局造成潜在冲突，于是聪明的程序员们想出了用对象来模拟命名空间：// a.js:X = {};X.a = {...};// b.js:X.b = {...};// c.js:X.c = {...};...这种命名空间得自己维护，当层级达到三层及其以上时，维护起来并不轻松，比如 YAHOO.widget.TreeView。于是出现了类似 YUI3 的扁平方式：// 定义模块YUI.add('a' 阅读全文
摘要：
这是该系列的最后一篇。作为模块加载器，最核心的是：模块书写格式。从表层看，RequireJS 和 SeaJS 最大的差异就是各自默认推荐的模块书写格式不同。由于 RequireJS 支持 Simplified CommonJS Wrapper, 一定程度上可以说 SeaJS 是 RequireJS 的一个子集。甚至可以认为：SeaJS 是 RequireJS 中的 The Good Parts.（RequireJS 作者肯定不会同意，不过从社区中可以看出很多人很喜欢 Simplified CommonJS Wrapper 格式，这与 SeaJS 遵循的 Wrappings 基本一致。）功能差异 阅读全文
摘要：
理解了ID 规则，再来看 RequireJSAPI 文档就轻松多了。模块书写格式作为模块加载器，需要明确模块应该怎样写，这就是模块书写格式（Module Authoring Format）。对于文件加载器来说，约定非常少，比如 LABjs 只约定文件里不能有 document.write 等语句。RequireJS 遵守的是AMD规范，SeaJS 遵守的是Simple Wrappings规范。从表面上看，AMD 规范和 Wrappings 规范最大的不同是 factory 函数的参数不一样：// 两者的基本格式都是：define(id?, denpendencies?, factory);// 阅读全文
摘要：
来看 RequireJS 的 API 页面：api.html, 该篇博客着重分析 RequireJS 和 SeaJS 在 ID 规则上的异同。RequireJS 的 ID 规则对于模块加载器来说，模块 id 遵守的规则非常重要。首先来定义几个概念。假设当前页面路径为http://t.com/a/b/c.html, 则：pageRoot=http://t.compageUrl=http://t.com/a/bbaseUrl: 在 RequireJS 里，默认情况下，baseUrl 就是 pageUrl, 除非：通过 require.config 更改了 baseUrl指定了 data-main, 阅读全文
摘要：
从 requirejs.org 的首页出发，接下来是快速入门和下载，我们来看下载页面：Download产出物RequireJS 提供了三个文件：require.js — 这是核心文件，提供 JavaScript 文件和模块加载功能require-jquery.js — 打包了 jquery 最新版本的 require.jsr.js — 优化工具，以及让 RequireJS 的模块可运行于 Node 和 Rhino 环境SeaJS 提供的内容，目前也有三部分：sea.js — 模块加载器modules — 可运行在 seajs 环境中的推荐模块，在这里下载modules.seajs.comspm 阅读全文
摘要：
RequireJS 发布 1.0.0 了，很值得关注，看是否有可借鉴之处。本次比较不涉及具体实现代码，主要比较两者的 API 设计。http://requirejs.orghttp://seajs.org从定位谈起首先，从 requirejs.org 首页可以得知，RequireJS 的定位是：RequireJS 是一个 JavaScript 文件和模块加载器，特别为浏览器优化，同时也可运行在 Rhino 和 Node 环境中。SeaJS 的定位是：SeaJS 是一个适用于浏览器端的 JavaScript 模块加载器。不要小看这两句话，任何类库/框架的定位，或者说愿景/目标，最终会决定该类库/ 阅读全文
摘要：
克军昨天的分享不错：前端基础架构的实践和思考从 2009 年起，也一直在想这些事。受克军启发，梳理成一张图：几点说明：将“架构”换成了“设施”，对应的英文是 Infrastructure. 感觉用“设施”更能精准表达原意。克军的大分类是设施的形态：是一个工具，还是一份规范，或是一个系统。这样分类不错，但系统和工具之间感觉很难区分，系统可以包含工具，工具可以是一个系统。这里从前端开发涉及的流程来划分：需求阶段 — 开发阶段 — 部署阶段 — 上线后。然后看每个阶段，需要哪些基础设施建设。想清楚后，前端的 Infrastructure 也就出来了。需求阶段，一个快速原型工具，无论对交互还是前端，都 阅读全文