设计模式-继承模式
該例子使用了兩種繼承方式,詳情可參見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">//葉子對象的父類 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不一樣 //所以單獨抽離獲取值的方法 //如果子類不覆蓋此方法,save就會出錯,所以用拋異常的方式,保證子類覆蓋 Field.prototype.getValue = function() {throw new Error('you should override this method'); }//葉子對象的子類InputField var InputField = function(label, id, type) {//繼承父類的id屬性,相當于在InputField加上了this.id = idField.call(this, id);//創建input節點this.input = document.createElement('input');this.input.id = id;this.input.type = type;//創建文本節點this.label = document.createElement('label');var labelTextNode = document.createTextNode(label);this.label.appendChild(labelTextNode);//創建div節點this.divElement = document.createElement('div');this.divElement.className = 'input-field';//添加到div節點this.divElement.appendChild(this.label);this.divElement.appendChild(this.input); }//開始繼承 function extend(newobj, obj) {var F = function() {};F.prototype = obj.prototype;newobj.prototype = new F();newobj.prototype.constructor = newobj; }//先得到父類的prototype上的方法 extend(InputField, Field);//覆蓋父類的方法,如果不覆蓋,會拋異常 InputField.prototype.getValue = function() {return this.input.value; }//實驗一下 var input = new InputField('用戶名', 'userName', 'text'); document.body.appendChild(input.divElement); function sub() {input.save() } </script>總結
- 上一篇： 手把手教你建github技术博客
- 下一篇： Zookeeper的多节点集群详细启动步