首頁>技術>

01. 概述

作為前端開發者,各種框架的層出不窮,促使我們要不斷學習才能防止落後,但是我們不可能做到每個框架都有學習的時間,我們只需要掌握流行的,坑少的即可。從以下三個方面了解目前流行的前端開發框架。

02. 跨多平臺開發框架

(1).uni-app--開發一次,多端覆蓋uni-app 是DCloud公司使用 Vue.js 開發跨平臺應用的前端框架,開發者編寫一套程式碼,可編譯到iOS、Android、H5、小程式等多個平臺。

框架圖

Github地址:https://github.com/dcloudio/uni-app

官網地址:https://uniapp.dcloud.io

(2).Taro–一次編寫,多端執行Taro 是由京東 - 凹凸實驗室打造的一套遵循 React 語法規範的多端統一開發框架。通過 Taro 的編譯工具,將原始碼分別編譯出可以在不同端(微信小程式、H***pp、快應用等)執行的程式碼。

Github地址:http://github.com/nervjs/taro

官網地址:http://taro.aotu.io/

多端 UI 元件庫:https://aotu.io/notes/2018/08/27/the-birth-of-taro-ui/

如果你會React ,很容易上手Taro。

03. 移動端混合開發框架

混合開發是指JS開發+原生渲染 一套程式碼,iOS 安卓都可使用。

(1).Flutter–極速構建漂亮的原生應用Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高品質的原生使用者介面。Flutter Framework是一個完全由Dart語言構建的SDK,它實現了一整套自底而上的基礎庫。

框架結構

官網地址:https://flutterchina.club

(2).React Native--使用JavaScript和React編寫原生移動應用React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架,是Facebook早先開源的JS框架 React 在原生移動應用平臺的衍生產物,目前支援iOS和安卓兩大平臺。

框架結構

Github地址:https://github.com/facebook/react-native

官網地址:https://reactnative.cn

(3).Weex–Web 開發體驗來開發高效能原生應用的框架

Weex 致力於使開發者能基於通用跨平臺的 Web 開發語言和開發經驗,來構建 Android、iOS 和 Web 應用。簡單來說,在集成了 WeexSDK 之後,你可以使用 JavaScript 語言和前端開發經驗來開發移動應用。

Vue.js 和 Rax 是最廣泛應用於 Weex 開發的前端框架,也是目前功能最全、最穩定的方案。

框架結構

Github地址:https://github.com/apache/incubator-weex?spm=a2c7j.-zh-.0.0.45dac8eec3weZx

官網地址:https://weex.apache.org/zh/

04. 前端開發框架

(1).Vue–漸進式JavaScript 框架

Vue框架是用於構建使用者介面的漸進式框架。它是可以自底向上逐層應用。Vue 的核心庫只關注檢視層,上手簡單而且還便於與第三方庫進行整合。

Github地址:https://github.com/vuejs/vue

官網地址:https://weex.apache.org/zh/

(2).React–用於構建使用者介面的 JavaScript 庫

React 使建立互動式 UI 變得輕而易舉。為你應用的每一個狀態設計簡潔的檢視,當資料改變時 React 能有效地更新並正確地渲染元件。

Github地址:https://github.com/facebook/react/

官網地址:https://react.docschina.org

(3).Angular–一套框架,多種平臺移動端 & 桌面端

Angular是一個強大的前端框架,其強大之處主要是可以把靜態頁面與動態資料繫結起來。首先angular是一個mvc框架,它與jquery不同之處在於,前者致力於mvc程式碼解耦,採用model,controller以及view方式去組織程式碼,而後者提供給你了很多APi函式,你可以不用寫很多原生js去實現比較複雜的效果,比如說動畫,$.animate,

Github地址:https://github.com/angular/angular

官網地址:https://www.angular.cn

前端框架少不了UI元件框架的結合。

05. 附錄

參考:https://my.oschina.net/u/3308739/blog/3098156

原文連結:https://blog.csdn.net/dengjin20104042056/article/details/100606445

最新評論
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • 小程式學習日誌2:了解程式碼,初步學習程式碼