尚学堂requireJs课程---2、模块
生活随笔
收集整理的這篇文章主要介紹了
尚学堂requireJs课程---2、模块
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
尚學(xué)堂requireJs課程---2、模塊
一、總結(jié)
一句話總結(jié):
# 將代碼以及使用放到獨(dú)立的閉包中去,并且賦值給了變量,便于外部訪問
# return出了函數(shù)和變量(放在一個(gè)json對(duì)象中)
# 百度的webuploader應(yīng)該就是這么搞的,require.js的最基礎(chǔ)原理也是這個(gè)
# 搞那么復(fù)雜就是為了解決一個(gè)作用域的問題
// 模塊! var module = (function(){var Demo = {}var hello = "hello";function userInfo(){var name = "iwen";var age = 20;console.log(name);}return {userInfo:userInfo,hello:hello}})(); console.log(module.hello); module.userInfo();?
?
1、js中通過對(duì)象實(shí)現(xiàn)變量不至于直接掛載到全局(缺點(diǎn)是外部可以修改,不符合開閉原則)?
用對(duì)象來定義變量
var infoObj = {name:"iwen",age:20,sex:"男" } // 不至于直接掛載到全局 console.log(infoObj.age); infoObj.age = 30; console.log(infoObj.age);?
?
2、js作用域獨(dú)立實(shí)例(外部不能修改,問題是外部無法使用)?
將代碼以及使用放到獨(dú)立的閉包中去
(function(){function userInfo(){var name = "iwen";var age = 20;return {name:name,age:age}}console.log(userInfo().age);var info = userInfo()console.log(info.name); })();?
?
3、js模塊實(shí)例(在js作用域獨(dú)立的基礎(chǔ)上賦值給變量,便于外部訪問)?
# 將代碼以及使用放到獨(dú)立的閉包中去,并且賦值給了變量,便于外部訪問
# return出了函數(shù)和變量(放在一個(gè)json對(duì)象中)
# 百度的webuploader應(yīng)該就是這么搞的,require.js的最基礎(chǔ)原理也是這個(gè)
# 搞那么復(fù)雜就是為了解決一個(gè)作用域的問題
// 模塊! var module = (function(){var Demo = {}var hello = "hello";function userInfo(){var name = "iwen";var age = 20;console.log(name);}return {userInfo:userInfo,hello:hello}})(); console.log(module.hello); module.userInfo();?
?
二、內(nèi)容在總結(jié)中
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 /* 11 模塊 12 設(shè)計(jì)模式規(guī)范: 13 開閉原則:對(duì)擴(kuò)展開放,對(duì)修改關(guān)閉 14 */ 15 16 // var infoObj = { 17 // name:"iwen", 18 // age:20, 19 // sex:"男" 20 // } 21 // // 不至于直接掛載到全局 22 // console.log(infoObj.age); 23 // infoObj.age = 30; 24 // console.log(infoObj.age); 25 26 // 作用域獨(dú)立 27 // (function(){ 28 // function userInfo(){ 29 // var name = "iwen"; 30 // var age = 20; 31 // return { 32 // name:name, 33 // age:age 34 // } 35 // } 36 // console.log(userInfo().age); 37 // var info = userInfo() 38 // console.log(info.name); 39 // })(); 40 41 // 模塊! 42 var module = (function(){ 43 44 var Demo = { 45 46 } 47 var hello = "hello"; 48 49 function userInfo(){ 50 var name = "iwen"; 51 var age = 20; 52 console.log(name); 53 } 54 55 return { 56 userInfo:userInfo, 57 hello:hello 58 } 59 60 })(); 61 console.log(module.hello); 62 module.userInfo(); 63 64 65 66 </script> 67 68 </body> 69 </html>?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/11610496.html
總結(jié)
以上是生活随笔為你收集整理的尚学堂requireJs课程---2、模块的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 尚学堂requireJs课程---1、作
- 下一篇: 尚学堂requireJs课程---3、私