专栏首页前端导学JS模块化概念理解 原

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 条评论
登录 后参与评论

相关文章

  • 开发高质量php框架与应用的实际案例解析读书笔记

    在不知道实现细节的前提下的测试称为黑盒测试。 基于应用程序源代码的测试称为白盒测试。 单元测试通常只测试单独一个类,是白盒测试,因为他们的编写基于待测试...

    lilugirl
  • RESTFul架构权限设计

    1 用户权限认证后获取服务端的token,将token存入客户端cookie中。

    lilugirl
  • 徒手创建一个chrome扩展-屏蔽广告插件

    创建一个文件夹,创建以下文件 maniftest.json background.js和 icon图片

    lilugirl
  • Require.Js 前端模块化

    注意:在请求多个模块的时候,一般将没有返回值的模块放在后面,有返回值的放在前面,这样就可以避免要为没有返回值的模块写形参!

    用户3461357
  • 前端模块化:CommonJS,AMD,CMD,ES6

    模块化的开发方式可以提高代码复用率,方便进行代码的管理。通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。目前流行的js模块化规范有Comm...

    五月君
  • Python标准库和类编写风格

    正如你看到的,在组织大型项目代码方面,Python提供了很多选项,熟悉所有这些选项很重要,这样你才能确定哪种项目是最佳的,并能理解别人开发的项目。开始应让代码结...

    于小勇
  • Nodejs入门学习1.md

    模块:在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护。

    WeiyiGeek
  • Node.js中模块加载机制

    清出于兰
  • 对话 | 大疆:技术牛,就是这么任性

    对于一些非航模粉丝的人来说,认识航拍无人机是从大疆开始的;而认识大疆,则是从年终奖那一排奔驰开始的。过去三年,DJI的销售额神话般的增长80倍,成为电子行业最让...

    机器人网
  • CVE-2018-8174 “双杀”0day漏洞复现

    最近360核心安全事业部高级威胁应对团队在全球范围内率先监控到了一例使用0day漏洞的APT攻击,捕获到了全球首例利用浏览器0day漏洞的新型Office文档攻...

    FB客服

扫码关注云+社区

领取腾讯云代金券