一个极为简单的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实现仿银行密码输入框效果的代码
Dec 13 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
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简单提示框alert封装函数
2010/08/08 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
Javascript中call的两种用法实例
2013/12/13 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
JavaScript运行机制实例分析
2020/04/11 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Python 图片处理库exifread详解
2021/02/25 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
离婚协议书范本样本
2014/08/19 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
教师节简报
2015/07/20 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
班主任培训研修日志
2015/11/13 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
Java死锁的排查
2022/05/11 Java/Android