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 }
原文地址:https://www.cnblogs.com/wyb666/p/9350381.html