Javascript oop设计模式 面向对象编程简单实例介绍

 更新时间:2016年12月13日 11:36:00   投稿:lqh  
这篇文章主要介绍了Javascript oop设计模式 面向对象编程简单实例介绍的相关资料,这里附有实例代码帮助大家学习理解,需要的朋友可以参考下

Javascript oop设计模式 面向对象编程

最初我们写js代码的时候是这么写

 function checkName(){
    //验证姓名
  }

  function checkEmail(){
    //验证邮箱
  }

  function checkPassword(){
    //验证密码
  }

这种方式会造成全局变量的严重污染,再过渡到

var checkObject = {

  checkName : function(){};
  checkEmail: function(){};
  checkPassword: funcion(){}; 

}

//也可如此写
var checkObject = {} // || function(){}
checkObject.checkName = function(){};
checkObject.checkEmail = function(){};
checkObject.checkPassword = function(){};


//以上这两种写法不能复制一份,也就是说在new 方法创建新的对象的时候,新对象不能继承这些方法

以上是直接使用,而不是新建对象复制一份的,复制一份的话可以这么写

var checkObject = function(){

    return {
      checkName:function(){},
      checkEmail:function(){},
      checkPassword:function(){}
    }
  }
//使用的时候 可以

var a = checkObject();
a.checkName();



这么写可以实现对象的复制 但是这不符合面向对象,新创建的类和checkObject 没有任何关系
于是我们可以采用构造函数的方式书写代码

  var checkObject = function(){
    this.checkName = function(){}
    this.checkEmail = function(){}
    this.checkPassword = function(){}
  }
//像这样我们便可以用CheckObject 来创建新的对象了,通过new 来创建对象,创建出来的每个对象都会对this上的属性进行复制,但是这么做的话,每次都会有相对较大消耗,对于共有的方法,我们可以放在对象的原型上

var checkObject = function(){};
checkObject.prototype.checkName = function(){};
//...


//这样写要将prototype 书写很多遍 ,所以我们可以这么写,并实现链式调用,将this返回

var checkObject = function(){};
checkObject.prototype={
  checkName:function(){
    //验证姓名
    return this;
  },

  checkEmail:function(){
    //验证邮箱
    return this
  },

  checkPassword:function(){
    //验证密码
    return this;
  }  

}

// 这两种方式不可混用,否则后边会覆盖前边,此时我们调用只需

new checkObject().checkName().checkEmail().checkPassword();

下面再来介绍一下面向对象和面向过程两种编程方式 .page 10

多个function 书写的方式是一种面向过程书写代码的实现方式,添加了很多全局变量而且不利于别人复用,在别人使用时你也不可修改,我们可以改用面向对象方式来重写,我们把需求抽成一个对象,这个对象称之为类,面向对象一个重要特点就是封装,将属性和方法封装在一个对象中,就像将物品放在一个旅行箱中,这样不管是使用和管理我们都方便,(虽然有时候感觉直接拿在外边摆放也很方便,但是东西一多便不利于管理)

  var Book = (function () {
    //静态私有变量
    var bookNum = 0;
    //静态私有方法
    function checkBook() {
    }

    //返回构造函数
    return function (newId, newName, newPrice) {
      //私有变量
      var name, price;
      //私有方法
      function checkId(id) {
      }
      //特权方法
      this.getPrice = function () {
      };
      this.getName = function () {
      };
      this.setName = function (name) {
        this.name = name
      };
      this.setPrice = function () {
      };
      //公有属性
      this.id = newId;
      //公有方法
      this.copy = function () {
      };
      bookNum++;
      if (bookNum > 100)
        throw new Error('oop javascript');

      //构造器 实例化过程中被调用的方法
      this.setName(name);
      this.setPrice(price);

    }
  })();

  Book.prototype = {
    //静态公有属性
    isJSBook: false,
    //静态公有方法
    display: function () {
    }

  };
  //对比Java 别被js 起的这些名字弄混了 其实Js 就模仿了一个New 其他的跟Java基本一样 类 全局变量 方法 有自己的理解比较好 以前未想明白
  // java 为什么那么些

//为了看起来更像一个类 我们将原型上的方法 写到类里边

 var Book = (function () {
    //静态私有变量
    var bookNum = 0;
    //静态私有方法
    function checkBook() {
    }

    //返回构造函数
     function _Book(newId, newName, newPrice) {
      //私有变量
      var name, price;
      //私有方法
      function checkId(id) {
      }
      //特权方法
      this.getPrice = function () {
      };
      this.getName = function () {
      };
      this.setName = function (name) {
        this.name = name
      };
      this.setPrice = function () {
      };
      //公有属性
      this.id = newId;
      //公有方法
      this.copy = function () {
      };
      bookNum++;
      if (bookNum > 100)
        throw new Error('oop javascript');

      //构造器 实例化过程中被调用的方法
      this.setName(name);
      this.setPrice(price);

    }
    _Book.prototype = {
      //静态公有属性
      isJSBook: false,
      //静态公有方法
      display: function () {
      }

    };
    return _Book;
  })();


下面再介绍一种创建对象的安全模式   

//注意 执行new Book 方法之前 this.title 会先执行一次
  var Book = function (title) {
    if (this instanceof Book) {
      alert(1);
      this.title = title;
    }else{
      return new Book(title);
    }
  };

  var book = new Book('js');
  alert(book.title);

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • js+css在交互上的应用

    js+css在交互上的应用

    关于css应用。以前一直认为css就是做布局样式,只能表现页面,跟交互是没关系的。事实上也基本不会往那边想。
    2010-07-07
  • JS计算两个数组的交集、差集、并集、补集(多种实现方式)

    JS计算两个数组的交集、差集、并集、补集(多种实现方式)

    本文通过多种实现方式给大家介绍了JS计算两个数组的交集、差集、并集、补集 的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • layui.js实现的表单验证功能示例

    layui.js实现的表单验证功能示例

    这篇文章主要介绍了layui.js实现的表单验证功能,结合实例形式分析了基于layui.js的事件监听、验证、判定等相关操作技巧,需要的朋友可以参考下
    2017-11-11
  • JavaScript实现HSL拾色器

    JavaScript实现HSL拾色器

    这篇文章主要为大家详细介绍了JavaScript实现HSL拾色器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • js查错流程归纳

    js查错流程归纳

    归纳是为了更好的理解。平时同事有问题找我帮忙解决问题,往往都是很小的问题,这种情况他们并不是缺乏解决问题的知识,而是需要找到问题的办法
    2012-05-05
  • JavaScript实战之带收放动画效果的导航菜单

    JavaScript实战之带收放动画效果的导航菜单

    这篇文章主要为大家详细介绍了JavaScript实战之带收放动画效果的导航菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • js 创建一个浮动div的代码

    js 创建一个浮动div的代码

    js 创建一个浮动div的代码,一般用来指导用户下面的操作与多条件选择。点击一下就可显示,具体的大家可以自由发挥。
    2009-12-12
  • JavaScript实现简单轮播图效果

    JavaScript实现简单轮播图效果

    这篇文章主要为大家详细介绍了JavaScript实现图片轮播,左右翻转,图片切换显示等效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 将页面table内容与样式另存成excel文件的方法

    将页面table内容与样式另存成excel文件的方法

    本文分析一下将页面table内容与样式另存成excel文件的方法,主要介绍style与class之间的区别问题。
    2015-08-08
  • javascript从作用域链谈闭包

    javascript从作用域链谈闭包

    这篇文章主要从作用域链谈闭包,闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现,本文针对闭包进行学习,需要的朋友可以参考下
    2015-12-12

最新评论