最新消息:欢迎加入小松的QQ群一起讨论一起学习,搜索页面修改成lua+ElasticSearch,使用php这个页面速度相对慢一点,优化之后速度杠杠的,如有问题请加群联系我

RequireJS 初体验个人理解篇

前端技术 682浏览 0评论

杭州这个项目让我有幸接触了RequireJS,今天花了点时间看了一下RequireJS的问题,现在总结一下我觉得重要的知识点,因为是第一次接触,未必了解的透彻,如有写的不对的地方望大家指出来

①RequireJS的主要作用,或者说为什么要用RequireJS

首先要了解游览器加载js的方式,游览器在加载js的会阻塞方式加载,也就是在遇见<script>标签的时候,会把js文件加载完在去执行下面的代码,所以js的文件好放到文档的最后。
浏览器html解析过程
这篇文章中提到过

那么有人会说用异步的方式加载,既在<script src=””></script>加载属性 async=”async”,这就会产生一个问题
打个比方,网页加载下面的js

<script src="jquery.js" async="async"></script>
<script src="xiaosong.js" async="async"></script>

jquery.js 文件是jquery类库不解释了,不清楚jquery的请自己百度
xiaosong.js 文件使用jquery类库,既执行本文件会依赖jquery库

当两个异步加载的时候,如果xiaosong.js这个文件先加载完,就会报js的错误

这个时候就可以用到RequireJS,上面的例子比较简单,一般的项目中用到RequireJS一般都是有几百个js文件要加载,就如我目前的这个项目中大约有498个js文件要加载,js一层套一层,有图有真相

RequireJS加载多个js文件

②RequireJS的使用

1、require第一次简单使用

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

require([“xiaosong”]); 说明:加载了xiaosong.js

2、require.config参数详解

require.config是用来配置加载的模块,下面主要罗列一下主要参数,一个列子来说明

requirejs.config({
    urlArgs: 'rand=' + (new Date()).getTime(), 
    baseUrl: '/assets/js',
    paths: {
        angular: 'libs/angular',
        jquery: 'libs/jquery',
         },
    shim: {
        angular: {
            deps: ['jquery'],
            exports: 'angular'
        },
    },
    packages: [
        {
            name: 'echarts',
            location: 'libs/echarts',
            main: 'echarts'
        },
    ]
})

urlArgs 说明: 加载的js后面添加一个参数如:angular.js?rand=1448020642388 其目的是为了防止缓存
baseUrl 说明:默认加载js件的目录如上面的加载angular,jquery 的目录为/assets/js目录下面
paths 说明:配置要加载的js文件,如:angular: ‘libs/angular’,angular相当于定义了一个名字,加载/assets/js/libs/angular.js
shim 说明: shim为了RequireJS能加载非AMD规范的模块(目前我没有搞懂什么是非AMD规范的模块) .deps参数表示依赖,如上面代码 deps: [‘jquery’] 表示angular要依赖jquery,exports值(输出的变量名),表明这个模块外部调用时的名称
exports 这个参数不好理解,我举个列子你看以下就明白了

shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },

使用的时候

define(['backbone'], function (Backbone) {
    
});

会看到exports设置的’Backbone’ 在 function参数里,在举个列子

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        }
    }
})

其他模块中引用underscore模块

require(["underscore"], function(_){
    
})

你会看到exports设置的’_’ 在 function参数里

packages 说明:
|——ame:包名(用于模块名/前缀映射)
|——location: 磁盘上的位置。位置是相对于配置中的baseUrl值,除非它们包含协议或以“/”开头
|——main:上面代码 main: ‘echarts’,相当于加载echarts.js

注意:require.config并不加载js,加载js请用define,require,requirejs

3)define,require,requirejs 区别
刚开始的时候我不是太理解这个几个的区别,于是网上大量的找资料,我的理解总结
require和requirejs完全一样,require是requirejs的简写
define 不依赖其他模块写到define 猜测可以随机加载,不按顺序来加载js

如果有不明白的地方或者有我理解错误的地方请留言

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» RequireJS 初体验个人理解篇
本文链接地址:https://www.phpsong.com/1697.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!

网友最新评论 (4)

加载中,请稍候...
  1. 真技术文章啊,写的不错。
    大谋2年前 (2015-11-27)回复
    • 感谢来访
      小松2年前 (2015-11-27)回复
  2. 理解的很深刻
    七宝2年前 (2015-11-27)回复
    • 欢迎来访
      小松2年前 (2015-11-27)回复