文档章节

AvalonJS 源码分析

ali安东尼
 ali安东尼
发布于 2017/07/07 14:51
字数 695
阅读 17
收藏 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

© 著作权归作者所有

共有 人打赏支持
ali安东尼
粉丝 3
博文 192
码字总数 173101
作品 0
广州
avalonjs 中的if else实现的几种方法

在学习avalonjs的过程中,发现模板中并没有if else这样的写法,不像tempalte ejs这些,所以总结了三种方法来实现,仅供在使用avalonjs的同学参考,主要是通过ms-if 表达式和方法来实现. 1.开始前的...

subying
2015/10/05
3.8K
1
avalonJS-源码阅读(一)

写angularJS源码阅读系列的时候,写的太垃圾了。一个月后看,真心不忍直视,以后有机会的话得重写。这次写avalonJS,希望能在代码架构层面多些一点,少上源码、多写思路。 avalon暴露句柄方式...

lost_o0
2014/04/30
0
0
avalonJS-源码阅读(前)

avalon模块加载 avalon自己实现了一套可被替换的模块加载系统(AMD loader)。具体什么是AMD loader可参看doJo官方博客关于AMD loader的翻译讲解,看完之后,再继续往下看,会比较清楚些。 ...

lost_o0
2014/05/02
0
0
avalonJS-源码阅读(二)

avalon页面处理(2) 上一篇文章讲述的avalon刷页面所用到的几个函数。这篇则是主要讲avalon对刷DOM刷出来的avalon自定义属性如何处理的。 数据结构 看js代码最头疼的就是数据流转时的数据结...

lost_o0
2014/05/03
0
1
Avalonjs 2.0.5 发布,迷你易用的 MVVM 框架

Avalonjs 2.0.5 发布,此版本更新内容如下: 本版本最重要就是解决多次渲染的问题,这带来了性能的极大提高! ------------------- 组件里 onInit 会加载多次(延迟到dif...

qinerg
2016/06/17
3.9K
14

没有更多内容

加载失败,请刷新页面

加载更多

74.expect脚本同步文件以及指定host同步文件 构建分发系统文件和命令

20.31 expect脚本同步文件: 在expect脚本中去实现在一台机器上把文件同步到另外一台机器上去。核心命令用的是rsync ~1.自动同步文件 #!/usr/bin/expect set passwd "123456" spawn rsync -a...

王鑫linux
20分钟前
0
0
TypeScript项目引用(project references)

转发 TypeScript项目引用(project references) TypeScript新特性之项目引用(project references) 项目引用是TypeScript 3.0中的一项新功能,允许您将TypeScript程序构建为更小的部分。 通过这...

durban
24分钟前
0
0
爬虫入门

导读 网络爬虫(Web crawler),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本,它们被广泛用于互联网搜索引擎或其他类似网站,可以自动采集所有其能够访问到的页面内容,以获取...

问题终结者
24分钟前
0
0
ppwjs之bootstrap文字排版:无序列表项不换行

<!DOCTYPT html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>ppwjs欢迎您</title><link rel="icon" href="/favicon.ico" ......

ppwjs
31分钟前
0
0
SpringBoot 学习一

本文将从以下几个方面介绍: 前言 HelloWorld 读取配置文件 例子(CURD) 前言 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架...

tsmyk0715
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部