JSモジュール化のオリジナルの書き方、対象の書き方、クローズド、拡大、拡大、モジュール仕様
24412 ワード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./tool.js"></script>
<script>
/*
tool.js
， tool.js
【 】 ， 。
： ， 。
*/
show()
console.log(add(10, 20))
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
： 。
：
， ，
。
*/
//A
var moduleA = {
_count: 10,
funcA: function(){
this._count += 100
console.log(this._count)
},
funcB: function(){
this._count *= 20
console.log(this._count)
}
}
//B
var moduleB = {
_count: 100,
funcA: function(){
this._count -= 10
console.log(this._count)
},
funcB: function(){
this._count *= 6
console.log(this._count)
}
}
// ， 。
moduleA._count = 1000
moduleA.funcA()
moduleA.funcB()
moduleB.funcA()
moduleB.funcB()
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
：
1、
2、
：
， 。
*/
/*
A
*/
var moduleA = (function(){
var _count = 10; //
function showA(){ //
_count += 20
console.log(_count)
}
function showB(){
_count *= 10
console.log(_count)
}
return {
aaa: showA,
bbb: showB
}
})()
/*
B
*/
var moduleB = (function(){
var _count = 100; //
function showA(){ //
_count -= 30
console.log(_count)
}
function showB(){
_count *= 100
console.log(_count)
}
return {
aaa: showA,
bbb: showB
}
})()
moduleA.aaa()
moduleA.bbb()
moduleB.aaa()
moduleB.bbb()
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// ，
var moduleA = (function(mod){
function showC(){
console.log(" showC")
}
mod.ccc = showC
return mod
})(moduleA || {})
var moduleA = (function(mod){
var _count = 10 //
function showA(){
_count += 20 //
console.log(_count)
}
function showB(){
_count *= 10
console.log(_count)
}
mod.aaa = showA
mod.bbb = showB
return mod
})(moduleA || {})
moduleA.aaa()
moduleA.bbb()
moduleA.ccc()
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
、 / type-C
、 USB
*/
/*
：
1、CommonJS
2、AMD ( )
，require.js。
require.js OK。
3、ECMA6 class
jquery jquery.cookie AMD
*/
</script>
</head>
<body>
</body>
</html>