当前位置: 首页 > 网络应用技术

前端模块化的演变

时间:2023-03-06 19:37:14 网络应用技术

  首先查看前端模块化以满足这些标准。

  在脚本和模块之间的最大差异是通过模块化之后,我们可以更好地查看整个业务的逻辑,即每个模块所做的。如下图所示,getData.js是将请求发送到服务器以获取数据,处理。js处理数据和sum.js处理寻求数据的数据的逻辑。但是,如果只有index.js脚本文件,我不知道该文件中的粗略逻辑。

  注意:模块化是一种标准,而不是实现,并且通过特定语言实现实现。例如,commonjs是模块化类型。这是标准。nodejs实现了commonjs。

  此模式是将不同的功能封装到不同的功能中。

  我们在index.js文件中定义了三种方法:

  这三种方法安装在窗口下方,如下所示:

  如果其他学生或第三方图书馆也在全球情况下定义了上述三种方法,则将形成冲突,这将导致您的业务不可用,或者无法使用其他人的业务。

  因此,该模型的最大缺陷是很容易引起全球命名空间冲突。

  由于全局函数模式很容易引起命名冲突,因此我们不应定义窗口下方的方法,而是将其定义为对象。这不是很好吗?同时,我们可以将这个对象的名称稀有,例如窗口。Moduleapi,以便大大降低了命名冲突的可能性。

  但是在这种模式下,可以在外部修改内部数据,例如,我们修改了模块内的变量

  这种与模块化的定义冲突。模块化的定义是,模块内的变量不能由外部修改。如果可以通过外部修改,则包装将丢失。

  那么如何将模块中的变量私有化?它可以通过函数域 +闭合来解决。

  执行上述代码。打印结果只是一个函数,没有这样的变量。这是JavaScript语言的特征。在功能范围中,它的变量是自然私有化的,不能在外部获得,这与模块中私有化的特征一致。我该如何获得它?并且可以修改该值吗?

  这可以通过关闭来实现。

  根据闭合的特征,当执行函数时,内部的变量将不会释放。

  结果,模块化进入第三阶段:IIFE模式,闭合是由自我执行函数创建的。

  为什么成功?我们不是只说无法访问和修改功能域内的变量吗?

  在这里,我们需要区分函数函数中变量和对象属性之间的差异。

  让我们首先打印输出值:

  发现。它是悬挂在窗口下方的对象。该对象下有一个属性,在原始函数范围中获得的对象调用是两个不同的。

  因此,通常不会在函数范围中公开变量,因为您只接触到值的副本。如果要更新函数域的值,则可以对其进行更新。

  但是,此模式无法解决模块之间相互依赖的问题,因为必须彼此引用该模块。

  IIFE模式的增强是支持自定义的模块并完成模块之间的参考。

  首先定义一个模块并将模块安装在窗口下方:

  然后定义一个模块并介绍模块:

  尽管该模型解决了模块之间的依赖性,但有许多缺陷:

  本文始于从全局函数模式命名冲突的问题,该模式导致全局名称空间模式,并将模块封装到特定对象中。

  使用函数域和关闭的特性后,立即使用IIFE函数来解决模块中变量私有化的问题,但是该模式尚未求解模块之间的依赖性,尽管自定义模块是作为参数传输的引用了该模块到达到达模块的范围,但是该方法不能支持大型模块的开发。

  为了响应上述问题,NODEJS使用commonjs模块规范,而ES6使用Esmodule模块规范。在下一季度,您将学习COMPORJS。

  原始:https://juejin.cn/post/7097141333306900494