AvalonJS 源码分析
AvalonJS 源码分析
ali安东尼 发表于7个月前
AvalonJS 源码分析
  • 发表于 7个月前
  • 阅读 17
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

前言

之前通过一篇文章简单介绍了avalon这个前端框架,作为这款框架的使用者,在了解过它所带来的好处之后,那必然会对它是如何实现的产生好奇感。那这次就一起来研究下它的代码,也通过这次机会来更深入了解它本身的实现方式和设计思想。

好,我们进入主题,以官方2.16为分析对象。

打开avalon之后,首先我们看到avalon的源码,开始是这样着的:

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["avalon"] = factory();
	else
		root["avalon"] = factory();
})(this,function(){})

这里必须了解一种基本结构-自调用匿名函数,什么叫自调用匿名函数呢? 在第一个括号内创建一个匿名函数,在第二个括号内执行,也可以看做在加载完之后立即调用,这样可以减少全局变量的污染,只暴露出avalon这个变量给外界,尽量避免变量冲突。

其中返回avalon这个对象也加入对CommonJs Modules 和AMD的自适应,this在这里充当一个全局对象的作用。

让我们接下来看看这一段代码:

function() {
	return (function(modules) { // webpackBootstrap
	 	// The module cache
	 	var installedModules = {};
	
	 	// The require function
	 	function __webpack_require__(moduleId) {
	
	 		// Check if module is in cache
	 		if(installedModules[moduleId])
	 			return installedModules[moduleId].exports;
	
			// Create a new module (and put it into the cache)
	 		var module = installedModules[moduleId] = {
	 			exports: {},
	 			id: moduleId,
	 			loaded: false
	 		};
	
	 		// Execute the module function
			modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
	
	 		// Flag the module as loaded
	 		module.loaded = true;
	
	 		// Return the exports of the module
			return module.exports;
	 	}
	
	
	 	// expose the modules object (__webpack_modules__)
	 	__webpack_require__.m = modules;
	
	 	// expose the module cache
	 	__webpack_require__.c = installedModules;
	
	 	// __webpack_public_path__
	 	__webpack_require__.p = "";
	
	 	// Load entry module and return exports
	 	return __webpack_require__(0);
 	})(modules)
}

这段代码是紧跟在this之后,并作为一个工厂方法生产avalon对象,这里又使用到了一个匿名函数,avalon各个模块则作为匿名函数的参数传入,匿名函数中,有两个变量 installedMoudules,webpack_require

installedMoudules作为一个加载记录,作者有这样一个很好的描述(cache),作为一个加载缓存,可避免多次加载。

webpack_require 则作为一个加载器,负责加载各个模块的内容。

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

这一部分使用了call,限定了模块的作用域,在代码段中我们可以看出module.exports都是为空对象,目的是为了建立一个完全空白的环境,让各个模块不受其他外部环境的影响。

好了,这一章就先写到这里,下一篇将会继续分析avalon的各个模块的实现。

原创文章,才疏学浅,文中若有不正之处,万望告知。 由睿江云提供,想了解更多,请登陆www.eflycloud.com

共有 人打赏支持
粉丝 3
博文 192
码字总数 173101
×
ali安东尼
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: