首页 > web前端 > js教程 > 一些相关的模块化基础

一些相关的模块化基础

jacklove
发布: 2018-05-21 10:33:10
原创
1234 人浏览过

本篇将会详细的讲解模块化基础,如何了解这方面相关知识。

为什么要使用模块化?

解决命名冲突,避免全局污染

解决依赖管理

提高代码可读性

代码解耦,提高复用性

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.jsvar 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指的是打包输出的路径

本篇讲解了模块化相关基础知识,想要更多相关知识请关注php中文网。

相关推荐:

dom对象的innerText和innerHTML有什么区别?

一些关于JS的基础问题

如何用前端js模块化编写require.js

以上是一些相关的模块化基础的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板