js模块加载方式浅析


Posted in Javascript onAugust 12, 2017

简介: 前端模块化开发日渐鼎盛,如何将零散的插件或者是普通的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']
          ], //模块数组
 });

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

Javascript 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
js转换对象为xml
Feb 17 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 #Javascript
Node.js pipe实现源码解析
Aug 12 #Javascript
vue实现移动端图片裁剪上传功能
Aug 18 #Javascript
JavaScript实现图片切换效果
Aug 12 #Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 #Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 #Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 #Javascript
You might like
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
js获取页面description的方法
2015/05/21 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
浅析Python 多行匹配模式
2020/07/24 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
python statsmodel的使用
2020/12/21 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
文明风采获奖感言
2014/02/18 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
早安问候语大全
2015/11/10 职场文书
python使用glob检索文件的操作
2021/05/20 Python
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
git stash(储藏)的用法总结
2022/06/25 Servers