介绍

Ale.js是什么

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

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

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

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

开始

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

使用 Ale 最简单的例子就是制作一个 HelloWorld 页面，让我们先创建一个 .html 文件，然后通过如下方式引入 Ale：

  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. //定义一个名为 com1 的组件
  2. Ale("com1", {
  3.     //配置
    });

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

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

至此，最基本的组件就定义完成了！

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

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

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

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

其中id为app的元素：

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

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

准备好了吗

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

原文: https://cn.alejs.org/2018/12/01/Introduction