require 按需加载css,详解RequireJS按需加载样式文件_含真_前端开发者

样式模块化的好处

RequireJS被设计用来加载JavaScript模块的，可是大家有没有联想到其实

虽然RequireJS本身没有实现这个功能，但官网推荐了一些常用的插件供我们使用，官网插件插件地址为：http://requirejs.org/docs/plugins.

当然除了引用第三方插件外，我们也可以动手自己写一个类似插件，不过我在这里要推荐一个很不错的

那么我们再来谈谈，开发人员。但是最懂样式的莫过于前端开发人员了。

require-

下面我们通过一个简单的例子，来介绍下require-

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

假设我们的目的是，通过加载util模块时，页面先加载其依赖的样式文件1.

首先我们在project.

/p>

我们进入到main.

/*入口脚本*/

require.config({

baseUrl: "scripts/",

paths: {

"util": "helper/util"

},

waitSeconds: 15,

map: {

'*': {

'

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

下面我们来看看util模块的代码，代码如下所示：

define(function(){

//alert("Hello RequireJS!!");

console.log($("#test").text());

});

这个模块很简单，就是通过

define(['

我这样做的目的是，用RequireJS打包时，不要将

define(['css!../style/1.css'],function(){

//alert("Hello RequireJS!!");

console.log($("#test").text());

});

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

一切配置就绪，在浏览器中打开project.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持前端开发者。