美文网首页
RequireJS简要备忘

RequireJS简要备忘

作者: 喵小鲸2号 | 来源:发表于2017-08-18 14:30 被阅读0次

为什么要使用require.js

  1. 异步加载文件,简化依赖关系

  2. 模块化开发, 一个文件就是一个模块,减少全局变量

如何使用

  1. define定义模块

  2. require加载模块

tips:
一般不写模块名,让自动打包来完成
requireJS以一个相对于baseUrl的地址来加载所有代码

加载机制

  1. RequireJS使用head.appendChild()将每一个依赖加载为一个script标签。【意味着可以跨域访问】

  2. 加载即执行

配置模块路径

  1. paths-映射不放于baseUrl下的模块名

     requirejs.config({
         baseUrl: '/js',
         paths: {
             'jquery': 'lib/jquery' //模块名:模块路径
         }
     })
     
     *** 另一种方式 ***
     requirejs.config({
         baseUrl: '/js',
         paths: {
             'jquery': [
                 'lib/jquery2',  //首先加载的模块
                 'lib/jquery'    //第一个加载失败后的备用文件
             ]
         }
     })
    

定义模块

  1. 函数式定义

     // 最佳实践:不写死模块名, 即'helper'部分
     // 依赖的模块可有可无, 即['jquery']部分
     define('helper', ['jquery'], function($){
         return{
             trim: function(str) {
                 return $.trim(str);
             }
         }
     })
    
  2. 定义简单的对象

     define({
         userName: '',
         name: '',
         eamil: ''
     })
    

shim > 配置不支持AMD的模板

shim({
    'modernizr': {              //不支持AMD的模块
        deps: ['jquery'],       //依赖的模块
        exports: 'Modernizr',   //全局变量作为模块对象
        init: function($) {     //初始化函数,返回的对象代替exports作为模块对象
            return $; 
        }
    }
})

其它常用配置

  1. waitSeconds

    下载js等待的时间,默认7秒;如果设置为0,则禁止等待超时。

  2. urlArgs

    下载文件时间,在URL后面增加额外的query参数

更多内多参考

  1. RequireJS官网:http://requirejs.org/
  2. RequireJS和AMD规范:http://javascript.ruanyifeng.com/tool/requirejs.html

相关文章

  • RequireJS简要备忘

    为什么要使用require.js 异步加载文件,简化依赖关系 模块化开发, 一个文件就是一个模块,减少全局变量 如...

  • requireJS总结

    requireJS遵循异步模块定义(Asynchronous Module Definition)实现项目中的备忘...

  • Requirejs常用配置和应用

    requirejs、require方法冲突 如果加载了多个requirejs脚本,每个requirejs会判断是否...

  • 模块化

    RequireJS官网:www.requirejs.org 为什么使用RequireJS 1、有效的防止变量冲突2...

  • RequireJS模块化

    RequireJS官网:www.requirejs.org 为什么使用RequireJS1、有效的防止变量冲突2、...

  • requireJS实践

    开始使用requireJS 文件引入直接在页面上引入requireJS文件。requireJS改变了传统scrip...

  • vue之requireJs中引入vue-router的方法

    requireJs简介参数配置requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单...

  • requirejs

    1.要使用requirejs必须先下载requirejs到工作目录下2.通过script载入requirejs,其...

  • requirejs

    requirejs组成 requirejs主要是有require、require.config和define组成。...

  • requireJs

    requirejs模块化开发 -- AMD配置短名称 config.js引入requirejs

网友评论

      本文标题:RequireJS简要备忘

      本文链接:https://www.haomeiwen.com/subject/smkarxtx.html