本文同步自我的GitHub
概述
Arale是支付宝开发的一套基础类库,提供了一整套前端模块架构,基于CMD规范,所有模块均是以sea.js的标准进行开发。其开发过程借鉴了优秀的开源类库如jQuery, underscore等的经验,并融合发展,最后建立了一套自己的开发机制。
结构
Arale
|--基础设施
| |-- Base
| |-- Class
| |-- Events
| `-- Widget
|--工具
| |-- Cookie
| |-- Detector
| |-- Dnd
| |-- Easing
| |-- Iframe-Shim
| |-- Messenger
| |-- Name-Storage
| |-- Position
| |-- Qrcode
| |-- Sticky
| |-- Templatable
| `-- Upload
`--UI组件
|-- Autocomplete
|-- Calendar
|-- Dialog
|-- Overlay
|-- Popup
|-- Switchable
|-- Select
|-- Tip
`-- Validator
开篇明义
这是本系列的第一篇,对于Arale中每个模块的分析文章将采取同样的结构。前半部分是带注释源码,在模块源码中会添加尽可能详细的注释。后半部分则是分析,针对模块的运作方式进行具体分析。
带注释源码
// The base Class implementation.
// 基础Class类的实现,Class类作为返回的对象,本身也可接受对象参数
function Class(o) {
// Convert existed function to Class.
// 将现有的函数转换为Class类
if (!(this instanceof Class) && isFunction(o)) {
return classify(o)
}
}
module.exports = Class
// Create a new Class.
//
// var SuperPig = Class.create({
// Extends: Animal,
// Implements: Flyable,
// initialize: function() {
// SuperPig.superclass.initialize.apply(this, arguments)
// },
// Statics: {
// COLOR: 'red'
// }
// })
//
/**
* 创建Class子类
* @param {Function} parent 要继承的父类的构造函数
* @param {Object} properties 包含要混入属性的对象
* @return {Function} 生成子类的构造函数
*/
Class.create = function(parent, properties) {
// 首先对第一个参数进行类型验证,是否为函数
if (!isFunction(parent)) {
// 如不是函数,将值赋给properties,再将parent设为null
properties = parent
parent = null
}
// 如properties是undefined或null等为false的值,将properties设为空对象
properties || (properties = {})
// 如parent为null,且properties有Extends属性,则将Extends属性的值赋给parent,
// 如properties没