摘要:体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架,它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具,但必须掌握和的基础知识。
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 那样的组件,在组件内使用特定子元素,看起来就像和、和的关系一样。
Amaple 使用前置要求此框架的使用者可不需了解nodejs构建工具,但必须掌握html、js和css的基础知识。
Amaple 技术伙伴招募如果你是一位热爱并具有丰富经验的Web前端工程师,并希望创造一款优秀的JavaScript框架或库,请加入Amjs Team,点此查看伙伴招募详情。
开发模式介绍 # 普通开发模式普通开发模式适合对Nodejs构建工具不熟悉的初级开发者使用, Amaple 自身的代码模块化管理将会使你摆脱代码缠绕的困扰。此外,Web单页应用需使用 http 协议进行模块的请求与跳转,为解决这个问题,我们特地提供了可快速启动一个本地Web服务器的,具有一定文件结构的 Amaple 开发包,开发者只需下载并按以下操作即可完成启动。
[ 1 ]. 本地Web服务器依赖 Nodejs ,如没有安装请【点此下载Nodejs】并安装。
[ 2 ]. 下载 Amaple 开发包【点此下载Amaple开发包】。
[ 3 ]. 解压并进入到开发包中,直接执行启动程序即可自动启动本地Web服务器(windows系统运行 start_win.bat ,macOS系统运行 start_macOS ,程序会自动安装所需依赖包并启动一个本地Web服务器)。
[ 4 ]. 此时就可以在开发包的src目录下进行开发,将对应类型的代码文件保存到对应文件夹。
【注意】1、开发者每次打开的启动程序来启动本地Web服务器,等到开发完成后直接将src目录下的代码拷贝到生产环境即可;# Nodejs构建开发模式
2、windows 8以上用户 运行启动程序时请右键 以管理员身份运行 打开,否则可能会导致环境变量错误的问题;
3、开发包并不是必须的,如果开发者使用带有本地Web服务器的IDE进行开发,也可自行搭建项目,此时可通过 https://unpkg.com/amaple 获取最新版本的Amaple.js文件。
对于熟悉Nodejs构建工具的中高端开发者,可使用npm安装 Amaple 。
npm install amaple --save
Nodejs环境下的构建教程即将推出,敬请期待...
准备好了吗?开始学习Amaple:阅读教程时需特别关注代码中的注释文字,它一般是这个功能的具体使用方法。
【Amaple教程】1. 启动路由
【Amaple教程】2. 模块
【Amaple教程】3. 模板指令与状态数据(state)
【Amaple教程】4. 组件
【Amaple教程】5. 插件
【Amaple教程】6. 路由配置
【Amaple Github】欢迎pull request
Amaple技术交流如果你对 Amaple 有任何评价、建议或问题,可通过以下方式提交,或在此文章中直接评论,我们将会在最快的速度进行回复。
提交一个issue
Amaple官方QQ群:674036951
Email:jou@amaple.org
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51741.html
摘要:体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架,它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具,但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...
摘要:体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架,它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具,但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...
摘要:开始编写具体的代码前,首先需启动单页模式并进行简单配置。我们在开发包的文件中调用函数并传入一个对象进行启动路由并配置单页应用。继续学习下一节教程模块也可回顾上一节教程前言 开始编写具体的代码前,首先需启动单页模式并进行简单配置。在src/index.html中引入amaple.js框架文件后我们就可以使用am这个全局对象。我们在开发包的src/config.js文件中调用am.star...
阅读 692·2021-11-17 09:33
阅读 3725·2021-09-01 10:46
阅读 1735·2019-08-30 11:02
阅读 3259·2019-08-29 15:05
阅读 1381·2019-08-26 11:39
阅读 2244·2019-08-23 17:04
阅读 1956·2019-08-23 15:43
阅读 1352·2019-08-23 14:12