AngularJS 取消对 HTML 转义

AngularJS 默认情况下会对输出的变量进行HTML转义。

<div class="feature_brief">{{item.brief}}</div>

使用 trustHTML 过滤器信任字段,取消对 HTML 转义。

<div ng-bind-html="item.brief|trustHtml"></div>

AngularJS 代码如下:

app.filter('trustHtml', function($sce) {
	return function(input) {
		return $sce.trustAsHtml(input);
	};
});

在浏览器端使用less.js解析less文件

非常喜欢 less 的变量、混合以及嵌套。当不断重复书写 CSS 时,嵌套 CSS 必不可少,却又略显多余。因为大部分情况下,它并没有提升编写 CSS 的能力,只是不断地重复。

了解到有多种 CSS 的扩展语言,首先尝试使用 less。

less 的特性有很多,支持变量、混合、嵌套、函数、运算、颜色函数、命名空间、作用域、文件引入、甚至 JavaScript 表达式。

利用 less.js 解析 less

第一步,引入 style.less 文件

<link rel="stylesheet/less" type="text/css" href="/static/ran/less/site/common.less?1.0.0"/>

注意 rel 属性需要设置为 stylesheet/less。

第二步,引入 less.js 文件

<script src="http://cdn.bootcss.com/less.js/2.5.3/less.min.js?1.0.0"></script>

一定要在所有 less 文件之后引入 less.js。

第三部,保证 common.less 可以通过 AJAX 输出

因为 less.js 通过 ajax 下载 common.less 文件,所以若 common.less 与当前网站不在同域,可能会导致无法下载。
若 common.less 与当前网站不同域,需要在 header 信息中增加 Access-Control-Allow-Origin,允许网站通过 AJAX 访问。

动画事件 webkitAnimationStart webkitAnimationEnd

var d = document.getElementById('animation');
d.addEventListener('webkitAnimationStart', listener);
d.addEventListener('webkitAnimationEnd', listener);
function listener(e) {
	console.log(e.type, e);
}

AnimationEvent 事件对象具有

animationName 动画名称
elapsedTime 动画运行时间(秒)
type animationstart
以及其他事件属性

键盘数值对照表

键盘数值对照表

按键 数值 描述
DOM_VK_CANCEL 3 Cancel key
DOM_VK_HELP 6 Help key
DOM_VK_BACK_SPACE 8 退格键
DOM_VK_TAB 9 Tab键
DOM_VK_CLEAR 12 “5” key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key
DOM_VK_RETURN 13 Return/enter key on the main keyboard
DOM_VK_ENTER 14 Reserved, but not used
DOM_VK_SHIFT 16 Shift 键
DOM_VK_CONTROL 17 Ctrl 键
DOM_VK_ALT 18 Alt 键(Mac上为Option 键)
DOM_VK_PAUSE 19 Pause key
DOM_VK_CAPS_LOCK 20 Caps lock
DOM_VK_ESCAPE 27 Escape 键
DOM_VK_SPACE 32 空格键
DOM_VK_PAGE_UP 33 Page Up key
DOM_VK_PAGE_DOWN 34 Page Down key
DOM_VK_END 35 End key
DOM_VK_HOME 36 Home key
DOM_VK_LEFT 37 Left arrow
DOM_VK_UP 38 Up arrow
DOM_VK_RIGHT 39 Right arrow
DOM_VK_DOWN 40 Down arrow
DOM_VK_SELECT 41 Linux support for this keycode was added in Gecko 4.0
DOM_VK_PRINT 42 Linux support for this keycode was added in Gecko 4.0
DOM_VK_EXECUTE 43 Linux support for this keycode was added in Gecko 4.0
DOM_VK_PRINTSCREEN 44 Print Screen key
DOM_VK_INSERT 45 Ins(ert) key
DOM_VK_DELETE 46 Del(ete) key
DOM_VK_0 48
DOM_VK_1 49
DOM_VK_2 50
DOM_VK_3 51
DOM_VK_4 52
DOM_VK_5 53
DOM_VK_6 54
DOM_VK_7 55
DOM_VK_8 56
DOM_VK_9 57
DOM_VK_COLON 58 Colon (“:”) key
DOM_VK_SEMICOLON 59 Semicolon (“;”) key
DOM_VK_LESS_THAN 60 Less-than (“<“) key
DOM_VK_EQUALS 61 Equals (“=”) key
DOM_VK_GREATER_THAN 62 Greater-than (“>”) key
DOM_VK_QUESTION_MARK 63 Question mark (“?”) key
DOM_VK_AT 64 Atmark (“@”) key
DOM_VK_A 65
DOM_VK_B 66
DOM_VK_C 67
DOM_VK_D 68
DOM_VK_E 69
DOM_VK_F 70
DOM_VK_G 71
DOM_VK_H 72
DOM_VK_I 73
DOM_VK_J 74
DOM_VK_K 75
DOM_VK_L 76
DOM_VK_M 77
DOM_VK_N 78
DOM_VK_O 79
DOM_VK_P 80
DOM_VK_Q 81
DOM_VK_R 82
DOM_VK_S 83
DOM_VK_T 84
DOM_VK_U 85
DOM_VK_V 86
DOM_VK_W 87
DOM_VK_X 88
DOM_VK_Y 89
DOM_VK_Z 90
DOM_VK_CONTEXT_MENU 93
DOM_VK_NUMPAD0 96 0 on the numeric keypad
DOM_VK_NUMPAD1 97 1 on the numeric keypad
DOM_VK_NUMPAD2 98 2 on the numeric keypad
DOM_VK_NUMPAD3 99 3 on the numeric keypad
DOM_VK_NUMPAD4 100 4 on the numeric keypad
DOM_VK_NUMPAD5 101 5 on the numeric keypad
DOM_VK_NUMPAD6 102 6 on the numeric keypad
DOM_VK_NUMPAD7 103 7 on the numeric keypad
DOM_VK_NUMPAD8 104 8 on the numeric keypad
DOM_VK_NUMPAD9 105 9 on the numeric keypad
DOM_VK_MULTIPLY 106 * on the numeric keypad
DOM_VK_ADD 107 + on the numeric keypad
DOM_VK_SEPARATOR 108
DOM_VK_SUBTRACT 109 – on the numeric keypad
DOM_VK_DECIMAL 110 Decimal point on the numeric keypad
DOM_VK_DIVIDE 111 / on the numeric keypad
DOM_VK_F1 112 F1 键
DOM_VK_F2 113 F2 键
DOM_VK_F3 114 F3 键
DOM_VK_F4 115 F4 键
DOM_VK_F5 116 F5 键
DOM_VK_F6 117 F6 键
DOM_VK_F7 118 F7 键
DOM_VK_F8 119 F8 键
DOM_VK_F9 120 F9 键
DOM_VK_F10 121 F10 键
DOM_VK_F11 122 F11 键
DOM_VK_F12 123 F12 键
DOM_VK_F13 124 F13 键
DOM_VK_F14 125 F14 键
DOM_VK_F15 126 F15 键
DOM_VK_F16 127 F16 键
DOM_VK_F17 128 F17 键
DOM_VK_F18 129 F18 键
DOM_VK_F19 130 F19 键
DOM_VK_F20 131 F20 键
DOM_VK_F21 132 F21 键
DOM_VK_F22 133 F22 键
DOM_VK_F23 134 F23 键
DOM_VK_F24 135 F24 键
DOM_VK_NUM_LOCK 144 Num Lock key
DOM_VK_SCROLL_LOCK 145 Scroll Lock key
DOM_VK_CIRCUMFLEX 160 Circumflex (“^”) key
DOM_VK_EXCLAMATION 161 Exclamation (“!”) key
DOM_VK_DOUBLE_QUOTE 162 Double quote (“””) key
DOM_VK_HASH 163 Hash (“#”) key
DOM_VK_DOLLAR 164 Dollar sign (“$”) key
DOM_VK_PERCENT 165 Percent (“%”) key
DOM_VK_AMPERSAND 166 Ampersand (“&”) key
DOM_VK_UNDERSCORE 167 Underscore (“_”) key
DOM_VK_OPEN_PAREN 168 Open parenthesis (“(“) key
DOM_VK_CLOSE_PAREN 169 Close parenthesis (“)”) key
DOM_VK_ASTERISK 170 Asterisk (“*”) key
DOM_VK_PLUS 171 Plus (“+”) key
DOM_VK_PIPE 172 Pipe (“|”) key
DOM_VK_HYPHEN_MINUS 173 Hyphen/Minus (“-“) key
DOM_VK_OPEN_CURLY_BRACKET 174 Open curly bracket (“{“) key
DOM_VK_CLOSE_CURLY_BRACKET 175 Close curly bracket (“}”) key
DOM_VK_TILDE 176 Tilde (“~”) key
DOM_VK_COMMA 188 Comma (“,”) key
DOM_VK_PERIOD 190 Period (“.”) key
DOM_VK_SLASH 191 Slash (“/”) key
DOM_VK_BACK_QUOTE 192 Back tick (“`”) key
DOM_VK_OPEN_BRACKET 219 Open square bracket (“[“) key
DOM_VK_BACK_SLASH 220 Back slash (“\”) key
DOM_VK_CLOSE_BRACKET 221 Close square bracket (“]”) key
DOM_VK_QUOTE 222 Quote (”’) key
DOM_VK_META 224 Command key on Mac
DOM_VK_ALTGR 225 AltGr key on Linux
DOM_VK_WIN 91 Windows logo key on Windows. Or Super or Hyper key on Linux
DOM_VK_KANA 21 Linux support for this keycode was added in Gecko 4.0
DOM_VK_EISU 22 “英数” key on Japanese Mac keyboard
DOM_VK_JUNJA 23 Linux support for this keycode was added in Gecko 4.0
DOM_VK_FINAL 24 Linux support for this keycode was added in Gecko 4.0
DOM_VK_HANJA 25 Linux support for this keycode was added in Gecko 4.0
DOM_VK_KANJI 25 Linux support for this keycode was added in Gecko 4.0
DOM_VK_CONVERT 28 Linux support for this keycode was added in Gecko 4.0
DOM_VK_NONCONVERT 29 Linux support for this keycode was added in Gecko 4.0
DOM_VK_ACCEPT 30 Linux support for this keycode was added in Gecko 4.0
DOM_VK_MODECHANGE 31 Linux support for this keycode was added in Gecko 4.0
DOM_VK_SLEEP 95 Linux support for this keycode was added in Gecko 4.0

数值到按键名对照关系

var mapCodeName = {
    3: "cancel",
    6: "help",
    8: "back_space",
    9: "tab",
    12: "clear",
    13: "return",
    14: "enter",
    16: "shift",
    17: "control",
    18: "alt",
    19: "pause",
    20: "caps_lock",
    27: "escape",
    32: "space",
    33: "page_up",
    34: "page_down",
    35: "end",
    36: "home",
    37: "left",
    38: "up",
    39: "right",
    40: "down",
    41: "select",
    42: "print",
    43: "execute",
    44: "printscreen",
    45: "insert",
    46: "delete",
    48: "0",
    49: "1",
    50: "2",
    51: "3",
    52: "4",
    53: "5",
    54: "6",
    55: "7",
    56: "8",
    57: "9",
    58: "colon",
    59: "semicolon",
    60: "less_than",
    61: "equals",
    62: "greater_than",
    63: "question_mark",
    64: "at",
    65: "a",
    66: "b",
    67: "c",
    68: "d",
    69: "e",
    70: "f",
    71: "g",
    72: "h",
    73: "i",
    74: "j",
    75: "k",
    76: "l",
    77: "m",
    78: "n",
    79: "o",
    80: "p",
    81: "q",
    82: "r",
    83: "s",
    84: "t",
    85: "u",
    86: "v",
    87: "w",
    88: "x",
    89: "y",
    90: "z",
    93: "context_menu",
    96: "numpad0",
    97: "numpad1",
    98: "numpad2",
    99: "numpad3",
    100: "numpad4",
    101: "numpad5",
    102: "numpad6",
    103: "numpad7",
    104: "numpad8",
    105: "numpad9",
    106: "multiply",
    107: "add",
    108: "separator",
    109: "subtract",
    110: "decimal",
    111: "divide",
    112: "f1",
    113: "f2",
    114: "f3",
    115: "f4",
    116: "f5",
    117: "f6",
    118: "f7",
    119: "f8",
    120: "f9",
    121: "f10",
    122: "f11",
    123: "f12",
    124: "f13",
    125: "f14",
    126: "f15",
    127: "f16",
    128: "f17",
    129: "f18",
    130: "f19",
    131: "f20",
    132: "f21",
    133: "f22",
    134: "f23",
    135: "f24",
    144: "num_lock",
    145: "scroll_lock",
    160: "circumflex",
    161: "exclamation",
    162: "double_quote",
    163: "hash",
    164: "dollar",
    165: "percent",
    166: "ampersand",
    167: "underscore",
    168: "open_paren",
    169: "close_paren",
    170: "asterisk",
    171: "plus",
    172: "pipe",
    173: "hyphen_minus",
    174: "open_curly_bracket",
    175: "close_curly_bracket",
    176: "tilde",
    188: "comma",
    190: "period",
    191: "slash",
    192: "back_quote",
    219: "open_bracket",
    220: "back_slash",
    221: "close_bracket",
    222: "quote",
    224: "meta",
    225: "altgr",
    91: "win",
    21: "kana",
    22: "eisu",
    23: "junja",
    24: "final",
    25: "hanja",
    28: "convert",
    29: "nonconvert",
    30: "accept",
    31: "modechange",
    95: "sleep"
};

浏览器如何加载网页 — JavaScript PerformanceTiming

在地址栏中输入一个 url,发生了哪些事情?

  1. 输入 blog.zhengxianjun.com
  2. 浏览器查找域名的 IP 地址
    1. 查找浏览器 hosts 缓存
    2. 查找系统缓存——本机 hosts 文件
    3. 查找最近的本地域名服务器(LDNS)
    4. (LDNS)查找 Root Server->返回所在域的 gTLD Server(全球共13台国际顶级域名服务器)->查找域名对应的 Name Server->匹配域名和 IP 映射表->返回IP记录以及 TTL->LDNS 缓存并返回给浏览器
  3. 浏览器向服务器发起一个 HTTP 请求报文
    1. 应用层协议 HTTP 通过TCP报文发送到服务器
    2. TCP 3次握手(HTTP 1.0 规定服务器处理完成后立即断开TCP连接,1.1 版本)
    3. 返回 HTTP 报文,如果包含重定向信息,浏览器进行重定向(重定向次数限制)
  4. 服务器处理请求,并返回 HTTP 响应报文
  5. 浏览器接收 HTML,分析 HTML 中的资源(图片、样式、音视频),继续请求
  6. 浏览器呈现网页

JavaScript 提供的 PerformanceTiming 接口详述了各个阶段发生的时间点。

PerformanceTiming 定义

PerformanceTiming 所有属性均为只读。

PerformanceTiming 示例

网页加载时间示例

w3 文档地址:http://www.w3.org/TR/navigation-timing/

JavaScript 箭头函数 —— Arrow Function

Arrow Function 是 ECMAScript6 中的新特性。

先看两个酷炫的箭头函数示例:

var a1 = [
	"Hydrogen",
	"Helium",
	"Lithium",
	"Beryl­lium"
];

var a2 = a1.map(function(i){ return i.length });

var a3 = a1.map( i => i.length );

更炫

var b1 = [4, 3, 2, 1];

var b2 = b1.sort(function(i, j){ return i > j });

var b3 = b1.sort((i, j) => i > j);

在最新版的 Firefox 中可以体验这种特性。

Arrow Function map

Arrow Function sort

使用循环实现斐波那契数列

递归中比较常见的例子是斐波那契数列、汉诺塔。

使用递归实现斐波那契数列其实很浪费,f(n) = f(n-1) + f(n-2)。在进一步计算 f(n-1) = f(n-2) + f(n-3),会发现 f(n-2) 被重复计算。

下面是通过循环实现的斐波那契数列:

function Fibonacci(number) {
	var i, list = new Array();

	list[0] = 0;
	list[1] = 1;

	for (i = 1; i < number; i++) {
		list[i + 1] = list[i] + list[i - 1];
	}

	return list[number];
}

获取完整的斐波那契数列:

function Fibonacci(number, full) {
	var i, list = new Array();

	list[0] = 0;
	list[1] = 1;

	for (i = 1; i < number; i++) {
		list[i + 1] = list[i] + list[i - 1];
	}

	if (full) {
		return list;
	}

	return list[number];
}

JavaScript Crypto-JS 使用手册

使用 Crypto-JS 可以非常方便地在 JavaScript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列,进行 AES、DES、Rabbit、RC4、Triple DES 加解密。

基于 Crypto-JS 实现的在线加密解密工具 —— 在线哈希、在线散列 和 在线加密、在线解密

下面讲述如何使用 Crypto-JS。

Crypto-JS 源码托管在 Google Code,当前版本是 3.1。因为一般在国内也无法打开,所以把源代码分享到百度盘:http://pan.baidu.com/s/1bnyIGxT

Crypto-JS 原网址是 https://code.google.com/p/crypto-js/文中的英文描述均是原作者所有,Crypto-JS 采用的授权协议跟 MIT 类似,可以在任何场景放心使用。

文章最末附上 Crypto-JS 文件目录结构。

使用 Crypto-JS 进行哈希、散列

  • md5

引入 md5.js

<script src="cryptojs/rollups/md5.js"></script>

调用 md5 方法

var str = '123456';
CryptoJS.MD5(str);
  • pbkdf2

PBKDF2 is a password-based key derivation function. In many applications of cryptography, user security is ultimately dependent on a password, and because a password usually can’t be used directly as a cryptographic key, some processing is required.

A salt provides a large set of keys for any given password, and an iteration count increases the cost of producing keys from a password, thereby also increasing the difficulty of attack.

引入 pbkdf2.js

<script src="cryptojs/rollups/pbkdf2.js"></script>

调用 pbkdf2 方法

// 官方示例
var str = '123456';
var salt = CryptoJS.lib.WordArray.random(128/8);

var key128Bits = CryptoJS.PBKDF2(str, salt, { keySize: 128/32 });
var key256Bits = CryptoJS.PBKDF2(str, salt, { keySize: 256/32 });
var key512Bits = CryptoJS.PBKDF2(str, salt, { keySize: 512/32 });

var key512Bits1000Iterations = CryptoJS.PBKDF2("Secret Passphrase", salt, {
keySize: 512/32,
iterations: 1000
});
  • ripemd160

引入 ripemd160.js

<script src="cryptojs/rollups/ripemd160.js"></script>

调用 ripemd160 方法

var str = '123456';
CryptoJS.RIPEMD160(str);
  • sha 系列:sha1、sha2、sha3…

sha 具有一系列散列算法

The SHA hash functions were designed by the National Security Agency (NSA). SHA-1 is the most established of the existing SHA hash functions, and it’s used in a variety of security applications and protocols. Though, SHA-1’s collision resistance has been weakening as new attacks are discovered or improved.

SHA-256 is one of the four variants in the SHA-2 set. It isn’t as widely used as SHA-1, though it appears to provide much better security.

SHA-512 is largely identical to SHA-256 but operates on 64-bit words rather than 32.
CryptoJS also supports SHA-224 and SHA-384, which are largely identical but truncated versions of SHA-256 and SHA-512 respectively.

SHA-3 is the winner of a five-year competition to select a new cryptographic hash algorithm where 64 competing designs were evaluated.
SHA-3 can be configured to output hash lengths of one of 224, 256, 384, or 512 bits. The default is 512 bits.

引入 sha 相关 js

<script src="cryptojs/rollups/sha1.js"></script>
<script src="cryptojs/rollups/sha3.js"></script>
<script src="cryptojs/rollups/sha224.js"></script>
<script src="cryptojs/rollups/sha256.js"></script>
<script src="cryptojs/rollups/sha384.js"></script>
<script src="cryptojs/rollups/sha512.js"></script>

调用 sha 相关方法

var str = '123456';
CryptoJS.SHA1(str);

var str = '123456';
CryptoJS.SHA3(str);

// 配置输出的哈希长度
CryptoJS.SHA3(str, {outputLength : 224});
CryptoJS.SHA3(str, {outputLength : 256});
CryptoJS.SHA3(str, {outputLength : 384});
CryptoJS.SHA3(str, {outputLength : 512});

var str = '123456';
CryptoJS.SHA224(str);

var str = '123456';
CryptoJS.SHA256(str);

var str = '123456';
CryptoJS.SHA284(str);

var str = '123456';
CryptoJS.SHA512(str);
  • hmac 系列:hmac_md5、hmac_ripemd160、hmac_sha1、hmac_sha3…

引入 hmac 相关 js

<script src="cryptojs/rollups/hmac-sha1.js">
</script>
<script src="cryptojs/rollups/hmac-sha3.js">
</script>
<script src="cryptojs/rollups/hmac-sha224.js">
</script>
<script src="cryptojs/rollups/hmac-sha256.js">
</script>
<script src="cryptojs/rollups/hmac-sha384.js">
</script>
<script src="cryptojs/rollups/hmac-sha512.js">
</script>

调用 hmac 相关 方法

var str = '123456';
var password = 'password';

// Hmac 相关调用前都增加了 Hmac
CryptoJS.HmacMD5(str, password);
CryptoJS.HmacRIPEMD160(str, password);
CryptoJS.HmacSHA1(str, password);
CryptoJS.HmacSHA3(str, password);
CryptoJS.HmacSHA224(str, password);
CryptoJS.HmacSHA256(str, password);
CryptoJS.HmacSHA384(str, password);
CryptoJS.HmacSHA512(str, password);

使用 Crypto-JS 进行加密、解密

Crypto-JS 相关 encrypt 函数会并不直接返回字符串,需要调用返回对象的 toString 方法,或者通过 Crypto-JS 转码才能得到真实的结果。

  • AES

引入 aes.js

<script src="cryptojs/rollups/aes.js"></script>

调用 CryptoJS.AES

// 官方示例, 每次输出的密文都不一样
CryptoJS.AES.encrypt("Message", "Secret Passphrase");

// 正确用法

var str = '123456';
// 密钥 16 位
var key = '0123456789abcdef';
// 初始向量 initial vector 16 位
var iv = '0123456789abcdef';
// key 和 iv 可以一致

key = CryptoJS.enc.Utf8.parse(key);
iv = CryptoJS.enc.Utf8.parse(iv);

var encrypted = CryptoJS.AES.encrypt(str, key, {
	iv: iv,
	mode: CryptoJS.mode.CBC,
	padding: CryptoJS.pad.Pkcs7
});

// 转换为字符串
encrypted = encrypted.toString();

// mode 支持 CBC、CFB、CTR、ECB、OFB, 默认 CBC
// padding 支持 Pkcs7、AnsiX923、Iso10126
// 、NoPadding、ZeroPadding, 默认 Pkcs7, 即 Pkcs5

var decrypted = CryptoJS.AES.decrypt(encrypted, key, {
	iv: iv,
	mode: CryptoJS.mode.CBC,
	padding: CryptoJS.pad.Pkcs7
});

// 转换为 utf8 字符串
decrypted = CryptoJS.enc.Utf8.stringify(decrypted);

// 引入其他加密模式, 填充模式需要引入对应的 js 文件
/*
cryptojs/components/mode-cfb-min.js
cryptojs/components/mode-ctr-min.js
cryptojs/components/mode-ecb-min.js
cryptojs/components/mode-ofb-min.js
cryptojs/components/pad-ansix923-min.js
cryptojs/components/pad-iso10126-min.js
cryptojs/components/pad-iso97971-min.js
cryptojs/components/pad-nopadding-min.js
*/
  • DES、Triple DES

DES、Triple DES 的调用形式与 AES 一致。

引入 triple.js, DES 和 Triple DES 都定义在 tripledes.js

<script src="cryptojs/rollups/tripledes.js"></script>

调用 CryptoJS.DES, CryptoJS.TripleDES

var str = '123456';
var key = '0123456789abcdef';
var iv = '0123456789abcdef';

key = CryptoJS.enc.Utf8.parse(key);
iv = CryptoJS.enc.Utf8.parse(iv);

// DES 加密
var encrypted = CryptoJS.DES.encrypt(str, key, {
	iv: iv,
	mode: CryptoJS.mode.CBC,
	padding: CryptoJS.pad.Pkcs7
});

// 转换为字符串
encrypted = encrypted.toString();

// DES 解密
var decrypted = CryptoJS.DES.decrypt(encrypted, key, {
	iv: iv,
	mode: CryptoJS.mode.CBC,
	padding: CryptoJS.pad.Pkcs7
});

// 转换为 utf8 字符串
decrypted = CryptoJS.enc.Utf8.stringify(decrypted);

// Triple DES 加密
var encrypted = CryptoJS.TripleDES.encrypt(str, key, {
	iv: iv,
	mode: CryptoJS.mode.CBC,
	padding: CryptoJS.pad.Pkcs7
});

// 转换为字符串
encrypted = encrypted.toString();

// Triple DES 解密
var decrypted = CryptoJS.TripleDES.decrypt(encrypted, key, {
	iv: iv,
	mode: CryptoJS.mode.CBC,
	padding: CryptoJS.pad.Pkcs7
});

// 转换为 utf8 字符串
decrypted = CryptoJS.enc.Utf8.stringify(decrypted);
  • Rabbit、RC4

Rabbit、RC4 调用方式一致,不支持 mode、padding。

引入 rabbit.js

<script src="cryptojs/rollups/rabbit.js"></script>

调用 CryptoJS.Rabbit

var str = '123456';
var key = '0123456789abcdef';
var iv = '0123456789abcdef';

key = CryptoJS.enc.Utf8.parse(key);
iv = CryptoJS.enc.Utf8.parse(iv);

var encrypted = CryptoJS.Rabbit.encrypt(str, key, {
	iv: iv
});

// 转换为字符串
encrypted = encrypted.toString();

var decrypted = CryptoJS.Rabbit.decrypt(encrypted, key, {
	iv: iv
});

// 转换为 utf8 字符串
decrypted = CryptoJS.enc.Utf8.stringify(decrypted);

引入 rc4.js

<script src="cryptojs/rollups/rc4.js"></script>

调用 CryptoJS.RC4

var str = '123456';
var key = '0123456789abcdef';
var iv = '0123456789abcdef';

key = CryptoJS.enc.Utf8.parse(key);
iv = CryptoJS.enc.Utf8.parse(iv);

var encrypted = CryptoJS.RC4.encrypt(str, key, {
	iv: iv
});

// 转换为字符串
encrypted = encrypted.toString();

var decrypted = CryptoJS.RC4.decrypt(encrypted, key, {
	iv: iv
});

// 转换为 utf8 字符串
decrypted = CryptoJS.enc.Utf8.stringify(decrypted);

Crypto-JS 文件目录结构

  • cryptojs
    • components
      • aes.js
      • cipher-core.js
      • core.js
      • enc-base64.js
      • enc-utf16.js
      • evpkdf.js
      • format-hex.js
      • hmac.js
      • lib-typedarrays.js
      • md5.js
      • mode-cfb.js
      • mode-ctr.js
      • mode-ctr-gladman.js
      • mode-ecb.js
      • mode-ofb.js
      • pad-ansix923.js
      • pad-iso10126.js
      • pad-iso97971.js
      • pad-nopadding.js
      • pad-zeropadding.js
      • pbkdf2.js
      • rabbit.js
      • rabbit-legacy.js
      • rc4.js
      • ripemd160.js
      • sha1.js
      • sha3.js
      • sha224.js
      • sha256.js
      • sha384.js
      • sha512.js
      • tripledes.js
      • x64-core.js
    • rollups
      • aes.js
      • hmac-md5.js
      • hmac-ripemd160.js
      • hmac-sha1.js
      • hmac-sha3.js
      • hmac-sha224.js
      • hmac-sha256.js
      • hmac-sha384.js
      • hmac-sha512.js
      • md5.js
      • pbkdf2.js
      • rabbit.js
      • rabbit-legacy.js
      • rc4.js
      • ripemd160.js
      • sha1.js
      • sha3.js
      • sha224.js
      • sha256.js
      • sha384.js
      • sha512.js
      • tripledes.js

cryptojs/components 目录下的所有文件都会对应一个压缩文件,比如 cryptojs/components/aes.js 同时会有一个 cryptojs/components/aes-min.js 文件。

cryptojs/rollups 目录下的所有文件都已经压缩完毕,每个文件都可以单独调用。

JavaScript Math

JavaScript Math 是 JavaScript 内置(built-in)的一个对象,包含常用的数学常量及数学方法。

JavaScript Math

Math 对象详细介绍 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

Math 有8个常量,接近18个数学方法,并有多个新增方法。

Math 常量

Math.E 欧拉常数 2.718281828459045
Math.LN2 2的自然对数 0.6931471805599453
Math.LN10 10的自然对数 2.302585092994046
Math.LOG2E 以10为底E的对数 1.4426950408889634
Math.LOG10E 以2为底E的对数 0.4342944819032518
Math.PI 圆周率 3.141592653589793
Math.SQRT1_2 1/2的平方根 0.7071067811865476
Math.SQRT2 2的平方根 1.4142135623730951

Math 方法

Math.abs(x) 获取 x 的绝对值
Math.acos(x) 获取 x 的反余弦值
Math.acosh(x) 获取 x 的反双曲余弦值 实验方法
Math.asin(x) 获取 x 的反正弦值
Math.asinh(x) 获取 x 的反双曲正弦值 实验方法
Math.atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来获取 x 的反正切值
Math.atanh(x) 获取 x 的反双曲正切值 实验方法
Math.atan2(x, y) 获取 y/x 的反正切值
Math.cbrt(x) 获取 x 的立方根 实验方法
Math.ceil(x) 获取大于等于 x 的最小整数
Math.cos(x) 获取 x 的余弦值
Math.cosh(x) 获取 x 的双曲余弦值 实验方法
Math.exp(x) 获取 Ex, Math.E 的 x 次幂
Math.expm1(x) 获取 Math.exp(x)-1 的值 实验方法
Math.floor(x) 获取小于等于 x 的最大整数
Math.fround(x) 获取与 x 最相近的单精度浮点数 实验方法
Math.hypot([x[,y[,…]]]) 获取所有参数的平方和的平方根, 统计 实验方法
Math.imul(x) 获取一个32位整数的乘积 ? 实验方法
Math.log(x) 获取以 Math.E 为底数, x 为指数的对数, 自然对数
Math.log1p(x) 获取 1 + x 的自然对数 实验方法
Math.log10(x) 获取以 10 为底数, x 为指数的对数 实验方法
Math.log2(x) 获取以 2 为底数, x 为指数的对数 实验方法
Math.max([x[,y[,…]]]) 获取所有参数中的最大值
Math.min([x[,y[,…]]]) 获取所有参数中的最小值
Math.pow(x,y) 获取 x 的 y 次幂
Math.random() 获取 0 到 1 之间的伪随机数
Math.round(x) 获取 x 四舍五入后的整数
Math.sign(x) 获取 x 的标记, 判定 x 是正数, 负数还是 0 -1, 0, 1
Math.sin(x) 获取 x 的正弦值
Math.sinh(x) 获取 x 的双曲正弦值 实验方法
Math.sqrt(x) 获取 x 的平方根
Math.tan(x) 获取 x 的正切值
Math.trunc(x) 获取 x 的整数部分,去除小数 实验方法

从 Math 常量可以看出 JavaScript 浮点数最多表示多少位。下面这段代码比较有趣:

1.1 + 2.2 // == 3.3 ?
// 得到结果 3.3000000000000003
Math.fround(1.1 + 2.2) == 3.299999952316284
// ? 得到最接近的浮点数