JS模块化(一):Commonjs

简介: JS模块化(一):Commonjs

什么是模块化?

答:将一个复杂的程序依据一定的规则封装成几个块,并进行组合在一起,其内部数据是私有的,只是向外部暴露一些接口与外部其它模块进行通信。

为什么要模块化?

  • 降低复杂度
  • 部署方便
  • 降低耦合
  • 避免命名冲突

Commonjs模块化规范

  • 这个文件有两个是必须的,一是包名,二是版本号。
  • 包名不能含有大写和中文。
  • 自动生成package.json文件
npm init
  • 安装uniq
npm install uniq
  • –save是什么含义?
    这个的意思是说,添加到package.json中

commonjs模块暴露的三种方式

1:module.exports = {}

image.png

2:module.exports = function()

  • 这种写法是覆盖方式的,后面的会覆盖前面的,不建议

image.png

3:exports.属性

  • 这种是通过给exports添加属性的形式,推荐使用

image.png

4:通过npm安装

  • 以uniq这个包为例,这个包可以筛选出数组中独一无二的元素。
  1. npm install uniq
  2. 导入 const uniq = require(‘uniq’);
  3. 使用 const result = uniq(arr);

image.png

commonjs基于浏览器端应用

  • 首先全局安装并且同时需要局部安装browserify
npm install browserify -g
npm install browserify --save-dev
复制代码
  • 浏览器端是无法准确识别require方法的

image.png

相关文章
|
2月前
|
JavaScript UED
js之模块化(2)
js之模块化(2)
|
3月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
48 3
|
2月前
|
JavaScript 前端开发 开发者
js之模块化(1)
js之模块化(1)
|
14天前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
18 0
|
2月前
|
JavaScript
js之模块化(3)
js之模块化(3)
|
2月前
|
缓存 JavaScript 前端开发
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
28 2
|
3月前
|
前端开发 JavaScript
前端必会的JavaScript模块化
【8月更文挑战第3天】JavaScript模块化
26 1
|
3月前
|
存储 缓存 JavaScript
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
29 0
|
4月前
|
JavaScript 前端开发
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
48 1
|
5月前
|
JavaScript 前端开发
JavaScript进阶-Class与模块化编程
【6月更文挑战第21天】**ES6引入Class和模块化,提升JavaScript的代码组织和复用。Class是原型机制的语法糖,简化面向对象编程。模块化通过`import/export`管理代码,支持默认和命名导出。常见问题包括`this`指向和循环依赖。理解这些问题及避免策略,能助你写出更高效、可维护的代码。**
62 5