shobon-kun-no-module-hogehoge

Transcript

1. (´ 3 `) Created by @mamoida
2. (´ 3 `) <
3. (´ 3 `) <
4. (function(win){ win.myModule = { some : function(){ console.log('some'); } }; })(window);
5. (´ 3 `) <
6. myModule.some(); // some
7. (´ 3 `) <
8. (´ 3 `) < node
9. $ node main.js ReferenceError: window is not defined
10. (´ 3 `) <
11. (´ 3 `) < node window
12. (´ 3 `) < window this
13. (function(root){ console.log(root); })(this);
14. Window {top: Window, window: Window, location: Location, external: Object, chrome: Object⋯}
15. (´ 3 `) < window
16. $ node main.js {}
17. (´ 3 `) <
18. (´ 3 `) < this
19. (function(root){ console.log(this); })(this);
20. $ node main.js { ArrayBuffer: [Function: ArrayBuffer], Int8Array: { [Function: Int8Array] BYTES_PER_ELEMENT: 1 }, Uint8Array: { [Function: Uint8Array] BYTES_PER_ELEMENT: 1 }, Uint8ClampedArray: { [Function: Uint8ClampedArray] BYTES_PER_ELEMENT: 1 }, Int16Array: { [Function: Int16Array] BYTES_PER_ELEMENT: 2 }, Uint16Array: { [Function: Uint16Array] BYTES_PER_ELEMENT: 2 }, Int32Array: { [Function: Int32Array] BYTES_PER_ELEMENT: 4 }, Uint32Array: { [Function: Uint32Array] BYTES_PER_ELEMENT: 4 }, Float32Array: { [Function: Float32Array] BYTES_PER_ELEMENT: 4 }, Float64Array: { [Function: Float64Array] BYTES_PER_ELEMENT: 8 }, ...
21. (´ 3 `) <
22. (´ 3 `) < node
23. var self = (function(root){ console.log(root === this); //false console.log(this.setTimeout); //[Function] return this; })(this); console.log(self === this); // false console.log(this.setTimeout); // undefined console.log(setTimeout); // [Function]
24. (´ 3 `) < ...
25. (function(root){ console.log(typeof root.module); //undefined console.log(typeof module); //object console.log(typeof root.exports); //undefined console.log(typeof exports); //object })(this); console.log(typeof this.module); //undefined console.log(typeof module); //object console.log(typeof root.exports); //undefined console.log(typeof exports); //object
26. module ( ) exports ( )
27. (´ 3 `) <
28. (´ 3 `) < exports node
29. (function(root){ if(typeof exports === 'object'){ module.exports = { some: function(){ console.log('some'); } }; }else{ root.myModule = { some: function(){ console.log('some'); } }; } })(this);
30. (´ 3 `) <
31. myModule.some(); // some
32. (´ 3 `) < node require
33. var myModule = require('./module.js'); myModule.some(); //some
34. (´ 3 `) < 2
35. (function(root){ var myModule = { some: function(){ console.log('some'); } }; if(typeof exports === 'object'){ module.exports = myModule; }else{ root.myModule = myModule; } })(this);
36. (´ 3 `) < AMD
37. (´ 3 `) < AMD ?
38. define.amd = {}; define(id?, dependencies? , factory)
39. define(['underscore'] , function(_){ return {}; });
40. (´ 3 `) < require.js
41. script(src="/js/lib/require.js")
42. (function(root){ console.log(typeof root.define); //function console.log(typeof root.define.amd); //object console.log(typeof root.require); //function })(this);
43. (´ 3 `) <
44. (´ 3 `) <
45. (function(root){ var myModule = { some: function(){ console.log('some'); } }; if(typeof root.define === 'function' && define.amd){ define([],myModule); }else if(typeof exports === 'object'){ module.exports = myModule; }else{ root.myModule = myModule; } })(this);
46. (´ 3 `) < html
47. require.config({ baseUrl: '/js/', paths : {} }); require(['myModule'],function(myModule){ myModule.some(); });
48. (´ 3 `) <
49. (´ 3 `) <
50. (´ 3 `) < underscore
51. (function(root){ var myModule = { some: function(){ console.log('some'); } }; if(typeof root.define === 'function' && define.amd){ define(['underscore'],function(_){ return myModule; }); }else if(typeof exports === 'object'){ var underscore = require('underscore'); module.exports = function(underscore){ return myModule; }; }else{ root.myModule = function(_){ return myModule; }; } })(this);
52. (´ 3 `) <
53. (function(){ require.config({ baseUrl: '/js/', paths : { underscore : 'lib/underscore' } }); require(['myModule'],function(myModule){ myModule.some(); }); })();
54. (´ 3 `) <
55. (function(root,factory){ if(typeof root.define === 'function' && define.amd){ define(['underscore'],factory); }else if(typeof exports === 'object'){ module.exports = factory(require('underscore')); }else{ root.myModule = factory(_); } })(this,function(_){ var myModule = { some: function(){ console.log('some'); }, //メソッド追加 isArray : function(obj){ return _.isArray(obj); } }; return myModule; });
56. // browser with AMD (function(){ require.config({ baseUrl: '/js/', paths : { underscore : 'lib/underscore' } }); require(['myModule'],function(myModule){ myModule.some(); // some myModule.isArray({}); // false }); })();
57. // browser export script(src="/js/lib/underscore.js") script(src="/js/myModule.js") script. (function(){ myModule.some(); // some myModule.isArray({}); // false })();
58. (´ 3 `) <
59. (´ 3 `) <
61. AMD · amdjs/amdjs-api Wiki umdjs/umd