export import require (js模块加载规范)
CommonJS规范
node模块中，采用的是CommonJS规范，使用module.exports导出接口。
使用require引入模块。
| var vue= require('lib'); |
ES6写法:
ES6标准发布后，module成为标准，标准使用是以export指令导出接口，以import引入模块。
export default { data() { return { name:"jet", } }, methods:{ getname:function(){ if(this.name==""){ this.name="jet"; return this.name; }else{ return this.name; } } } } import jet from "jet.vue"; |
也就是说，
NodeJS等 CommonJS规范使用module.exports 来暴露组件成员 require 引用组件成员
ES6使用 export来暴露组件成员 import引用组件成员
==========================================================
function m1(){ //...}function m2(){ //... }var module1 = new Object({_count : 0, m1 : function (){ //... }, m2 : function (){ //... }});module1.m1();
module._count = 1;
var module = (function() {var _count = 0;var m1 = function() {alert(_count)}var m2 = function() {alert(_count + 1)}return {m1: m1,m2: m2}})()console.info(module._count); //undefined
var math = require('math');var math = require('math');math.add(2,3); // 5var math = require('math');math.add(2, 3);define(id?, dependencies?, factory)
id:字符串，模块名称(可选)
dependencies: 是我们要载入的依赖模块(可选)，使用相对路径。,注意是数组格式
factory: 工厂方法，返回一个模块函数
// math.js define(function (){ var add = function (x,y){ return x+y; }; return { add: add }; });define(['Lib'], function(Lib){ function foo(){ Lib.doSomething(); } return { foo : foo };});require([module], callback);
require(['math'], function (math) { math.add(2, 3);});define(function(require, exports, module) {var clock = require('clock');clock.start();});define(id?, dependencies?, factory)
id:字符串，模块名称(可选)
dependencies: 是我们要载入的依赖模块(可选)，使用相对路径。,注意是数组格式
factory: 工厂方法，返回一个模块函数
define('hello', ['jquery'], function(require, exports, module) {// 模块代码});define(function(require, exports, module) {// 模块代码});export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
name1… nameN－导出的“标识符”。导出后，可以通过这个“标识符”在另一个模块中使用import引用
default－设置模块的默认导出。设置后import不通过“标识符”而直接引用默认导入
－继承模块并导出继承模块所有的方法和属性
as－重命名导出“标识符”
from－从已经存在的模块、脚本文件…导出
export { myFunction }; // 导出一个已定义的函数export const foo = Math.sqrt(2); // 导出一个常量export * from 'article';
var name = 'IT笔录';var domain = 'http://itbilu.com';export {name, domain}; // 相当于导出{name:name,domain:domain}var name = 'IT笔录';var domain = 'http://itbilu.com';export {name as siteName, domain};// 错误演示export 1; // 绝对不可以var a = 100;export a;
export {fun as default,a,b,c};export default function() {}; // 可以导出一个函数export default class(){}; // 也可以出一个类const D = 123;export default D;export { D as default };// "my-module.js" 模块export function cube(x) {return x * x * x;}const foo = Math.PI + Math.SQRT2;export { foo };import { cube, foo } from 'my-module';console.log(cube(3)); // 27console.log(foo); // 4.555806215962888// "my-module.js"模块export default function (x) {return x * x * x;}// 引用 "my-module.js"模块import cube from 'my-module';console.log(cube(3)); // 27
import defaultMember from "module-name";import * as name from "module-name";import { member } from "module-name";import { member as alias } from "module-name";import { member1 , member2 } from "module-name";import { member1 , member2 as alias2 , [...] } from "module-name";import defaultMember, { member [ , [...] ] } from "module-name";import defaultMember, * as name from "module-name";import "module-name";name－从将要导入模块中收到的导出值的名称
member, memberN－从导出模块，导入指定名称的多个成员
defaultMember－从导出模块，导入默认导出成员
alias, aliasN－别名，对指定导入成员进行的重命名
module-name－要导入的模块。是一个文件名
as－重命名导入成员名称（“标识符”）
from－从已经存在的模块、脚本文件等导入
import {myMember} from "my-module";import {foo, bar} from "my-module";import * as myModule from "my-module";
import {reallyReallyLongModuleMemberName as shortName} from "my-module";import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";import "my-module";
import myDefault from "my-module";
import myDefault, * as myModule from "my-module"; // myModule 做为命名空间使用
import myDefault, {foo, bar} from "my-module"; // 指定成员导入// --file.js--
function getJSON(url, callback) {let xhr = new XMLHttpRequest();xhr.onload = function () {callback(this.responseText)};xhr.open("GET", url, true);xhr.send();}export function getUsefulContents(url, callback) {getJSON(url, data => callback(JSON.parse(data)));}// --main.js--
import { getUsefulContents } from "file";getUsefulContents("http://itbilu.com", data => {doSomethingUseful(data);});// d.js
export default function() {}
// 等效于：
function a() {};
export {a as default};import a from './d';
// 等效于，或者说就是下面这种写法的简写，是同一个意思
import {default as a} from './d';import $,{each,map} from 'jquery';// a.js
var a = function() {};
export {a as fun};
// b.js
import {fun as a} from './a';
a();// c.js
export function fun() {};function require(...) {
var module = { exports: {} };
((module, exports) => {
// 你的被引入代码 Start
// var exports = module.exports = {}; (默认都有的)
function some_func() {};
exports = some_func;
// 此时，exports不再挂载到module.exports，
// export将导出{}默认对象
module.exports = some_func;
// 此时，这个模块将导出some_func对象，覆盖exports上的some_func
// 你的被引入代码 End
})(module, module.exports);
// 不管是exports还是module.exports，最后返回的还是module.exports
return module.exports;
}console.log(exports); // {}
console.log(module.exports); // {}
console.log(exports === module.exports); // true
console.log(exports == module.exports); // true
console.log(module);
/**
Module {
id: '.',
exports: {},
parent: null,
filename: '/Users/larben/Desktop/demo.js',
loaded: false,
children: [],
paths:
[ '/Users/larben/Desktop/node_modules',
'/Users/larben/node_modules',
'/Users/node_modules',
'/node_modules' ] }
*/
评论 (0)