zoukankan      html  css  js  c++  java
  • 原生JS组件编写,构造函数封装步骤

    1.组件封装一般单独写在一个js文件里

    2.整个插件写在一个立即执行函数里;就是function(){}();函数自执行;保证里面的变量不会与外界互相影响

    function(win,doc,$,undefined){  
              
    }(window,document,jQuery)

    或者写在一个闭包里

    (function(){

    }())

    3.定义构造函数

    //插件名,调用的时候直接new一下插件名就行了并传参数或者传对象

    (function(window, undefined) {

        //一般习惯将这个构造函数名手写字母大写

        var Star = function(id){     // function Star(doc){}

             // this的指向为调用的实例;我们此时姑且认为this就指向这个函数;因为这样我们之后再想获取这个btn就可以直接用this.btn了;

                而不是在document.getElementById(....)

             this.btn  = document.getElementByTagName("button");

             this.btn  = document.getElementById(id);

             //你也可以定义一些默认的参数

             this.author = "iamlhr";


             //执行下你下面写的函数;如果整个插件没有执行函数;一堆方法function就不调用;这里是调用的时候最开始执行的函数

             this.init();

         }

      Star.prototype = {
             constructor:Star,//构造器指向构造函数 ,防止构造器指向Object的情况;
        init: function(){ //调用下面写的函数
          this.otherMethod()
        },
        otherMethod: function(){}
      };
        window.Star = window.Star || Star; //把这个对象附给window底下的 名字叫Star的对象;要不你调用的时候  new Star() 怕在window的环境下找不到;

    }(window));

    4.创建实例

    <html>

      <div id=“main”></div>

      <div id="myShaoe"></div>

    </html>

    <script>

        new Star("main");    //这里是实例1调用插件的代码
        new Star("myShape");    //这里是实例2调用插件的代码

    </script>

    5.插件封装完成

     

  • 相关阅读:
    哈希表
    矩阵加速(数列)
    线段树
    python
    vue 中防抖
    Windows版本与Internet Explorer版本对照
    一个怂女婿的成长笔记【二十三】
    一个怂女婿的成长笔记【二十一】
    vue xml数据格式化展示,展示在textarea里可编辑,和高亮处理方法
    substring 截取 第三个字符(/)后的字符串
  • 原文地址:https://www.cnblogs.com/iamlhr/p/10505071.html
Copyright © 2011-2022 走看看