Skip to main content

模块

模块

核心是管理依赖,解决冲突问题

模块标识符问题

js
1
2
3
4
5
6


const nums = [1,2,3]
nums.map(num=>{
	console.log(num);
});
jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Counter() {
  const [count, setCount] = React.useState(0);
  
  return (
    <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
      <h3>计数器示例</h3>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)} style={{ marginRight: '8px' }}>
        增加
      </button>
      <button onClick={() => setCount(count - 1)}>
        减少
      </button>
      <button onClick={() => setCount(0)} style={{ marginLeft: '8px' }}>
        重置
      </button>
    </div>
  );
}

es6之前的模块加载器

commonJS,同步模块 AMD,异步模块加载

UMD,通用模块定义,最终生成一个立即调用函数表达式

如何调用iife导出文件中定义的函数呢?

模块行为

es6模块借鉴了commonJS和AMD的许多特性, 单例

同时,es6也新增了一些新行为 默认在严格模式下执行. es6不同享全局命名空间. 模块顶级this的值是undefiend而不是window. 模块中的var声明不会添加window对象. es6模块是异步加载和执行的.

const

导出

默认导出 export default,

一个模块至多只能有一个默认导出