摘要:體驗(yàn)優(yōu)先的單頁框架點(diǎn)此查看倉庫是專為單頁應(yīng)用而設(shè)計的基于頁面模塊化的框架,它可使開發(fā)者快速開發(fā)單頁應(yīng)用。使用前置要求此框架的使用者可不需了解構(gòu)建工具,但必須掌握和的基礎(chǔ)知識。
Amaple · 體驗(yàn)優(yōu)先的JavaScript單頁框架
Amaple (點(diǎn)此查看Github倉庫)是專為單頁web應(yīng)用而設(shè)計的基于頁面模塊化的JavaScript框架,它可使開發(fā)者快速開發(fā)單頁web應(yīng)用。 Amaple 其實(shí)由 “A maple”(一片楓葉) 組合而成,它就像Web前端大森林中的一片枝葉,在享受這片森林呵護(hù)的同時也為森林增添一絲色彩,因此, Amaple 選擇了擁抱這片大森林,它的插件功能除了可使用自身規(guī)范的插件外,還支持所有 AMD(點(diǎn)擊了解詳情)和 IIFE(點(diǎn)擊了解詳情) 規(guī)范的第三方j(luò)s庫,在rollup、webpack、browserify等模塊打包工具流行的今天,這也意味著lodash、socket.io等幾乎所有的第三方j(luò)s庫都可以與 Amaple 協(xié)同運(yùn)作,同時也支持舊式的IIFE格式j(luò)s庫。此外, Amaple 還擁有 高級虛擬DOM功能、模塊化、MVVM及原生Web化設(shè)計 等特性,即使初級前端開發(fā)也能順利掌握和使用,這也充分體現(xiàn)了 Amaple “體驗(yàn)優(yōu)先” 的設(shè)計理念。
Amaple 特性簡介【開放式插件】支持所有AMD和IIFE規(guī)范的第三方j(luò)s庫作為 Amaple 的插件。
【高級虛擬DOM】與其他帶有虛擬DOM功能的js庫相比, Amaple 實(shí)現(xiàn)了性能更好的虛擬DOM,它不再需要開發(fā)者提供可識別的key標(biāo)志,也能自動判斷可復(fù)用的DOM元素,并在重新排序的過程中自動計算出最少的移動步驟進(jìn)行移動。
【模塊化】
【頁面模塊化】單頁Web應(yīng)用的特點(diǎn)之一是將頁面劃分為多個模塊,URL跳轉(zhuǎn)時更新模塊的內(nèi)容。在 Amaple 中存在 模塊(Module) 和 組件(Component) 兩種模塊化單位,模塊是單頁Web應(yīng)用更新的最小單位,它管控URL跳轉(zhuǎn)時的內(nèi)容替換、參數(shù)更新等一系列變化,而且允許開發(fā)者定義任意層級的任意多個模塊及子模塊;而組件的定位是擁有特定功能的封裝塊,它有自己的獨(dú)立視圖、狀態(tài)數(shù)據(jù)和組件行為。與其他單頁庫相比,它們的職責(zé)更清晰,也易于理解。
【編寫模塊化】 Amaple 內(nèi)嵌了代碼模塊化功能,它允許將模塊文件、組件文件和插件文件多帶帶編寫并分類保存,這讓不熟悉nodejs構(gòu)建工具的開發(fā)者也能編寫模塊化的js代碼,當(dāng)然對于熟悉nodejs構(gòu)建工具的中高端開發(fā)者,你也完全可以使用webpack、babel、scss/less等工具輔助開發(fā)。
【MVVM】 Amaple 提供了更簡潔的動態(tài)模板引擎,使開發(fā)者更加專注于對數(shù)據(jù)的處理。
【原生Web化設(shè)計】 Amaple 沿用了許多原生Web開發(fā)的標(biāo)準(zhǔn),這樣可以最大化符合具有一定基礎(chǔ)的開發(fā)者的認(rèn)知范圍,如Amaple依舊使用onclick屬性綁定點(diǎn)擊事件,使用href屬性進(jìn)行跳轉(zhuǎn)頁面,使用設(shè)置action屬性提交表單,只是它們是瀏覽器無刷新的跳轉(zhuǎn),甚至可以創(chuàng)建像 ShadowDOM 那樣的組件,在組件內(nèi)使用特定子元素,看起來就像和、和的關(guān)系一樣。
Amaple 使用前置要求此框架的使用者可不需了解nodejs構(gòu)建工具,但必須掌握html、js和css的基礎(chǔ)知識。
Amaple 技術(shù)伙伴招募如果你是一位熱愛并具有豐富經(jīng)驗(yàn)的Web前端工程師,并希望創(chuàng)造一款優(yōu)秀的JavaScript框架或庫,請加入Amjs Team,點(diǎn)此查看伙伴招募詳情。
開發(fā)模式介紹 # 普通開發(fā)模式普通開發(fā)模式適合對Nodejs構(gòu)建工具不熟悉的初級開發(fā)者使用, Amaple 自身的代碼模塊化管理將會使你擺脫代碼纏繞的困擾。此外,Web單頁應(yīng)用需使用 http 協(xié)議進(jìn)行模塊的請求與跳轉(zhuǎn),為解決這個問題,我們特地提供了可快速啟動一個本地Web服務(wù)器的,具有一定文件結(jié)構(gòu)的 Amaple 開發(fā)包,開發(fā)者只需下載并按以下操作即可完成啟動。
[ 1 ]. 本地Web服務(wù)器依賴 Nodejs ,如沒有安裝請【點(diǎn)此下載Nodejs】并安裝。
[ 2 ]. 下載 Amaple 開發(fā)包【點(diǎn)此下載Amaple開發(fā)包】。
[ 3 ]. 解壓并進(jìn)入到開發(fā)包中,直接執(zhí)行啟動程序即可自動啟動本地Web服務(wù)器(windows系統(tǒng)運(yùn)行 start_win.bat ,macOS系統(tǒng)運(yùn)行 start_macOS ,程序會自動安裝所需依賴包并啟動一個本地Web服務(wù)器)。
[ 4 ]. 此時就可以在開發(fā)包的src目錄下進(jìn)行開發(fā),將對應(yīng)類型的代碼文件保存到對應(yīng)文件夾。
【注意】1、開發(fā)者每次打開的啟動程序來啟動本地Web服務(wù)器,等到開發(fā)完成后直接將src目錄下的代碼拷貝到生產(chǎn)環(huán)境即可;# Nodejs構(gòu)建開發(fā)模式
2、windows 8以上用戶 運(yùn)行啟動程序時請右鍵 以管理員身份運(yùn)行 打開,否則可能會導(dǎo)致環(huán)境變量錯誤的問題;
3、開發(fā)包并不是必須的,如果開發(fā)者使用帶有本地Web服務(wù)器的IDE進(jìn)行開發(fā),也可自行搭建項目,此時可通過 https://unpkg.com/amaple 獲取最新版本的Amaple.js文件。
對于熟悉Nodejs構(gòu)建工具的中高端開發(fā)者,可使用npm安裝 Amaple 。
npm install amaple --save
Nodejs環(huán)境下的構(gòu)建教程即將推出,敬請期待...
準(zhǔn)備好了嗎?開始學(xué)習(xí)Amaple:閱讀教程時需特別關(guān)注代碼中的注釋文字,它一般是這個功能的具體使用方法。
【Amaple教程】1. 啟動路由
【Amaple教程】2. 模塊
【Amaple教程】3. 模板指令與狀態(tài)數(shù)據(jù)(state)
【Amaple教程】4. 組件
【Amaple教程】5. 插件
【Amaple教程】6. 路由配置
【Amaple Github】歡迎pull request
Amaple技術(shù)交流如果你對 Amaple 有任何評價、建議或問題,可通過以下方式提交,或在此文章中直接評論,我們將會在最快的速度進(jìn)行回復(fù)。
提交一個issue
Amaple官方QQ群:674036951
Email:[email protected]
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/115593.html
摘要:體驗(yàn)優(yōu)先的單頁框架點(diǎn)此查看倉庫是專為單頁應(yīng)用而設(shè)計的基于頁面模塊化的框架,它可使開發(fā)者快速開發(fā)單頁應(yīng)用。使用前置要求此框架的使用者可不需了解構(gòu)建工具,但必須掌握和的基礎(chǔ)知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗(yàn)優(yōu)先的JavaScript單頁框架 Amaple (點(diǎn)此查看Github倉...
摘要:體驗(yàn)優(yōu)先的單頁框架點(diǎn)此查看倉庫是專為單頁應(yīng)用而設(shè)計的基于頁面模塊化的框架,它可使開發(fā)者快速開發(fā)單頁應(yīng)用。使用前置要求此框架的使用者可不需了解構(gòu)建工具,但必須掌握和的基礎(chǔ)知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗(yàn)優(yōu)先的JavaScript單頁框架 Amaple (點(diǎn)此查看Github倉...
摘要:開始編寫具體的代碼前,首先需啟動單頁模式并進(jìn)行簡單配置。我們在開發(fā)包的文件中調(diào)用函數(shù)并傳入一個對象進(jìn)行啟動路由并配置單頁應(yīng)用。繼續(xù)學(xué)習(xí)下一節(jié)教程模塊也可回顧上一節(jié)教程前言 開始編寫具體的代碼前,首先需啟動單頁模式并進(jìn)行簡單配置。在src/index.html中引入amaple.js框架文件后我們就可以使用am這個全局對象。我們在開發(fā)包的src/config.js文件中調(diào)用am.star...
閱讀 1084·2021-11-25 09:43
閱讀 706·2021-11-22 14:45
閱讀 3833·2021-09-30 09:48
閱讀 1072·2021-08-31 09:41
閱讀 1979·2019-08-30 13:52
閱讀 1986·2019-08-30 11:24
閱讀 1353·2019-08-30 11:07
閱讀 961·2019-08-29 12:15