{"id":16385778,"url":"https://github.com/aaaaash/js-module","last_synced_at":"2025-10-10T00:10:06.814Z","repository":{"id":100795495,"uuid":"61205834","full_name":"Aaaaash/js-Module","owner":"Aaaaash","description":"JavaScript模块化编程","archived":false,"fork":false,"pushed_at":"2016-06-21T11:18:24.000Z","size":61,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-11T06:07:28.170Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aaaaash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-15T12:20:50.000Z","updated_at":"2016-06-15T12:21:31.000Z","dependencies_parsed_at":"2023-06-10T01:03:11.193Z","dependency_job_id":null,"html_url":"https://github.com/Aaaaash/js-Module","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Aaaaash/js-Module","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aaaaash%2Fjs-Module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aaaaash%2Fjs-Module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aaaaash%2Fjs-Module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aaaaash%2Fjs-Module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aaaaash","download_url":"https://codeload.github.com/Aaaaash/js-Module/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aaaaash%2Fjs-Module/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259546443,"owners_count":22874564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T04:15:20.160Z","updated_at":"2025-10-10T00:10:01.772Z","avatar_url":"https://github.com/Aaaaash.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#JavaScript模块化编程学习\n------------------模块就是实现特定功能的一组方法------------------\n\n\n\n1.原始写法 \u003cbr/\u003e\nfunction m1(){\u003cbr/\u003e\n    ...\u003cbr/\u003e\n};\u003cbr/\u003e\nfunction m2(){\u003cbr/\u003e\n    ...\u003cbr/\u003e\n}\u003cbr/\u003e\n函数m1和m2组成了一个模块，使用的时候直接调用函数就可以了\u003cbr/\u003e\n但是这样写会污染全局变量，无法保证不与其他模块发生命名冲突，且模块成员之间没有直接联系\u003cbr/\u003e\n\n\n2.对象写法\u003cbr/\u003e\nvar module_1=new Object({\u003cbr/\u003e\n    _count:0,\u003cbr/\u003e\n    m1:function(){\u003cbr/\u003e\n        ...\u003cbr/\u003e\n    },\u003cbr/\u003e\n    m2:function(){\u003cbr/\u003e\n        ...\u003cbr/\u003e\n    }\u003cbr/\u003e\n});\u003cbr/\u003e\n函数m1和m2封装在module_1对象中，调用的时候就相当于调用这个对象的属性       module_1.m1();\u003cbr/\u003e\n但是这样写会暴漏所有的模块成员，内部状态可以被外部改写\u003cbr/\u003e\nmodule_1._count=5;\u003cbr/\u003e\n此处_count的值在外部被修改\u003cbr/\u003e\nconsole.log(module_1._count);           //5\u003cbr/\u003e\n\n3.立即执行函数写法   （IIFE）\u003cbr/\u003e\nvar module_2=(function(){\u003cbr/\u003e\n    var _count=0;\u003cbr/\u003e\n    var m1=function(){\u003cbr/\u003e\n        ...\u003cbr/\u003e\n    };\u003cbr/\u003e\n    var m2=function(){\u003cbr/\u003e\n        ...\u003cbr/\u003e\n    };\u003cbr/\u003e\n    return {\u003cbr/\u003e\n        m1:m1,\u003cbr/\u003e\n        m2:m2\u003cbr/\u003e\n    };\u003cbr/\u003e\n})();\u003cbr/\u003e\n这样写，外部代码就无法读取内部_count变量\u003cbr/\u003e\nconsole.info(module1._count);           //undefined\u003cbr/\u003e\n\n4.放大模式\u003cbr/\u003e\n如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时候就有必要采用放大模式\u003cbr/\u003e\nvar module_3=(function(mod){\u003cbr/\u003e\n    mod.m3=function(){\u003cbr/\u003e\n        ...\u003cbr/\u003e\n    };\u003cbr/\u003e\n    return mod;\u003cbr/\u003e\n})(module_3);\u003cbr/\u003e\n以上代码为module_3模块添加了一个新方法m3()，然后返回新的module_3模块\u003cbr/\u003e\n\n5.宽放大模式\u003cbr/\u003e\nvar module_4=(function(mod){\u003cbr/\u003e\n    ...\u003cbr/\u003e\n    return mod;\u003cbr/\u003e\n})(window.module_3||{});\u003cbr/\u003e\n其实就是指立即执行函数的参数可以是一个空对象\u003cbr/\u003e\n\n6.输入全局变量\u003cbr/\u003e\n为了在模块内部调用全局变量,必须显式的将其他变量传入模块\u003cbr/\u003e\nvar module_5=(function($){\u003cbr/\u003e\n    ...\u003cbr/\u003e\n})(jQuery);\u003cbr/\u003e\n\n#模块的规范\n目前，通行的Javascript模块规范共有两种：CommonJS和AMD\n\n1.CommonJS规范\n2009年，美国程序员Ryan Dahl创造了node.js，将JavaScript语言用于服务器端编程\n这也标志着JavaScript模块化编程正式诞生，因为node.js的模块系统就是参照CommonJS 规范实现的\nCommonJS中有一个全局方法require()，用于加载模块\n\n假设有一个数学模块math.js\u003cbr/\u003e\nvar math=require('math');\u003cbr/\u003e\n然后就可以调用模块提供的方法：\u003cbr/\u003e\nmath.add(2,3);\u003cbr/\u003e\n以上只是在服务器端的模块加载方式，但是在浏览器端，由于模块可能存放在服务器中，加载的速度取决于网速，如果加载速度很慢，使用这种同步加载方式浏览器将会处于假死状态，所以只能采用异步加载，这也就是AMD规范诞生的背景\u003cbr/\u003e\n\n2.AMD\n\nAMD是\"Asynchronous Module Definition\"的缩写，意思就是\"异步模块定义\"\nAMD采用异步方式加载模块,模块的加载不影响它后面语句的运行,所有依赖者模块的语句都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行,同样的AMD也采用require()语句加载模块，但是它要求两个参数\n\nrequire([module],callback);\u003cbr/\u003e\n第一个参数[module]是一个数组，里面的成员就是要加载的模块\u003cbr/\u003e\n第二个参数callback就是加载成功后执行的回调函数，将上面math的代码改写成AMD形式就是\u003cbr/\u003e\nrequire(['math'],function(math){    //加载了几个模块就要传入几个相对应的参数，以便调用\u003cbr/\u003e\n    math.add(2,3);\u003cbr/\u003e\n});\u003cbr/\u003e\n\n以上math.add()与math模块加载是不同步的，浏览器并不会发生假死状况，所以AMD规范更适合于浏览器端\u003cbr/\u003e\nrequire.JS这个库实现了AMD规范\u003cbr/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaaaash%2Fjs-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaaaash%2Fjs-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaaaash%2Fjs-module/lists"}