资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Amaple.js框架详细介绍

Amaple.js框架详细介绍

chemzqm / 2036人阅读

摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。

Amaple · 体验优先的JavaScript单页框架

Amaple (点此查看Github仓库)是专为单页web应用而设计的基于页面模块化的JavaScript框架，它可使开发者快速开发单页web应用。 Amaple 其实由 “A maple”(一片枫叶) 组合而成，它就像Web前端大森林中的一片枝叶，在享受这片森林呵护的同时也为森林增添一丝色彩，因此， Amaple 选择了拥抱这片大森林，它的插件功能除了可使用自身规范的插件外，还支持所有 AMD(点击了解详情)和 IIFE(点击了解详情) 规范的第三方js库，在rollup、webpack、browserify等模块打包工具流行的今天，这也意味着lodash、socket.io等几乎所有的第三方js库都可以与 Amaple 协同运作，同时也支持旧式的IIFE格式js库。此外， Amaple 还拥有 高级虚拟DOM功能、模块化、MVVM及原生Web化设计 等特性，即使初级前端开发也能顺利掌握和使用，这也充分体现了 Amaple “体验优先” 的设计理念。

Amaple 特性简介

【开放式插件】支持所有AMD和IIFE规范的第三方js库作为 Amaple 的插件。

【高级虚拟DOM】与其他带有虚拟DOM功能的js库相比， Amaple 实现了性能更好的虚拟DOM，它不再需要开发者提供可识别的key标志，也能自动判断可复用的DOM元素，并在重新排序的过程中自动计算出最少的移动步骤进行移动。

【模块化】

【页面模块化】单页Web应用的特点之一是将页面划分为多个模块，URL跳转时更新模块的内容。在 Amaple 中存在 模块(Module) 和 组件(Component) 两种模块化单位，模块是单页Web应用更新的最小单位，它管控URL跳转时的内容替换、参数更新等一系列变化，而且允许开发者定义任意层级的任意多个模块及子模块；而组件的定位是拥有特定功能的封装块，它有自己的独立视图、状态数据和组件行为。与其他单页库相比，它们的职责更清晰，也易于理解。

【编写模块化】 Amaple 内嵌了代码模块化功能，它允许将模块文件、组件文件和插件文件多带带编写并分类保存，这让不熟悉nodejs构建工具的开发者也能编写模块化的js代码，当然对于熟悉nodejs构建工具的中高端开发者，你也完全可以使用webpack、babel、scss/less等工具辅助开发。

【MVVM】 Amaple 提供了更简洁的动态模板引擎，使开发者更加专注于对数据的处理。

【原生Web化设计】 Amaple 沿用了许多原生Web开发的标准，这样可以最大化符合具有一定基础的开发者的认知范围，如Amaple依旧使用onclick属性绑定点击事件，使用href属性进行跳转页面，使用

设置action属性提交表单，只是它们是浏览器无刷新的跳转，甚至可以创建像 ShadowDOM 那样的组件，在组件内使用特定子元素，看起来就像和、