摘要:體驗優先的單頁框架點此查看倉庫是專為單頁應用而設計的基于頁面模塊化的框架,它可使開發者快速開發單頁應用。使用前置要求此框架的使用者可不需了解構建工具,但必須掌握和的基礎知識。
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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115593.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...
閱讀 1072·2021-11-25 09:43
閱讀 695·2021-11-22 14:45
閱讀 3815·2021-09-30 09:48
閱讀 1059·2021-08-31 09:41
閱讀 1970·2019-08-30 13:52
閱讀 1975·2019-08-30 11:24
閱讀 1340·2019-08-30 11:07
閱讀 948·2019-08-29 12:15