欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

commonJs原理解析

发布时间：2024/4/17 编程问答 58 豆豆
生活随笔 收集整理的这篇文章主要介绍了 commonJs原理解析 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

同步加载

  • 先使用require.register注册文件路径和对应方法之间的映射关系保存在require.modules中
  • 再使用require方法，通过传入的路径去require.modules中取出对应的方法
  • 使用require获取方法的同时，会触发依赖模块中的require方法，这样就实现了模块的加载

    • index.html

    <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><!-- <script src="./commonJS_async.js"></script> --><script src="./commonJS.js"></script><script src="./modules/hello.js"></script><script src="./modules/name.js"></script><script>var hello = require("hello.js");console.log(hello);console.log(require.modules);// require.ensure('./modules/ajax.js', function (obj) {// console.log(obj);// })</script> </body> </html>

    commonJS.js

    function require(path) {let mod = require.modules[path];mod.exports = {};mod.call(window, require, mod, mod.exports);return mod.exports; }require.modules = {};require.register = function (path, fn) {// 异步加载require.modules[path] = fn; }

    hello.js、name.js

    //hello.js require.register('hello.js', function (require, module, exports) {let name = require('name.js')exports.hello_name = 'hello ' + name;exports.hello_world = 'hello world'; }) //name.js require.register('name.js', function (require, module, exports) {module.exports = 'shimingw' })

    异步加载

  • 异步加载的逻辑匜不复杂，在同步加载的基础上增加require.ensure方法，预先在modules对象上挂在onload方法
  • 修改require.register方法，增加异步模块注册逻辑，在异步模块注册完成后触发onload，以达到模块异步加载的需求

    • commonJS_async.js

    function require(path) {let mod = require.modules[path].method;mod.exports = {};mod.call(window, require, mod, mod.exports);return mod.exports; }require.modules = {};require.register = function (path, fn) {// 异步加载if (require.modules[path] && require.modules[path].status === 'loading') {// 异步加载成功require.modules[path].status = 'loaded'require.modules[path].method = fn;require.modules[path].onload(require(path));} else {require.modules[path] = {moduleName: path, // 模块Idstatus: 'loaded',onload: null,method: fn};} }require.ensure = function (path, cb) {require.modules[path] = {moduleName: path, // 模块Idstatus: 'loading',onload: cb,method: null};var head = document.querySelector('head')var script = document.createElement('script');script.async = true;script.src = path;setTimeout(() => {head.appendChild(script);},5000 ); }

    总结

    以上是生活随笔为你收集整理的commonJs原理解析的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。