AMD_CMD_RequireJS

[yunyu950908]

题目1： 为什么要使用模块化？

• 代码解耦，提高复用性 每个模块相互独立，互不影响，代码组件封装可以重复利用，去除这个模块不影响其它的。

• 提高代码可读性 一个功能为一个模块，代码简洁。

• 实现依赖管理 当一个页面要加载多个js文件时，要慎重的考虑每个文件的位置来确保所有的功能都能运行。

• 解决变量名冲突 组件功能过多时，容易造成变量命名的冲突

[yunyu950908]

题目2： CMD、AMD、CommonJS 规范分别指什么？有哪些应用

这三个规范都是为javascript模块化加载而生的，都是在用到或者预计要用到某些模块时候加载该模块，使得大量的系统巨大的庞杂的代码得以很好的组织和管理。模块化使得我们在使用和管理代码的时候不那么混乱，而且也方便了多人的合作。

CommonJS

Node 端加载。是同步加载。

//模块定义 a.js
var people = {
  name: 'frankie',
  sayName: function(){
    console.log(this.name)
  }
}

module.exports = people
//module.exports = 123

//加载模块
var p = require('./a')
//console.log(p)
p.sayName()

AMD (Asynchronous Module Definition, 异步模块定义)

指定一种机制，在该机制下模块和依赖可以异步加载。这对浏览器端的异步加载尤其适用。

• AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
• 使用AMD规范进行开发需要使用RequireJS
• requireJS主要解决两个问题:
  • js文件之间的依赖关系：被依赖的文件需要早于依赖它的文件加载到浏览器
  • js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

//语法
//定义模块
define(id?,dependencies?,factory)
//id:可选函数，用来定义模块标识，如果没写就用文件名。
//denpendencies:可选函数，当前模块的依赖的模块，可用数组
//factory：执行函数或者对象，通常为函数
//加载模块
require([dependencies],function)
//dependencies:当前模块需要的依赖的模块
//function：回调函数，在模块加载完了后，会被执行。

//例子1
//先看一个简单的例子。
var modal = require('modal')
$btn.on('click',function(){
  madal.open()
})
//使用 AMD 规范。
define('modal',['jQuery','dialog'],function($,Dialog){
  $('.modal').show()
  Dialog.open()
})

//例子2
//设有模块 carousel,tab,lazy
//加载模块可以这样写
require(['carousel','tab','lazy'],function(carousel,tab,lazy){
  new Carousel()
  Tab.init()
  Lazy.init()

CMD（Common Module Definition）通用模板定义

它是在一个浏览器端模块化的开发规范

• 使用CMD规范进行开发需要使用SeaJS
• Sea.js推荐一个模块为一个文件

  //定义加载模块 Module.js
  define(function(require,exports,module){
  var $ = require('jquery.js')
  $('div').addClass('active')
  })

  
  //加载模块
  seajs.use(['Module.js'],function(my){

})

[yunyu950908]

题目3： 使用 requirejs 完善入门任务15，包括如下功能：

1. 首屏大图为全屏轮播
2. 有回到顶部功能
3. 图片区使用瀑布流布局（图片高度不一），下部有加载更多按钮，点击加载更多会加载更多数据(数据在后端 mock)
4. 使用 r.js 打包应用

• 代码地址
• 预览地址

[yunyu950908]

RequireJs 相关：

<script src="./js/lib/require.js" data-main="./js/main.js"></script>

• 基础

  • data-main 主程序入口；

• require.config() 接受一个配置对象

  • baseURL 设置的是一个引用模块的目录，是相对于HTML所在目录为基准；
  • paths 设置的是baseURL之外的特殊路径，是相对于baseURL为基准；
  • shim 自定义模块出口，如backbone，underscore都没有采用AMD规范编写，所以需要指定模块依赖和调用名称；

    
    　　require.config({
    　　　　baseUrl: "js/lib",
    　　　　paths: {
    　　　　　　"jquery": "jquery.min",
    　　　　　　"underscore": "underscore.min",
    　　　　　　"backbone": "backbone.min"
    　　　　shim: {

　　　　　　'underscore':{ 　　　　　　　　exports: '_' 　　　　　　}, 　　　　　　'backbone': { 　　　　　　　　deps: ['underscore', 'jquery'], 　　　　　　　　exports: 'Backbone' 　　　　　　} 　　　　} 　　});

- **main.js(主程序入口)**

requirejs.config({ baseUrl: './js', paths: { jquery: './lib/jquery-3.2.1.min' } })

requirejs(['./app/app'])

- **app.js(引用的 JS 模块)**

// CMD 规范： define(function(require,exports,module){ var blue = require('com/blue') var yellow = require('com/yellow') var green = require('com/green') blue() yellow() green() })

// AMD 规范 define(['jquery','com/blue','com/green','com/yellow'],function($,blue,green,yellow){ blue() green() yellow() })

- **组件部分**
  - 模块组件一定要 return 出来

define(['jquery'],function($){ function turnGreen(){ $('.btn2').on('click',function(){ $('.box').css('background-color','green') }) }

return turnGreen

})

[yunyu950908]

r.js 打包

• 创建 build.js

  baseUrl：与主程序入口中设置的路径保持一致，即两个设置的路径指向统一
  paths：baseUrl已经设置了 根路径，所以这里直接复制主程序入口文件即可
  name：主程序入口文件路径
  out：输出的路径位置在，并可以给打包好的文件起好名字

• 配置 build.js

  ({
  baseUrl: './js',
  paths: {
      jquery: './lib/jquery-3.2.1.min'
  },
  name: 'main',
  out: './dist/merge.js'
  })

• 然后终端跑一遍，成功后就会打包所有模块到一个文件，并且压缩代码

  node r.js -o build.js