javascript代码实例教程-JS设计模式――4.继承(示例)

发布时间:2019-02-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS设计模式――4.继承(示例)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 目的

我们的目的就是编写一个用于创建和管理就地编辑域的可重用的模块化API。它是指网页上的一段普通文本被点击后就变成一个配有一些按钮的表单域,以便用户就地对这段文本进行编辑。

 

思路

当用户点击时

1.将普通文本域隐藏

 

2.添加表单元素

 

3.设置表单元素的value

 

当用户保存时

ajax通信保存内容

 

当用户取消时

1.隐藏表单域

 

2.显示文本域

 

3.设置文本域的value

 

类式继承实现就地编辑

suPErClass的实现(input)

复制代码

function EdITInPlaceField(id, parent, value){

    this.id = id;

    this.value = value || 'default value';

    this.parentElement = parent;

 

    this.createElements(this.id);

    this.attachEvents();

}

EditInPlaceField.PRototype = {

    createElements: function(){

        this.containerElement = document.createElement('p');

        this.parentElement.appendChild(this.containerElement);

 

        this.staticElement = document.createElement('span');

        this.containerElement.appendChild(this.staticElement);

        this.staticElement.innerHTML = this.value;

 

        this.fieldElement = document.createElement('input');

        this.fieldElement.type = 'text';

        this.fieldElement.value = this.value;

        this.containerElement.appendChild(this.fieldElement);

 

        this.saveButton = document.createElement('input');

        this.saveButton.type='button';

        this.saveButton.value="Save";

        this.containerElement.appendChild(this.saveButton);

 

        this.cancelBTton = document.createElement('input');

        this.cancelBtton.type = 'button';

        this.cancelBtton.value = 'Cancel';

        this.containerElement.appendChild(this.cancelBtton);

        this.convertToText();

    },

    attachEvents: function(){

        VAR that = this;

        addEvent(this.staticElement, 'click', function(){that.convertToEditable();});

        addEvent(this.saveButton, 'click', function(){ that.save();});

        addEvent(this.cancelBtton, 'click', function(){that.cancel()});

    },

    convertToEditable: function(){

        this.staticElement.style.display = 'none';

        this.fieldElement.style.display = 'inline';

        this.saveButton.style.display = 'inline';

        this.cancelBtton.style.display = 'inline';

 

        this.setValue(this.value);

    },

    save: function(){

        this.value = this.getValue();

        var that = this;

        var callback = {

            success: function(){that.convertToText();},

            failure: function(){alert('Error saving value.');}

        };

        ajaxRequest('GET', 'save.php?id'+this.id+'&value='+this.value, callback);

    },

    cancel: function(){

        this.convertToText();

    },

    convertToText: function(){

        this.fieldElement.style.display = 'none';

        this.saveButton.style.display = 'none';

        this.cancelBtton.style.display = 'none';

        this.staticElement.style.display = 'inline';

 

        this.setValue(this.value);

    },

    setValue: function(value){

        this.fieldElement.value = value;

        this.staticElement.innerHTML = value;

    },

    getValue: function(){

        return this.fieldElement.value;

    }

};

复制代码

subClass的实现(textarea)

复制代码

function EditInPlaceArea(id, parent, value){

    EditInPlaceArea.superclass.constructor.call(this, id, parent, value);

}

extend(EditInPlaceArea, EditInPlaceField);

EditInPlaceArea.prototype.createElements = function(id){

    this.containerElement = document.createElement('p');

    this.parentElement.appendChild(this.containerElement);

 

    this.staticElement = document.createElement('p');

    this.containerElement.appendChild(this.staticElement);

    this.staticElement.innerHTML = this.value;

 

    this.fieldElement = document.createElement('textarea');

    this.fieldElement.type = 'text';

    this.fieldElement.value = this.value;

    this.containerElement.appendChild(this.fieldElement);

 

    this.saveButton = document.createElement('input');

    this.saveButton.type='button';

    this.saveButton.value="Save";

    this.containerElement.appendChild(this.saveButton);

 

    this.cancelBtton = document.createElement('input');

    this.cancelBtton.type = 'button';

    this.cancelBtton.value = 'Cancel';

    this.containerElement.appendChild(this.cancelBtton);

    this.convertToText();

};

EditInPlaceArea.prototype.convertToEditable = function(){

    this.staticElement.style.display = 'none';

    this.fieldElement.style.display = 'block';

    this.saveButton.style.display = 'inline';

    this.cancelBtton.style.display = 'inline';

 

    this.setValue(this.value);

};

EditInPlaceArea.prototype.convertToText = function(){

    this.fieldElement.style.display = 'none';

    this.saveButton.style.display = 'none';

    this.cancelBtton.style.display = 'none';

    this.staticElement.style.display = 'block';

 

    this.setValue(this.value);

};

复制代码

API的依赖与调用

addEvent依赖

复制代码

function addEvent(el, ty, fn){

    if(el.addEvetListener){

        el.addEvetListener(ty, fn, false);

    }else if(el.attachEvent){

        el.attachEvent('on'+ty, fn);

    }else{

        el['on'+ty] = fn;

    }

}

复制代码

extend依赖

复制代码

function extend(subClass, superClass){

    var F = function(){};

    F.prototype = superClass.prototype;

    subClass.prototype = new F();

    subClass.prototype.constructor = subClass;

    subClass.superclass = superClass.prototype;

    if(superClass.prototype.constructor == Object.prototype.constructor){

        superClass.prototype.constructor = superClass;

    }

}

复制代码

API的调用

var titleClassical = new EditInPlaceField('titleClassical', document.getElementById('titleClassical').parentNode, 'Title here');

var bodyClassical =new EditInPlaceArea('bodyClassical', document.getElementById('bodyClassical').parentNode, 'Body here');

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS设计模式――4.继承(示例)全部内容,希望文章能够帮你解决javascript代码实例教程-JS设计模式――4.继承(示例)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。