详解require.js配置路径的用法和css的引入


Posted in Javascript onSeptember 06, 2017

前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了,这些框架都在尝试着解决一 些前端开发中的共性问题,但是实现又不尽相同。通常一般的前端加载js文件都是这样 :

<script type="text/javascript" src="js/js1.js"></script>
<script type="text/javascript" src="js/js2.js"></script>
<script type="text/javascript" src="js/js3.js"></script>
<script type="text/javascript" src="js/js4.js"></script>

但是当一个项目特别大的时候  引入的js文件就特别多,这样看起来不雅观,并且不高效,当js文件多而大的时候,网页下载就会出现超时,导致网站响应超时,直接500,所以一个神奇的

js框架(js工具包)就出现了:require.js。

require.js主要解决两个问题:

1、实现js的异步加载,避免js太多加载响应时间太多导致网站超时,

2、管理模块之间的依赖性,便于编写与维护。

好了步入今天的正题,写一个require.js用法的案例,供大家参考一下:

假设我们的项目有一个这样的资源目录:

详解require.js配置路径的用法和css的引入

第一步在index.html中引入已经下载好的require.js

然后我们新建一个config.js来写相应的加在配置:

然后打开config.js里面写入代码如下:

require.config({
  baseUrl:'/data/points/',//配置基目录
  urlArgs:'v='+(new Date()).getTime(),//清楚缓存
  paths:{
    'css': 'libs/js/css.min',
    'jquery': 'libs/js/jquery-1.11.1.min',
    'vur': 'libs/js/vue.min',
    'amazeui': 'libs/js/amazeui.min',
    'color': 'libs/js/color.min'
  },
  shim:{
    'amazeui':{
      deps: ['jquery','css!libs/css/amazeui.min','css!style/common','css!style/footer'],
    },
    'color':{
      deps:['css!libs/css/color.min']
    }
  }

});

其中加入css应该用模块的依赖性 也就是deps

deps:['css!libs/css/color.min'] 这里会优先加在css这个模块名下的文件(libs/js/css.min.js) 然后一个 "!"后面紧接着在基目录下加在libs/css/color.min.css

其中css.min.js这个是一个依赖模块js,这里面是写了一个加载css文件的方法,

具体css.min.js

define(
  function () {
  if (typeof window == "undefined")return {
    load: function (n, r, load) {
      load()
    }
  };
  var head = document.getElementsByTagName("head")[0];
  var engine = window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)/) || 0;
  var useImportLoad = false;
  var useOnload = true;
  if (engine[1] || engine[7])useImportLoad = parseInt(engine[1]) < 6 || parseInt(engine[7]) <= 9; else if (engine[2])useOnload = false; else if (engine[4])useImportLoad = parseInt(engine[4]) < 18;
  var cssAPI = {};
  cssAPI.pluginBuilder = "./css-builder";
  var curStyle;
  var createStyle = function () {
    curStyle = document.createElement("style");
    head.appendChild(curStyle)
  };
  var importLoad = function (url, callback) {
    createStyle();
    var curSheet = curStyle.styleSheet || curStyle.sheet;
    if (curSheet && curSheet.addImport) {
      curSheet.addImport(url);
      curStyle.onload = callback
    } else {
      curStyle.textContent = '@import "' + url + '";';
      var loadInterval = setInterval(function () {
        try {
          curStyle.sheet.cssRules;
          clearInterval(loadInterval);
          callback()
        } catch (e) {
        }
      }, 10)
    }
  };
  var linkLoad = function (url, callback) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    if (useOnload)link.onload = function () {
      link.onload = function () {
      };
      setTimeout(callback, 7)
    }; else var loadInterval = setInterval(function () {
      for (var i = 0; i < document.styleSheets.length; i++) {
        var sheet = document.styleSheets[i];
        if (sheet.href == link.href) {
          clearInterval(loadInterval);
          return callback()
        }
      }
    }, 10);
    link.href = url;
    head.appendChild(link)
  };
  cssAPI.normalize = function (name, normalize) {
    if (name.substr(name.length - 4, 4) == ".css")name = name.substr(0, name.length - 4);
    return normalize(name)
  };
  cssAPI.load = function (cssId, req, load, config) {
    (useImportLoad ? importLoad : linkLoad)(req.toUrl(cssId + ".css"), load)
  };
  return cssAPI
}
);

现在好了浏览器打开index.html发现没有把我们需要额外加在的加在进来,这个是为是么呢?好了,这里的话记得要在index.html的head下<script type="javascript/text" src="config.js"></script>后面调用require.js中的方法require,也就是加上这一句

<script type="javascript/text' >require['color']</script>//标识调用配置中的color模块

再次访问index.html好了完美出现我们想要的了。

如图:

详解require.js配置路径的用法和css的引入 

 注意

index.html中引入的顺序不能打乱

<script type="text/javascript" src="config.js"></script>
  
<script type="text/javascript" src="require.js"></script>
  
<script type="text/javascript">require(['color']);</script>

require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。

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

Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
js定时器实例分享
Dec 20 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
js canvas实现简单的图像扩散效果
Jun 28 #Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 #Javascript
jQuery实现的弹幕效果完整实例
Sep 06 #jQuery
JavaScrip数组删除特定元素的几种方法总结
Sep 06 #Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 #jQuery
JavaScript学习笔记之函数记忆
Sep 06 #Javascript
node.js实现的装饰者模式示例
Sep 06 #Javascript
You might like
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
php的常量和变量实例详解
2017/06/27 PHP
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
js读取配置文件自写
2014/02/11 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
详细介绍Python中的偏函数
2015/04/27 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
个人思想理论学习的自我鉴定
2013/11/30 职场文书
无毒社区工作方案
2014/05/23 职场文书
离职报告范文
2014/11/04 职场文书
铁路安全反思材料
2014/12/24 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书