你不知道的javascript读书笔记

本文深入探讨了JavaScript模块化的实现方式,通过一个具体的代码实例详细解释了如何利用闭包和立即执行函数实现模块化编程。重点讲解了如何定义模块、管理依赖以及获取模块实例。

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

这本书真的挺不错的,感觉以前很多不敢碰,很迷茫的问题都解决好多,看到模块化记录一下自己的理解

下面是代码:

var MyModules = (function Manager() {
var modules = {};
function define(name, deps, impl) {
        for (var i=0; i<deps.length; i++) {
            deps[i] = modules[deps[i]];
        }
        modules[name] = impl.apply( impl, deps );
}
function get(name) {
        return modules[name];
}
作用域闭包 | 55
return {
        define: define,
        get: get
};
})();
这段代码的核心是 modules[name] = impl.apply(impl, deps)。为了模块的定义引入了包装
函数(可以传入任何依赖),并且将返回值,也就是模块的 API,储存在一个根据名字来管
理的模块列表中。
下面展示了如何使用它来定义模块:
MyModules.define( "bar", [], function() {
function hello(who) {
            return "Let me introduce: " + who;
}
return {
            hello: hello
};
} );
MyModules.define( "foo", ["bar"], function(bar) {
         var hungry = "hippo";
        function awesome() {
            console.log( bar.hello( hungry ).toUpperCase() );
        }
        return {
            awesome: awesome
        };
} );
var bar = MyModules.get( "bar" );
var foo = MyModules.get( "foo" );
console.log(
            bar.hello( "hippo" )
); // Let me introduce: hippo

foo.awesome(); // LET ME INTRODUCE: HIPPO

代码有点乱,手动缩进一波,看起来还好主要代码

modules[name] = impl.apply( impl, deps );//意思就是改变参数执行impl这个函数

  for (var i=0; i<deps.length; i++) {
            deps[i] = modules[deps[i]];

  }//这个循环单独看简直一脸懵逼,得结合下面的代码看,并且其中有执行顺序先执行MyModules.define( "bar", [], function() {})函数后执行MyModules.define( "foo", ["bar"], function(bar) {}),当执行第二个函数时对象中modules已经存在一个key为bar的函数,所以第二个函数才能够顺利的执行。

整体代码理解一下应该没问题,因为是第一次向js源码发起挑战,记录一下。特别不喜欢那种看不懂源码的感觉,用什么插件出错了总要弄半天,不知道从何下手的感觉特别难受。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值