自制 require 函数：让浏览器轻松实现 js 文件按需加载

qianfeng 发布于2019-08-20 12:27 / 1021人阅读

摘要：剧透一下，实现这个功能只需要行代码。如何判断文件已经加载完毕可以在文件里执行一个函数，通知大家，我已经加载完了。

唉？这种文章你也点进来看，你不知道有 LABjs、RequireJS、SeaJS... 这些库吗？

反正我是没用过这些库，什么 AMD 、CMD 哪来那么多术语... 前端的库太多了，要看各种乱七八糟的文档，看文档就想睡觉，就像学一门新语言一样，好烦啊，还不如自己写一个库呢。

剧透一下，实现这个功能只需要20行代码。

好了，要怎么自己写一个按需加载的库呢，为了实现按需加载：

//这是我们要实现的功能，require("str.js")时加载str.js文件，并创建一个叫str对象，等加载完毕之后执行str对象的ready方法里的函数。

var str = require("str.js");

str.ready(show);

//要执行的函数

function show(res){

    console.log(res);

}

//str.js 文件，提供"我是str"字符串

//require.js 这个是我们要写的库

理一理思路

1、如何加载str.js文件呢？

A：我们可以插入一个，这样不仅加载了str.js，里面的代码还可以被浏览器自动运行呢。

2、如何判断str.js文件已经加载完毕？

A：可以在str.js文件里执行一个函数，通知大家，我已经加载完了。

3、require("str.js")返回一个对象，这个对象要怎么和str.js相关联呢？

A：我们可以创建一个叫JS["str.js"]的对象，使str指向这个对象就行了。

4、我不想把代码都写进一个ready里面，我要写在很多个ready里面，加载完之后它们都能执行吗？

A：不管多少个ready，没加载完的时候，都会丢进一个队列里面先保存着，所以我们需要一个队列。

5、加载完的那个时刻触发ready，那加载完之后我再写的ready函数，就不执行吗？

A：也会执行，所以，在加载完的那个时刻，我们将重写ready函数。

6、这么多东西20行代码能完成吗？

A：....

执行方案

根据上诉思路，写了一个require.js文件：

function require(path){

    //比如我们require("js/str.js") , 我们需要获取"str.js"这个文件名
    var filename = path.split("/");
    filename = filename[filename.length-1];

    JS[filename]={
        fn:[/*这个就是(4)中提到的那个队列*/],

        //这是(2)中提到的方法，str.js文件里面执行这个方法就代表它加载完了
        ready:function(){
        
            JS[filename].fn.forEach(function(fn){
                //JS["str.js"].export就是str.js要提供的东西："我是str"
                fn(JS[filename].export);
            });

            //这是(5)中提到的，ready函数的重写
            JS[filename].rt.ready = function(fn){
                fn(JS[filename].export);
            };
        },
        rt:{
            ready:function(fn){JS[filename].fn.push(fn)}//这个就是str对象的ready函数
        }
    };

    //这是(1)中提到的插入script标签
    var script = document.createElement("script");
    script.src = path;
    document.head.appendChild(script);

    //这是(3)中要返回的对象
    return JS[filename].rt;
}

接下来，就差str.js的写法了：

/*

    这里你想写什么代码都行，推荐写在闭包里，以免污染全局变量

*/
JS["str.js"].export = "我是str";//这个是供大家使用的参数
JS["str.js"].ready();//执行这个函数，通知大家，str.js加载完毕了

确认一下执行结果

ok，一切正常。

GPU云服务器云服务器 JS轻松实现CSS设置怎么让js先加载 js让浏览器保存缓存让js函数只执行一次

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80992.html

webpack4介绍与总结

摘要：随着承担地职责越来越大，模块化开发的需求越来越急迫。我们可以把当成是模块化标准的实现方案，但的功能不仅限于此。支持多种模块使用方式，包括的。下面介绍一下在工程中常用的。最后一个的输出就是我们最终要的结果。在文件有值的情况下，是必要的。由于web应用扩展地得极其迅猛，前端技术也是日新月异，前端的苦不是有多难学，而是我刚学完，这东西就被淘汰了（手动哭脸）。框架方面我们有vue、react...

yanbingyun1990 2019-08-23 10:42 评论0 收藏0
解析 Webpack中import、require、按需加载的执行过程

摘要：但是浏览器是不识别这个关键词的所以会对的代码进行解释首先给设定导出的值如果是会直接赋值给如果是其他形式则给的导出的设定一个该的返回值就是导出的结果而对于来说整个执行过程其实过程和是一样的。最近由于一篇分享手淘过年项目中采用到的前端技术的影响,重新研究了一下项目中CSS的架构.本来打算写一篇文章,但是写到一半突然发现自己像在写文档介绍一样,所以后来就放弃了。但是觉得过程中研究的 Web...

caozhijian 2019-08-22 15:14 评论0 收藏0
模块化

摘要：模块化总结最近重新复习的模块化的相关知识，总结一下，仅供自己理解和大家参考。模块化的优点可维护性根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。模块化总结最近重新复习的模块化的相关知识，总结一下，仅供自己理解和大家参考。模块化的优点可维护性：根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立...

?xiaoxiao, 2019-08-20 17:45 评论0 收藏0
Javascript模块化及webpack基本介绍

摘要：可维护性根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。这标志模块化编程正式诞生。的模块系统，就是参照规范实现的。对象就代表模块本身。 javascript模块化及webpack基本介绍 JavaScript 模块化发展历程什么是模块化 ? 为什么要做Javascript模块化? JavaScript 模块化发展历程什么是模...

figofuture 2019-08-21 18:00 评论0 收藏0
react-router 按需加载

摘要：实际上程序应当只加载当前渲染页所需的，也就是大家说的代码分拆将所有的代码分拆成多个小包，在用户浏览过程中按需加载。这里面有个方法这是提供的方法，这也是按需加载的核心方法。注：本文使用的 react-router 版本为 2.8.1 React Router 是一个非常出色的路由解决方案，同时也非常容易上手。但是当网站规模越来越大的时候，首先出现的问题是 Javascript 文件变得...

MingjunYang 2019-08-21 14:35 评论0 收藏0