//index.html<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>title</title> <script src="jquery.js"></script> <script src="module.js"></script></head><body> <div>123</div></body><script> mymodule.foo(); mymodule.bar(); console.log(mymodule.data) ; mymodule.data = 'xxxx'; mymodule.foo();</script></html>
//module.js iife（匿名函数自调用）;(function(window,$){ let data = "www.baidu.com"; function foo() { console.log(`foo() ${data}`); //这里需要使用jqu房产网络营销ery库 $('body').css('background',竹笙 'red') } function bar() { console.log(`bar() ${data}`); otherfun(); } function otherfun() { console.log(`otherfun()`); } window.mymodule = { foo, bar };})(window, jquery)commonjs模块规范，每一个文件就是一个模块；有自己的作用域；在服务器端，模块的加载是同步的；在浏览器端，模块需提前编译打包处理特点：
所有代码都运行在模块作用域，不会污染全局作用域；模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。模块加载的顺序，按照其在代码中出现的顺序。怎么买学生票语法：
暴露模块：js module.exports = value 或者 js exports.xxx = value引入模块：js require('xxx') 如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径 commonjs规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
require命令用于加载模块文件。require命令的基本功能是，读入并执行一个javascript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错。
commonjs模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值
使用require.js
<!-- index.html --><script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
//定义一个没有依赖的module1模块define('module1', () => { let count = 0; const add = () => ++ count; const ret = () => count = 0; const upperca = string => string.toupperca() return { add, ret, u中国三大节日pperca }})//定义一个有依赖的module2模块，依赖module1define('module2',['module1'], (module1) => { const showmsg = () => module1.upperca('hello-amd'); return { showmsg }})<!-- 在html文件中使用模块 --><body><script> require.config({ paths: { module1: './modules/module1', module2: './modules/module2' } }) require(['module1', 'module2'], (module1, module2) => { console.log(module1.add()) // 1 console.log(module1.ret()) //0 console.log(module2.showmsg()) //hello-amd })</script></body>使用a.js
<script src="https://cdn.bootcdn.net/ajax/libs/ajs/3.0.3/a.js"></script>
//定义模块module1define((require, exports, module) => { let string = 'i am a string'; const readstring = () => 'module1 show() ' + string; //向外暴露 exports.readstring = readstring;})//定义模块module2define((require, exports, module) => { exports.msg = "正是在下啊"})//定义模块moduledefine((require, exports, module) => { //引入依赖模块（同步） var module1 = require('./module1'); console.log(module1对妈妈说的感恩的话.readstring()) // module1 show() i am a string //引入依赖模块（异步） require.async('./module2', md2 => { console.log(`这是异步引入的:${md2.msg}`) //这是异步引入的:正是在下啊 })})<!-- html文件使用module --><body><script> ajs.u('./modules/module')</script>es6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。commonjs 和 amd 模块，都只能在运行时确定这些东西。
两个关键字 import和export
//mian.jxport default { showmsg() { console.log('hahahahahah') }}export const msg = "正是花好月圆时！"//index.jsimport module1 from "./module1"; //对应export defaultmodule1.showmsg()import { msg } from './module1'; //对应exportconsole.log(msg)/*tips: 不要在html里使用<script type="module">import ....., 有跨域问题，可以在vscode里下载一个插件，或者本地起服务都可以解决，就不赘述了。</script>*/到此这篇关于javascript 模块化详解的文章就介绍到这了,更多相关javascript 模块化内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
本文发布于:2023-04-04 07:31:12，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/e70cf0ea5c42e505d1994b7ff560a8cb.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：JavaScript 模块化详解.doc
本文 PDF 下载地址：JavaScript 模块化详解.pdf
| 留言与评论（共有 0 条评论） |
