zoukankan      html  css  js  c++  java
  • 用原型封装一个操作DOM的例子

     <script>
        // 一句话 在构造函数里面写属性  在原型里面写方法
            function Elem(d){
                this.even=document.getElementById(d);
            }
            Elem.prototype.html=function(val){  
                  var e = this.even;
                  if(val){
                    e.innerHTML=val;
                    return this; // 链式操作 返回整个这个Elem.prototype.html整体 ,不写这个return 就不能进行链式操作
                  }else{
                    return e.innerHTML;
                  }
            }
           Elem.prototype.on=function(type,fn){
                var e = this.even;
                e.addEventListener(type,fn);  
                return this;//同理 也是为了能够继续链式操作
           }
            var box = new Elem('page-info');
           // box.html('123')
           //  box.on('click',function(){
           //      alert('test')
           //  })
     // 上面注释部分的链式操作
     // box.html('123').on('click',function(){ alert('test')})
     box.html('123').on('click',function(){ alert('test')}).html('从123变成456')
        </script>

     字面量形式的原型不需要加function

      var   vehicle  = function(){
           this.door=4;
      }
      vehicle.prototype ={
          getName: function(){
              return 'vehicle'
          },
          getInfo: function(){
              return [
                  this.getName(),'has',this.door,'doors'
              ].join(',')
          }
      }
      var vehicle = new vehicle();
      console.log(vehicle.getInfo()) // vehicle,has,4,doors
  • 相关阅读:
    LinuxIP乱码
    APP前置代码脚本等基础操作及安装python库
    XP定位(APP元素定位)
    关联函数应用
    命令查看当前运行APP的包名和Activity
    android智能手机如何查看APK包名
    接口代码(requests库安装)
    python不能运行
    语音接口参数转换
    接口图片参数化
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/7453147.html
Copyright © 2011-2022 走看看