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 相关文章推荐
JS控件的生命周期介绍
Oct 22 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
深入理解node.js http模块
Jan 24 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
javascript 常用功能总结
2012/03/18 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python模块导入的方法
2019/10/24 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
经理秘书岗位职责
2013/11/14 职场文书
法律进学校实施方案
2014/03/15 职场文书
廉洁自律承诺书
2014/03/27 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
太空授课观后感
2015/06/17 职场文书