关于node篇

最新推荐文章于 2024-05-20 15:17:08 发布

正方形的圆灬

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量80

点赞数 1

分类专栏：模块化文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/du_aitiantian/article/details/128398357

版权

1 篇文章 0 订阅

订阅专栏

优点：
- 异步加载不会阻塞页面
- 按需加载，一个模块就是一个文件，当需要用到的时候在加载它，便于代码的编写和维护
缺点：
- 模块和模块之间的加载顺序不是固定的
作用：
- 主要是为了解决html文件引入过多的js文件造成浏览器失去响应，代码的编写和维护都变得艰难。
使用步骤：
- 新建一个js文件夹，去requireJS官网下载requireJS文件放入其中。
- 在html文件的底部引入 <script src="js/require.JS" defer async="true"></script>
- <script src="js/require.JS" defer async="true" data-main='js/main'></script>
- 配置模块和加载：（main.js里面）

require.config({
    baseUrl:"基路径",
    paths:{
    // 按需加载
        'index':'相对路径',
        'jquery':'相对路径'
        ...
    }
})

define({
     uname:'beixi',
     age:20
})

define(function () {
  var obj={
    username:'beixi',
    age:18
  }
  return {
    obj,
  }
})

define(['module'],function (module) {
  console.log(module);
})

define(function (require,exports,module) {
  var data=require('data')
  console.log(data);
})

和commonjs的两大差异：
- commonjs模块输出的是一个值的复制，es6模块输出的是一个值的引用。
- commonjs模块是运行时加载，es6模块是编译时输出接口
说明：commonjs模块加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成，会缓存值。
而 ES6 模块加载的不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成，不会缓存值。
es5中的引入与导出一般指CommonJS方式：
- 导出：module.exports=obj 或者 exports.obj
- 引入：var xxx=require('react')
es6中的引入与导出：
- 引入：import react from 'react'
- 导出：
  - export default xxx（在引入的时候可以自定义名字）
  - export {A,B} （在引入的时候不可以自定义名字，只能用import {A,B} from ...）