1、exports exports._esModule module.exports :
作用:使得编译时就能确定模块的依赖关系,以及输入和输出的变量。模块功能主要由两个命令构成:
export
和import
。export
命令用于规定模块的对外接口,import
命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变
量,就必须使用export关键字输出该变量。
区别:
exports 和 module.exports 则用来导出代码, 其实就是导出用于实现接口的变量
module.exports 初始值为一个空对象 {},
exports 是指向的module.exports 的引用,
require()返回的是 module.exports 而不是 exports。
exports._esModule 就是babel将module.exports = {};这个输出模板就行转换。到得
"use strict";
Object.defineProperty(exports,"__esModule", {
value:true});
exports.default = {};其中(Babel 用于转化你的 JavaScript 代码)。
ES6 的模块自动采用严格模式,不管你有没有在模块头部加上
"use strict";
。
写法:export的写法:
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
import命令:使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文
件)。
import {firstName, lastName, year} from './profile';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
上面代码的import命令,就用于加载profile.js文件,并从中输入变量。import命令接受一个对象(用大括号表示),里面指
定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。
export default :就是用户希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。
使用export default时,对应
的import语句不需要使用大括号,export default命令用于指定模块的默认输出。;不使用export default
时,对应的import语句需要使用大括号。
2、模块:
定义:就是通过使用易模块,用户可以将常用的代码封装起来重复使用到其它程序,或提供给第三方使用,或
用作开发大型软件项目中的某个部分,然后在软件项目的封装阶段将所有这些模块组织编译成为一个完
整程序。
模块就像一个已经编译好的程序,如果你需要直接可以带到你的程序里来使用。
模块的加载:
实质上就是,注入exports、require、module三个全局变量,然后执行模块的源码,然后将模块的 exports 变量的值输出。
模块间的依赖关系:依赖描述了两个模型元素之间的关系,如果被依赖的模型元素发生变化就会影响到另一个模型元素。
耦合:如果改变程序的一个模块要求另一个模块同时发生变化,就认为这两个模块发生了耦合。如果模块A调用
模块B提供的
方法,或访问模块B中的某些数据成员(当然,在面向对象开发中一般不提倡这样做),我
们就认为模块A依赖于模块
B,模块A和模块B之间发生了耦合。
3、接口:
通俗定义:你写一个函数,别的地方会调用,如何调用呢?要看他的参数和返回值,这就是接口,就是告诉别
人该怎么用你这个函数。
实现:模块对外提供两种类:一个是需要外部模块实现的接口(接口设计从本模块需要出发,当然每个接口尽
管是为某个功能点服务,但也要注意其在模块内通用性),另一个是其它模块要求本模块实现的接口的实
现类。
即:A模块拥有一些需要B模块实现的接口(A模块对B模块的要求),而B模块中也有要求A模块实
现的接口,因而A有这些接口的实现类。
4、
require ():
require 并不是全局性命令,而是每个模块提供的一个内部方法,也就是说,只有在模块内部才能使用
require 命令(唯
一的例外是 REPL 环境)。另外,require 其实内部调用 Module._load 方法(首先解析出模
块的绝对路径(filename),以它作为模块的识别符。然后,如果模块已经在缓存中,就从缓存取出;如果不在缓存中,就
加载模块。)。
require函数使用一个参数,参数值可以带有完整路径的模块的文件名,也可以为模块名.当使用node中提供的模
块时,在require函数中只需要指定模块名即可.
建立一个页面2.js;代码如下
var name="思思博士";
exports.name=name;
建立一个页面1.js;代码如下
var two=require("./2.js");
console.log(two.name);
输出结果:思思博士
在node中所有的脚本文件都是一个模块文件,因此1.js也是一个模块文件,又由于该文件是在命令行
窗口中通过node命令被直接运行的,因此在node中该模块文件被定义为应用程序的主模块
require.resolve(str)
在node中,可以使用这个函数来查询某个模块文件的带有完整绝对路径的文件名.
var url=require.resolve("./2");
console.log(url);
模块函数调用:
require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,第二个参数是一个回调函数,当前面指定的模
块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
5、Babel: 能够实现 ES6 到 ES5 的代码转换多亏了 Babel,ES6到ES5有很多新特性不能呈现的时候就需要进行转码。
_interopRequireDefault
(
)
;函数?
babel-runtime 的作用是模拟 ES2015 环境。我们可以在自己的模块里单独引入。
Babel 用了优秀的 core-js 用作 polyfill,并且还有定制化的 regenerator 来让 generators(生成器)和
async functions(异步函数)正常工作。
6、JavaScript中几种常用的定义函数的方法:
function func(){} 或 var func=function(){};
function class(){} class.prototype={}; var item=new class();
(function(){ //独立作用域 })();
作为选择器使用 : var addEvent=new function(){ if(!-[1,]) return function(elem,type,func){
attachEvent(elem,'on'+type,func);};
else return function(elem,type,func){
addEventListener(elem,type,func,false);} };//避免了重复判断
7、 var a=(function(){})(a)表示函数执行结果赋值给变量a。
自执行匿名函数 :
常见格式:(function() { /* code */ })();
解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未
命名函数,括号内为匿名函数的参数。
作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访
问,除非你允许(变量前加上window,这样该函数或变量就成为全局)。各JavaScript库的代码也基本
是这种组织形
式。