java前端插件怎么使用,web前端开发，教你如何用JavaScript插件框架开发模板

矫情吗；* 2023-01-16 02:56 134阅读 0赞

原标题：web前端开发，教你如何用JavaScript插件框架开发模板

Java是现在web市场上最有活力的编程语言之一，更是前端工程师在近几年来火热的根本，所以学好Java成为了这个时代的一个符号。

![9560b386f00d6f138fdcda3f72c56184.png][]

然而实际上大部分开发者在运用Java这门语言多数是在脚本，插件，框架的基础上。

通常的Java代码是内嵌在网页中的，这种代码逻辑不会特别复杂，一般是处理页面的交互功能。而遇到特别复杂的逻辑基本就是插件直接上了，这个插件也就是Java文件，别人把逻辑封装好，自己只需要知道如何运用就可以了。包括框架也是一样的道理，框架是一个大的体系，这个体系是针对一个整个项目开发流程的设置，所以使用难度会比插件大，但它本身实际上也是一段Java代码。

而我们学Java肯定不能老是停留在巨人的肩膀的上，如果想在编程的道路上杀出一条血路，那么造轮子才是我们的学一门语言的最终目的。

首先第一步，我们不管是写插件也好还是框架也好，一般来说都会为用户提供一个实例，如JQuery.js的$，Vue.js的的Vue，基本上都是该程序暴露的唯一实例。而这个实例会暴露在任何JS环境下的全局下，所以为了防止在使用该插件或框架的时候，内部的变量会污染全局作用域下的变量，所以所有逻辑代码全部都包裹一个function中，也叫做沙箱。

![f3bef39f0173b68c005647617f8bdf56.png][]

(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()\{

//在此写逻辑

\})

![eba65a31013588698774dbc5944708d7.png][]

我来解释下中间那段逻辑是什么意思。

typeof exports = == ‘object’ && typeof module != = ‘undefined’这是判断条件exprots和module是CommondJS模块标准中下的对象，如果对象存在，那么说明引入环境是Node.js或者其他CommndJS环境，那么直接通过module.exports直接引入逻辑代码。否则是其他模式。

typeof define === ‘function’ && define.amd，而这个条件是判断模块引入是以amd标准引入的，像require.js 就是以这种规范引入模块的，以define(factory)方法引入逻辑代码。除去这两种剩下的就是不存在模块引入而是直接调用的情况了，也就是在全局对象中抛出逻辑代码。接下来分享一个web前端教程，有什么不懂的可以加我视频中的联系方式和我交流，加上后领取价值12800元的web前端学习视频教程。

在解决引入方式问题之后，接下来你要做的就是基于此实例写入你的方法了，因为这是很函数作用域，所以你也不用担心会出现变量污染的问题，尽情发挥你的技术吧。返回搜狐，查看更多

责任编辑：

[9560b386f00d6f138fdcda3f72c56184.png]: /images/20221022/77ec472f67a949e8b7e938b6cde3f5e9.png
[f3bef39f0173b68c005647617f8bdf56.png]: /images/20221022/b237ba01af204a079af1199a49101239.png
[eba65a31013588698774dbc5944708d7.png]: /images/20221022/810d1584fd7a4dae85d8bd001e96cdd5.png