js函数和封装

• $就是jquery对象，$()就是jQuery()，在里面可以传参数，作用就是获取元素

• js对象与jQuery对象的区别：jQuery对象是一个数组，jQuery对象转为js对象：[0] 取第一个即可，js对象是dom对象，转为jquery对象：$(' ')

• 函数声明

function 方法名(){
    //方法体
}
 
//调用函数myFunc，传入的参数是一个匿名函数，返回一个匿名函数
myFunc(function() {
 
　　 return function(){};
 
}); 
 

• 函数表达式

var 变量名 = function [name] ([param1[, param2[, ..., paramN]]]){
    //方法体
};
 

• 箭头函数

//没有方法名
//代码块有多条语句时，用大括号包裹
//返回值是对象时，用小括号包裹
//箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this
//没有 arguments
//不能通过 new 关键字调用
//没有原型
//没有 super
 
(参数) => {
    //方法体，返回值
}
 

• 匿名函数

(function (){
    //方法体
})()  //这里表示立即执行
 

• 立即执行函数的不同写法：
  详情可参考：https://blog.csdn.net/weixin_30297281/article/details/98843630

function() {}()   // 错误写法
(function 方法名(){})();
!function (){}()
~function (){}()
(function (){}) 
+function(){}();
(function() {})();  
(function() {}()); 
 

• 函数闭包
  详情查看csdn：https://blog.csdn.net/mnilz/article/details/104221272

定义：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包
特点：
    函数嵌套函数
    函数内部可以引用外部的参数和变量
    参数和变量不会被垃圾回收机制回收
 

• 对象增强

const username = 'goudan';
const age =  20;
const sex = '男';
const reqData = {
    username: username,
    age,  // 当key和value的名称一致时，可省略value
    sex 
}
 

• 对象方法的定义

//方法名作为key，函数代码块作为value
const user = {
    add: function(){
        console.log(this);  // 指向当前对象
    },
    update: () => {
        console.log(this);  // 箭头函数的写法，指向Windows对象
    },
    del(){
        console.log(this);   // ES6中简写方式，指向当前对象   
    }
}
//使用：对象.方法名
user.add()
 

• js封装

//对象方法的使用案例，可将对象方法单独封装到js，使用时引入
const $ = {
    dom: (obj) => {    // 获取dom节点
        if(obj.indexOf('.') == 0) {
            return document.getElementsByClassName(obj.substring(1))
        }
        if(obj.indexOf('#') == 0) {   // 根据id获取dom元素
            return document.getElementById(obj.substring(1))
        }
        return document.getElementsByTagName(obj)   // 返回指定标签名的对象的列表
    },
    query: (str) => {   // 获取选中的第一个指定元素
        return document.querySelector(str)   
    },
    queryAll: (str) => {   // 获取选中的所有指定元素
        return document.querySelectorAll(str)
    },
    siblings: function(elem) {  // 获取所有兄弟节点
        //parentNode返回指定节点的父节点，childNodes返回指定节点的所有子节点
        return $.siblingAll(elem.parentNode.childNodes, elem)
    },
    siblingAll: function(o, elem) {  // 获取所有子节点
        var arr = []
        for(let item of o) {
            //nodeType返回指定节点的节点类型，元素节点返回1，属性节点返回2
            if(item.nodeType === 1 && item !== elem) {
                arr.push(item)
            }
        }
        return arr;
    },
}
 
// 对象.方式名
var oP = $.query('div.box p.current')   // 获取到ele对象
var o = $.siblings(oP)  // 获取所有兄弟节点
 

• jquery.ajax

$(function(){
    //请求参数
    var list = {};
    //
    $.ajax({
        //是否异步，默认true为异步请求
        async: false,
        //请求方式
        type : "POST",
        //请求的媒体类型，发送
        contentType: "application/json;charset=UTF-8",
        //请求地址
        url : "http://127.0.0.1/admin/list/",
        //发送请求的数据，这里转为字符串格式，才能进行传输
        data : JSON.stringify(list),
        //返回的数据格式
        dataType : json,
        //请求成功
        success : function(result) {
            console.log(result);
        },
        //请求失败，包含具体的错误信息
        error : function(e){
            console.log(e.status);
            console.log(e.responseText);
        }
    });
});
 

• async和await

// async放在函数前表示这是一个异步函数，该函数的执行不会阻塞后面代码的执行
async getMenuList(){
  // await只能在async函数中使用，await表达式会暂停当前 async function的执行，先执行await
  const {data: res} = await this.$http.get('menus');
  console.log(res)
}
 

参考