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

Posted 2020-08-22 一朵红杏

最初我们写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);