美文网首页我爱编程
总结一下RequireJS

总结一下RequireJS

作者: 取个帅气的名字真好 | 来源:发表于2018-03-22 16:39 被阅读23次

一、AMD规范

  • AMD(Asynchronous Module Definition,异步模块定义)指定一种机制,在该机制下模块和依赖可以异步加载。

语法

define(id?,dependencies?.factory)

  • id:指定义中模块的名字(可选),如果没有提供该参数,模块的名字 应该默认为模块加载器请求指定的脚本的名字。
  • depndencies :当前模块依赖的,已被模块定义的模块标识的数组字面量。
    factory:一个需要进行实例化的函数或者对象。

示例

define('modal',['jQuery','dialog'],function(){
  $('.xxx').show()
  Dialog.open()
})

二、RequireJS介绍

  • RequireJS是一个JavaScript模块加载器

  • RequireJS遵循AMD规范,用于解决命名冲突文件依赖的问题。

  • RequireJS加载模块化脚本将提高代码的加载速度和质量。

使用RequireJS的好处

1、声明不同js文件之间的依赖。

2、可以按需、并行、延时载入js库。

3、可以让我们的代码以模块化的方式组织。

三、使用方法。

Demo栗子目录结构:

目录结构

在html中添加<script>标签:

  <script data-main="./js/app.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>

data-main:配置文件(文件入口),一般命名为config.js。
src:Requirejs地址。

配置config.js

requirejs.config({
  baseUrl: 'js', 
  paths: {
    app: 'app' 
  },
});

requirejs(['app'], function (app) {
  app.init();
});

baseUrl :用于加载模块的根路径。在配置这个属性后,以后的文件都是在这个路径下查找内容了。

paths:用于一些常用库或者文件夹路径映射,方便后面使用,省得每次都要输入一长串路径。(js 文件的后缀可以省略)

define : 定义模块。

require:加载模块

更多请查阅官方文档

app.js

// 因为用到了hello和hello2,所以需引入['hello','hello2']
 define(['hello','hello2'], function(x,y) { //hello的参数x ,hello2的参数y
  var app = {
    init:function(){
      x.init() //hello
      y.init() //hello2
      console.log('这里是app') 
    }
  }
  return app //把app返回出去,对应的config.js里面。
  
});

config.js

requirejs.config({
  baseUrl: 'js', //用于加载模块的根路径。在配置这个属性后,以后的文件都是在这个路径下查找内容了。
  paths: {
    app: 'app' 
  },
});

requirejs(['app'], function (app) {
  app.init();
});

hello.js

// 因为用到了jQuery所以需要引入
define(['jQuery'], function() {
var a = {
  init:function(){
    console.log($('.box').html())
    console.log("hello")
  }
}
return a //把a给返回出去
});

hello2.js

// 因为用到了jQuery所以需要引入
define(['jQuery'], function() {
var b = {
  init:function(){
      $('.box').append( "<p>段落</p>" )
      console.log("hello2")
  }
}
return b //把b给返回出去
});

jQuery.js 省略可自行下载


大概流程图.png

代码地址

相关文章

  • 总结一下RequireJS

    一、AMD规范 AMD(Asynchronous Module Definition,异步模块定义)指定一种机制,...

  • requirejs的使用(AMD规范实现的库)

    什么是requirejs 要说requirejs就要先说一下AMD。AMD是”Asynchronous Modul...

  • requireJS总结

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

  • RequireJS总结

    RequireJS总结 亲爱的孟良,我搞不懂你为什么记不住怎么写 怎么用html页面引入 data-main中写的...

  • requirejs 总结

    下面是我做的一个requirejs一个小的案例,没有啥技术含量,就是把不同情况下的方法说了一下,以后有时间再给大家更新

  • requireJS 探索(一)

    什么是requireJS? requireJS发挥的作用 简单总结起来就2点 改善了用户体验,它使js文件异步加载...

  • Requirejs常用配置和应用

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

  • 模块化

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

  • RequireJS模块化

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

  • requirejs使用和总结

    一、为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文...

网友评论

    本文标题:总结一下RequireJS

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