haizlin / fe-interview

前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……

Home Page:http://www.h-camel.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[js] 第156天 用原生JS封装插件的方式有哪些?

haizhilin2013 opened this issue · comments

第156天 用原生JS封装插件的方式有哪些?

commented

一般的插件封装

;(function (global) { 
  "use strict";
  function MyPlugin(el, options) {
    //some cod
  };
  MyPlugin.prototype = {
    //定义方法
    show: function () {
      //some code
    }
 };
  if (typeof module !== 'undefined' && module.exports) {    //兼容CommonJs规范 
    module.exports = MyPlugin;
  } else if (typeof define === 'function') {   //兼容AMD/CMD规范
    define(function () {
      return MyPlugin
    })
  } else {    //注册全局变量,兼容直接使用script标签引入插件
    global.MyPlugin = MyPlugin;
  }
})(this);

还有像 jquery 那种 var $ = function() { return $.fn.init }; $.fn = {}; $.fn.init = function(){} 这种的;
或者 Object.defineProperty(String.prototype, 'red', { get: function(){ return this + 'red' } }) 这种的。

不只有 fn()new func() 这样的插件,也有 fn.func()fn.func 这样的插件的存在。

可以用自执行函数 var $ = ((global){ return {} })(this)