原生js封装插件

插件

// plugin.js
(function (undefined) {
  "use strict";
  var _global;

  var plugin = {
    add: function (n1, n2) {
      return n1 + n2;
    }, //加

    sub: function (n1, n2) {
      return n1 - n2;
    }, //减

    mul: function (n1, n2) {
      return n1 * n2;
    }, //乘

    div: function (n1, n2) {
      return n1 / n2;
    }, //除

    sur: function (n1, n2) {
      return n1 % n2;
    }, //余
  };

  // 最后将插件对象暴露给全局对象

  _global = (function () {
    return this || (0, eval)("this");
  })();

  if (typeof module !== "undefined" && module.exports) {
    module.exports = plugin;
  } else if (typeof define === "function" && define.amd) {
    define(function () {
      return plugin;
    });
  } else {
    !("plugin" in _global) && (_global.plugin = plugin);
  }
})();

调用

with(plugin){

    console.log(add(2,1)) // 3

    console.log(sub(2,1)) // 1

    console.log(mul(2,1)) // 2

    console.log(div(2,1)) // 2

    console.log(sur(2,1)) // 0

}

原生js仿写 jquery 的$方法

function JQuery(arg) {
  //存对象
  this.elements = [];
  switch (typeof arg) {
    case "string":
      this.elements = getEle(arg);
      this.length = this.elements.length;
      break;
    case "function":
      window.onload = arg;
      break;
    default:
      this.elements.push(arg);
      break;
  }
}

function $(arg) {
  return new JQuery(arg);
}

function getEle(str) {
  //切成 #box,ul,li,input
  var arr = str.split(" "); //父级
  var aParent = [document]; //子级
  var aChild = [];
  for (var i = 0; i < arr.length; i++) {
    //给aChild赋值
    aChild = getByStr(aParent, arr[i]); //给aParent赋值，选取下一次的子级
    aParent = aChild;
  }
  return aChild;
}

function getByStr(aParent, str) {
  //aParent：第一次document
  //str:第一次 #box
  var aChild = [];
  for (var i = 0; i < aParent.length; i++) {
    //判断是哪一类选择器
    switch (str.charAt(0)) {
      case "#":
        var obj = document.getElementById(str.substring(1));
        aChild.push(obj);
        break;
      case ".":
        var aEle = getByClass(aParent[i], str.substring(1));
        for (var j = 0; j < aEle.length; j++) {
          aChild.push(aEle[j]);
        }
        break;
      default:
        //li.on
        if (/^\w+\.\w+$/.test(str)) {
          var arr = str.split(".");
          var aEle = aParent[i].getElementsByTagName("*");
          var re = new RegExp("\\b" + arr[1] + "\\b");
          for (var j = 0; j < aEle.length; j++) {
            if (aEle[j].className.search(re) != -1) {
              aChild.push(aEle[j]);
            }
          }
        } else if (/\w+\[\w+\=\w+\]/.test(str)) {
          //input[type=button]
          var arr = str.split(/\[|\=|\]/g);
          var aEle = aParent[i].getElementsByTagName(arr[0]);
          for (var j = 0; j < aEle.length; j++) {
            if (aEle[j].getAttribute(arr[1]) == arr[2]) {
              aChild.push(aEle[j]);
            }
          }
        } else if (/\w+\:\w+(\(\d+\))?/.test(str)) {
          //li:eq(0);
          var arr = str.split(/\:|\(|\)/g);
          var aEle = aParent[i].getElementsByTagName(arr[0]);
          switch (arr[1]) {
            case "first":
              aChild.push(aEle[0]);
              break;
            case "last":
              aChild.push(aEle[aEle.length - 1]);
              break;
            case "even":
              for (var j = 0; j < aEle.length; j += 2) {
                aChild.push(aEle[j]);
              }
              break;
            case "odd":
              for (var j = 1; j < aEle.length; j += 2) {
                aChild.push(aEle[j]);
              }
              break;
            case "eq":
              aChild.push(aEle[arr[2]]);
              break;
            case "lt":
              for (var j = 0; j < arr[2]; j++) {
                aChild.push(aEle[j]);
              }
              break;
            case "gt":
              for (var j = parseInt(arr[2]) + 1; j < aEle.length; j++) {
                aChild.push(aEle[j]);
              }
              break;
          }
        } else {
          var aEle = aParent[i].getElementsByTagName(str);
          for (var j = 0; j < aEle.length; j++) {
            aChild.push(aEle[j]);
          }
        }
        break;
    }
  }
  return aChild;
}

function getByClass(obj, sClass) {
  if (obj.getElementsByClassName) {
    return obj.getElementsByClassName(sClass);
  }
  var aResult = [];
  var aEle = obj.getElementsByTagName("*");
  var re = new RegExp("\\b" + sClass + "\\b");
  for (var i = 0; i < aEle.length; i++) {
    if (aEle[i].className.search(re) != -1) {
      aResult.push(aEle[i]);
    }
  }
  return aResult;
}

原生js简单实现jquery的链式操作

(function () {
  //全局挂选择器
  window.G = function (selector) {
    return new _G(selector);
  };

  //创建对象_G
  function _G(selector) {
    this.elements = document.querySelector(selector);
    return this;
  } 
  //_G的原型上写方法
  _G.prototype = {
    constructor: _G,
    method: function (name, fn) {
      if (this.elements) {
        this.elements.addEventListener(name, fn, false);
      }
      return this;
    },
  };
})();

调用

        G('#list').method('mouseenter', function () {
            console.log('mouse enter');
        }).method('click', function () {
            console.log('click');
        })

参考地址

https://blog.csdn.net/sunshao904/article/details/95162104
https://www.cnblogs.com/daisygogogo/p/9499079.html