尚学堂requireJs课程---2、模块
生活随笔
收集整理的這篇文章主要介紹了
尚学堂requireJs课程---2、模块
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
尚學堂requireJs課程---2、模塊
一、總結
一句話總結：
# 將代碼以及使用放到獨立的閉包中去，并且賦值給了變量，便于外部訪問
# return出了函數和變量（放在一個json對象中）
# 百度的webuploader應該就是這么搞的，require.js的最基礎原理也是這個
# 搞那么復雜就是為了解決一個作用域的問題
// 模塊! 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中通過對象實現變量不至于直接掛載到全局（缺點是外部可以修改，不符合開閉原則）？
用對象來定義變量
var infoObj = {name:"iwen",age:20,sex:"男" } // 不至于直接掛載到全局 console.log(infoObj.age); infoObj.age = 30; console.log(infoObj.age);?
?
2、js作用域獨立實例（外部不能修改，問題是外部無法使用）？
將代碼以及使用放到獨立的閉包中去
(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模塊實例（在js作用域獨立的基礎上賦值給變量，便于外部訪問）？
# 將代碼以及使用放到獨立的閉包中去，并且賦值給了變量，便于外部訪問
# return出了函數和變量（放在一個json對象中）
# 百度的webuploader應該就是這么搞的，require.js的最基礎原理也是這個
# 搞那么復雜就是為了解決一個作用域的問題
// 模塊! 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 <!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 設計模式規范： 13 開閉原則：對擴展開放，對修改關閉 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 // 作用域獨立 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>?
?
?
轉載于:https://www.cnblogs.com/Renyi-Fan/p/11610496.html
總結
以上是生活随笔為你收集整理的尚学堂requireJs课程---2、模块的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 尚学堂requireJs课程---1、作
- 下一篇： 尚学堂requireJs课程---3、私