js模块加载方式浅析

 更新时间:2017年08月12日 14:15:15   作者:深海里的一条鱼  
这篇文章主要为大家详细介绍了js模块加载方式的初级学习资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

简介: 前端模块化开发日渐鼎盛,如何将零散的插件或者是普通的js脚本文件统一管理及引用,是众多开发者共同的目标。本人是从事.net开发的,最近对前端的一些东西特别的感兴趣,也会尝试的夹杂一点自己的想法,写一些小东西。东西不牛逼,但是感觉用起来还是方便那么一点的。

下面就展示一下简短的小代码。

中心思想:通过外部调用事先封装好的模块加载方法,传入参数(包括主目录及模块js或者css的目录 ),在程序运行的同时,会动态的将相应的css或者是js代码追加引用到head标签内,这样,就可以使用被引用的文件的样式或者方法啦。

源文件:

(function(req) {
  window._Req= req;
})((function($) {
  var _factory = function() {}; //模块工厂
  //docker
  _factory.prototype = {
    _origin: location.origin || location.protocol + "//" + location.host,//域名地址
    _aim: null,
    _config: function(param) {
      var _default = { //默认参数
          _coreDir: "",
          _moduleArr: [
            ['', '']
          ], //模块数组
        },
        _opt = {};
      $.extend(_opt, _default);
      if (typeof param === 'object')
        $.extend(_opt, param);
      this._aim = _opt;
      this._load();  //加载模块
    },
    _load: function() {
      try {
        var _modules = this._aim._moduleArr,
          _core = this._aim._coreDir;
        _modules.forEach(function(_element) {
          _element.forEach(function(_ele) {
            var _index = _ele.lastIndexOf('.'), 
              _moduleType = _ele.substring(_index + 1), 
              _moduleDir = _core + '/' + _ele, 
              _module = null;
            switch (_moduleType) {
              case 'js':
                _module = document.createElement('script');
                _module.src = _moduleDir;
                break;
              case 'css':
                _module = document.createElement('link');
                _module.href = _moduleDir;
                _module.rel = 'stylesheet';
                break;
              default:
                console.error("对不起模块类型不匹配");
                break;
            }
            document.head.appendChild(_module); 
          });
        }, this);
      } catch (ex) {
        throw ex;
      }
    }
  };
  return new _factory(); //返回工厂
})(jQuery))

调用:

_Req._config({
    _coreDir: "../jq-package",
          _moduleArr: [
            ['js/ui-dialog.js', 'css/dialog.css']
          ], //模块数组
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 利用微信小程序制作属于自己的Icon图标

    利用微信小程序制作属于自己的Icon图标

    项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别,下面这篇文章主要给大家介绍了关于利用微信小程序制作属于自己的Icon图标的相关资料,需要的朋友可以参考下
    2022-04-04
  • layui的table中显示图片方法

    layui的table中显示图片方法

    今天小编就为大家分享一篇layui的table中显示图片方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Javascript中的对象和原型(二)

    Javascript中的对象和原型(二)

    这篇文章给大家介绍了js中的对象和原型,从工厂模式,构造函数方面展开话题,介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • ES6学习笔记之正则表达式和字符串正则方法分析

    ES6学习笔记之正则表达式和字符串正则方法分析

    这篇文章主要介绍了ES6学习笔记之正则表达式和字符串正则方法,结合实例形式对比分析了ES5与ES6正则操作的常用函数功能与用法区别,需要的朋友可以参考下
    2017-04-04
  • JS正则表达式验证中文字符

    JS正则表达式验证中文字符

    本篇文章主要介绍了JS正则表达式验证中文字符的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • JS实现根据出生年月计算年龄

    JS实现根据出生年月计算年龄

    本篇文章主要是对利用JS实现根据出生年月计算年龄的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JS打印组合功能

    JS打印组合功能

    这篇文章主要介绍了JS打印组合功能,包括JS实现简单的页面局部打印,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript交换变量的常用方法小结【4种方法】

    JavaScript交换变量的常用方法小结【4种方法】

    这篇文章主要介绍了JavaScript交换变量的常用方法,结合实例形式总结分析了JavaScript交换变量的4种实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • Javascript this关键字使用分析

    Javascript this关键字使用分析

    这是来自http://www.quirksmode.org/js/this.html这篇文章里对this的定义,直接看定义似乎什么也不知道,下面通过实例来说明各种情况下this所指代的对象以及原理。
    2008-10-10
  • bootstrap table实例详解

    bootstrap table实例详解

    本文通过实例代码给大家介绍了bootstrap table样式,非常不错,具有参考借鉴价值,需要的的朋友参考下
    2017-01-01

最新评论