前端模块化

最新推荐文章于 2025-08-17 13:02:36 发布

weixin_30945039

最新推荐文章于 2025-08-17 13:02:36 发布

阅读量53

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/sunnie-cc/p/6268229.html

本文介绍了一个简单的JavaScript模块化实现方式，通过自执行匿名函数创建模块管理器，支持模块定义和获取。示例代码展示了如何定义和使用两个相互依赖的模块，并进行实际的日志输出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <script>
 2         var MyModules = (function Manager() {
 3             var modules = {};
 4             function define(name, deps, impl) {
 5                 for (var i = 0; i < deps.length; i++) {
 6                     deps[i] = modules[deps[i]];
 7                 }
 8                 modules[name] = impl.apply(impl, deps);
 9             }
10             function get(name) {
11                 return modules[name];
12             }
13             return {
14                 define: define,
15                 get: get,
16             }
17         })();
18         MyModules.define("bar", [], function () {
19             function hello(who) {
20                 return "Let me introduce:" + who;
21             }
22             return {
23                 hello:hello
24             }
25         })
26         MyModules.define("foo", ["bar"], function () {
27             var hungry = "hippo";
28             function awasome() {
29                 console.log(bar.hello(hungry).toUpperCase());
30             }
31             return {
32                 awasome:awasome,
33             }
34         });
35         var bar = MyModules.get("bar");
36         var foo = MyModules.get("foo");
37         console.log(bar.hello("sunnie"));
38         foo.awasome();
39     </script>