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


Posted in Javascript onOctober 20, 2016

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实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
vue模块移动组件的实现示例
May 20 Javascript
JavaScript实现窗口抖动效果
Oct 19 #Javascript
原生js图片轮播效果实现代码
Oct 19 #Javascript
Angular2表单自定义验证器的实现
Oct 19 #Javascript
javascript滚轮控制模拟滚动条
Oct 19 #Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 #Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 #Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 #Javascript
You might like
改进的IP计数器
2006/10/09 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
python中列表和元组的区别
2017/12/18 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python多线程抽象编程模型详解
2019/03/20 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python生成器用法实例详解
2019/11/22 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
nohup的用法
2012/11/26 面试题
自荐信怎么写呢?
2013/12/09 职场文书
手机被没收检讨书
2014/02/22 职场文书
购房协议书范本
2014/04/11 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
离婚协议书格式
2015/01/26 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
详解Spring事件发布与监听机制
2021/06/30 Java/Android
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
教你部署vue项目到docker
2022/04/05 Vue.js
python APScheduler执行定时任务介绍
2022/04/19 Python
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python
基于Python实现nc批量转tif格式
2022/08/14 Python