转自:https://www.sohu.com/a/224657580_99987742
(function(){
//代码
})()
有这个沙箱之后,接下来要考虑实例暴露问题,我们要暴露在全局中,但是这里有个最大的问题就是引入方式的问题。也就是说我们这个拿这个插件在页面的标签中,实际上也可以在Node.js或者在其他项目中以模块的形式引入。问题就在这里,在中全局对象是window,但到了JS中,这个全局变量就变成了global,所以在写逻辑代码之前最好要写判断其引入的方式。但是不管是其他方式,在该模块运行外this永远都指向全局,所以以一个参数的形式接受并判断,以确定如何引入。
(function(global){
})(this)
这个时候逻辑代码就不要写在改函数内了,不然环境判断在没完成的时候下面的所有代码都会编译,那么对性能影响绝对是存在的,所以把环境判断和逻辑给分开。判断写在函数内,而逻辑写在回调函数中
(function(global,factory){
})(this,function(){
//在此写逻辑
})
那么接下来正式逻辑判断,判断哪种环境以哪种方式引入。
(function(global,factory){
typeof exports ==='object' && typeof module !=='undefined' ? module.exports = factory() :
typeof define ==='function' && define.amd ? define(factory) :
(global.Name= factory());
})(this,function(){
//在此写逻辑
})
typeof exports = == ‘object’ && typeof module != = ‘undefined’这是判断条件exprots和module是CommondJS模块标准中下的对象,如果对象存在,那么说明引入环境是Node.js或者其他CommndJS环境,那么直接通过module.exports直接引入逻辑代码。否则是其他模式。
typeof define === ‘function’ && define.amd,而这个条件是判断模块引入是以amd标准引入的,像require.js 就是以这种规范引入模块的,以define(factory)方法引入逻辑代码。除去这两种剩下的就是不存在模块引入而是直接调用的情况了,也就是在全局对象中抛出逻辑代码。