详解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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
Web开发之JavaScript
Mar 29 Javascript
js确定对象类型方法
Mar 30 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 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
PHP校验ISBN码的函数代码
2011/01/17 PHP
php去除HTML标签实例
2013/11/06 PHP
PHP如何将XML转成数组
2016/04/04 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
numpy返回array中元素的index方法
2018/06/27 Python
详解python 注释、变量、类型
2018/08/10 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
525心理活动总结
2014/07/04 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
工作收入证明模板
2014/10/10 职场文书
高中开学感言
2015/08/01 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
Vue如何清空对象
2022/03/03 Vue.js
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python