es6语法给元素绑定方法事件:
<button onclick="getinfo(2)">点击</button>
const getinfo = (num) =>{}
方法封装调用:
function test(){
this.name = $('body').height()
this.date = function(){
}
}
var T = new test()
$("#but").on("click",function(){
console.log(T.name)
T.date()
})
es6结构赋值
var [a,b] = [1,2]
console.log(a)
var [a,...b] = [1,2,3,4,5,6,7,8]
console.log(b)
call,applay,bind这三个方法都是用来改变某一个函数this关键字指向的:
function yo(name){
console.log('我的名字'+ name + this.name)
}
var user = {
name:'小米'
}
yo.call(user,'李慷')
includes() 方法用来判断一个数组是否包含一个指定的值:
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob');
// true
查看字符串是否为 "字符" 开头结尾(返回true false):
startWith、endWith
闭包方式存储方法和属性:
function user(name) {
var age;
return {
getAge: function () {
return age
},
setAge: function (newage) {
age = newage
}
}
}
var user = user('lk')
user.setAge(12);
var age = user.getAge()
console.log(age)
callback回调函数的使用:
var info = [
{name:'列表1',status:2},
{name:'列表2',status:3},
{name:'列表3',status:4},
]
//主轴需要做的事情:
function getInfo(info,callback){
for(var i = 0; i < info.length;i++){
var item = info[i]
callback(item)
}
}
getInfo(info,each)
getInfo(info,set)
//把数据分开判断:
function each(item){
if(item.status == 3 ){
console.log(item)
}
}
function set(item){
if(item.status == 2 ){
console.log(item)
}
}
事件监听的书写方式:
document.getElementById("btn1").addEventListener('click', a);
document.getElementById("btn1").addEventListener('click', b);
注:js是单线程必须一个一个执行;多线程方法,回调函数,事件监听,发布订阅模式,Promise , async
localstorage和sessionstorage的使用:
存储:localStorage.setItem('key','val')
获取: var content = localStorage.getItem('key')
删除: localStorage.removeItem('key','val')
switch复杂判断优雅写法:
const butClcik = (status)=>{
switch(status){
case 1:
$('body').css('background','red')
break
case 2:
$('body').css('background','#ccc')
break
default:
$('body').css('background','orange')
breack
}
}
es6 Class 语法 书写属性和方法
class MathHandle {
constructor(x, y) { //构造器
this.x = x
this.y = y
}
add() {
return this.x + this.y
}
}
const m = new MathHandle(1, 2)
console.log(m.add())
js设计模式(简单工厂模式):
优点:减少大量冗余代码 缺点:无法识别对象类型
function CarFactory (brand, price) {
var car = new Object();
car.brand = brand;
car.price = price;
car.getPrice = function () {
return this.price;
}
return car;
}
var car1 = CarFactory("牌子A", 10000);
var car2 = CarFactory("牌子B", 20000);
js设计模式(单例模式):
let timeTool = {
name: '处理时间工具库',
getISODate: function() {},
getUTCDate: function() {}
}
网友评论