js文件如何按需加载?

发布于 2022-09-02 15:46:25 字数 152 浏览 22 评论 0

AMD的框架比如requireJS和seaJS,项目不想引用。想自己写JS脚本来按需加载,并且处理好依赖关系,目前想到的方法是callback(利用script的onload事件来执行回调)

各位大神有没有其他比较优雅办法来实现按需加载?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

叹倦 2022-09-09 15:46:25

其实按需加载不是很难,你只需要2个东西就能办到

  1. 一个模块加载器

  2. 一些符合模块加载器语法的代码

首先实现一个模块加载器其实并不复杂,不到50行就能办到,但是如果你想要一个功能完善的,可配置,具有完善的生态和社区的模块加载器。在几年前是requirejsseajs,现在是browserifywebpackwebpackbrowserify在模块加载方面相比requirejsseajs更高级的地方是在node环境下自动进行依赖分析。

让我们来实现个简单的兼容commonJS规范的模块加载器吧。

(function (global) {
    var factoryMap = {};
    var resMap = {};
    var moduleMaps = {};
    
    window.resMap = resMap;

    // define函数定义
    define = function (id, factory) {
      factoryMap[id] = factory;
    }

    // require函数定义
    require = function (id) {

     var mod = moduleMaps[id] = {
       exports: {}
     }

     var factory = factoryMap[id];
    
     if (!factory) {
        throw 'Cannot find module `' + id + '`';
     }
     
     var ret = factory.apply(mod, [require, mod.exports, mod]);

     if (ret) {
       mod.exports = ret;
     }

     return mod.exports;
    }
  })(this);

对于这样的模块加载器你就得这样来用。

// 模块1 依赖 模块二的内容
  define('module1', function (require, exports, module) {
//    console.log(1);
    var module2 = require('module2');
    var module3 = require('module3');
    var module5 = require('module5');
    var module6 = require('module6');

    console.log('module1 --> module2', module2);
    console.log('module1 --> module3', module3);
    console.log('module1 --> module5', module5);
    console.log('module1 --> module6', module6);

    module.exports = {
      moduleName: 'module1'
    }
  })

  // 模块二 依赖 模块三的内容
  define('module2', function (require,  exports, module) {
    var module6 = require('module6');

    console.log('module2 --> module6', module6);

    module.exports = {
      moduleName: 'module2'
    }
  })

  // 模块三
  define('module3', function (require,  exports, module) {
//    console.log('3');
    var module4 = require('module4');
    var module5 = require('module5');
    var module2 = require('module2');

    console.log('module3 --> module5', module5);
    console.log('module3 --> module2', module2);
    console.log('module3 --> module4', module4);

    module.exports = {
      moduleName: 'module3'
    }
  })

  define('module4', function (require,  exports, module) {
    var module6 = require('module6');

    console.log('module4 --> module6', module6);

    module.exports = {
      moduleName: 'module4'
    }
  });

  define('module5', function (require, exports, module) {
    var module2 = require('module2');
    var module6 = require('module6');

    console.log('module5 --> module2', module2);
    console.log('module5 --> module6', module6);

    module.exports = {
      moduleName: 'module5'
    }
  })

  define('module6', function (require, exports, module) {

    module.exports = {
      moduleName: 'module6'
    }
  })


  require('module1');

大家可以把所有代码放到浏览器里面实验一下。。。

下面说些有关模块加载器的题外话。有兴趣的可以继续往下读。。


如果大家很好奇webpack的产出的话,也会发现webpack产出的bundle的最顶部带有的模块加载器也类似于上面的代码。

但是我们的代码相比browserify,相比requirejs或者seajs一定还少些什么。

  1. 一个模块的依赖必须等到运行的时候才知道,如果缺乏相关模块的定义,那就只能报错

  2. 无法自动加载需要的模块

  3. 没有依赖分析工具

seajsrequirejs只实现了第一点和第二点。seajs会在运行define的callback函数之前从其源代码里面找出所有的require定义,比如

define('module1', function () {
   var $ = require('jquery')
});

在执行define的时候,seajs已经知道了module1依赖jquery,然后就自动按照配置发送个http请求去下载定义为jquery的这个模块。

对于requirejs来说,模块的依赖已经在代码中声明好了,只需要读到模块名称,然后根据配置生成路径去下载即可。

但是无论是requirejs还是seajs,它们都有一个致命弱点 ---- 一个模块的依赖竟然是开发者自己去写!!

在这个飞速发展,各个领域都朝向自动化的时代是远远不够的!

于是,Github上有个人搞了一个browserify。
使用node来跑依赖分析,自动帮你把各个模块的依赖都搞定,从此只需要写require即可。

虽然用browserify确实爽,但是既然用了node来搞js的依赖分析,那还不如直接把所有的依赖分析都弄了算了。。。

于是这个时候,有2个团队做了这个事情。

  1. FIS3

  2. webpack

但是为啥FIS没流行下来,主要还是当时FIS搞出了这个功能,但是并没多少人知道,大家对FIS的印象还只停留在FIS2那个时代。。不过现在FIS3已经非常吊了。(原谅我的硬广告(。・`ω´・) )

不过webpack还是火了。

虽然webpackfis都有代码依赖分析的功能,但是webpack依然和browserify一样,把所有的模块都打包在一个文件里(也是有方法分开的)。

FIS是给每一个文件都包裹一个在文章最上面的给的那样

define('xxx', function () {
    // source code
})

这样的语法,再手动引入一个mod.js ---简易模块加载器,并再入口的html里面自动生成一对script标签来实现模块加载。

关键是这样复杂的功能竟然是分成了3个插件的,还要自己手动装!!!(能火才怪 - - )

不过FIS依然是青龙偃月刀一样的存在,大神拿来配好之后各种牛逼,前后端编译通吃。

夏有森光若流苏 2022-09-09 15:46:25

webpack可以实现按需加载

纸短情长 2022-09-09 15:46:25

可以使用ajax,比如jq里面的$.getScript()

唔猫 2022-09-09 15:46:25

其实最好的建议就用现成的工具,如果非想自己写一个,思路参考下script吧,代码简单也清晰

终止放荡 2022-09-09 15:46:25

自己实现也不难,主要思路就是有个config配置需要动态加载js库的path,然后在运行时,由你的加载器,动态的创 <script src='js_Path'/>标签,并把把它append到<head/>中。你的加载器能自适应市面上主流的几种规范即可,比如global var,AMD,Commonjs等。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文