详解RequireJS按需加载样式文件


Posted in Javascript onApril 12, 2017

样式模块化的好处

RequireJS被设计用来加载JavaScript模块的,可是大家有没有联想到其实样式文件可以进行模块化处理,那么问题来了,RequireJS能不能像加载脚本文件一样来加载样式文件呢?

虽然RequireJS本身没有实现这个功能,但官网推荐了一些常用的插件供我们使用,官网插件插件地址为:http://requirejs.org/docs/plugins.html,同时在github上也有社区大量贡献的插件:https://github.com/jrburke/requirejs/wiki/Plugins

当然除了引用第三方插件外,我们也可以动手自己写一个类似插件,不过我在这里要推荐一个很不错的样式模块加载器require-css,其官网地址为:https://github.com/guybedford/require-css。

那么我们再来谈谈,样式模块话的好处吧,和脚本模块化一样,样式模块化也可以做到按需加载,样式依赖,不过对我来说最大的好处是将脚本的管理放权到前端管理,为什么这么说呢? 以前我们添加样式文件都是通过link标签引入的,而被引入的文件基本上都是jsp、php等后台文件,这样对与后台不太熟悉的人来说,如果样式文件发生改变,都要麻烦后台开发人员。但是最懂样式的莫过于前端开发人员了。

require-css的使用介绍

下面我们通过一个简单的例子,来介绍下require-css的用法,首先下载require-css,去到上面给出的官网地址,在页面的右下角点击Download ZIP按钮,下载完成后解压,将css.js拷贝复制到项目中去。

这个简单示例的目录如下所示:

详解RequireJS按需加载样式文件

假设我们的目的是,通过加载util模块时,页面先加载其依赖的样式文件1.css。这个需求我们经常遇到,比如我们使用JqueryUI时,在加载其脚本模块时,在页面我们也会添加上link标签引入其相关的UI样式文件。

首先我们在project.html中引入RequireJS和指定配置文件(main.js)的位置。期代码如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>RequireJS简单示例</title>
</head>
<body>
  <p id="test">如何处理依赖问题</p>
  <script src="scripts/lib/jquery-1.11.0.min.js"></script>
  <script src="scripts/require.js" data-main="scripts/main"></script>
</body>
</html>

我们进入到main.js配置文件。main.js应该是页面的入口文件,在这个入口文件中,指定了入口文件需要加载的模块,同事也设置了RequireJS某些具体参数。其代码如下所示:

/*入口脚本*/
require.config({
  baseUrl: "scripts/",
  paths: {
    "util": "helper/util"
  },
  waitSeconds: 15,
  map: {
    '*': {
      'css': 'lib/css'
    }
  },
  shim : {
    'util': ['css!../style/1.css']
  }
});

require(["util"], function(util) {
  // todo
});

其中我们要特别注意map和shim的配置,"map"告诉RequireJS在任何模块之前,都先载入这个模块,这样别的模块依赖于css!../style/1.css这样的模块都知道怎么处理了,shim那时干什么用的呢?这这个示例中,他表示util这个模块在加载之前需要先加载1.css这个样式文件。当然我们也可以在Util模块里直接设置他的依赖,下面将会解释。

下面我们来看看util模块的代码,代码如下所示:

define(function(){
  //alert("Hello RequireJS!!");
  console.log($("#test").text());
});

这个模块很简单,就是通过jQuery获取页面id为test的值。并且在浏览器的控制台输出来。这里你可能感觉有点奇怪。为什么你使用了jQuery但是在依赖数组中且没有设置呢?正确的说,我们应该这样写:

define(['jquery'],function(){
  //alert("Hello RequireJS!!");
  console.log($("#test").text());
});

我这样做的目的是,用RequireJS打包时,不要将jquery打包进去,这样就可以减少文件的大小了。还有一个上面提出的问题,加入我不用shim这个配置时,可以向依赖JQuery一样,将样式文件写到define的依赖数组中去。其代码如下:

define(['css!../style/1.css'],function(){
  //alert("Hello RequireJS!!");
  console.log($("#test").text());
});

不过你应该一眼就能看出来,那种写法比较好吧,我比较推荐,将依赖写到shim配置中去。

一切配置就绪,在浏览器中打开project.html页面,运行结果如图所示:

详解RequireJS按需加载样式文件

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

Javascript 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
TypeScript入门-接口
Mar 30 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 #Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 #jQuery
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 #Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 #Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 #jQuery
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 #Javascript
jQuery用noConflict代替$的实现方法
Apr 12 #jQuery
You might like
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
python中list循环语句用法实例
2014/11/10 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
兴趣小组活动总结
2014/05/05 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python