自定义require函数让浏览器按需加载Js文件

当然可以，下面是一个简化版的实现按需加载的库：

```javascript

// require.js 简易版实现按需加载库

var JS = {}; // 创建全局对象用于存储加载的模块

var queue = []; // 创建队列用于存储所有未执行的ready函数

var loadScript = function(src) {

var script = document.createElement('script'); // 创建script标签用于加载js文件

script.src = src; // 设置js文件路径

script.onload = function() { // 当js文件加载完成时执行该函数

var module = JS[script.src]; // 获取加载的模块对象

if (module && typeof module.ready === 'function') { // 如果模块存在且ready函数存在

module.ready(); // 执行ready函数

}

processQueue(); // 处理队列中的函数

};

document.head.appendChild(script); // 将script标签添加到head中，开始加载js文件

};

var processQueue = function() { // 处理队列中的函数，执行所有等待执行的ready函数

while (queue.length) {

var fn = queue.shift(); // 取出队列中的第一个函数并执行

fn();

}

};

var define = function(name, ready) { // 定义模块，指定模块名和ready函数

JS[name] = {ready: ready}; // 创建模块对象并存储到JS对象中，同时存储ready函数

loadScript(name); // 加载js文件

};

var require = function(name) { // 自定义require函数，用于按需加载模块并执行ready函数

if (!JS[name]) { // 如果模块不存在，则先定义模块并加载js文件

queue.push(function() { // 将ready函数放入队列中等待执行

if (JS[name]) { // 如果模块已经加载完成，则执行ready函数

JS[name].ready();

} else { // 如果模块还未加载完成，则继续等待执行时机到来再执行ready函数

queue.push(arguments[0]);

}

});

define(name, arguments[0]); // 定义模块并指定ready函数为传入的函数，同时开始加载js文件

} else { // 如果模块已经存在，则直接执行ready函数并等待队列中其他函数的执行时机到来再执行它们

queue.push(arguments[0]);

processQueue();

}

};

```重构文章如下：

模块化加载与执行方案

为了实现前端资源的动态加载与模块化执行，我们编写了一个 `require.js` 文件。以下是其功能的详细与执行流程。

require.js 文件

当调用 `require` 函数并传入一个路径参数时，例如 `'js/str.js'`，该文件开始执行以下操作：

1. 提取文件名: 从传入的路径中获取文件名，例如 `'str.js'`。

2. 创建模块对象: 在 `JS` 对象中为该文件创建一个模块对象，包含 `fn`（函数队列）、`ready`（执行函数）等属性。

3. 加载资源: 通过创建一个 `

```

当页面加载完成后，控制台会输出 "我是str"，证明 `str.js` 模块已成功加载并执行。

希望这篇文章能帮助你理解这个模块化加载方案的工作原理和用法。如果有任何疑问或需要进一步的交流，欢迎留言讨论。如果你有任何改进建议或扩展的想法，也请随时分享。希望这篇文章对你的学习或工作有所帮助。