JavaScript經常使用代碼

在這存一下JavaScript經常使用代碼：

 

1.封裝輸出

1 var log = function() {
2     console.log.apply(console, arguments)
3 }
4 
5 // 測試:
6 log(123)
7 log("333", "666")
8 log("this ", "is", " a test!")

 

 

2.向JavaScript的字符串中添加一些功能

(1)添加reverse函數

1 String.prototype.reverse = function (){
2     return Array.prototype.reverse.apply(this.split('')).join('')
3 }
4 
5 // 測試:
6 console.log("wyb".reverse())
7 console.log("wyb666".reverse())

 

(2)添加字符串格式化函數format

 1 // JavaScript字符串格式化
 2     String.prototype.format = function (args) {
 3         var result = this;
 4         if (arguments.length > 0) {
 5             if (arguments.length == 1 && typeof (args) == "object") {
 6                 for (var key in args) {
 7                     if (args[key] != undefined) {
 8                         var reg = new RegExp("({" + key + "})", "g");
 9                         result = result.replace(reg, args[key]);
10                     }
11                 }
12             }
13             else {
14                 for (var i = 0; i < arguments.length; i++) {
15                     if (arguments[i] != undefined) {
16                         var reg = new RegExp("({)" + i + "(})", "g");
17                         result = result.replace(reg, arguments[i]);
18                     }
19                 }
20             }
21         }
22         return result;
23     };
24 
25 // 測試:
26 s = "{0} {1} {2}".format("this", "is a test", "for format")  // this is a test for format
27 console.log(s)

 

 

3.JavaScript序列化/反序列化

有一個常見的需求是在 字典/數組 和 字符串 之間相互轉換，這個過程叫作 序列化/反序列化
在 js 中, 序列化使用 JSON 數據格式，全稱 JavaScript Object Notation (js 對象標記)，這個格式已是如今用於互聯網數據交換的事實標準格式了
python 也有內置的標準庫進行這種轉換，固然JavaScript中也有內置的對象能夠進行這些操做：

1 var s = JSON.stringify([1, 2, 3, 4])
2 console.log('序列化後的字符串: ', typeof s, s)
3 var a = JSON.parse(s)
4 console.log('反序列化後的數組: ', typeof a, a)

 

 

4.JavaScript ajax函數

基本原理：

 1 // GET
 2 // 建立 AJAX 對象
 3 var r = new XMLHttpRequest()
 4 // 設置請求方法和請求地址
 5 r.open('GET', '/login', true)
 6 // 註冊響應函數
 7 r.onreadystatechange = function() {
 8     console.log('state change: ', r)
 9 }
10 // 發送請求
11 r.send()
12 
13 
14 // POST
15 // 建立 AJAX 對象
16 var r = new XMLHttpRequest()
17 // 設置請求方法和請求地址
18 r.open('POST', '/login', true)
19 // 設置發送的數據的格式
20 r.setRequestHeader('Content-Type', 'application/json')
21 // 註冊響應函數
22 r.onreadystatechange = function() {
23     if (r.readyState === 4) {
24         console.log('state change: ', r, r.status, r.response)
25         // 轉換格式
26         var response = JSON.parse(r.response)
27         console.log('response', response)
28     } else {
29         console.log('change')
30     }
31 }
32 // 發送請求
33 var account = {
34     username: 'gua',
35     password: '123',
36 }
37 var data = JSON.stringify(account)
38 r.send(data)

封裝：

 1 /*
 2  ajax 函數
 3 */
 4 var ajax = function(method, path, data, reseponseCallback) {
 5     var r = new XMLHttpRequest();
 6     // 設置請求方法和請求地址
 7     r.open(method, path, true);
 8     // 設置發送的數據的格式爲 application/json
 9     // 這個不是必須的
10     r.setRequestHeader('Content-Type', 'application/json');
11     // 註冊響應函數
12     r.onreadystatechange = function() {
13         if(r.readyState === 4) {
14             // r.response 存的就是服務器發過來的放在 HTTP BODY 中的數據
15             reseponseCallback(r.response);
16         }
17     };
18     // 把數據轉換爲 json 格式字符串
19     data = JSON.stringify(data);
20     // 發送請求
21     r.send(data);
22 };

 

 

5.擴充類型的功能

JavaScript容許給語言的基本類型擴充功能，在JavaScript中沒有專門的整數類型，另外JavaScript自身提供的取整方法也是有些漏洞：

咱們能夠使用下面的代碼去擴充取整方法，使之能正常使用：

 1 // 經過Function.prototype增長方法使得該方法對全部函數可用 
 2 Function.prototype.method = function (name ,func){
 3     this.prototype[name] = func;
 4     return this;
 5 }
 6 
 7 Number.method('integer', function(){
 8     return Math[this < 0 ? 'ceil' : 'floor'](this);
 9 });
10 document.writeln((-10/3).integer());  // -3

另外注意咱們也能夠限制原型中沒有此方法時才添加：

1 // 經過Function.prototype增長方法使得該方法對全部函數可用 -> 只有原型中沒有此方法時才添加
2 Function.prototype.method = function (name ,func){
3     if(!this.prototype[name]){
4           this.prototype[name] = func;
5     }
6     return this;
7 }