javascript encodeURI和encodeURIComponent的关系

参考资料：

http://www.jb51.net/article/22880.htm

例如：

encodeURI("http://baidu.com/?a=b&c=d")
// 输出： "http://baidu.com/?a=b&c=d"
encodeURIComponent("http://baidu.com/?a=b&c=d")
// 输出： "http%3A%2F%2Fbaidu.com%2F%3Fa%3Db%26c%3Dd"

encodeURI("http://baidu.com/?a=b&c=d")

// 输出： "http://baidu.com/?a=b&c=d"

encodeURIComponent("http://baidu.com/?a=b&c=d")

// 输出： "http%3A%2F%2Fbaidu.com%2F%3Fa%3Db%26c%3Dd"

javascript:typeof与instanceof区别

参考资料：

http://www.jb51.net/article/26369.htm

http://www.cnblogs.com/jikey/archive/2010/05/05/1728337.html

http://hi.baidu.com/shirdrn/item/4a785230105ef7f0e7bb7aa6

http://www.jb51.net/article/37051.htm

关于原型的一些理解

function Person() {} 
function Man() {} 
Man.prototype = new Person(); 
console.log(new Man() instanceof Man); // true 
console.log(new Man() instanceof Person); // true 
console.log(new Man() instanceof Object); // true 

m = new Man();
p = new Person();
Man.prototype.name = "phpor"; // 则: m.name == "phpor" 但是 p.name == undefined
Person.prototype.age = 17;   // 则： m.age == 17  并且 p.age == 17

// 所以说，prototype和“祖宗”的概念还不太一样，虽然Man也是Person，但是Man.prototype != Person.prototype ，即：
Man.prototype == Person.prototype;  // false

function Person() {}

function Man() {}

Man.prototype = new Person();

console.log(new Man() instanceof Man); // true

console.log(new Man() instanceof Person); // true

console.log(new Man() instanceof Object); // true

m = new Man();

p = new Person();

Man.prototype.name = "phpor"; // 则: m.name == "phpor" 但是 p.name == undefined

Person.prototype.age = 17; // 则： m.age == 17 并且 p.age == 17

// 所以说，prototype和“祖宗”的概念还不太一样，虽然Man也是Person，但是Man.prototype != Person.prototype ，即：

Man.prototype == Person.prototype; // false

JS检查字符串长度

对于utf-8的字符可以这么来测试：

encodeURIComponent(str).replace(/%./g, “”).length

因为多字节字符总会被处理成每个字节都编码的。对于GBK的页面的GBK字符如何检查字节数呢？

wordpress迁移问题

问题

wordpress自从搬家之后无法上传附件了，总提示没有权限创建目录，但是确认了一下，上传目录中创建文件、目录都是没有问题的。

原因

我的wordpress搬家是通过copy代码文件、db文件完成的，没有重新安装。wordpress在安装的时候会把上传目录的绝对路径写到数据库中（wp_option表）；由于新旧环境的绝对路径不同导致总是要创建一个就路径下的目录，自然创建失败，根据实际情况更新数据库中的该条记录后搞定。

wp附件上传相关函数： wp_load_alloptions(…) wp_upload_dir(…)

JS处理二进制数据

缘起

JS如何按字节来读取二进制数据？比如：对于二进制字符串str，如何逐个字节地转换成16进制标识的编码？

分析

JS中常用的字符串函数：

String.fromCharCode(code, code,…)

String.prototype.charCodeAt(int)

String.prototype.charAt(int)

通过查阅ecma文档: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf 可知：

String.fromCharCode(0x61) 得到的是一个ascii 字符 ‘a’ ,但是千万不要以为这是一个单字节的，不管参数char code有多大或者有多小，得到的都是一个双字节的char。如果参数>=2^16 ,则实际按照模2^16来处理。

下面给出一个将二进制信息转换成16进制编码的小函数：

function bin2hex(str) {
	var result = "";
	for (i = 0; i < str.length; i++ ) {
		var c = str.charCodeAt(i);
		result += byte2Hex(c>>8 & 0xff); // 高字节
		result += byte2Hex(c & 0xff);	// 低字节
	}
	return result;
}
function byte2Hex(b) {
	if(b < 0x10)
		return "0" + b.toString(16);
	else
		return b.toString(16);
}

function bin2hex(str) {

var result = "";

for (i = 0; i < str.length; i++ ) {

var c = str.charCodeAt(i);

result += byte2Hex(c>>8 & 0xff); // 高字节

result += byte2Hex(c & 0xff); // 低字节

}

return result;

}

function byte2Hex(b) {

if(b < 0x10)

return "0" + b.toString(16);

else

return b.toString(16);

}

function bin2hex(str) {
	var result = "";
	for (i = 0; i < str.length; i++ ) {
		result += int16_to_hex(str.charCodeAt(i));
	}
	return result;
}

function int16_to_hex(i) {
	var result = i.toString(16);
	var j = 0;
	while (j+result.length < 4){
		result = "0" + result;
		j++;
	}
    return result;
}

function bin2hex(str) {

var result = "";

for (i = 0; i < str.length; i++ ) {

result += int16_to_hex(str.charCodeAt(i));

}

return result;

}

function int16_to_hex(i) {

var result = i.toString(16);

var j = 0;

while (j+result.length < 4){

result = "0" + result;

j++;

}

return result;

}

问题：如果二进制数据是奇数个字节怎么办呢？

如果需要JS操作，则：

1. 将数据转换成ucs-2编码，然后做进一步的其它编码

2. JS从其它编码解得ucs-2编码后，在通过utf16to8(…)转换成utf8编码

结论

JS按字节操作二进制数据时，不要用字符串来做，要用字节数组来做（就是把字节code存放到数组里）。

一般来讲，JS能接收到的数据是非二进制的，或者说是对二进制数据做了16进制编码或base64编码（或其它编码），JS对编码的数据做解码时，解得的字节不要用String.fromCharCode(..)来处理直接存放为字符串，而是把解得的字节code放到一个数组里面，然后进行一系列的处理，最终处理后的数据可能还是二进制的，那么就把这些字节code从数组中直接做16进制或base64编码，然后输出。

关于网上的uf16to8(…)的函数： http://www.onicos.com/staff/iz/amuse/javascript/expert/utf.txt

我觉得这只是一个概念上的逻辑，这样写并不能达到想要的效果。

首先，使用String.fromCharCode(…)来返回一个字节不对的，因为该函数返回的一定是2字节的，即使一个ascii字符；另：该函数认为charCodeAt(…)取到的是一个字节的code，也是错误的，因为该函数总是按2字节取的。

或者，可以这样理解，这几个函数都是操作字符串对象的，而在JS中，字符串总是按照UCS-2来存储的，这些函数的输入和输出也都是UCS-2编码的

关于escape的编码问题：

JS 规范及实现（V8）

缘起

JS的escape到底是怎么实现的？如：

escape(String.fromCharCode(0x41))
"A"
escape(String.fromCharCode(129))
"%81"
escape(String.fromCharCode(257))
"%u0101"

escape(String.fromCharCode(0x41))

"A"

escape(String.fromCharCode(129))

"%81"

escape(String.fromCharCode(257))

"%u0101"

哪些字符不做编码？哪些字符做 ‘%’ 编码？哪些字符做 ‘%u’ 编码？

参考资料：

Ecma： http://www.ecma-international.org/publications/standards/Ecma-262.htm

1. Call ToString(string).
2. Compute the number of characters in Result(1).
3. Let R be the empty string.
4. Let k be 0.
5. If k equals Result(2), return R.
6. Get the character (represented as a 16-bit unsigned integer) at position k within Result(1).
7. If Result(6) is one of the 69 nonblank characters
“ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@*_+-./”
then go to step 13.
8. If Result(6), is less than 256, go to step 11.
9. Let S be a String containing six characters “%uwxyz” where wxyz are four hexadecimal digits encoding the 
value of Result(6).
10. Go to step 14.
11. Let S be a String containing three characters “%xy” where xy are two hexadecimal digits encoding the value 
of Result(6).
12. Go to step 14.
13. Let S be a String containing the single character Result(6).
14. Let R be a new String value computed by concatenating the previous value of R and S.
15. Increase k by 1.
16. Go to step 5.

1. Call ToString(string).

2. Compute the number of characters in Result(1).

3. Let R be the empty string.

4. Let k be 0.

5. If k equals Result(2), return R.

6. Get the character (represented as a 16-bit unsigned integer) at position k within Result(1).

7. If Result(6) is one of the 69 nonblank characters

“ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@*_+-./”

then go to step 13.

8. If Result(6), is less than 256, go to step 11.

9. Let S be a String containing six characters “%uwxyz” where wxyz are four hexadecimal digits encoding the

value of Result(6).

10. Go to step 14.

11. Let S be a String containing three characters “%xy” where xy are two hexadecimal digits encoding the value

of Result(6).

12. Go to step 14.

13. Let S be a String containing the single character Result(6).

14. Let R be a new String value computed by concatenating the previous value of R and S.

15. Increase k by 1.

16. Go to step 5.

Google V8项目主页： https://code.google.com/p/v8/

Google V8源码下载： https://code.google.com/p/v8/wiki/Source 参看：uri.h中 URIEscape::Escape 的实现

Google V8开发者参考： https://developers.google.com/v8/build

关于JS做压缩：

http://www.poluoluo.com/jzxy/201004/83108.html

lz77

JS二进制操作： http://blog.chinaunix.net/uid-52437-id-3325514.html

chrome extension 如何保存图片到本地

摘自： http://segmentfault.com/q/1010000000202581

// 将图片变成 DataURI
var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(imageObj);

  // 这里就是你要的 DataURI
  var DataURI = canvas.toDataURL();
  // 保存下来
  chrome.storage.local.set({image : DataURI});
}
img.src = 'http://xxxx'; // 这里写你的图片 url

// 将图片变成 DataURI

var img = new Image();

img.onload = function() {

var canvas = document.createElement('canvas');

canvas.width = img.width;

canvas.height = img.height;

var ctx = canvas.getContext('2d');

ctx.drawImage(imageObj);

// 这里就是你要的 DataURI

var DataURI = canvas.toDataURL();

// 保存下来

chrome.storage.local.set({image : DataURI});

}

img.src = 'http://xxxx'; // 这里写你的图片 url

分享Chrome Extension（扩展程序/插件）开发的一些小经验

转自： http://www.cnblogs.com/dudu/archive/2012/11/22/chrome_extension.html

1、不通过Chrome Web Store直接安装Chrome插件（Extension）

我们之前开发网摘Chrome插件时，不需要通过Chrome Web Store，直接在网站上提供网摘插件的链接，用户点击就可以安装。后来，Chrome改为必须通过Web Store才能安装插件。

我们找到了一个Hack的方法，在Chrome Extensions窗口，直接将下载至本地的网摘插件文件拖动到Extensions窗口即可。

2、引用外部javascript文件的问题

如果在Extenstion中引用了外部的js文件，会引发这样的错误：

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self'".

1	Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self'".

解决方法：在manifest.json中添加如下的代码（假设我们这里引用的是ajax.googleapis.com的js）：

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

1	"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

3、不支持inline javascript代码的问题

从Chrome Extenstion V2开始，不允许执行任何inline javascript代码（也就是html内的任何js代码都不允许执行），比如下面的代码：

&lt;input type="submit" name="btn_submit" value="收藏" id="btn_submit" class="btn_submit" onclick="addwz()"/&gt;

1	<input type="submit" name="btn_submit" value="收藏" id="btn_submit" class="btn_submit" onclick="addwz()"/>

onclick中的addwz()函数不允许执行，点击时会报错：

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://ajax.googleapis.com".

1	Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://ajax.googleapis.com".

解决方法：在内部引用的js文件中绑定事件，示例代码如下：

$('#btn_submit').click(function () {
    addwz();
});

$('#btn_submit').click(function () {

addwz();

});

大写锁定提示

http://blog.rexsong.com/?p=6085

http://dancewithnet.com/2007/04/16/detect-caps-lock/

去掉IE10文本框后面的XX

参考：http://www.unicac.cn/share/ms-clear.html

ie10浏览器当点击文本框的时候，默认值文本框的里面靠后的地方出现一个删除的X，有时候很实用，但有时候却很烦恼，怎么去掉呢？

简单的去掉IE10文本框后面的XX的方法：给Input文本框添加如下CSS

input::-ms-clear{display:none;}

1	input::-ms-clear{display:none;}

提示：input后面是两个冒号哦！伪元素需要有两个冒号。具体可以看这篇文章