【JavaScript】模块化

在安全路上的白白 lv.1

发布时间：2022-09-18 17:17:37 254

相关标签： # html# node.js# jquery# node.js# 脚本

1、模块化的发展过程

var moduleObj = {
  userName: 'zhangsan',
  fn: function () {
    console.log('hello world')
  }
}

使用方式

<script src="a.js"></script>
  <script>.fn()</script>

立即执行函数的方式

通过立即执行函数的方式为模块提供私有空间

;(function () {
  var userName = 'lisi';
  function fn1() {
    console.log(userName);
  }
  function fn2() {
    console.log('hello world')
  }
  window.moduleObj = {
    fn1: fn1,
    fn2: fn2
  };
})()

2、模块化规范说明

CommonJS它是node.js中提到的一个规范。也就是说我们在写Node.js的时候，必须符合CommonJS的规范。

CommonJS规范要求

一个文件就是一个模块
通过module.exports导出成员项
通过require函数加载模块
每个模块都有单独的作用域。

AMD(Asynchronous Module Definition),翻译过来就是异步的模块定义规范。

define('moduleA', ['jquery', './moduleB'], function ($, moduleB) {
  return {
    fn: function () {
      // $('p')
    }
  }
})
require(['./moduleA'], function (moduleA) {
  moduleA.fn();
})

3、ES Module基本使用

自动采用了严格模式
每个es module 都是运行在单独的私有的作用域中
ES module通过CORS的方式请求外部的JS模块，如果服务端不支持CORS，则会出现跨域的问题。
ES module的script标签会延迟执行脚本，类似于添加了defer

4、导出的注意事项

注意语法的问题
通过export 对成员进行导出操作，导出的是成员的引用
导出的成员是只读的，那么我们导入了以后是不能对成员进行修改的。

5、导入的注意事项

import后面的from跟的是导入的文件的路径，并且是一个完整路径。
如果我们这里是执行某个模块，并不需要提取其中的成员

import {} from './module.js'
import './module.js'

如果某个模块中导出的成员比较多，同时我们都需要这些导出的模块成员，

import * as m from './module.js'

如果需要进行动态的导入

import('./module.js').then(function (module) {
  console.log(module)
})

在进行导出的时候，使用了export 和export default,导入import应该怎样进行处理？

import title, { userName, userAge } from "./module.js";

文章来源： https://blog.51cto.com/u_14184703/5673293

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。