美文网首页
模块化基础

模块化基础

作者: 羞涩的涩 | 来源:发表于2016-09-02 15:35 被阅读25次

为什么要使用模块化?

  1. 解决命名冲突,避免全局污染
  2. 解决依赖管理
  3. 提高代码可读性
  4. 代码解耦,提高复用性

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

  • CMD即是Common Module Definition 通用模块定义,主要是sea.js在推广过程中对模块化定义的规范化产出,中它推崇一个文件一个模块,经常用文件名做为模块ID,以及推崇依赖就近,主要应用为sea.js ,例子:
define(function(require,exports,module){
    var $ = require('jquery.js')
    $('div').addClass('active');
});
//cmd推崇就近依赖,所以依赖写在函数中,require是一个方法,exports是一个对象,提供对外接口,module是一个对象,存储与当前模块相关的属性和方法。
  • AMD即是Asynchronous Module Definition 异步模块定义,主要是require.js在推广过程中对模块定义的规范化产出,它解决了多个js文件的依赖问题和加载js文件较多时的页面等待问题,推崇依赖前置,主要应用为require.js,例子:
define('modal',['jQuery'],function($){
    $('modal').show();
})
//define为定义关键字,modal为定义的模块名字,一般可以省略,[]内为要加载的依赖模块,紧跟回调函数。
  • CommonJS主要指的是运行在浏览器端的模块规范,主要应用是node.js。
  • 一个文件对应一个模块,每一个模块都是单独的作用域,加载模块是同步加载的。
  • 在一个模块中只有一个出口,moudle.exports对象,将模块希望输出的对象放入该模块。
  • 加载模块使用require方法。例子:
//模块定义  myMode.js

var name = 'jiuyi';

function printName(){
    console.log(name);
}

functionprintFullName(firstName){
    consoele.log(firstName+name);
}

module.erports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块

var nameModule = require('./myMode.js')

nameModule.printName();

如下requirejs配置中, baseUrl 有什么作用?以什么作为基准? paths 的作用和用法是什么?

requirejs.config({
  baseUrl: "src/js",  
  paths: {
    'jquery': 'lib/bower_components/jquery/dist/jquery.min'
  }
});

baseUrl的作用是设置require加载JS文件的基础路径,以html所在的路径为基准,paths作用是设置baseUrl基础路径之外,设置某些特定文件的路径,以baseUrl路径为基准。


如下 r.js 的打包配置中 baseUrl 是什么? name 是什么

({
    baseUrl: "./src/js",
    paths: {
        'jquery': 'lib/bower_components/jquery/dist/jquery.min'
    },
    name: "main",
    out: "dist/js/merge.js"
})
  • 在这里baseUrl指的是以自身文件路径为基准,寻找require.js的配置文件的baseUrl
  • name指的是入口的主模块名字
  • out指的是打包输出的路径
  • 本博客版权归羞涩的涩和饥人谷所有,转载请注明出处

相关文章

  • webpack基础笔记

    webpack基础 1.前端工程化 实际的前端开发: 模块化:(js的模块化,css的模块化,资源的模块化) 组件...

  • 前端开发——模块化(css模块化开发)

    掌握模块化开发的思想是我们进行模块化开发的基础。他有以下几部分组成: 模块化开发的优势 css模块化 css模块化...

  • 【Vue】组件

    Vue的两大核心 数据驱动 - 数据驱动界面显示 模块化 - 复用公共模块,组件实现模块化提供基础 组件基础 组件...

  • 浅谈移动端模块化

    一 模块化基础概念 二 为什么要进行模块化 三 模块化实例操作 话不多说,直奔主题,本文主要讲解我对模块化的理解,...

  • Go 学习笔记(一) : 3种方式得变量 / 常量与iota /

    为了基础的基础 package , import 包 , 与python类似, 与java不同. 用于模块化. 通...

  • 模块化基础

    为什么要使用模块化? 解决命名冲突,避免全局污染 解决依赖管理 提高代码可读性 代码解耦,提高复用性 CMD、AM...

  • 前端开发过程中有哪些问题需要考虑?

    前端开发过程中有哪些问题需要考虑? 组件库 模块化 前端业务团队 做的事情沉淀组件库 团队基础沉淀模块化 开发...

  • Android模块化之ButterKnife和Dagger2的使

    本篇是在之前的两篇文章基础上讲解的,如果没看过,走这里:Android模块化简单教程Android模块化之登录业务...

  • 前端-06-AngularJs

    1.概述 完美实现mvvm mvw模式模块化结构 2.语法基础 3.控制器 4.事件监听 5.评论案例 6.模块化...

  • 23.深入浅出模块化(含 tree shaking)(上)

    模块化是工程化的基础:只有能将代码模块化,拆分为合理单元,才具备调度整合的能力,才有架构和工程一说。早期,Java...

网友评论

      本文标题:模块化基础

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