首页 > 代码库 > Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

2024-07-06 02:51:46   222人阅读

Javascript面向对象特性实现（封装、继承、接口）

Javascript作为弱类型语言，和Java、php等服务端脚本语言相比，拥有极强的灵活性。对于小型的web需求，在编写javascript时，可以选择面向过程的方式编程，显得高效；但在实际工作中，遇到的项目需求和框架较大的情况下，选择面向对象的方式编程显得尤其重要，Javascript原生语法中没有提供表述面向对象语言特性的关键字和语法（如extends、implement）。为了实现这些面向对象的特性，需要额外编写一些代码，如下。

在开始使用OO特性之前，还需要考虑使用接口、继承所带来的弊端。封装、接口、继承都将使代码结构变得复杂，对于编码新手有较高的要求，对于别人接受你的项目成本也提高了，在团队协作中需要根据具体需求斟酌，不要为了秀技术而写代码；同时，封装和接口都将带来一些额外的内存开销，有些可以忽略不计，有些 则是得不偿失，需要注意。

一、封装

var book = (function(){
        var COUNT = 0;

        //静态私有方法
        function checkISBN(isbn){
            return true;
        }
        //构造器
        var ctor = function(id,name,isbn){
            var _id,_name,_isbn
            this.setId= function(id){
                _id=id;
            }
            this.getId = function(){
                return _id;
            }
            this.setName = function(name){
                _name = name;
            }
            this.getName = function(){
                return name;
            }
            this.setIsbn = function(isbn){
                _isbn = isbn;
            }
            this.getIsbn = function(){
                return isbn;
            }
            if(checkISBN){
                COUNT++;
            }
            this.setName(name);
            this.setId(id);
            this.setIsbn(isbn);
        }
        ctor.getCount = function(){
            return COUNT;
    }
        return ctor;
    })();
//静态、共用方法
book.buyCount = function(count){
    return count;
}

book.prototype = {
    display:function(){
    }
}
var b = new book();
b.getCount();
b.display();

二、接口

/**
 * 接口：实现多个类的共同性。让彼此不想关的对象也能被同等对待。
 */

var Interface = function(name,method){
    if(arguments.length < 2){
        throw new Error("xxx");
    }
    this.name = name;
    this.method = [];
    for(var i = 0;i<method.length;i++){
        if(typeof method[i] !== ‘string‘){
            throw new Error("xxx");
        }
        this.method.push(method[i]);
    }
}
//public static method
Interface.ensureImplement = function(object){
    for(var i = 0;i<arguments.length;i++){
        var interface = arguments[i];
        if(Interface.construction !== Interface){
            throw new Error("xxx");
        }
        for(var j = 0;j<ingerface.method.length;j++){
            var method = interface.method[j];
            if(!object[method] || typeof object[method] !===‘function‘){
                throw new Error("xxx");
            }
        }
    }
}

var testResultInstance = new Interface("testResultInstance",["getData","getResults"]);
function testInterface = function(mapInstance){
    Interface.ensureImplement(mapInstance,testResultInstance); 
    mapInstance.getData();
    mapInstance.getResults();
}
function Map(name){
    this.name = name;
    this.getData = http://www.mamicode.com/function(){};
    this.getResults = function(){};
}
var mapInstance = new Map("test");
testInterface(mapInstance);

三、继承

/**
 * 继承提供一些代码复用的功能。但继承照成两个类间的强耦合
 */
//类式继承
function Person(name){
    this.name = name;

}
function Design(name,book){
    Person.call(this,name);
    this.book = book;
}
extend(Person,Desion);
Design.prototype.getBooks = function(){
    return this.book;
}
var d = new Design("tim","test");
d.getBooks();
d.name;

function extend(superclass,subclass){
    var F = function(){};
    F.prototype = superclass.prototype;
    subclass.prototype = new F();
    subclass.prototype.constructor = subclass

    subclass.superclass = superclass;
    if(superclass.prototype.constructor == Object.prototype.constructor){
        superclass.prototype.constructor = superclass;
    }
}
/********************************************************************/
//原型继承
function clone(superclass){
    var F = function(){};
    F.prototype = superclass;
    return new F();
}
var Person = {
    name:"default",
    getName : function(){
        return this.name;
    }
};
var Desion = clone(Person);
Desion.books = ["写给大家看的设计书"];
Desion.getBooks = function(){
    return this.books;
}
/********************************************************************/
//参元法
var Mimin = function(){};
Mimin.prototype = {
    name : ‘default‘,
    getName : function(){
        return this.name;
    }
};
function augment(receiveingClass,givingClass){
    for(methodName in givingClass){
        if(!receiveingClass[methodName]){
            receiveingClass[methodName] = methodName;
        }
    }
}

 

Javascript面向对象实现分页

<script type="text/javascript">
    function Map() {
        this.keys = new Array();
        this.data = http://www.mamicode.com/new Array();
        //添加键值对
        this.set = function (key, value) {
            if (this.data[key] == null) {//如键不存在则身【键】数组添加键名
                this.keys.push(key);
            }
            this.data[key] = value; //给键赋值
        };
        //获取键对应的值
        this.get = function (key) {
            return this.data[key];
        };
        //去除键值，(去除键数据中的键名及对应的值)
        this.remove = function (key) {
            this.keys.remove(key);
            this.data[key] = null;
        };
        //判断键值元素是否为空
        this.isEmpty = function () {
            return this.keys.length == 0;
        };
        //获取键值元素大小
        this.size = function () {
            return this.keys.length;
        };
    }

    function dataGrid(obj) {
        if (obj == null) {
            return alert("请填入参数");
        }
        this.dataArray = new Map();
        this.index = 0;
        this.data = http://www.mamicode.com/obj.data != null ? obj.data : "";
        this.maxPage = 0;
        this.pageNumber = 1;
        this.pageSize = obj.pageSize != null ? obj.pageSize : 10;
        this.pageToal = 0;
        this.dataGrid = new Array();
    }

    dataGrid.prototype.getDataGrid = function (index) {
        this.dataGrid.splice(0, dataGrid.length);
        var page = index * this.pageSize + this.pageSize;
        if (this.pageToal - page > this.pageSize) {
            page = page;
        } else if (this.pageToal - page < this.pageSize && this.pageToal - page > 0) {
            page = index * this.pageSize + (this.pageToal - page);
        } else {
            page = index * this.pageSize + this.pageToal;
        }
        for (var i = index * this.pageSize; i < page; i++) {
            this.dataGrid[this.dataArray.keys[i]] = this.dataArray.data[this.dataArray.keys[i]];
        }
    }


    dataGrid.prototype.packageing = function (obj) {
        var data = http://www.mamicode.com/obj ? obj : this.data;
        for (var items in data) {
            this.dataArray.set(items, data[items]);
            this.pageToal++;
        }
        this.maxPage = Math.ceil(this.pageToal / this.pageSize);
        this.getDataGrid(this.index);
    }
    dataGrid.prototype.load = function () {
        this.packageing();
        return this.dataGrid;
    }

    dataGrid.prototype.goit = function (index) {
        if (index * this.pageSize > this.pageToal) {
            return;
        } else {
            this.getDataGrid(index - 1);
        }
        return this.dataGrid;

    }
</script>


联系
我们