javascript语言实现,ES6规范(使用babel编译器将es6转换为es5,webpack只支持部分es6):
import "jquery"; //返回function
export function doStuff() {}
module "localModule" {}
es5:
var o = require('s.js');
export default只有一个,export可以有多个
nodejs语言实现
require("module");
require("../file.js"); //require返回对象 object
exports.doStuff = function() {};
module.exports = someValue;
浏览器不兼容nodejs,需要通过browserify工具转换为浏览器支持js
(例如:browserify main.js > compiled.js):
浏览器不兼容nodejs的几个模块
require同步==》异步require([module], callback); //由require.js和curl.js实现
网页js的异步加载
内部函数
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
require.config({
shim: { //shim配置不兼容模块
'underscore':{ //不兼容的库名称
exports: '_'
},
'backbone': { //不兼容的库名称
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
淘宝工程师编写seajs,提出cmd规范
cmd和amd区别
define(function(require, exports, module){ //CMD
var a = require(moduleA);
a.dosomething();
var b = require(moduelB);
b.dosomething();
});
define([moduleA, moduleB],function(a, b, require, exports, module){ //AMD
a.dosomething();
b.dosomething();
});
seajs、requirejs(在线编译,amd和cmd编译器在浏览器中) webpack、browserify(预编译)
document.createElement 写文件
new HtmlElement写内存
export 多个{a,b}
或者
export a
export b
import带{}
export default 只能有一个,import不用{}
module.export 默认到处{}对象,module.export = 重新赋值
js判断对象、函数、和全局变量
typeof module === “object” && module && typeof module.exports === “object”
typeof define === “function” && define.amd
typeof window === “object” && typeof window.document === “object”
import $ from 'jquery/dist/jquery.min'; //jquery文件return对象,$可以直接用,绑定到window上全局变量(或者html中script引用jquery文件)
window.$ = $ //js支持类的扩展,所以很多函数找不到定义的,全局变量扩展得到
window.jQuery = $
import editormd from 'editor.md/editormd'; //editormd文件没有返回值,需要先构建对象editor()(),再调用