《JavaScript 设计模式》阅读笔记之第一章：灵活的js

于 2021-04-01 18:59:32 发布
阅读量166 收藏
点赞数
分类专栏： 学习笔记 文章标签： javascript 代码优化
原创文章如需转载请注明地址。
本文链接：https://blog.csdn.net/Irene1991/article/details/115381059
版权

最近发现了一种新的学习方式（或者写笔记的方式），感觉很方便。

在 html 中记录，主要是方便写 js 代码，然后以注释的方式写知识点。

因为会有很多同名函数和变量，所以测试代码文件另写另测试。

这样可以一边记录，一边有针对性的测试。测试不会打断记录，测试中，测试一个注释一个。后面回顾的时候，只看记录的 html 即可。

 

下面就整理下我读 张容铭 的 《JavaScript 设计模式》的笔记吧，只是第一章的内容。

这本书最大的特点就是从工作实际需求出发吧，不会干讲理论，理论结合实践，也是我喜欢的方式。

 

《JavaScript 设计模式》阅读笔记之第一章：灵活的js

这章主要是以一个简单的登录验证做需求，不断优化代码实现。

优化路径如下：

全局函数=》局部变量函数=》对象=》类=》原型定义=》链式定义和调用

<script>
  //登录的需求
  //1.1 定义函数实现,导致新创建3个全局变量
  function checkName(){
    console.log("验证姓名")
  }

  function checkEmail(){
    console.log("验证邮箱")
  }

  function checkPassword(){
    console.log("验证密码")
  }

  //1.2 函数的另一种形式
  //优化：局部变量代替全局变量（函数也是变量）,避免全局同名方法覆盖。
  var checkName=function(){
    console.log("验证姓名")
  }

  var checkEmail=function(){
    console.log("验证邮箱")
  }

  var checkPassword=function(){
    console.log("验证密码")
  }

  //1.3用对象收编变量
  //减少覆盖或被覆盖的风险,一旦被覆盖,所有功能都会失效,出错现象比较明显,方便错误定位。
  var checkObject={
    checkName:function(){
      console.log("验证姓名")
    },

    checkEmail:function(){
      console.log("验证邮箱")
    },

    checkPassword:function(){
      console.log("验证密码")
    }
  }

  //对象使用
  checkObject.checkName()

  //1.4对象的另一种形式
  //函数也是对象,给对象添加方法。下面这种方式 checkObject 在使用 new 关键字创建新对象时,新创建的对象不能继承 checkName 这些方法。即对象不能复用。
  //var newFn=new checkObject()
  //newFn.checkName() //newFn.checkName is not a function

  var checkObject=function(){}

  checkObject.checkName=function(){
    console.log("验证姓名")
  }

  checkObject.checkEmail=function(){
    console.log("验证邮箱")
  }

  checkObject.checkPassword=function(){
    console.log("验证密码")
  }

  //函数使用
  checkObject.checkName()

  //1.5真假对象
  //对象复用 将方法放在一个函数对象中,每次调用返回一个新对象,互不影响。
  var checkObject=function(){
    return{
      checkName:function(val){
        console.log("验证姓名")
        console.log(val)
      },

      checkEmail:function(){
        console.log("验证邮箱")
      },

      checkPassword:function(){
        console.log("验证密码")
      }
    }
  }

  //使用
  var a=checkObject()
  a.checkName(val);

  //1.6类也可以
  // ES 5 没有 class 关键字,所以使用函数来模拟类。生成实例的时候,使用new关键字。类的属性和方法,还可以定义在构造函数的prototype对象之上。

  //构造函数使用全局作用域
  var scope = "global";
  function constructFun(){
      var scope = "local";
      //构造函数可以是匿名的,可以传入任意数量的字符串实参,最后一个实参是函数体。
      return new Function("return scope");//无法捕捉局部作用域
  }

  var rel = constructFun()();
  console.log(rel);//global 全局没有定义scope,则返回scope is not defined

  // ES 6 中的类,使用class关键字,是原型继承的一种语法糖。

  var checkObject=function(){
    this.checkName=function(){
      console.log("验证姓名")
    }

    this.checkEmail=function(){
      console.log("验证邮箱")
    }

    this.checkPassword=function(){
      console.log("验证密码")
    }
  }

  //使用
  //用关键字 new 创建类
  var a= new checkObject()
  a.checkName();

  //1.7 一个检测类
  //通过 this 定义函数内部的方法,使用new新创建的对象都会对类上的this上的属性进行复制,所以新创建的对象都有自己的一套方法。
  //这么做比较消耗,可以优化,将方法绑定在 checkObject 对象的原型上,这样,新创建的对象所拥有的方法就都是一个了,因为它们都依赖 prototype 原型依次寻找,找到的方法都是同一个。
  var checkObject=function(){}

  //写法一

  checkObject.prototype.checkName=function(){
      console.log("验证姓名")
  }

  checkObject.prototype.checkEmail=function(){
      console.log("验证邮箱")
  }

  checkObject.prototype.checkPassword=function(){
      console.log("验证密码")
  }

  //写法优化
  //写法二

  checkObject.prototype={
    checkName:function(){
      console.log("验证姓名")
    },

    checkEmail:function(){
      console.log("验证邮箱")
    },

    checkPassword:function(){
      console.log("验证密码")
    }
  }

  //注意：以上两种方式不能混写
  //如下混写：后定义的 checkObject.prototype 会整个覆盖先定义的 checkObject.prototype
  var checkObject=function(){}

  checkObject.prototype.checkName=function(){
      console.log("验证姓名 先定义")
  }

  checkObject.prototype.checkEmail=function(){
      console.log("验证邮箱 先定义")
  }

  checkObject.prototype={
    checkEmail:function(){
      console.log("验证邮箱 后定义")
    },

    checkPassword:function(){
      console.log("验证密码")
    }
  }

  //测试
  var a =new checkObject();
  a.checkName();//a.checkName is not a function
  a.checkEmail();//验证邮箱 后定义
  a.checkPassword();

  //使用
  var a =new checkObject();
  a.checkName();
  a.checkEmail();
  a.checkPassword();

  //1.8方法还可以这样用
  //以上使用方法,调用了3个方法,对象a书写了3遍。
  //优化：每个方法的末尾,返回当前对象 this ,这样可以使用链式调用。

  //优化对象
  var checkObject={
    checkName:function(){
      console.log("验证姓名")
      return this
    },

    checkEmail:function(){
      console.log("验证邮箱")
      return this
    },

    checkPassword:function(){
      console.log("验证密码")
      return this
    }
  }

  //使用
  checkObject.checkName().checkEmail().checkPassword()

  //优化类
  var checkObject=function(){}

  checkObject.prototype={
    checkName:function(){
      console.log("验证姓名")
      return this
    },

    checkEmail:function(){
      console.log("验证邮箱")
      return this
    },

    checkPassword:function(){
      console.log("验证密码")
      return this
    }
  }

  //使用类 需要先创建一下
  var a =new checkObject();
  a.checkName().checkEmail().checkPassword();

  //1.9函数的祖先
  //prototype.js 
  //扩展原生对象 
  Function.prototype.checkEmail=function(){
    console.log("验证邮箱")
  }

  //使用
  //函数形式
  var f=function(){}
  f.checkEmail();

  //类的形式
  var f=new Function()
  f.checkEmail();

  //这样做会污染原生对象 Function
  //优化：抽象出一个统一添加方法的功能
  Function.prototype.addMethod=function(name,fn){
    this[name]=fn;
  }

  //使用
  var methods=function(){};
  //或
  var methods=new Function();

  methods.addMethod('checkName',function(){console.log("验证姓名")})
  methods.addMethod('checkEmail',function(){console.log("验证邮箱")})

  methods.checkName();
  methods.checkEmail();

  //1.10链式添加和调用
  //函数式调用
  Function.prototype.addMethod=function(name,fn){
    //注意
    this[name]=fn;
    return this;
  }

  //使用 
  var methods=function(){};

  methods.addMethod('checkName',function(){
    console.log("验证姓名")
    return this;
  }).addMethod('checkEmail',function(){
    console.log("验证邮箱")
    return this;
  })

  //函数式调用
  methods.checkName().checkEmail();

  //1.11换一种方式使用方法
  //为了类式调用改造方法
  Function.prototype.addMethod=function(name,fn){
    //注意
    this.prototype[name]=fn;
    return this;
  }

  //使用
  var methods=function(){};

  methods.addMethod('checkName',function(){
    console.log("验证姓名")
    return this;
  }).addMethod('checkEmail',function(){
    console.log("验证邮箱")
    return this;
  })

  //类式调用
  var m=new methods();
  m.checkName().checkEmail();

  //课后作业
  //1、真假对象（1.5）中如何实现方法的链式调用

  var checkObject=function(){
    return{
      checkName:function(){
        console.log("验证姓名")
        return this
      },

      checkEmail:function(){
        console.log("验证邮箱")
        return this
      },

      checkPassword:function(){
        console.log("验证密码")
        return this
      }
    }
  }

  //使用
  var a=checkObject()
  a.checkName().checkEmail().checkPassword();

  //2、定义一个可以为函数添加多个方法的 addMethod 方法

  var arr=[
    {
      name:'checkName',
      fn:function(){
        console.log("验证姓名")
        return this;
      }
    },
    {
      name:'checkEmail',
      fn:function(){
        console.log("验证邮箱")
        return this;
      }
    }
  ];

  Function.prototype.addMethod=function(arr){
    arr.forEach(item => {
      this[item.name]=item.fn;
    });
    return this;
  }

  //使用 
  var methods=function(){};

  methods.addMethod(arr)

  //函数式调用
  methods.checkName().checkEmail();


  //3、定义一个既可以为函数原型添加方法，又可以为其自身添加方法的 addMethod 方法
  var arr=[
    {
      name:'checkName',
      isPrototype:true,
      fn:function(){
        console.log("验证姓名")
        return this;
      }
    },
    {
      name:'checkEmail',
      isPrototype:false,
      fn:function(){
        console.log("验证邮箱")
        return this;
      }
    }
  ];

  //为了方便测试，引入fn2参数，实际使用去掉即可。
  Function.prototype.addMethod=function(arr,fn1,fn2){
    arr.forEach(item => {
      if(item.isPrototype){
        //为函数原型添加方法
        this[item.name]=item.fn;
      }else{
        //为其自身添加方法
        fn1[item.name]=item.fn;
      }
    })
  }

  //使用 
  var fn1=function(){};
  var fn2=function(){};

  fn1.addMethod(arr,fn1,fn2);
  fn2.addMethod(arr,fn1,fn2);

  //函数式调用
  fn1.checkName().checkEmail();
  fn2.checkName();
  fn2.checkEmail();//fn2.checkEmail is not a function
</script>

 

关于 this 指向性问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁。

推荐阅读

https://www.cnblogs.com/pssp/p/5216085.html

精华摘录

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window（严格模式中this指向undefined）。

情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，this指向的是最后调用它的对象。

new，call，apply，bind 会改变函数中 this 的指向。

当this碰到return时
如果返回值是一个对象，那么this指向的就是那个返回的对象，否则 this 还是指向函数实例。
还有一点就是虽然 null 也是对象，但是在这里 this 还是指向那个函数的实例。

 

.prototype 的两种写法

先写 .prototype={}，后写 prototype.xxx=function(){} 可以正常使用。

反之被替换报错。

<script>
  //测试 .prototype 的两种写法共存
  //先写 .prototype={}，后写 prototype.getImageLength=function(){} 可以正常使用。反之被替换报错。
  //原因：先写对象，后添加对象的属性可以。
  var LoopImages=function(imgArr,container){
    this.imagesArray=imgArr;
    this.container=container;
  }

  LoopImages.prototype={
    createImage:function(){console.log("createImage")},
    changeImage:function(){console.log("changeImage")}
  } 

  LoopImages.prototype.getImageLength=function(){
    console.log(this.imagesArray.length);
    return this.imagesArray.length;
  }

  //渐隐切换类
  var FadeLoopImg=function(imgArr,container,arrow){
    //构造函数继承图片轮播类
    LoopImages.call(this,imgArr,container);
    //切换箭头
    this.arrow=arrow;
  }

  FadeLoopImg.prototype=new LoopImages();

  //重写继承的切换方法
  FadeLoopImg.prototype.changeImage=function(){
    console.log('FadeLoopImg changeImage function')
  }

  //测试用例
  //实例化一个渐隐切换图片类
  var fadeImg=new FadeLoopImg(['1.jpg','2.jpg','3.jpg','4.jpg'],'slide',['left.jpg','right.jpg']);
  fadeImg.changeImage()//FadeLoopImg changeImage function
  fadeImg.createImage()//createImage
  fadeImg.getImageLength()//4
</script>

 

Irene1991
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript设计模式（张容铭著）第一章笔记
xlelou的博客
07-17 970
// 此内容是张容铭写的javascript设计模式的第一章，简单介绍了面向对象编程 // 感觉就像是自己的js在摸索过程中的进化史，从面向过程到面向对象，一步步在改良   // 看完这几个简单的示例，意味深长，都是骚操作   // 为了方便，将匿名function 赋值给fn，没有实际含义 var fn = function(){}   // 刚开始做开发为了满足功能而写的方法 ...
javascript 设计模式（张容铭）学习篇 3
03-11 169
简单工厂模式：又叫 静态工厂方法，由一个工厂对象决定某一种产品对象类的实例。主要用来创建同一类对象 3.1 工作中的第一次需求 警示框 类 var LoginAlert = function(text){ this.content = text; } LoginAlert.pr...
JavaScript设计模式视频教程
02-01
本课程是由张容铭老师在百度工作多年，总结的经验写了一本javaScript设计模式并且创建了这门课程。
javascript设计模式(张容铭)学习笔记 - 照猫画虎-模板方法模式
weixin_34409822的博客
09-17 175
模板方法模式(Template Method)：父类中定义一组操作算法骨架，而降一些实现步骤延迟到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。 项目经理体验了各个页面的交互功能，发现每个页面的弹出框样式都不太一致，有的是高度高一些，有的是字体大了些，有的是按钮歪了些。 于是我们就需要将这些页面中的弹出框归一化。 我们首先要做的就是创建一个基本提示框基类，然后其他...
 Don't Put Your Resume Ahead of the Requirements
陆讯
03-26 1752
 Don’t Put Your Resume Ahead of the RequirementsAs engineers we sometimes recommend technologies, methodolo- gies, and approaches for solving problems because deep down we want to have these on our re
javascript高级程序设计笔记第一章.docx
05-04
本文将深入探讨在"javascript高级程序设计笔记第一章"中提及的关键概念。 首先，ECMAScript（通常简称为ES）是JavaScript的标准化规范，由ECMA国际维护。在ECMAScript中，存在五种基本数据类型：Undefined、Null、...
JavaScript高级程序设计 阅读笔记（十七） js事件
10-27
JavaScript高级程序设计中的第十七章主要探讨了JS事件的相关概念和处理机制。事件流、事件处理函数以及事件对象是这一章的核心内容。 **事件流**是指事件在DOM（文档对象模型）中传播的方式。在IE中，事件流采用的...
JSP复习笔记——第11章 JSP 构架和MVC设计模式
05-25
在IT行业中，JSP（JavaServer ...总之，JSP结合MVC设计模式为Web应用开发提供了一种强大而灵活的框架，通过案例中的“mvc+dao实现留言管理程序”，我们可以学习如何在实际项目中运用这些概念，提升我们的开发技能。
自考网页设计与制作课堂笔记(已排版,有重复).pdf
01-07
- **用户优先**：始终以浏览者的需求为第一位。 - **有效性**：确保网页的有效性。 - **一致性**：保持页面布局的一致性。 - **表格与结构**：合理使用表格和其他结构元素。 - **图片使用**：谨慎选择图片。 - **...
JavaScript中常见的设计模式
daidaidaiqifei的博客
03-01 2101
什么是设计模式？ 就是一个房间里放东西，很乱，很难找到你想要的东西，但是做一些箱子放里面，方便你去放东西与寻找， 我们吧做箱子包放入房间的行为叫做设计模式。 单列模式 解决痛点 : 同一个构造函数,生成同一个实例化对象 防止重复实例化。 原理：判断这个构造函数是否,使用用过 如果使用过,返回之前的对象 如果没有使用过,就执行构造函数,生成实例化对象 解决,重复创建对象的问题 // Utils 中 ...
js的36个设计模式：结构型模式
神百事的博客
12-13 1965
1.外观模式（1）在对页面dom绑定原生点击事件的时候，dom2级会覆盖dom0级的操作；IE9不兼容addEventListener，而不支持dom2级的浏览器，又只能用dom0级的onclick。外观模式可以把一些兼容方法或者复杂的方法简化。function addEvent(dom,type,fn){ //dom2 if(dom.addEventListener){
JavaScript设计模式——灵活的语言
Hi_xiexialing的博客
02-18 1461
JavaScript设计模式（张容铭） 第一章:灵活的语言——JavaScript 知识点：对象、构造函数、全局变量、原型链、链式调用 var CheckObject = function(){}; CheckObject.prototype = { checkName: function(){
《JavaScript设计模式 张》整理
weixin_33694172的博客
12-06 155
最近在研读另外一本关于设计模式的书《JavaScript设计模式》，这本书中描述了更多的设计模式。 一、创建型设计模式 包括简单工厂、工厂方法、抽象工厂、建造者、原型和单例模式。 1）简单工厂 又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象类的实例。 两种实现方式，第一种是通过类实例化对象创建，第二种是创建一个新对象然后包装增强其属性和功能。 demo代码。   2）工厂方...
js的36个设计模式：技巧型模式
神百事的博客
04-21 481
1.链模式通过return this,让函数对象可以链式调用。function fn(){ this.a = function(){ console.log("a"); return this; }; this.b = function(){ cosnole.log("b"); return this;
【JavaScript设计模式张容铭】抽象工厂模式深度剖析——关于继承与constructor属性的深度理解
qq_41146956的博客
10-24 8062
写在前面 最近阅读了张容铭的《JavaScript设计模式》一书，阅读到抽象工厂模式一节时对书上的代码产生了疑问，但同时在解决疑问的过程中，对继承又产生了新的理解。 我仔细查阅了很多文章，我发现确实没有一篇深刻的谈到这个模式，每篇文章都大同小异，只是照搬书上的内容，对于我们这种自学的人，可真是绞尽脑汁啊。反正都熬到了大半夜，所以索性定自己来阐述这个问题。 这篇文章主要是记录我对继承新的理解，并且...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Irene1991

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值