美文网首页
js编程能力提升细则

js编程能力提升细则

作者: 五四青年_4e7d | 来源:发表于2019-12-20 00:19 被阅读0次

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

}

相关文章

  • js编程能力提升细则

    es6语法给元素绑定方法事件: 点击 const getinfo = (num) =>{} 方法封装调用: fun...

  • 提升编程能力

    提升编程能力很关键的一点是研究别人的代码是怎么写的。 平时使用的框架,不理解的地方除了通过搜索引擎去寻找答案,最好...

  • 如何提升java编程能力 java编程快速提升技巧

    如何提升java编程能力?很多学java的小伙伴们肯定很想提升自己的编程能力,因为这可是关系到自己的工作发展问题,...

  • 搭建区块链技术(go和JavaScript实现)

    技术图: 编程实现:(1)Nodejs/Javascript Nodejs平台强大的网络编程能力,以及js脚本语言...

  • 猫眼

    var变量提升,函数声明提升,消除变量声明提升(let); 高阶函数,函数式的编程,柯里化 原型链继承,js面向对...

  • 提高js编程能力

    第一: 第二: 第三: 第四: 最重要的就是自己先动手去做,去做了,才会发现自己哪里不会,不会了才会去查...

  • codility 之 BinaryGap

    利用codility提升自己的编程能力。 题目: A binary gap within a positive i...

  • JS的声明提升、this、作用域

    声明提升 大部分编程语言都需要先声明变量再使用,JS可以先使用再声明,JS可以正常输出undefined, 而不是...

  • 「造轮子」提升编程能力

    纸上得来终觉浅,绝知此事要躬行。 不知从何时开始,看到很多人在博客上介绍自己造的轮子,也看到不少人评论:“切,又是...

  • Java Collections Framework 源码分析(

    “阅读本文大约需要 5 分钟 阅读源码是提升编程能力的一...

网友评论

      本文标题:js编程能力提升细则

      本文链接:https://www.haomeiwen.com/subject/rqqbnctx.html