详解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 相关文章推荐
javascript中length属性的探索
Jul 31 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
JS中的一些常用的函数式编程术语
Jun 15 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读写文件的方法(生成HTML)
2006/11/27 PHP
PHP 多进程 解决难题
2009/06/22 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
php框架知识点的整理和补充
2021/03/01 PHP
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
input框中的name和id的区别
2016/11/16 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
python实现Dijkstra静态寻路算法
2019/01/17 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
一行python实现树形结构的方法
2019/08/09 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
医院学雷锋活动策划方案
2014/02/15 职场文书
销售主管竞聘书
2014/03/31 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
学生病假条怎么写
2015/08/17 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers