Amaple.js框架詳細介紹

時間 2019-11-10

標籤 amaple.js amaple 框架詳細介紹欄目 JavaScript 简体版

原文原文鏈接

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 「體驗優先」 的設計理念。css

Amaple 特性簡介

【開放式插件】支持全部AMD和IIFE規範的第三方js庫做爲 Amaple 的插件。
【高級虛擬DOM】與其餘帶有虛擬DOM功能的js庫相比， Amaple 實現了性能更好的虛擬DOM，它再也不須要開發者提供可識別的key標誌，也能自動判斷可複用的DOM元素，並在從新排序的過程當中自動計算出最少的移動步驟進行移動。
【模塊化】html
- 【頁面模塊化】單頁Web應用的特色之一是將頁面劃分爲多個模塊，URL跳轉時更新模塊的內容。在 Amaple 中存在 模塊(Module) 和 組件(Component) 兩種模塊化單位，模塊是單頁Web應用更新的最小單位，它管控URL跳轉時的內容替換、參數更新等一系列變化，並且容許開發者定義任意層級的任意多個模塊及子模塊；而組件的定位是擁有特定功能的封裝塊，它有本身的獨立視圖、狀態數據和組件行爲。與其餘單頁庫相比，它們的職責更清晰，也易於理解。
- 【編寫模塊化】 Amaple 內嵌了代碼模塊化功能，它容許將模塊文件、組件文件和插件文件單獨編寫並分類保存，這讓不熟悉nodejs構建工具的開發者也能編寫模塊化的js代碼，固然對於熟悉nodejs構建工具的中高端開發者，你也徹底可使用webpack、babel、scss/less等工具輔助開發。
【MVVM】 Amaple 提供了更簡潔的動態模板引擎，使開發者更加專一於對數據的處理。
【原生Web化設計】 Amaple 沿用了許多原生Web開發的標準，這樣能夠最大化符合具備必定基礎的開發者的認知範圍，如Amaple依舊使用onclick屬性綁定點擊事件，使用href屬性進行跳轉頁面，使用<form>設置action屬性提交表單，只是它們是瀏覽器無刷新的跳轉，甚至能夠建立像 ShadowDOM 那樣的組件，在組件內使用特定子元素，看起來就像<video>和<source>、<select>和<option>的關係同樣。

Amaple 使用前置要求

此框架的使用者可不需瞭解nodejs構建工具，但必須掌握html、js和css的基礎知識。前端

Amaple 技術夥伴招募

若是你是一位熱愛並具備豐富經驗的Web前端工程師，並但願創造一款優秀的JavaScript框架或庫，請加入Amjs Team，點此查看夥伴招募詳情。node

開發模式介紹

# 普通開發模式

普通開發模式適合對Nodejs構建工具不熟悉的初級開發者使用， Amaple 自身的代碼模塊化管理將會使你擺脫代碼纏繞的困擾。此外，Web單頁應用需使用 http 協議進行模塊的請求與跳轉，爲解決這個問題，咱們特意提供了可快速啓動一個本地Web服務器的，具備必定文件結構的 Amaple 開發包，開發者只需下載並按如下操做便可完成啓動。webpack

[ 1 ]. 本地Web服務器依賴 Nodejs ，如沒有安裝請【點此下載Nodejs】並安裝。
[ 2 ]. 下載 Amaple 開發包【點此下載Amaple開發包】。
[ 3 ]. 解壓並進入到開發包中，直接執行啓動程序便可自動啓動本地Web服務器（windows系統運行 start_win.bat ，macOS系統運行 start_macOS ，程序會自動安裝所需依賴包並啓動一個本地Web服務器）。
[ 4 ]. 此時就能夠在開發包的src目錄下進行開發，將對應類型的代碼文件保存到對應文件夾。

【注意】一、開發者每次打開的啓動程序來啓動本地Web服務器，等到開發完成後直接將 src目錄下的代碼拷貝到生產環境便可；
二、 windows 8以上用戶 運行啓動程序時請右鍵 以管理員身份運行 打開，不然可能會致使環境變量錯誤的問題；
三、開發包並非必須的，若是開發者使用帶有本地Web服務器的IDE進行開發，也可自行搭建項目，此時可經過 https://unpkg.com/amaple 獲取最新版本的Amaple.js文件。