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)
}