一个极为简单的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 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
vue.js todolist实现代码
Oct 29 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
文章推荐系统(二)
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
PHP实现简易图形计算器
2020/08/28 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
读书之星事迹材料
2014/05/12 职场文书
投标邀请书范本
2015/02/02 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
2016公司年会通知范文
2015/04/25 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书