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 = 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 = 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 = 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 = 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>