一个极为简单的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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 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
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python爬虫之遍历单个域名
2019/11/20 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python3正则模块re的使用方法详解
2020/02/11 Python
python实现滑雪者小游戏
2020/02/22 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
体育专业个人求职信范文
2013/12/27 职场文书
公司活动方案范文
2014/03/06 职场文书
认购协议书范本
2014/04/22 职场文书
开展读书活动总结
2014/06/30 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
商场营业员岗位职责
2015/04/14 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
导游词之天津盘山
2019/11/01 职场文书