JavaScript模块化之使用requireJS按需加载


Posted in Javascript onApril 12, 2017

模块加载器的概念可能稍微接触过前端开发的童鞋都不会陌生,通过模块加载器可以有效的解决这些问题:

  1. JS文件的依赖关系。
  2. 通过异步加载优化script标签引起的阻塞问题
  3. 可以简单的以文件为单位将功能模块化并实现复用

主流的JS模块加载器有requireJS,SeaJS等,加载器之间可能会因为遵循的规范不同有微妙的差别,从纯用户的角度出发,之所以选requireJS而不是SeaJS主要是因为:

功能实现上两者相差无几,没有明显的性能差异或重大问题。

文档丰富程度上,requireJS远远好于SeaJS,就拿最简单的加载jQuery和jQuery插件这回事,虽然两者的实现方法相差无几,但requireJS就有可以直接拿来用的Demo,SeaJS还要读文档自己慢慢折腾。一些问题的解决上,requireJS为关键词也更容易找到答案。

requireJS 加载jQuery + jQuery插件

可能对于一般Web App来说,引入jQuery及相关插件的概率是最大的,requireJS也亲切的给出了相应的解决方案及动态加载jQuery及插件的文档及实例代码。

在最新的jQuery1.9.X中,jQuery已经在最后直接将自己注册为一个AMD模块,即是说可以直接被requireJS作为模块加载。如果是加载旧版的jQuery有两种方法:

1. 让jQuery先于requireJS加载

2. 对jQuery代码稍做一点处理,在jQuery代码包裹一句:

define(["jquery"], function($) { 
  // $ is guaranteed to be jQuery now */ 
});

requireJS的示例中,直接将requireJS与jQuery合并为一个文件,如果是采用jQuery作为核心库的话推荐这种做法。

同样对于jQuery插件来说也有两种方法

1. 在插件外包裹代码

define(["jquery"], function($){ 
   // Put here the plugin code. 
});

2. 在使用reuqireJS代码加载前注册插件(比如在main.js)中

requirejs.config({ 
  "shim": { 
    "jquery-cookie" : ["jquery"] 
  } 
});

requireJS加载第三方类库

在实例的App中还用到了jQuery以外的第三方类库,如果类库不是一个标准的AMD模块而又不想更改这些类库的代码,同样需要提前进行定义:

require.config({ 
   paths: { 
      'underscore': 'vendor/underscore' 
   }, 
   shim: { 
     underscore: { 
       exports: '_' 
     } 
   } 
});

CSS文件的模块化处理

在requireJS中,模块的概念仅限于JS文件,如果需要加载图片、JSON等非JS文件,requireJS实现了一系列加载插件。

但是遗憾的是requireJS官方没有对CSS进行模块化处理,而我们在实际项目中却往往能遇到一些场景,比如一个轮播的图片展示栏,比如高级编辑器等等。几乎所有的富UI组件都会由JS与CSS两部分构成,而CSS之间也存在着模块的概念以及依赖关系。

为了更好的与requireJS整合,这里采用require-css来解决CSS的模块化与依赖问题。

require-css是一个requireJS插件,下载后将css.js与normalize.js放于main.js同级即可默认被加载,比如在我们的项目中需要加载jQuery Mobile的css文件,那么可以直接这样调用:

require(['jquery', 'css!../css/jquery.mobile-1.3.0.min.css'], function($) { 
});

不过由于这个CSS本质上是属于jQuery Mobile模块的一部分,更好的做法是将这个CSS文件的定义放在jQuery Mobile的依赖关系中,最终我们的requireJS定义部分为:

require.config({ 
   paths: { 
      'jquerymobile': 'vendor/jquery.mobile-1.3.0', 
      'jstorage' : 'vendor/jstorage', 
      'underscore': 'vendor/underscore' 
   }, 
   shim: { 
     jquerymobile : { 
      deps: [ 
        'css!../css/jquery.mobile-1.3.0.min.css' 
      ] 
     }, 
     underscore: { 
       exports: '_' 
     } 
   } 
});

在使用模块时,只需要:

require(['jquery', 'underscore', 'jquerymobile', 'jstorage'], function($, _) { 
});

jQuery Mobile的CSS文件就会被自动加载,这样CSS与JS就被整合为一个模块了。同理其他有复杂依赖关系的模块也可以做类似处理,requireJS会解决依赖关系的逻辑。

数据源的加载与等待

Web App一般都会动态加载后端的数据,数据格式一般可以是JSON、JSONP也可以直接是一个JS变量。这里以JS变量为例:

var restaurants = [ 
  { 
    "name": "KFC" 
  }, 
  { 
    "name": "7-11" 
  }, 
  { 
    "name": "成都小吃" 
  } 
]

载入这段数据:

$.getScript('data/restaurants.json', function(e){ 
  var data = window.restaurants; 
  alert(data[0].name); //KFC 
});

单一的数据源确实很简单,但是往往一个应用中会有多个数据源,比如在这个实例App中UI就需要载入用户信息、餐厅信息、订餐信息三种数据后才能工作。如果仅仅靠多层嵌套回调函数的话,可能代码的耦合就非常重了。

为了解决多个数据加载的问题,我习惯的解决方法是构造一个dataReady事件响应机制。

var foodOrder = { 
 
  //数据载入后要执行的函数暂存在这里 
  dataReadyFunc : [] 
 
  //数据源URL及载入状态 
  , dataSource : [ 
    { url : 'data/restaurants.json', ready : false, data : null }, 
    { url : 'data/users.json', ready : false, data : null }, 
    { url : 'data/foods.json', ready : false, data : null } 
  ] 
 
  //检查数据源是否全部载入完毕 
  , isReady : function(){ 
    var isReady = true; 
    for(var key in this.dataSource){ 
      if(this.dataSource[key].ready !== true){ 
        isReady = false; 
      } 
    } 
    return isReady; 
  } 
 
  //数据源全部加载完毕,则逐一运行dataReadyFunc中存放的函数 
  , callReady : function(){ 
    if(true === this.isReady()){ 
      for(var key in this.dataReadyFunc){ 
        this.dataReadyFunc[key](); 
      } 
    } 
  } 
 
  //供外部调用,会将外部输入的函数暂存在dataReadyFunc中 
  , dataReady : function(func){ 
    if (typeof func !== 'function') { 
      return false; 
    } 
    this.dataReadyFunc.push(func); 
  } 
 
  , init : function(){ 
    var self = this; 
    var _initElement = function(key, url){ 
      $.getScript(url, function(e){ 
        //每次载入数据后,将数据存放于dataSource中,将ready状态置为true,并调用callReady 
        self.dataSource[key].data = window[key]; 
        self.dataSource[key].ready = true; 
        self.callReady(); 
      }); 
    } 
    for(var key in this.dataSource){ 
      _initElement(key, this.dataSource[key].url); 
    } 
  } 
}

用法为:

foodOrder.dataReady(function(){ 
  alert(1);   
}); 
foodOrder.init();

dataReady内的alert将会在所有数据载入完毕后开始执行。

这段处理的逻辑并不复杂,将所有要执行的方法通过dataReady暂存起来,等待数据全部加载完毕后再执行,更加复杂的场景此方法仍然通用。

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

Javascript 相关文章推荐
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
javascript中的事件代理初探
Mar 08 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
js模糊查询实例分享
Dec 26 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
Vue多环境代理配置方法思路详解
Jun 21 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 #jQuery
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 #Javascript
jQuery用noConflict代替$的实现方法
Apr 12 #jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 #jQuery
微信小程序 引入es6 promise
Apr 12 #Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 #Javascript
Vue 实用分页paging实例代码
Apr 12 #Javascript
You might like
PHP的PDO常用类库实例分析
2016/04/07 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
js实现点击生成随机div
2020/01/16 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python编写登陆接口的方法
2017/07/10 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python之修改图片像素值的方法
2019/07/03 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
优秀求职信范文分享
2013/12/19 职场文书
机械个人求职信范文
2014/01/24 职场文书
运动会稿件200字
2014/02/07 职场文书
实习报告评语
2014/04/26 职场文书
励志演讲稿范文
2014/04/29 职场文书
青奥会口号
2014/06/12 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
mysql创建存储过程及函数详解
2021/12/04 MySQL