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

 更新时间:2016年10月20日 08:29:29   投稿:jingxian  
下面小编就为大家带来一篇一个极为简单的requirejs实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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实现方法全部内容了,希望大家多多支持脚本之家~

相关文章

  • js控制表单奇偶行样式的简单方法

    js控制表单奇偶行样式的简单方法

    这篇文章介绍了js控制表单奇偶行样式的简单方法,有需呀偶的朋友可以参考一下
    2013-07-07
  • 微信小程序图片上传以及内容安全审核详解

    微信小程序图片上传以及内容安全审核详解

    踩了很多次坑,终于在微信小程序中搞定了图片上传以及内容安全审核,下面这篇文章主要给大家介绍了关于微信小程序图片上传以及内容安全审核的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • ionic 自定义弹框效果

    ionic 自定义弹框效果

    这篇文章主要介绍了ionic 自定义弹框效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • uniapp使用Vant-weapp的最新方法教程

    uniapp使用Vant-weapp的最新方法教程

    Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用,下面这篇文章主要给大家介绍了关于uniapp使用Vant-weapp的最新方法教程,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • javascript中this关键字详解

    javascript中this关键字详解

    本文介绍了javascript中this关键字,并将有关this的关键字知识列成一个list,会有助于我们理清思路,是一个很好的学习方法。强烈推荐。
    2016-12-12
  • javascript实现下班倒计时效果的方法(可桌面通知)

    javascript实现下班倒计时效果的方法(可桌面通知)

    这篇文章主要介绍了javascript实现下班倒计时效果的方法,涉及javascript倒计时效果及桌面提示效果的实现技巧,具有一定参考借鉴价值
    2015-07-07
  • JS实现图片无间断滚动代码汇总

    JS实现图片无间断滚动代码汇总

    这篇文章主要介绍了JS实现图片无间断滚动代码汇总,非常实用的特效代码,需要的朋友可以参考下
    2014-07-07
  • bootstrap按钮插件(Button)使用方法解析

    bootstrap按钮插件(Button)使用方法解析

    这篇文章主要为大家详细解析了bootstrap按钮插件Button使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 老生常谈Bootstrap媒体对象

    老生常谈Bootstrap媒体对象

    下面小编就为大家带来一篇老生常谈Bootstrap媒体对象。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JS实现登录页密码的显示和隐藏功能

    JS实现登录页密码的显示和隐藏功能

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能。下面给大家介绍基于JS实现登录页密码的显示和隐藏功能,需要的朋友参考下吧
    2017-12-12

最新评论