美文网首页
AMD_CMD_RequireJS

AMD_CMD_RequireJS

作者: 普莱那 | 来源:发表于2017-04-07 23:58 被阅读61次

题目一 为什么要使用模块化

  1. 解决命名冲突
  2. 解决依赖管理
  3. 提高代码可读性
  4. 代码解耦,提高复用性
  5. 是大规模网站的协同开发更加方便,每个人只需关注自己功能的实现即可

题目二 CMD、AMD/CommonJs规范分别指什么?有哪些应用

CMD(Common Module Definition)通用模块定义,是一种模块定义和模块加载方式的规范

语法:

define
define(id?,deps?,factory)
CMD推崇依赖就近,所以一般不再define的参数中写依赖,在factory中写
factory有三个参数

function(require,exports,module)
require是一个方法,接受模块标识作为唯一参数,用来获取其他模块提供的接口
exports是一个对象,用来想外提供模块接口
module是个对象,上面存储了与当前模块相关的属性和方法

//在a.js中定义模块
define(function(require,exports,module){
    var $ = require("jquery.js")
    // dosomething with jquery
    exports.foo = something
})
//在c.js中使用模块
defind(function(require,exports,module){
    var a = require('./a.js')
    a.foo//do something with a.foo函数
    exports.bar = thisthing//本模块输出的接口
})

AMD (Async Module Definition)异步模块定义,回一个浏览器断模块化开发的规范

主要解决

  1. js文件依赖问题
  2. js加载时浏览器会停止页面渲染,加载文件越多,页面失去的响应时间越长

语法

define
define(id?dependencies?,factory);
id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名为模块标识符
dependencies:是一个当前模块依赖的模块名称数组
factory:工厂方法,模块初始化要执行的函数或对象,如果为函数,它应该只执行一次,如果是对象,此对象应该为模块的输出值

require
require(['dependencies'],function(depName){

})
dependencies:标识所依赖的模块
function(){}:当模块加载成功后执行的回调函数,加载的模块会以参数形式传入该函数
require()函数在加载依赖函数时是异步加载,所以浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功了,才会运行,解决了依赖性

//定义module.js
define(['dependencies'],function(){
    var name = 'Array';
    function printName(){console.log(name)}
    return {printName: pirintName}
})

//加载模块
require(['module'],function(module){
    module.printName()
})
CommonJS

CommonJS是个模块化规范

  1. 一个单独的文件就是一个模块,每个模块都是一个单独的作用域,在模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性

  2. 模块输出:模块只有一个出口,module.exports对象,我们需要把模块输出的内容放入该对象

  3. 加载模块:加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象,如果请求的模块不能返回,那么"require"必须抛出一个错误。

//模块定义model.js

var name = "Array"

function printName(){
    console.log(name);
}
function printFullName(firstName){
    console.log(firstName + name)
}
module.exports = {
    printName: printName;
    printFullName: printFullName
}

//加载模块
var nameModule = require("./model.js")
nameModule.printName() // "Array"
nameModule.printFullName("Bob") // "Bob Array"

应用 :因为require是同步的,所以主要是在服务器端使用
浏览器断加载JavaScript是异步的,所以传统的CommonJs在浏览器环境中无法正常加载

题目三 使用requirejs完善入门任务15,包括如下功能:

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

效果预览
源码地址

相关文章

  • AMD_CMD_RequireJS

    1. 为什么要使用模块化? 背景:如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等)...

  • AMD_CMD_RequireJS

    题目1: 为什么要使用模块化? 模块的由来:嵌入网页的JS代码越来越庞大,越来越像桌面程序,需要一个团队去分工协作...

  • AMD_CMD_RequireJS

    题目1: 为什么要使用模块化? 在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今C...

  • AMD_CMD_RequireJS

    为什么要使用模块化? 解决命名冲突 依赖管理 提高代码可读性 代码解耦,提高复用性 CMD、AMD、CommonJ...

  • AMD_CMD_RequireJS

    1、为什么要使用模块化? a)解决命名冲突b)增强代码的阅读以及维护性c)便于依赖管理d)提高代码的复用率 2、C...

  • AMD_CMD_RequireJS

    题目1: 为什么要使用模块化? 解决命名冲突 便于依赖管理 提高代码的可读性 代码解耦,提高代码复用性 题目2: ...

  • AMD_CMD_RequireJS

    1、为什么要使用模块化? 解决命名冲突,当代码量很大的时候很容易有命名冲突。 实现依赖管理,代码量很大时候,代码之...

  • AMD_CMD_RequireJS

    题目1: 为什么要使用模块化? web应用越来越复杂,代码复杂度增加 代码需要复用和解耦合 性能优化,需要更少的h...

  • AMD_CMD_RequireJS

    1: 为什么要使用模块化? 1.解决命名冲突2.可进行依赖管理3.增强代码的可读性4.代码解耦,提高代码的复用率 ...

  • AMD_CMD_RequireJS

    题目1:为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理其他价值提高代码可读性代码解耦,提高复用性 在Ja...

网友评论

      本文标题:AMD_CMD_RequireJS

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