一个极为简单的requirejs实现方法

 更新时间:2016年10月20日 08:29:29   投稿:jingxian  
下面小编就为大家带来一篇一个极为简单的requirejs实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

require和 sea的源码分析,我之前的博客有写过, 今天我想分享的是一个很简单的核心代码(不带注释和空行大概60行), 没有容错判断。

require.js

require函数实现用一句话概括:

依次加载require的模块,然后监测script的onload事件,判断所有模块加载成功,执行require的callback, 如果只带一个参数且不是数组,就是加载成功后return 模块。

 

//标记已经加载成功的个数
var REQ_TOTAL = 0;
//模块导出
window.exports = {};
//记录各个模块的顺序
var exp_arr = [];

//判断是否数组
function isArray(param) {
  return param instanceof Array;
}

//require 真正实现
function require(arr, callback) {

  var req_list;

  if(isArray(arr)) {
    req_list = arr;
  } else {
    req_list = [arr];
  }
  var req_len = req_list.length;

  //模块逐个加载
  for(var i=0;i<req_len;i++) {
    var req_item = req_list[i];

    var $script = createScript(req_item, i);

    var $node = document.querySelector('head');

    (function($script) {
      //检测script 的onload事件
      $script.onload = function() {
        REQ_TOTAL++;

        var script_index = $script.getAttribute('index');

        exp_arr[script_index] = exports;

        window.exports = {};

        //所有链接加载成功后,执行callback
        if(REQ_TOTAL == req_len) {
          callback && callback.apply(exports, exp_arr);

       
        }

      }

      $node.appendChild($script);
    })($script);

  }

}

//创建一个script标签
function createScript(src, index) {
  var $script = document.createElement('script');

  $script.setAttribute('src', src);
  $script.setAttribute('index', index);

  return $script;
}

 然后写了2个导出模块的js文件, 只写了最简单的exports实现

define.js

exports.define = {
  topic: 'my export',
  desc: 'this is other way to define ',
  sayHello: function() {
    console.log('topic ' + this.topic + this.desc);
  }
}

define2.js

exports.define = {
  name: 'xm',
  age: 22,
  info: function() {
    console.log('topic ' + this.name + this.age);
  }
}

然后测试demo很简单

//测试demo
 require(['../res/define.js', '../res/define2.js'], function(def, def2) {
   def.define.sayHello();
 
   def2.define.info();
 });

以上就是小编为大家带来的一个极为简单的requirejs实现方法全部内容了,希望大家多多支持脚本之家~

相关文章

  • JS判断是否为JSON对象及是否存在某字段的方法(推荐)

    JS判断是否为JSON对象及是否存在某字段的方法(推荐)

    下面小编就为大家带来一篇JS判断是否为JSON对象及是否存在某字段的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • TypeScript字符串的常用操作总结

    TypeScript字符串的常用操作总结

    这篇文章主要为大家详细介绍了TypeScript中字符串的常用操作,例如substring、indexOf、slice、replace等,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • JS中FormData类实现文件上传

    JS中FormData类实现文件上传

    这篇文章主要为大家详细介绍了JS中FormData类实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • TypeScript中Array(数组)声明与简单使用方法

    TypeScript中Array(数组)声明与简单使用方法

    这篇文章主要给大家介绍了关于TypeScript中Array(数组)声明与简单使用的相关资料,TypeScript Array(数组)数组对象是使用单独的变量名来存储一系列的值,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 学习JavaScript设计模式之状态模式

    学习JavaScript设计模式之状态模式

    这篇文章主要为大家介绍了JavaScript设计模式中的状态模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS密码生成与强度检测完整实例(附demo源码下载)

    JS密码生成与强度检测完整实例(附demo源码下载)

    这篇文章主要介绍了JS密码生成与强度检测完整实例,涉及JavaScript密码的生成,破解时间计算,密码安全监测及大小写锁定判断等功能的实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-04-04
  • JS层移支示例代码

    JS层移支示例代码

    JS层移支示例代码...
    2007-03-03
  • javascript eval()用法

    javascript eval()用法

    实例分析eval的一些使用方法与技巧。
    2009-03-03
  • JS 自执行函数原理及用法

    JS 自执行函数原理及用法

    这篇文章主要介绍了JS 自执行函数原理及技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • js修改table中Td的值(定义td的单击事件)

    js修改table中Td的值(定义td的单击事件)

    单击事件,将Td内容更新为一个Div,其中装载了一个Text,用于用户输入新的Td的值,一个确定按钮,一个取消按钮,用于保存或取消用户的输入内容
    2013-01-01

最新评论