zoukankan      html  css  js  c++  java
  • 浅谈js模块加载方式(初级)

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

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

     1 (function(req) {
     2     window._Req= req;
     3 })((function($) {
     4     var _factory = function() {}; //模块工厂
     5     //docker
     6     _factory.prototype = {
     7         _origin: location.origin || location.protocol + "//" + location.host,//域名地址
     8         _aim: null,
     9         _config: function(param) {
    10             var _default = { //默认参数
    11                     _coreDir: "",
    12                     _moduleArr: [
    13                         ['', '']
    14                     ], //模块数组
    15                 },
    16                 _opt = {};
    17             $.extend(_opt, _default);
    18             if (typeof param === 'object')
    19                 $.extend(_opt, param);
    20             this._aim = _opt;
    21             this._load();   //加载模块
    22         },
    23         _load: function() {
    24             try {
    25                 var _modules = this._aim._moduleArr,
    26                     _core = this._aim._coreDir;
    27                 _modules.forEach(function(_element) {
    28                     _element.forEach(function(_ele) {
    29                         var _index = _ele.lastIndexOf('.'), 
    30                             _moduleType = _ele.substring(_index + 1), 
    31                             _moduleDir = _core + '/' + _ele, 
    32                             _module = null;
    33                         switch (_moduleType) {
    34                             case 'js':
    35                                 _module = document.createElement('script');
    36                                 _module.src = _moduleDir;
    37                                 break;
    38                             case 'css':
    39                                 _module = document.createElement('link');
    40                                 _module.href = _moduleDir;
    41                                 _module.rel = 'stylesheet';
    42                                 break;
    43                             default:
    44                                 console.error("对不起模块类型不匹配");
    45                                 break;
    46                         }
    47                         document.head.appendChild(_module); 
    48                     });
    49                 }, this);
    50             } catch (ex) {
    51                 throw ex;
    52             }
    53         }
    54     };
    55     return new _factory(); //返回工厂
    56 })(jQuery))
    源文件
    1  _Req._config({
    2        _coreDir: "../jq-package",
    3                     _moduleArr: [
    4                         ['js/ui-dialog.js', 'css/dialog.css']
    5                     ], //模块数组
    6   });
    调用
    力争写最通俗易懂的文章,不添加任何防腐剂~~~
  • 相关阅读:
    Xamarin Layout属性(转)
    Oracle基础
    tableViewNestTableView(tableView嵌套collectionView)
    抓包工具Fiddler的使用教程(五): 修改response的数据 .
    Web调试利器fiddler
    SQLServer光标
    SQLServer触发器
    web端功能测试总结(一)
    web功能测试
    test zlj
  • 原文地址:https://www.cnblogs.com/diligent-lsh/p/7349653.html
Copyright © 2011-2022 走看看