摘要：
前一篇记录了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' 阅读全文