web模块化规范和实现
規范CommonJS和實現NodeJS
http://www.commonjs.org/
math.js
function add(x, y){
? ? return x + y;
}
module.exports = {
add: add
}
main.js
var math = require('./math')
console.log("2+2=" + math.add(2, 2));
node main.js
規范AMD和實現RequireJS
https://github.com/amdjs/amdjs-api
http://requirejs.org/
index.html
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <script data-main="app" src="require.js"></script>
? ? </head>
? ? <body>
? ? ? ? <h1>Hello World</h1>
? ? </body>
</html>
app.js
requirejs(['math'], function(math){
console.log("2+2=" + math.add(2, 2));
});
math.js
define(function(){
? ? var add = function(x, y){
? ? ? ? return x + y;
? ? };
? ? return {
? ? ? ? add: add
? ? };
});
規范CMD和實現seajs
http://seajs.org
https://github.com/seajs/seajs
index.html
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <script src="sea.js"></script>
? ? </head>
? ? <body>
? ? ? ? <h1>Hello World</h1>
<script>
seajs.use('math', function(math){
console.log(math.add(2, 2))
})
</script>
? ? </body>
</html>
math.js
define(function(require, exports, module){
? ? exports.add = function(x, y){
? ? ? ? return x + y;
? ? };
});
UMD
https://github.com/umdjs/umd
ES6?；?/p>
瀏覽器目前還不支持， 不過可以通過babel工具進行轉換，再通過webpack等工具進行打包部署。
TypeScript模塊
放在TypeScript再介紹。
總結
以上是生活随笔為你收集整理的web模块化规范和实现的全部內容，希望文章能夠幫你解決所遇到的問題。
