漫談GUI開發(fā)—各種平臺(tái)UI開發(fā)概況

前言：

在看這邊文章前，可以建議看下：圖形界面操作系統(tǒng)發(fā)展史——計(jì)算機(jī)界面發(fā)展歷史回顧

從CS到BS，現(xiàn)在的前端開發(fā)，其實(shí)也是GUI開發(fā)范疇。現(xiàn)今

各平臺(tái)的UI開發(fā)概況

HTML&CSS，Winform&WPF,Universal Windows APP,JAVA GUI, Android,iOS……

不一而足，先讓我們看看

JAVA GUI

我覺得java是最好學(xué)的語言。也是像我這種非科班出生的，踏入碼農(nóng)行業(yè)的敲門磚（看C c++ 學(xué)了一年，也就hello word，會(huì)寫幾個(gè)demo界面）。

做java開發(fā)，從AWT/Swing、SWT/JFace，這個(gè)有IBM的大佬總結(jié)，傳送門：https://www.ibm.com/developerworks/cn/java/j-gui/

我覺得，無論是c還是java，還是 后面的hmlt ，UI開發(fā) 總可以借鑒基本的 Swing Class 樹

Object
    *Component
        Container
            *JComponent
                *AbstractButton
                    JButton
                    JMenuItem
                        JCheckBonMenuItem
                        JMenu
                        JRadioButonMenuItem
                    *JToggleButton
                        JCheckBox
                        JRadioButton
                Box 
                Filler
                JColorChooser
                JComboBox
                JDesktopIcon
                JFileChooser
                JInternalFrame
                JLabel
                JLayeredPane
                    JDesktopPane
                JList
                JMenuBar
                JOptionPane
                JPanel
                JPopupMenu
                JProgressBar
                JRootPane
                JScrollBar
                JScrollPane
                JSeparator
                JSlider
                JSplitPane
                JTabbedPane
                JTable
                JTableHeader
                *JTextComponent
                    JEditorPane
                        FrameEditorPane
                        JTextPane
                    JTextArea
                    JtextField
                        JPasswordField
                JToolBar
                JToolTip
                JTree
                JViewport
                    ScrollableTabViewport
            Panel
                Applet
                    JApplet
            Window
                Dialog
                    JDialog
                Frame
                    JFrame
                JWindow

Windows桌面應(yīng)用程序開發(fā)Winform&WPF

Winform是XP時(shí)代的Windows 桌面程序開發(fā)技術(shù)。

采用C#語言開發(fā)UI和邏輯，沒有使用標(biāo)簽語言寫UI。

采用事件驅(qū)動(dòng)方法。

Winform現(xiàn)在基本被淘汰了。

Winform是上一代的主流桌面應(yīng)用程序開發(fā)開發(fā)技術(shù)，這個(gè)我從來沒有用過，現(xiàn)在也基本不再使用了。

WPF是新一代微軟圖形界面開發(fā)技術(shù)。它是隨著Windows Vista推出的。.NET Framework 3.0的一部分。它提供了統(tǒng)一的編程模型、語言和框架，真正做到了分離界面設(shè)計(jì)人員與開發(fā)人員的工作；同時(shí)它提供了全新的多媒體交互用戶圖形界面。

采用XAML標(biāo)簽式語言開發(fā)UI，可以在Expression Blend可視化設(shè)計(jì)開發(fā)。美工也可以輕易上手。XAML支持DataBind, Data(Item)Template, Style, Storyboard, Rescoure,自定義控件等技術(shù)，開發(fā)速度快。

支持事件驅(qū)動(dòng)(Code behind)或者數(shù)據(jù)驅(qū)動(dòng)(MVVM)開發(fā)模式

使用GC回收垃圾，XMAL和C#將編譯成CLR中間運(yùn)行語言，效率比較低，占用內(nèi)存大

WPF的技術(shù)理念非常先進(jìn)，開發(fā)過程也非常友好，也可以做出極為絢麗的界面，可是開發(fā)出來的應(yīng)用體積較大，運(yùn)行效率比較低，占用內(nèi)存大，所以沒有普及開來。(大部分我們常見的桌面應(yīng)用都是C&C++開發(fā))但是因?yàn)殚_發(fā)效率高，所以很多企業(yè)內(nèi)部經(jīng)常使用該技術(shù)。

Windows 10上的通用應(yīng)用Universal WIndows APP(UWP)

Universal Windows App（UWP）也就是通用Window App 是微軟最新的圖形應(yīng)用開發(fā)技術(shù)，它是基于WPF技術(shù)演進(jìn)而來的。

UWP繼承了所有WPF的優(yōu)點(diǎn)，還可以使用C++和HTML&Javascript來開發(fā)，和WPF編譯成中間代碼不同，UWP直接將代碼編譯成機(jī)器碼直接運(yùn)行，極大的提高了效率。一次開發(fā)編譯，可以同時(shí)在Windows 10,Windows 10 Mobile, XBOX，物聯(lián)網(wǎng)IoT設(shè)備等其他Windows平臺(tái)上運(yùn)行

采用和iOS APP一樣的沙盒機(jī)制，一樣也有電話本，傳感器，地圖，推送等API。

采用響應(yīng)式布局，可以適配任何分辨率等。

大量使用異步API，保證界面響應(yīng)為最高級(jí)別。

我開發(fā)UWP并不多，但是我接觸WPF的時(shí)間夠長(zhǎng)，所以UWP上手毫無壓力。相比WPF運(yùn)行在.NET運(yùn)行時(shí)里，UWP是可以編譯成Native Code運(yùn)行，所以UWP運(yùn)行效率更高，UI更為流暢。它是目前微軟最為主推的開以技術(shù)。

Android

android開發(fā)，主要一xml來做界面（當(dāng)然蛋疼手工寫也可以。

一個(gè)界面xml對(duì)于一個(gè)active，active與active 橋接intent ，

但是，我更加喜歡iOS的界面開發(fā)模式（storybord，所以這里略過。

不過我覺得會(huì)ios開發(fā)的，上手android開發(fā)業(yè)不難

iOS

iOS應(yīng)用是基于Cocoa框架上的，早期的Cocoa是用來開發(fā)Mac 應(yīng)用的，后來加入了Cocoa touch層API用于iOS。

采用XIB或者Storyboard可視化搭建UI，也可以使用手寫純代碼來開發(fā)UI。

采用Objective C 或者 Swift語言開發(fā)邏輯。

在Iphone5 加入多種分辨率后，蘋果引入了Autolayout自動(dòng)布局，它是一種基于約束的，描述性的布局系統(tǒng)。

默認(rèn)嚴(yán)格遵守MVC設(shè)計(jì)模式，現(xiàn)以也可以使用MVVM開發(fā)框架。

采用ARC實(shí)現(xiàn)了自動(dòng)內(nèi)存管理。

iOS開發(fā)技術(shù)還有許多要點(diǎn)，這里就省略了，相信看到這篇文章的人都比較熟悉。

各平臺(tái)UI開發(fā)小結(jié)

從上面可以看出，對(duì)于UI構(gòu)建，都是采用類HTML語言。一個(gè)HTML標(biāo)簽表示一個(gè)View元素。它即可以當(dāng)其他View的容器，也可以當(dāng)內(nèi)容或者數(shù)據(jù)的容器?？梢杂锚?dú)立的Style文件來表示樣式，也可以直接放在標(biāo)簽的屬性里面。每個(gè)標(biāo)簽都可以有Name或者id屬性來讓js或者其他語言直接操作。

iOS其實(shí)也和上面的UI開發(fā)范式差不多，Storyboard內(nèi)部其實(shí)也是一個(gè)XML文件，只不過我們不能直接編輯，只能可視化設(shè)計(jì)和通過代碼操作。

Web界面的開發(fā)HTML&CSS

Web界面是以HTML標(biāo)簽的形式構(gòu)建UI，它是HTML語言的最基本的單位。

用尖括號(hào)包圍的關(guān)鍵詞如

來表示UI元素，通常是成對(duì)出現(xiàn)。

如果需要在容器標(biāo)簽里放其他HTML單位，需要放在標(biāo)簽對(duì)里面。

一些HTML元素屬性，放在第一個(gè)HTML標(biāo)簽里。以鍵值對(duì)的形式存在，比如type = 'text'。

使用Form來提交表單，Http(HTTPS)協(xié)議和服務(wù)器通訊。

通常通過CSS來控制HTML元素的外觀。

通常通過Javescript來控制HTML元素。采用Ajax技術(shù)異步通信，實(shí)現(xiàn)局部刷新等。

這里就不給示例了，總是來說前端Web開發(fā)博大精深，新的技術(shù)框架層出不窮，當(dāng)一個(gè)前端工程師也不容易。

從backbone，angular，到現(xiàn)在react+redux ，層出不窮，疲于奔命。你學(xué)了ie，還有firefox，還有chrome，……

一如前端深似海。

但是，前端的好處就是，統(tǒng)一GUI開發(fā)。我并不喜歡RN的開發(fā)模式，覺得還是

html+css+js 自己定制webkit殼，然后，你想怎么玩就怎么玩。（俗話中webapp……

吃飯去了，不扯了……

閑暇之余再來侃大山！

參考文章：http://www.open-open.com/lib/view/open1463552171634.html

文有不妥請(qǐng)告知，轉(zhuǎn)載請(qǐng)注明來源:漫談GUI開發(fā)-各種平臺(tái)UI開發(fā)概況 - xml - 周陸軍的個(gè)人網(wǎng)站