文档章节

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
4K
14

没有更多内容

加载失败,请刷新页面

加载更多

详解webpack-dev-server的简单使用

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.js来连接到服务器的微型运行时. 我们来看一下下面的...

前端攻城老湿
24分钟前
0
0
深度解析JavaScript事件对象

这篇文章主要介绍了JavaScript事件对象,结合实例形式深入分析了javascript DOM、IE及其他浏览器相关事件对象操作技巧与注意事项,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可...

前端攻城小牛
25分钟前
0
0
Android下拉刷新开源框架

添加依赖 //下拉刷新 implementation 'com.jcodecraeer:xrecyclerview:1.5.9' xml引用 <com.jcodecraeer.xrecyclerview.XRecyclerView android:id="@+id/act_xrecycler......

lanyu96
32分钟前
0
0
Linux内核中ioremap映射的透彻理解

几乎每一种外设都是通过读写设备上的寄存器来进行的,通常包括控制寄存器、状态寄存器和数据寄存器三大类,外设的寄存器通常被连续地编址。根据CPU体系结构的不同,CPU对IO端口的编址方式有两...

天王盖地虎626
36分钟前
1
0
Collection中的之retainAll()方法的理解

//在jdkapi中的方法,说明返回值为boolean类型, boolean retainAll(Collection<?> c) ; //api中给的注释 //Retains only the elements in this list that are contained in the specified......

南桥北木
39分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部