文档章节

AvalonJS 源码分析

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

© 著作权归作者所有

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

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

subying ⋅ 2015/10/05 ⋅ 1

avalonJS-源码阅读(一)

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

lost_o0 ⋅ 2014/04/30 ⋅ 0

avalonJS-源码阅读(前)

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

lost_o0 ⋅ 2014/05/02 ⋅ 0

avalonJS-源码阅读(二)

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

lost_o0 ⋅ 2014/05/03 ⋅ 1

javascript资料收集

JavaScript: 谈谈 JavaScript 异步编程:http://web.jobbole.com/81747/ Google JavaScript 规范:http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/google-js-style.html Co......

Mr_Tank_ ⋅ 2014/12/18 ⋅ 0

avalon框架学习

[详细api][1] avalon特性 双向绑定,方便编程 比angular兼容性好 体积小巧、跟适合移动端 [1]: http://avalonjs.github.io 目前发现的小问题 自带的加载器支持格式有限,比如 require(【】,...

snecker ⋅ 2015/03/18 ⋅ 0

Avalonjs 2.0.5 发布,迷你易用的 MVVM 框架

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

qinerg ⋅ 2016/06/17 ⋅ 14

avalonJS问题

avalonJS里 avalon.define = function(id, factory) { var $id = id.$id || id if (!$id) { log("warning: vm必须指定$id") } if (VMODELS[$id]) { log("warning: " + $id + " 已经存在于ava......

牛牛1448870058 ⋅ 2015/01/20 ⋅ 0

avalonJS-源码阅读(三) VMODEL

avalon dom小结 看过前面三篇文章后,应该会对avalon关于dom的处理有个大体的理念。这里再理一遍:avalon通过手动触发scan函数来遍历dom。然后根据确定VMODELS的作用域,接下来便是处理用户代...

lost_o0 ⋅ 2014/05/05 ⋅ 0

Avalonjs 1.4.6 发布,迷你易用的 MVVM 框架

Avalonjs 1.4.6 发布,此版本更新内容如下: 修复对flexbox的CSS属性支持 fix IE6-8 VBSCRIPT 对象的D,P属性遍历不出来的BUG fix visible BUG 去掉ms-repeat过火的优化 fix ms-html属性绑定错...

qinerg ⋅ 2015/08/17 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Kubeflow实战系列:利用TFJob导出分布式TensorFlow模型

介绍 本系列将介绍如何在阿里云容器服务上运行Kubeflow, 本文介绍如何使用TfJob导出分布式模型训练模型。 第一篇:阿里云上使用JupyterHub 第二篇:阿里云上小试TFJob 第三篇:利用TFJob运行...

全部原谅 ⋅ 22分钟前 ⋅ 0

007. 深入JVM学习—老年代

老年代空间的主要目的是用于存储由Eden发送来的对象,一般在经历好几次“Minor GC”还会保存下来的对象,才会被复制到老年代,这样就可以存放更多的对象,同时在老年代中执行GC的次数也相对较...

影狼 ⋅ 23分钟前 ⋅ 0

常见的一些C#开源框架或者开源项目

原:https://blog.csdn.net/qq_27825451/article/details/70666044 Json.NET http://json.codeplex.com/ Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更......

whoisliang ⋅ 24分钟前 ⋅ 0

设计模式基本原理

刚开始接触编程这行的时候看过设计模式,当时感觉学这些模式没有太大的用处,当时也看不太懂。但是随着慢慢接触这一行,经过一段时间的编程以后,再回过头来看设计模式,发现设计模式的确是太...

王子城 ⋅ 27分钟前 ⋅ 0

阿里云全面支持IPv6!一文揽尽4位大咖精彩演讲

摘要: 自从去年11月以来,阿里巴巴高度重视数据中心的网络改造、云产品改造、应用及网络改造等多个维度,经过半年以来的建设,阿里云已经完成了域名解析等关键产品的分析,现在阿里云已经完...

传授知识的天使 ⋅ 38分钟前 ⋅ 0

windows Android sdk 配置

1、下载Android SDK,点击安装,直接默认路径即可! 下载地址:http://developer.android.com/sdk/index.html 2、默认路径安装后,安装完成,开始配置环境变量。 3、打开计算机属性——高级系...

阿豪boy ⋅ 40分钟前 ⋅ 0

bash shell script 简明教程

User <--> bash <--> kernel shell is not kernel or part of kernel various shells: tcsh, csh, bash, ksh find the using shell: echo $SHELL find all the shells: cat /etc/shells what......

mskk ⋅ 43分钟前 ⋅ 0

Service Mesh简史

William Morgan Service Mesh是一个相当新的概念,讲它的“历史”似乎有些勉强。就目前而言,Service Mesh已经在部分企业生产环境中运行了超过18个月,它的源头可以追溯到2010年前后互联网公...

好雨云帮 ⋅ 43分钟前 ⋅ 0

10个免费的服务器监控工具

监控你的WEB服务器或者WEB主机运行是否正常与健康是非常重要的。你要确保用户始终可以打开你的网站并且网速不慢。服务器监控工具允许你收集和分析有关你的Web服务器的数据。 有许多非常好的服...

李朝强 ⋅ 55分钟前 ⋅ 0

压缩工具之zip-tar

zip 支持目录压缩。使用yum安装zip包,使用yum安装unzip包 zip 1.txt.zip 1.txt #将1.txt文件压缩,新生成的压缩文件为1.txt.zip,原文件保留 zip -r 123.zip 123/ #-r对目录操作。将123/目录...

ZHENG-JY ⋅ 56分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部