💠

💠 2024-07-07 18:00:42

JavaScript

数据类型

字符串

函数

函数传值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

    function handlerGet(url, role, success, fail) {
    var request = $.ajax({
        method: 'GET',
        url : 'xxx'+url
    });
    request.done(success);
    request.fail(fail);
    }
    function testRole() {
        handlerGet('/world', 'student',
            function (data) {
                layer.msg('获取成功');
            }, function (data) {
                layer.msg('身份认证已过期， 请重新登录');
            })
    }

JSON

json 数据 添加 删除 排序

  • 直接点引用属性或者a[‘b’]的方式,

    • 迭代集合:自带foreach循环 data.forEach(function(value){})

  • 但是有时候不能使用，会undefined，eval(’(’+data+’)’)解析后才能用

    • 原因在于Response Headers 的 Content-Type:application/json;charset=UTF-8 如果回应的类型是 text/plain 就需要使用 eval(’(’+data+’)’)才能用
    • 如果设置成JSON就可以直接点引用和循环迭代, 并且不需要强制的JSON规范, 值为数字时不加双引号也是正常解析的
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

    var array = {
        "a": "abc",
        "b": [1, 2, 3, 4, 5, 6],
        "c": 3,
        "d": {
            "name": "james",
            "age": 28
        },
        "e": null,
        "f": true
    };

    //遍历array方式1
    for (var x in array) {
        if (typeof array[x] == 'object' && array[x] != null) {
            for (var y in array[x]) {
                console.log(">>key = " + y + " value = " + array[x][y]);
            }
        } else {
            console.log("key = " + x + " value = " + array[x]); // 非array object
        }
    }

常用功能小模块

输入校验

Ajax

参考: 使用 Fetch

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function get(url, handle) {
    let httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', url, true);
    httpRequest.send();
    /**
        * 获取数据后的处理程序
        */
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
            handle(httpRequest)
        }
    };
}

function post(url, data, handle) {
    let xhr = new XMLHttpRequest();
    //使用HTTP POST请求与服务器交互数据
    xhr.open("POST", url, true);
    //设置发送数据的请求格式
    xhr.setRequestHeader('content-type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            handle(xhr.responseText)
        }
    }
    //将用户输入值序列化成字符串
    xhr.send(JSON.stringify(data));
}

事件

键盘

鼠标

JavaScript 鼠标滚轮事件

常用库和框架

Jquery

jquery有是slim版(没有ajax的精简版 ) JQuery官网 | Jquery教程

  • 事件绑定 $('#Button').on('click', function(){})
  • 在HTML的DOM上绑定数据:设置 data-* 属性 然后jq拿到元素直接调用 $(this).data('id')拿到值就可以避免函数传值

原生方式异步提交Form

1
2
3
4

    $("#set-form").submit(function(e){
        e.preventDefault();
        console.log('prepare submit')
    });

echarts

官网 | 做图表展示很简单

资源文件

图片

参考: JS 图片转Base64