模块化风格的优势

requires js是为了加载JavaScript模块而设计的，但是你认为样式文件可以模块化吗？那么问题来了，RequireJS可以像脚本文件一样加载样式文件吗？

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

当然，除了引用第三方插件，我们也可以自己编写一个类似的插件，但是在这里我想推荐一个非常好的样式模块加载器request-CSS，它的官方网站地址是：https://github.com/guybedford/require-css.

然后我们来说说风格模块的好处。和脚本模块一样，样式模块也可以按需加载，样式依赖，但对我来说最大的优势是将脚本的管理委托给前端管理。为什么这么说？以前我们添加的所有样式文件都是通过link标签导入的，导入的文件基本都是jsp、php等后台文件，如果样式文件发生变化，会给后台开发者带来麻烦。但是没有人比前端开发人员更了解风格。

request-CSS使用介绍

让我们用一个简单的例子来介绍request-CSS的用法。首先下载require-css，到上面给出的官网地址，点击页面右下角的Download ZIP按钮，下载后解压，将css.js复制到项目中。

这个简单例子的目录如下：

假设我们的目标是加载页面在加载util模块时所依赖的样式文件1.css。我们经常遇到这种要求。例如，当我们使用JqueryUI时，在加载其脚本模块时，我们还会在页面上添加一个链接标签，介绍其相关的UI样式文件。

首先，我们将RequireJS引入project.html并指定配置文件(main.js)的位置。期间代码如下：

！doctype html headlang=' en ' metacarset=' utf-8 ' title requires js简单示例/title/headbody p id='test '如何处理依赖关系问题/p script src=' http : scripts/lib/Jquery-1 . 11 . 0 . min . js '/script script src=' http 3360 scripts/requires . js ' data-main=' scripts/main '/script/body/html我们进入main.js配置文件。Main.js应该是页面的入口文件。在这个入口文件中，指定了需要加载到入口文件中的模块，同事们设置了RequireJS的一些具体参数。代码如下：

/*条目脚本*/require . config({ baseurl : ' scripts/'，path : { ' util ' 3360 ' helper/util ' }，waitseconds 3360 15，map3360 {'*' 3360 {'CSS' :)./style/1 . CSS ']} })；需要(['util']，函数(util){//todo })；其中，我们应该特别注意地图和垫片的配置。' map '告诉RequireJS在任何模块之前加载这个模块，这样其他模块就依赖css了！像这样的模块./style/1.css都知道如何处理它们。shim当时做了什么？在这个例子中，他说util模块需要在加载之前加载样式文件1.css。当然，我们也可以直接在Util模块中设置它的依赖关系，这将在下面解释。

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

define(function(){//alert(' Hello required js！');console.log($('#test ')。text())；});这个模块很简单，就是通过jQuery获取page id测试的值。并在浏览器的控制台上输出。你可能会觉得这里有点奇怪。为什么使用jQuery却没有在依赖数组中设置？为了正确起见，我们应该这样写：

定义(['jquery']，函数(){//alert(' Hello required js！');console.log($('#test ')。text())；});我这样做的目的是在用RequireJS打包时不打包jquery，这样可以减少文件大小。上面提出了另一个问题。当我加入不使用shim的配置时，我可以像依赖JQuery一样将样式文件写入define的依赖数组。代码如下：

定义(['css！/style/1.css']，function(){//alert(' Hello required js！');console.log($('#test ')。text())；});但是，您应该一眼就能看出这种编写方式更好，我建议您将依赖关系写入垫片配置。

一切准备就绪，在浏览器中打开project.html页面，运行结果如图所示：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。