js编程能力提升细则

2019-12-20  本文已影响0人  五四青年_4e7d

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

}

上一篇 下一篇

猜你喜欢

热点阅读