设计模式-继承模式
該例子使用了兩種繼承方式,詳情可參見(jiàn)https://segmentfault.com/a/11...
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>繼承模式</title> <head> <body><button onclick="sub()">click me</button> </body> </html><script type="text/javascript">//葉子對(duì)象的父類 var Field = function(id) {this.id = id; } Field.prototype.save = function() {sessionStorage.setItem(this.id, this.getValue());console.log(sessionStorage.getItem(this.id)); }//因select和textarea的取值方式和input不一樣 //所以單獨(dú)抽離獲取值的方法 //如果子類不覆蓋此方法,save就會(huì)出錯(cuò),所以用拋異常的方式,保證子類覆蓋 Field.prototype.getValue = function() {throw new Error('you should override this method'); }//葉子對(duì)象的子類InputField var InputField = function(label, id, type) {//繼承父類的id屬性,相當(dāng)于在InputField加上了this.id = idField.call(this, id);//創(chuàng)建input節(jié)點(diǎn)this.input = document.createElement('input');this.input.id = id;this.input.type = type;//創(chuàng)建文本節(jié)點(diǎn)this.label = document.createElement('label');var labelTextNode = document.createTextNode(label);this.label.appendChild(labelTextNode);//創(chuàng)建div節(jié)點(diǎn)this.divElement = document.createElement('div');this.divElement.className = 'input-field';//添加到div節(jié)點(diǎn)this.divElement.appendChild(this.label);this.divElement.appendChild(this.input); }//開(kāi)始繼承 function extend(newobj, obj) {var F = function() {};F.prototype = obj.prototype;newobj.prototype = new F();newobj.prototype.constructor = newobj; }//先得到父類的prototype上的方法 extend(InputField, Field);//覆蓋父類的方法,如果不覆蓋,會(huì)拋異常 InputField.prototype.getValue = function() {return this.input.value; }//實(shí)驗(yàn)一下 var input = new InputField('用戶名', 'userName', 'text'); document.body.appendChild(input.divElement); function sub() {input.save() } </script>總結(jié)
- 上一篇： 手把手教你建github技术博客
- 下一篇： 使用Json.NET来序列化所需的数据