Ale.js

介绍

Ale.js是什么

Ale (中文:啤酒) 是一套用于以组件的形式构建用户界面的渐进式框架。它信奉,万物皆组件。与其它大型框架不同的是,Ale 只需要你将关注点放在数据上,并不需要关心任何与视图有关的内容。当你更新数据时,视图中任何使用到它的地方都会得到更新。


我们将 VueReact 的一些特性融合在 Ale 中,使之更加便捷、轻量。同时,diff 算法在 Ale 中也有应用(得益于 Ale 自研的 diff 算法,只有大约50行,极其轻量)。


同时,在 Ale 中,你也根本无需操心任何有关于 性能 方面的事情,因为 Ale 经过压缩后(非g-zip)只有大约7kb大小,执行速度也分别接近 Vue 和 React 的 3 倍!


如果你已经是有经验的前端开发者,想知道 Ale 与其它库 / 框架有哪些具体区别,请查看 对比其它框架

开始

我们的官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意 —— 掌握好基础知识再来吧!之前有其它框架的使用经验会有帮助,但这不是必需的。

使用 Ale 最简单的例子就是制作一个 HelloWorld 页面,让我们先创建一个 .html 文件,然后通过如下方式引入 Ale(或者你也可以 在jsfiddle上查看):

1
2
<!-- 开发环境版本 -->
<script src="ale.js"></script>

或者:

1
2
<!-- 生产环境版本,压缩了代码 -->
<script src="ale.min.js"></script>

安装教程给出了更多安装 Ale 的方式,如果你想要了解更多关于 Ale 的安装方式,请访问 安装教程

第一个组件

已经引入好了 Ale 核心库文件?让我们开始制作我们的第一个组件吧!

在 Ale 中,所有的组件都是通过 Ale 函数创建的:

1
Ale(); //当你引入了 Ale 核心库之后,Ale将会被注册为全局函数

Ale 函数接收2个参数,第一个参数用来设置这个组件的名称(字符串),第二个参数用来配置一些默认的参数(对象):

1
2
3
4
//定义一个名为 com1 的组件
Ale("com1", {
//配置
});

当然,单纯这样还不能创建出一个最基本的组件,一个最基本的组件至少要在配置里添加一个叫 template 的参数,用来设置该组件的模板:

1
2
3
4
5
//定义一个名为 com1 的组件
Ale("com1", {
/* 配置模板为HelloWorld */
template: "HelloWorld"
});

至此,最基本的组件就定义完成了!

但是如果我们单纯只定义组件,而没有渲染它,那么这个组件将没有任何效果。这时我们可以使用 Ale.render 函数来渲染一个组件:

1
Ale.render(); //渲染组件函数

Ale.render 函数也同样接收2个参数,和Ale函数一样,第一个参数用来设置这个组件的名称(字符串),第二个参数用来配置一些默认的参数(对象):

1
2
3
Ale.render("com1", {
el: "#app" /* 渲染一个组件时必须添加el属性,用来选中元素 */
});

其中idapp的元素:

1
<div id='app'></div>

其中,每次渲染组件时都至少要添加一个配置参数,那就是 - el,用来设置需要选中的元素。这时,打开我们的html文件,你会发现组件渲染完成了:

准备好了吗

恭喜,现在你已经创建完成了自己的第一个 Ale 组件!而我们的教程才刚刚开始 —— 本教程的其余部分将涵盖其它高级功能更详细的细节,所以请务必读完整个教程!


找到了一些错误?在Github上编辑!