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 相关文章推荐
jquery异步调用页面后台方法‏(asp.net)
Mar 01 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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 用sock技术发送邮件的函数
2007/07/21 PHP
PHP时间戳使用实例代码
2008/06/07 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python tkinter label 更新方法
2018/10/11 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
门诊挂号室室长岗位职责
2013/11/27 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
幼儿生日活动方案
2014/08/27 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
初中体育教学随笔
2015/08/15 职场文书
自荐信范文
2019/05/20 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL