芒果小站 » JavaScript

一道 JavaScript 填空题

芒果 — Mon, 06 Feb 2012 04:55:51 +0000

填空，使后面的 alert(0) 能正确弹出，至少列举两种不同思路。

window.alert = function () {};
______;
alert(0);

解：

方法一：

window.alert = function () {};
delete window.alert;
alert(0);

delete 操作符从入门到精通：https://developer.mozilla.org/en/JavaScript/Reference/Operators/delete

有个值得注意的地方，文中提到了操作符的返回值时，描述如下：

Returns false only if the property exists and cannot be deleted. It returns true in all other cases.

仅当属性存在并且不可被删除，则返回 false，否则一律返回 true

方法二：
创建一个 iframe ，获取 iframe 的 window.alert 给当前页面的 window.alert

莫名其妙的 JavaScript 字符串换行

芒果 — Sun, 22 Jan 2012 07:31:13 +0000

今儿个看蓝色理想的帖子，说到一个字符串换行的问题。通常如果在代码中存储 HTML 代码片段，会使用加号连接字符串的做法。

当然这样做会稍微麻烦点，于是有了以下这个生僻的方法：

var foo = 'xxx\
xxx';
alert(foo)

结果弹的是：

xxxxxx

再来加几个空格缩进看看：

var foo = 'xxx\
    xxx';
alert(foo)

结果弹的是：

xxx    xxx

那如果不折行呢？

var foo = 'xxx\xxx';
alert(foo)

结果报语法错误了：

SyntaxError: malformed hexadecimal character escape sequence

事实上这个杠属 JavaScript 转义字符，使用 \ + 回车 相当于将字符串中的回车符转义，所以弹出的还是连缀的字符串。

考虑到 JS 代码部署时通常采用压缩，使用 \ 太危险，慎用。

字符串换行建议和常用的几种方法：
1、加号连接；
2、数据逐行 push，最终 join；
3、使用 script 标签存储 HTML 片段

当前域的 JavaScript 条件判断

芒果 — Mon, 05 Dec 2011 11:55:00 +0000

项目流程：测试环境（assets.daily.taobao.net）-> 预发布环境（a.tbcdn.cn）切域名后需要手工修改 JS 中写死的文件路径。

//判断当前域是日常还是线上环境
if (location.host.indexOf('tbcdn.cn') !== -1) {
	var baseUrl = 'http://a.tbcdn.cn';
} else {
	var baseUrl = 'http://assets.daily.taobao.net';
}

一段关于 JSONP Callback 的简要代码

芒果 — Sat, 03 Dec 2011 09:54:00 +0000

定义全局回调函数，把 timestamp 参数写成 window 下的方法名称。这里我的格式是 jsonp + 时间戳。发送请求和执行回调函数统一使用同一个 timestamp 参数即可。

/**
  * 远程数据加载
  * @method loader
  * @param {String} o 参数配置
  */
function loader (o) {

     var timestamp = 'jsonp' + new Date().getTime();

     //定义全局回调函数
     window[timestamp] = function (data) {

          //执行配置参数中的回调函数
          o.callback(data);

     }

     //读取远程 JSONP 数据
     KISSY.getScript(o.url + timestamp);

}

执行加载时，调用 loader 方法：

loader({
     url : 'http://ooxx.html?callback=',
     callback : function (data) {
          console.log(data);
     }
})

2011.12.15 日补充：全局 window 上的 callback 在请求成功后需要进行一次销毁操作。

10+ 优化网站的 .htaccess 代码片段

芒果 — Sun, 30 Oct 2011 05:36:54 +0000

以下代码片段粘贴至根目录下的 .htaccess 文件，请记住修改前一定要备份该文件。

1、强制 URL 以斜杠结尾

在 URL 结束的位置如果加上斜杠（/），对 SEO 有很大帮助，这段代码将帮助你实现该功能：


 RewriteCond %{REQUEST_URI} /+[^\.]+$
 RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]

猛击这里查看详细情况：http://perishablepress.com/code-snippets/

2、禁止图片盗链

盗链这种恶劣的行为通常大量地浪费服务器贷款。这段代码很实用，可以重定向盗链图片到一个指定的默认图（在第六行定义）：

RewriteEngine On
#Replace ?mysite\.com/ with your blog url
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mangguo\.org/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/nohotlink.jpg with your "don't hotlink" image url
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

猛击这里查看详细情况：.htaccess 设置图片防盗链

3、重定向移动客户端访问

如果站点没有使用设备自适应的设计方案，这段代码可以帮助你将网站重定向到移动版本：

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/m/.*$
RewriteCond %{HTTP_ACCEPT} "text/vnd.wap.wml|application/vnd.wap.xhtml+xml" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
#------------- The line below excludes the iPad
RewriteCond %{HTTP_USER_AGENT} !^.*iPad.*$
#-------------
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC] #*SEE NOTE BELOW
RewriteRule ^(.*)$ /m/ [L,R=302]

猛击这里查看详细情况：http://snipplr.com/view.php?codeview&id=55114

4、强制下载某一格式的文件

处于某些原因，需要使得某些文件访问时直接提示用户下载保存，例如 MP3、Office 文档等。这段代码可以轻松搞定：


  ForceType application/octet-stream
  Header set Content-Disposition attachment


  ForceType application/octet-stream
  Header set Content-Disposition attachment

猛击这里查看详细情况：强制下载文件

5、Firefox 跨域字体嵌入

当嵌入字体时，Firefox 不允许从外部网站调用。使用 .htaccess 代码可以突破这个限制：



    Header set Access-Control-Allow-Origin "http://www.mangguo.org"

猛击这里查看详细情况：http://snipplr.com/view/53703

6、使用 .htaccess 缓存加速网站

这份代码也许是整篇中最有用的。使用以下代码可以显著提升网站速度，值得收藏的好代码啊！

# 1 YEAR

Header set Cache-Control "max-age=29030400, public"

# 1 WEEK

Header set Cache-Control "max-age=604800, public"

# 2 DAYS

Header set Cache-Control "max-age=172800, proxy-revalidate"

# 1 MIN

Header set Cache-Control "max-age=60, private, proxy-revalidate"

猛击这里查看详细情况：http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

7、阻止 WordPress 博客中的垃圾评论

在为你博客的垃圾评论头痛？当然 Akismet 很有用，但一旦 Akismet 挂了，.htaccess 就能凑效了：


RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*mangguo.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

猛击这里查看详细情况：使用 .htaccess 减少 WordPress 垃圾评论

8、重定向 RSS 源到单一格式

以前 RSS，Atom 或者 Rdf 经常被使用。而现在貌似 RSS 是最为流行的。这段代码允许你把所有的订阅源格式重定向到某个单一源，WordPress 同样适用。


 RedirectMatch 301 /feed/(atom|rdf|rss|rss2)/?$ http://example.com/feed/
 RedirectMatch 301 /comments/feed/(atom|rdf|rss|rss2)/?$ http://example.com/comments/feed/

猛击这里查看详细情况：http://www.wprecipes.com/redirect-feeds-to-a-single-format

9、配置网站的 HTML5 视频媒体类型

HTML5 技术为网站开发带来了很多令人振奋的选择，在众多炫酷的特性里，一个重要的地方是使用了 HTML5 视频代替了 Flash 技术。现在可以直接在网页中播放 HTML5 视频，但在此之前，你需要配置服务器来让它更好地支持：

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !=/favicon.ico
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
AddType application/x-shockwave-flash swf

猛击这里查看详细情况：http://snipplr.com/view.php?codeview&id=53437

10、记录 PHP 错误

和通常在页面中显示 PHP 运行错误的方式不同，这段代码将会把日志写入 .log 文件，避免直接在页面中暴露错误：

# display no errs to user
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off
# log to file
php_flag log_errors on
php_value error_log /location/to/php_error.log

猛击这里查看详细情况：http://css-tricks.com/snippets/htaccess/php-error-logging/

11、在 JavaScript 文件中运行 PHP 代码

编写 JavaScript 代码时，如果能在 JS 文件中使用 PHP 那就牛逼哄哄了，比如直接从数据库获取数据，以下是一个在 JS 文件中使用 PHP 的示例：

AddType application/x-httpd-php .js
AddHandler x-httpd-php5 .js


SetHandler application/x-httpd-php

来自 Google 的编程风格指南

芒果 — Wed, 21 Sep 2011 03:32:36 +0000

一份来自 Google 的编程风格指南，存到了芒果小站的服务器上，简单做了文档索引，以备不时之需。

Google JavaScript Style Guide
http://google-styleguide.mangguo.org/javascriptguide.xml

Google JSON Style Guide
http://google-styleguide.mangguo.org/jsoncstyleguide.xml

Google XML Document Format Style Guide
http://google-styleguide.mangguo.org/xmlstyle.html

Google Python Style Guide
http://google-styleguide.mangguo.org/pyguide.html

Google Objective-C Style Guide
http://google-styleguide.mangguo.org/objcguide.xml

Google C++ Style Guide
http://google-styleguide.mangguo.org/cppguide.xml

JavaScript 原型继承之构造函数继承

芒果 — Tue, 09 Aug 2011 04:49:20 +0000

上回说到《JavaScript 原型继承之基础机制》，这一篇将具体说说构造函数的继承。
从一个简单的示例开始，创建描述人类的 People 构造函数：

function People(){
    this.race = '愚蠢的人类';
}

然后，创建描述黄种人的 Yellow 构造函数：

function Yellow(name, skin){
    this.name = name;
    this.skin = skin;
}

要使得黄种人 Yellow 能继承人类 People 对象，在 JavaScript 中可以通过多种方式模拟实现。

1、对象冒充（`Object Masquerading`）

对象冒充，简单地说就是把一个定义抽象类的构造函数当作常规函数使用，实现伪继承：

function Yellow(name, skin) {
    this._extend = People;
    this._extend();
    delete this._extend; //删除对 People 的引用
    this.name = name;
    this.skin = skin;
}
//实例化 yellow1
var yellow1 = new Yellow('小明', '黄皮肤');
console.log(yellow1.name); //小明
console.log(yellow1.race); //愚蠢的人类

在这段代码中，为 Yellow 添加私有方法 _extend，由于函数本身只是以引用的形式存在，执行时会自动调用 People 方法，并传入 Yellow 构造函数的 name 参数。而 Yellow 对象的自身属性和方法，必须在上述过程结束，清空对外部方法的引用后再进行定义。

注：通过对象冒充可以实现多重继承

2、call / apply 方法

通过 call / apply 方法实现继承可能更为简单，不需要任何繁琐的操作：

function Yellow(name, skin) {
    People.apply(this, arguments);
    this.name = name;
    this.skin = skin;
}
//实例化 yellow2
var yellow2 = new Yellow('大卫', '黑皮肤')
console.log(yellow2.name); //大卫
console.log(yellow2.race); //愚蠢的人类

这里为 apply 传入 arguments 数组，也可以使用 new Array 或字面量数组。

3、原型链（Prototype Chaining）

第一种原型继承方法是把对象的原型指向父类的某个实例：

Yellow.prototype = new People();
Yellow.prototype.constructor = Yellow; //初始的 prototype 被完全清空，所以最好将 constructor 重置
var yellow3 = new Yellow('小王', '黄皮肤');
console.log(yellow3.race); //愚蠢的人类

以上代码可以这样反向理解，yellow3 实例本身找不到 race 属性，而它原型上的 race 属性又恰好是 People 对象的实例的 race 属性。

如果对于 People 对象来说，其属性写入了原型中，则无需实例化，只需将 Yellow 的 prototype 属性指向 People 的 prototype 属性：

function People(){};
People.prototype.race = '愚蠢的人类';
Yellow.prototype = People.prototype;
Yellow.prototype.constructor = Yellow;

这样做不进行实例化操作，只是指针的改变，非常环保。但由于引用类型的关系，Yellow 和 People 指向了同一个原型对象，也就是说对 Yellow.prototype.constructor 的修改实际上破坏了 People 的原型对象。

既然如此，可以借助一个空的中继对象，绕过父类的原型：

var F = function(){};
F.prototype = People.prototype;
Yellow.prototype = new F();
Yellow.prototype.constructor = Yellow;

JavaScript 原型继承之基础机制

芒果 — Tue, 09 Aug 2011 04:41:27 +0000

由于语言设计上的原因，JavaScript 没有真正意义上“类”的概念。而通常使用的 new 命令实例化对象的方法，其实是对原型对象的实例化。这一语言功能的本质依赖于 JavaScript 特有的原型链（prototype chain）模式。

所以严格意义上说，JavaScript 是基于原型的面向对象语言。也就是说，每个实例对象都具有一个原型。对象从该原型中继承属性和方法。

1、构造函数

利用构造函数，可以简单地创建对象。构造函数内的 this 关键字指向实例对象本身：

function People(name){
    this.name = name;
}

使用 new 运算符和构造函数创建实例对象：

var people = new People('小明');
console.log(people.name); //小明

但如果创建了两个实例，这两个实例之间无法直接共享属性和方法：

var people1 = new People('小明');
var people2 = new People('小王');
people1.sex = 'male';
console.log(people2.sex); //undefined

也就是说对象一旦被实例化，其属性方法都独立存在，对某个属性的修改不会影响到其他实例。

2、Prototype

于是就有了 prototype 属性，这个属性是在生成实例对象时自动创建的。它本身又是一个对象，拥有能够在实例间共享的属性和方法。而实例本身的属性和方法，则包含在构造函数中。换句话说，构造函数内部的属性和方法，在经过实例化后都成为了本地的属性和方法，而原型（prototype）中的属性和方法在实例中只是一种引用，因此能够被多个实例共享。

还是刚才那个构造函数，现在为它增加 prototype 属性：

People.prototype.sex = 'female';
//或者写成 People.prototype = {sex: 'female'};
console.log(people1.sex); //male
console.log(people2.sex); //female

People 构造函数的 prototype 属性参数会直接影响到 people1 和 people2 两个实例。

但为什么 people1.sex 输出 male 呢？这是由于在 JavaScript 中，原型关系以递归形式存在。对象的原型也是一个对象，而原型的本身也可能具有一个原型。原型的最高层级是全局的 Object 对象。

这就是说，一旦 people1.sex 被设置为 male 后，它在原型中对应的值就无法被暴露出来。假如 people1.sex 本身没有值，才会从构造函数的 prototype 属性中读取，以此类推一级一级向上查找，直到 Object 对象。

注：使用 “null” 给对象赋值，可以销毁自定义对象，释放内存资源。

分离页面配置和代码逻辑

芒果 — Wed, 03 Aug 2011 03:37:50 +0000

为了代码清晰结构性强，通常需要分离页面配置参数和代码逻辑。约定唯一的命名空间，实现基本的所谓结构和行为分离。

第一种方式，提供一个暴露在 window 的全局对象，这里是 TB 变量。然后所有的代码被封装在该全局对象下。

// 创建命名空间
var TB = {};

/**
 * 定义初始化入口函数
 * @method init
 * @param {JSON} config 页面配置参数
 */
TB.init = function(config){

	console.log(config.demo);

}

// 页面配置参数的初始化
TB.init({

    demo: 'http://demo.mangguo.org'

});

或者，匿名函数模式，把参数传给匿名函数，并局限在该函数体内部。隔离作用域链，所谓闭包。

/**
 * 定义匿名函数
 * @param {JSON} config 页面配置参数
 */
(function(config){

	console.log(config.demo);

})({
	demo : 'http://demo.mangguo.org'
});

第一种可能更适合于组织复杂代码，模块化，颗粒化。

招募几只前端开发攻城师

芒果 — Tue, 02 Aug 2011 08:27:25 +0000

看过很多招聘信息，内容大概都差不多，要求无非技能、工作经验等方面，看多了就有点疲劳。

当然这些都不是硬性条件，我始终觉得评判一个人的标准是很难被标准化的。标准是用来“仅供参考”的，即使是你技不如人，如果有强烈的进入这行的意愿，试试也无妨。

现招募几只前端开发工程师，装逼一点的应该称之为 Frontend Developer，基本要求如下：

1、视前端为职业发展方向，并真正热爱这一份工作，热爱互联网；
2、精通各种前端技术，包括 HTML/CSS/Javascript 等，如果了解 HTML5 并能够实际应用，这会为你增色不少；
3、深刻理解 Web 标准，对可用性、可访问性等相关知识有实际的了解和实践经验；
4、熟悉一种非前端脚本语言，如 PHP 等，这会为你今后的工作带来便捷；
5、个性乐观开朗，善于沟通，逻辑性强；
6、专业不限，男女不限，简历体裁不限，字数不得多于 800 字；

工作地点在杭州，不过距离不是问题嘛。当年哥横跨大半个中国来实习的，一切也都顺利。欢迎广大大四在读的孩纸们加入我们的团队哦。

简历请发送至：bangyan#taobao.com，主题注明“应聘”。谢谢！

程序员从入门到精通：芒果教你画小鸡

芒果 — Thu, 28 Jul 2011 15:54:59 +0000

作为一个牛逼的程序员，不在工作中找点乐趣，那只能算是入门。想要到达精通的境界，就必需多看看诸如《21 天学通 PHP》、《零基础学 JavaScript》、《Visual Basic 从入门到精通》之类的书籍。看完这些好书，你就能像我一样，画出一只栩栩如生的小鸡。

快点，把锚点干掉！

芒果 — Thu, 23 Jun 2011 13:11:44 +0000

前端的童鞋们肯定觉得 a 标签屡试不爽，却又不能丢失了 href="#"，那就快点把锚点干掉！

你可以这样搞：

这是一个连接

你也可以这样搞：

这还是一个连接

我说完了。

你真的认识 window.location 吗？

芒果 — Fri, 29 Apr 2011 03:52:47 +0000

如果你稍微懂一些 JS 代码，一般都会知道 window.location.href 这个属性。并且用该属性获取页面 URL 地址：

window.location.href = window.location.href;

好吧，我告诉你，这样弱掉了。其实原生 JavaScript 真是什么都有。

window.location 对象所包含的属性

属性	描述
hash	从井号 (#) 开始的 URL（锚）
host	主机名和当前 URL 的端口号
hostname	当前 URL 的主机名
href	完整的 URL
pathname	当前 URL 的路径部分
port	当前 URL 的端口号
protocol	当前 URL 的协议
search	从问号 (?) 开始的 URL（查询部分）

以芒果小站为例，用 window.location.href 获得某个页面参数，得到如下结果：

window.location.hash

要使用 JS 定位锚点，完全可以使用 window.hash 配合元素 ID 完成。比如快速定位到页面的某条评论，则直接使用如下代码即可：

window.location.hash = "#comment-5981";

另外 Twitter、Facebook、Google 等已经开始大量使用 #! 这种形式的 hash 方法处理异步交互页面的 URL 可回溯功能。

window.location.search

如果有这样一个 URL 地址：

http://www.google.com.hk/search?hl=zh-CN&source=hp&biw=1400&bih=935&q=%E8%8A%92%E6%9E%9C%E5%B0%8F%E7%AB%99&aq=f&aqi=&aql=&oq=

如何利用 JS 脚本捕获页面 GET 方式请求的参数？其实直接使用 window.location.search 获得，然后通过 split 方法结合循环遍历自由组织数据格式。

另外，如果根据用户的搜索条件刷新页面，只需直接设置 window.location.search 即可。

JavaScript for…in 循环的陷阱

芒果 — Fri, 18 Mar 2011 05:18:53 +0000

For…In 声明用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。

先定义一个构造函数：

var Status = function(arg){
    this.arg = arg;
}
Status.prototype.getStatus = function(){
    return this.arg;
}

接着实例化：

var instance = new Status('a test string');
instance.getStatus();
instance.ooxx = 'ooxx';

用 for…in 遍历属性：

for(i in instance){
    console.log(i);
}

看下运行结果：

arg
ooxx
getStatus

可见原型方法也被遍历出来的，但事实上往往并不想要。于是需要这么干：

for(i in object){
    if(object.hasOwenProperty(i)){
        //...
    }
}

这样就能把函数和原型属性方法过滤掉鸟~
参考：《JavaScript 语言精粹》第 120 页，饺子哥威武！

当构造函数遇到 YUI3 封装机制

芒果 — Tue, 08 Mar 2011 10:16:07 +0000

	/*
	 * 构造确认操作对话框
	 * @constructor ConfirmBox
	 */

	var ConfirmBox, confirmOff, confirmDel;

	ConfirmBox = function(msg, url){

		this.msg = msg;
		this.url = url;

	};

	ConfirmBox.prototype.fire = function(e){

		var message = confirm(this.msg);

		if(message){

			window.location.href = this.url;

		}
	};

	/*
	 * 确定下架此楼盘？
	 * @instance confirmOff
	 */
	confirmOff = new ConfirmBox('确定下架此楼盘？', config.offUrl);

	if(Y.all('.sale-off')){
		Y.on('click', confirmOff.fire, '.sale-off', confirmOff);
	}

由于 YUI3 的封装机制，通过 Y.on 注册事件默认上下文环境都是 Y 对象。而在 JavaScript 构造函数中，其原型方法调用 this 时指向的是实例化的对象本身，如果不将 context 重置为实例本身，就挂了。如果没重置，console.log this.msg 属性就是下面这个情况鸟：

快速转换 CSS 字体 Unicode 编码

芒果 — Sun, 26 Dec 2010 15:04:22 +0000

看了这篇 CSS 中文字体 Unicode 编码方案后，某位童鞋说一用到中文字体就要去找对照表，麻烦死，那这样吧：

escape('宋体');

这样生成的宋体编码为：

'%u5b8b%u4f53'

你可以手工将 %u 替换为斜杠 ‘\’。或者也可以这么搞：

escape('宋体').replace(/%u/g, '\\');

那就直接返回需要的编码格式鸟~

9 条 JavaScript 开发最佳实践

芒果 — Thu, 28 Oct 2010 15:49:33 +0000

1、使用正确的

但是在源代码中，以下这种标签写法随处可见：

在 HTML 中，language 属性已经过时，因为具有 type 属性后，language 它是冗余的。不要再这样写了……

事实上，客户端默认为将 JavaScript 代码指定 type=”text/javascript” 属性，除非需要 type=”application/x-javascript” 这样的类型，否则完全没有必要写 type 属性。关于 JavaScript MIME 类型，这里有一篇参考文档：http://krijnhoetmer.nl/stuff/javascript/mime-types/

2、将代码放置于外部文件

使用外部 .js 文档比在 html 文档里直接写 JavaScript 代码要简洁一些，同时也使得 JS 文件可以被缓存，保证网站资源的快速访问。

将你的 JavaScript 代码置于一个 .js 文档中，然后在 html 文档中使用

`3、避免使用 HTML 注释包裹代码`


90 年代一些非常古老的浏览器无法执行 JavaScript 代码。为了防止这些浏览器出现不必要的结果。在 1994 年至 1997 年间，在 HTML 中使用注释包裹 JavaScript 代码是良好的兼容方案，以保证不支持 JavaScript 的浏览器能够忽略它。
这里是一个简单案例：

然而在 2010 年，所有的浏览器（甚至是可爱的 IE 6）都能解释 JavaScript 代码，因此绝对没有使用注释包裹 JS 代码的必要了。更糟的是，如果代码被 HTML 注释包裹，并且使用了 — 符号，浏览器可能会误以为 HTML 文档已经结束。
4、使用框架
除非你的 JavaScript 代码很短或者很简单，你应该通过框架来避免过多代码上的重复劳动。在我看来，jQuery 是最好的，有一个很棒的社区，所以值得尝试。
芒果语：其实 YUI 也很棒，系统、强大、完善、稳妥。更有牛逼叉叉的 Loader 机制，更高效地提高 Web 应用的性能。
5、使用 var 关键字声明变量
你应当使用 var 语句来声明变量，否则变量会存在于全局作用域内，并且使用 var 使得代码可读易懂。
比如下面的案例：
var name = "Jean";
var size = data.length;
之前在 JavaScript 中的对象引用机制 的评论中也有涉及变量作用域的问题。
6、保持代码的分离
几年前，当一个程序员想要为一个 HTML 元素添加事件时（比如说，你想要在用户输入时验证时间信息），他会使用特殊的属性把 JavaScript 代码放置于 html 中，比如 onblur、onchange，onclick 等等。比如：

虽然照样可行，但却很不简洁。HTML 应当只包含文档的结构层面，就如同使用内联 CSS 是不好的做法一样，内联 JavaScript 同样不可取。
取而代之，下面的代码如何？使用 jQuery 也很简单：
$(document).ready(function(){
	$('input[name=date]').bind('change', validateDate);
});
7、在文档底部包含脚本文件
不久以前，在  和  标签之间插入脚本文件一度成为最佳实践。但浏览器是顺序解析文档，并动态加载外部文件的。这就意味着在页面头部插入脚本会在安排在页面内容之前加载。
为了在内容就绪之后再加载脚本，JavaScript 文件应该在文档底部被包含。就像下面这样：
    
  

8、使用 JSLint
JSLint 是一款用于 JavaScript 源代码检查的应用程序。如果它发现 JS 中存在某些问题，就会返回相关的问题描述信息和大概的解决方案。

JSLint 能有效发现代码中的缺陷，或者说代码风格上值得改进之处。这个站点是 JavaScript 开发绝对值得收藏的。
9、不要轻易使用 document.write
陈旧的 document.write 方法已经被不赞成使用了好些年，然而这仍然是一贯使用的方法。
document.write("hello world");
应当使用 DOM 的 innerHTML 属性在页面中插入文本。
document.getElementById('hello').innerHTML = 'hello world';
注：这篇文章是用阿里输入法打的，感觉还不错……
英文原稿：Best practices for modern Javascript development | Cats Who Code

翻译整理：9 条 JavaScript 开发最佳实践 | 芒果
推荐阅读
一道 JavaScript 填空题 (1)
莫名其妙的 JavaScript 字符串换行 (7)
当前域的 JavaScript 条件判断 (15)
一段关于 JSONP Callback 的简要代码 (0)
10+ 优化网站的 .htaccess 代码片段 (19)
来自 Google 的编程风格指南 (10)
JavaScript 原型继承之构造函数继承 (12)
JavaScript 原型继承之基础机制 (7)

© 2010 芒果小站 | 固定链接 | 27 条评论 | 标签 JavaScript, JSLint



JavaScript 中的对象引用机制
芒果 — Tue, 05 Oct 2010 08:34:10 +0000
容易搞混淆的东东，这里记一下笔记。
对象的引用机制：对象不会被复制，只能通过引用来传递。

简单的例子：
var i = mangguo = {}; //不论是否为空对象
mangguo.address = 'Hangzhou';
那么 mangguo.address 的值和 i.address 一致，原因是 i 和 mangguo 引用的是同一个对象。

但如果分别声明 i 和 mangguo 两个空对象：
var i = {},
mangguo = {};
此时 i 和 mangguo 是两个不同的空对象引用。
推荐阅读
一道 JavaScript 填空题 (1)
莫名其妙的 JavaScript 字符串换行 (7)
当前域的 JavaScript 条件判断 (15)
一段关于 JSONP Callback 的简要代码 (0)
10+ 优化网站的 .htaccess 代码片段 (19)
来自 Google 的编程风格指南 (10)
JavaScript 原型继承之构造函数继承 (12)
JavaScript 原型继承之基础机制 (7)

© 2010 芒果小站 | 固定链接 | 15 条评论 | 标签 JavaScript


Minify，合并压缩 JavaScript 和 CSS 文件
芒果 — Fri, 30 Jul 2010 10:22:30 +0000
对于网站应用而言，HTTP 请求是一件奢侈的事情，所以我们要尽量减少它。减少 HTTP 请求也正是网站性能优化的一个要素。通常通过手工合并会带来大量的维护问题。所以能交给机器做的就让机器来做吧。
之前有心的网友可能会发现，芒果的 CSS 并非一般的样式表引入方式，而是像下面这样：

这就是使用 Minify 方案后的结果。那究竟 Minify 是什么？
“Minify 可以按需对 JavaScript 以及 CSS 文件进行合并、压缩以及缓存，以加快页面的载入速度。而安装 Minify 则极其简单，只需在网站根目录下上传程序目录即可。”
我们不妨来简单分解一下芒果这个怪异的 CSS 文件，首先通过访问根目录下的 minify 目录 (/min/) ，以参数形式指定文件目录 (参数 b)，配置需要压缩合并的 CSS 单文件 (参数 f)，然后动态输出独立的伪 CSS 文件。以芒果为例：
整站共有 reset.css、mangguo.min.css 两个样式文件。放置于 WordPress 对应当前主题的 CSS 目录下，那么基准 URL 指定为：
b=wp-content/themes/mangguo/css
文件列表指定为：
f=reset.css,mangguo.min.css
参数之间通过 & 符号连接。也可以不指定基准 URL，而缺省 b 参数直接配置文件组合：

当然 JavaScript 文件的压缩合并原理和 CSS 是一致的。
项目托管地址：http://code.google.com/p/minify
推荐阅读
快速转换 CSS 字体 Unicode 编码 (20)
13+ 模拟 JavaScript 交互效果的纯 CSS 技术 (4)
使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (2)
Closure Compiler，压缩！还是压缩！ (5)
YUICompressor，强大的前端代码压缩工具 (1)
简单的页面加载 (Loading) 效果 (4)
一道 JavaScript 填空题 (1)
莫名其妙的 JavaScript 字符串换行 (7)

© 2010 芒果小站 | 固定链接 | 12 条评论 | 标签 CSS, JavaScript, Minify


13+ 模拟 JavaScript 交互效果的纯 CSS 技术
芒果 — Sat, 22 May 2010 04:25:11 +0000
在用户界面这一块，使用 JavaScript 总能创造出丰富强大的交互效果。但只需一点想象力和创造力，仅仅通过 CSS 也可以实现相同类型的效果。以下是 13+ 模拟 JavaScript 交互效果的纯 CSS 技术，使我们不再用单一的方式实现需要的交互。你会发现，这些技术有些是非常有用的，而有些则证明能用纯 CSS 更为简单地实现。
如何使用纯 CSS 创建宝丽来相册

使用 CSS3 创建 coda 效果的气泡

使用 CSS 创建折叠菜单

如何使用 CSS3 创建图像画廊

纯 CSS3 悬停选项卡

使用 CSS 创建类 JQuery 幻灯切换

如何用 CSS 创建 Lightbox 弹出对话框

纯 CSS 数据表

CSS 气泡效果

CSS 图片切换

纯 CSS 折线图

CSS3 表单提示

纯 CSS 时间线

英文原稿：13 Pure CSS Techniques for Creating JavaScript-like Interactions | Web Design Ledger

翻译整理：13+ 模拟 JavaScript 交互效果的纯 CSS 技术 | 芒果
推荐阅读
12 个优秀的 CSS3 按钮和菜单技巧 (0)
12 款简化 CSS3 开发的实用工具 (12)
如何使用 CSS3 伪类 (7)
快速转换 CSS 字体 Unicode 编码 (20)
CSS3 Media Queries，媒介设备查询 (9)
Minify，合并压缩 JavaScript 和 CSS 文件 (12)
纯 CSS 实现文本渐变效果 (9)
CSS2.1 和 CSS3 帮助文档及参考手册 (0)

© 2010 芒果小站 | 固定链接 | 4 条评论 | 标签 CSS, CSS3, JavaScript, Web Design Ledger

芒果小站 » JavaScript

一道 JavaScript 填空题

推荐阅读

莫名其妙的 JavaScript 字符串换行

推荐阅读

当前域的 JavaScript 条件判断

推荐阅读

一段关于 JSONP Callback 的简要代码

推荐阅读

10+ 优化网站的 .htaccess 代码片段

1、强制 URL 以斜杠结尾

2、禁止图片盗链

3、重定向移动客户端访问

4、强制下载某一格式的文件

5、Firefox 跨域字体嵌入

6、使用 .htaccess 缓存加速网站

7、阻止 WordPress 博客中的垃圾评论

8、重定向 RSS 源到单一格式

9、配置网站的 HTML5 视频媒体类型

10、记录 PHP 错误

11、在 JavaScript 文件中运行 PHP 代码

推荐阅读

来自 Google 的编程风格指南

推荐阅读

JavaScript 原型继承之构造函数继承

1、对象冒充（Object Masquerading）

2、call / apply 方法

3、原型链（Prototype Chaining）

推荐阅读

JavaScript 原型继承之基础机制

1、构造函数

2、Prototype

推荐阅读

分离页面配置和代码逻辑

推荐阅读

招募几只前端开发攻城师

推荐阅读

程序员从入门到精通：芒果教你画小鸡

推荐阅读

快点，把锚点干掉！

推荐阅读

你真的认识 window.location 吗？

window.location 对象所包含的属性

window.location.hash

window.location.search

推荐阅读

JavaScript for…in 循环的陷阱

推荐阅读

当构造函数遇到 YUI3 封装机制

推荐阅读

快速转换 CSS 字体 Unicode 编码

推荐阅读

9 条 JavaScript 开发最佳实践

2、将代码放置于外部文件

3、避免使用 HTML 注释包裹代码

4、使用框架

5、使用 var 关键字声明变量

6、保持代码的分离

7、在文档底部包含脚本文件

8、使用 JSLint

9、不要轻易使用 document.write

推荐阅读

JavaScript 中的对象引用机制

推荐阅读

Minify，合并压缩 JavaScript 和 CSS 文件

推荐阅读

13+ 模拟 JavaScript 交互效果的纯 CSS 技术

推荐阅读

1、对象冒充（`Object Masquerading`）

`3、避免使用 HTML 注释包裹代码`