模块化

2017-07-25  本文已影响0人  饥人谷_啦啦啦

题目1: 为什么要使用模块化?

模块化的意义
1.最重要的意义就是提高代码的复用性。
假如一个模块封装了一个功能的话,无论我们什么时候需求这个功能就可以通过引入这个模块来实现这个功能,对于一个复杂的功能,造轮子的人关心怎么造轮子,应用的人不需要花费大量时间来研究怎么实现,只需要考虑知道怎么用,提高开发效率。
2.解决命名冲突。
一个模块内,我们不用考虑污染全局变量,只暴露我们想要暴露的变量就可以了
3.提高代码的可读性
让代码看起来组织结构更清晰。

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

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

语法:
define
define(id?, deps?, factory)

CMD  推崇一个文件一个模块,所以经常将文件名作为模块id
CMD 推崇依赖就近,所以一般不在define的参数中写依赖,在factory中写

factory有三个参数

function(require, exports, module)

require是一个方法,接受模块标识作为唯一参数,用来获取其他模块提供的接口

exports是一个对象,用来向外提供模块接口

module是个对象,上面存储了与当前模块相关的属性和方法

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

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

应用:Sea.js



AMD:
AMD即 Asynchronous Module Definition 异步模块定义,是一个在浏览器端模块化开发的规范

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

语法:
define
define(id?, dependencies?, factory);

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


require
require([dependencies], function(){});

dependencies: 表示所依赖的模块
function(){}:当模块加载成功后执行的回调函数,加载的模块会以参数形式传入该函数

require()函数在加载依赖函数时是异步加载,所以浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功了,才会运行,解决了依赖性

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

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



应用:
Reauire.js




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();

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

题目3:

Paste_Image.png

https://github.com/sys521/task4

上一篇下一篇

猜你喜欢

热点阅读