克己 require 函数：让浏览器轻松完成 js 文件按需加载

2024年5月12日 165次阅读 来源: 6666

唉？这类文章你也点进来看，你不知道有 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：我们能够插进去一个<script src=”str.js”></script>，如许不仅加载了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加载终了了

确认一下实行效果

<!DOCTYPE html>
<script src="require.js"></script>
<script>
    var str = require('str/str.js');
    str.ready(show);

    setTimeout(function(){
        str.ready(show);
    },3000);

    //要实行的函数
    function show(res){
        console.log(res);
    }
</script>

ok，一切正常。

    原文作者：6666
    原文地址: https://segmentfault.com/a/1190000007558182
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞