RubyLouvre/avalon
Avalon
Avalon is a client-side MVVM JavaScript framework that binds model data to DOM elements and automatically updates views when state changes. It functions as a component-based UI framework, encapsulating markup, logic, and styles into reusable custom components that can be composed across pages, while also serving as a virtual DOM diffing engine that computes minimal DOM updates by comparing lightweight in-memory view tree snapshots.
The framework distinguishes itself through a template directive compiler that transforms declarative HTML attributes like ms-repeat and ms-if into executable view instructions, combined with a dirty-checking data binding approach that monitors model changes by periodically scanning bound properties during each event loop tick. It includes a hash-based client routing system for single-page applications, a batch DOM update queue that collects pending view mutations into a single flush cycle, and a large list renderer that efficiently displays big tables or lists without blocking the browser during initial page load.
Avalon supports two-way data binding between models and form elements, form input validation with feedback, and declarative view rendering through HTML-based templates. It provides component-based route mapping for single-page application navigation without page reloads, and enables building and composing reusable components that can be nested across pages.
Features
- MVVM Frameworks - A client-side MVVM JavaScript framework that binds model data to DOM elements and automatically updates views when state changes.
- Model-to-DOM Synchronizations - Syncs a JavaScript model with the DOM so changes in either are reflected in the other automatically.
- Two-Way Data Binding - Syncs a model property with a form element so changes in either side automatically update the other.
- UI Component Compositions - Encapsulates markup, logic, and styles into reusable custom HTML tags that can be nested and composed across pages.
- Component-Based UI Frameworks - Encapsulates markup, logic, and styles into reusable custom components that can be composed across pages.
- HTML View Composition - Builds UI by nesting custom HTML tags that each encapsulate their own template, logic, and scoped styles.
- Dirty Checking Mechanisms - Monitors model changes by periodically scanning all bound properties during each event loop tick.
- Data-to-UI Bindings - Links a JavaScript view-model to DOM elements so changes in either side automatically update the other.
- Directive-Based View Renderers - Defines user interfaces using HTML-based templates with directives that control rendering and behavior.
- Reusable Components - Encapsulates markup, logic, and styles into custom elements that can be composed across pages.
- Directive-Based Template Compilers - Transforms declarative HTML attributes like ms-repeat and ms-if into executable view instructions via a template directive compiler.
- DOM Write Batching - Ships a batch DOM update queue that collects pending view mutations into a single flush cycle.
- Virtual DOM Diffing - Computes minimal DOM updates by comparing lightweight in-memory view tree snapshots using a virtual DOM diffing engine.
- Single-Page Navigators - Provides hash-based client routing for single-page application navigation without page reloads.
- Component-Based Route Definitions - Maps URL paths to components so the application navigates by swapping component instances.
- Virtualized List Rendering - Renders big tables or lists without blocking the browser during page load, avoiding white-screen pauses.
- Large List Renderers - Ships a large list renderer that efficiently displays big tables without blocking the browser during initial page load.
- Form Input Validation - Checks user-entered data against rules and displays feedback before submission.
- Client-side Routing - Implements a hash-based client-side routing system for mapping URL paths to components in single-page applications.
- Hash-Based Routing - Switches visible views by listening to URL hash changes and mapping them to registered component handlers.
- JavaScript 框架汇总 - Listed in the “JavaScript 框架汇总” section of the Awesome Frontend awesome list.
