一个极为简单的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 相关文章推荐
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
前端JavaScript大管家 package.json
Nov 02 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
解析link_mysql的php版
2013/06/30 PHP
js异或加解密效果代码
2008/06/25 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
如何写出好的Java代码
2014/04/25 面试题
工作时间上网检讨书
2014/02/03 职场文书
眼镜促销方案
2014/03/15 职场文书
诚信考试倡议书
2014/04/15 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
小学生作文批改评语
2014/12/25 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
Django中celery的使用项目实例
2022/07/07 Python