JS模块化概念理解 原

为什么要模块化

模块化概念的引入主要是为了防止变量污染。

比如我们常常会遭遇下面代码中所遇到的问题。

模块化尝试

后来有人尝试用对象的方式来书写逻辑模块,但是这种写法有自己的弊端,比如这样的写法暴露了所有的模块成员,模块中的属性有被外部代码更改的风险。

最终人类找到了一种比较完美的方式解决变量污染问题,那就是用即时函数的方式书写

首先我们了解以下即时函数的几种常见写法

我们可以用下面这种形式包裹模块

在即时函数中返回一个对象 从而达到暴露共有属性/方法的目的 ,函数污染的问题被完美解决!!

即时函数模块化写法的应用场景

模块化编程的放大模式适用于模块的扩展场景

常见库的模块化实现原理

模块规范:CommonJS和AMD

node.js的模块系统,就是参照CommonJS规范实现的 在CommonJS中,有一个全局性方法require(),用于加载模块 CommonJS规范不适用于浏览器环境 浏览器端的模块,不能采用”同步加载"(synchronous),只能采用"异步加载"(asynchronous)

AMD Asynchronous Module Definition 是异步加载模块定义 浏览器端的应用适合AMD模块规范 主要有两个Javascript库实现了AMD规范:require.js和curl.js

require.js的用法

实现js文件的异步加载,避免网页失去响应 管理模块之间的依赖性,便于代码的编写和维护 http://requirejs.org/docs/download.html <script src="js/require.js" defer async="true" data-main=“js/main”></script> 模块必须采用特定的define()函数来定义

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券