El：轻量级的Web组件框架

El：轻量级的Web组件框架

elMinimal JavaScript application framework / WebComponents base class项目地址:https://gitcode.com/gh_mirrors/el/el

简介

El是一个受React、Vue和lit-element启发的轻量级JavaScript应用程序框架。它基于Web Components标准，提供了观察者存储、响应式模板、高效的DOM更新以及一系列强大功能，如阴影DOM下的作用域样式、表达式监控等。在不增加复杂性和依赖的情况下，El力求以最小的学习曲线提供高效能的开发体验。

尝试示例应用，或直接查看源代码，感受其简洁之美。

技术解析

El的核心特性包括：

• 内置观察者存储（$observable）：使用El.observable创建可观察的对象，当对象状态改变时，会自动触发相关组件的更新。

• 反应式模板与单向数据绑定：通过render函数和内联表达式实现模板渲染，模板中的属性值可以是复杂的表达式或事件处理程序。

• 快速差异化DOM更新：El跟踪组件对数据的依赖，仅在必要时执行精确的DOM更新操作。

• 阴影DOM下的局部样式：通过styles方法和css标签函数编写局部CSS，确保样式不溢出到组件外部。

• 预处理CSS支持：包括隐式嵌套和ampersand选择器。

• 表达式监控（$watch）：通过$watch方法监听并响应数据变化。

• 组件生命周期方法：如created、mounted和unmounted，在相应的阶段执行回调。

• 约150行源码（压缩后约2KB）：代码量小，易于理解和维护。

应用场景

• 构建无库Web应用：由于El没有依赖，可以直接引入到项目中，非常适合构建小型独立应用。

• 快速原型设计：想快速验证一个想法，El可以让您快速搭建前端结构。

• 教育学习：学习Web Components和响应式编程的好例子，理解基础原理后再拓展其他框架。

• 低侵入性组件：为现有项目添加自定义元素，不会影响整体架构。

项目特点

• 极简主义：El的设计理念是“简单有效”，无额外负担，专注于核心功能。

• 高效性能：利用Web Components原生特性，实现快速且精确的DOM更新。

• 无依赖：不需要Webpack、Rollup等构建工具，易于集成和部署。

• 易学易用：学习曲线平缓，适合初学者和经验丰富的开发者。

• 扩展性：虽然小巧，但具备足够的灵活性来适应不同需求。

要开始使用El，只需将el.js文件引入项目，然后开始定义您的Web组件吧！

安装与使用

可以通过直接下载或通过npm安装：

<!-- 直接引入 -->
<script type="module">
  import { El } from './el.js'
  /* ... */
</script>

或

npm install @frameable/el

然后，按照以下方式创建并注册自定义元素：

<my-element></my-element>

<script>
  class MyElement extends El {
    /* ... */
  }
  customElements.define('my-element', MyElement);
</script>

现在，您已经准备好探索El带来的无限可能了。无论是在新项目还是现有项目中，El都能成为您强大的助手，让Web开发变得更加轻松。

elMinimal JavaScript application framework / WebComponents base class项目地址:https://gitcode.com/gh_mirrors/el/el