国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

我認為理想的Javascript UI是怎么樣的

Astrian / 1254人閱讀

摘要：雖然語法看起來比較奇怪，但我認為這是目前各取所長的最好的方案，然而目前還不夠好，它有很多改進的空間，但的路是對的。

HTML與CSS已經可以表現任何的用戶界面，CSS3甚至可以表現動作，但仍需要動態交互性，這都需要javascript來彌補，HTML, CSS, Javascript就構成了WEB UI，缺一不可。但HTML與Javascript這兩種差異十分大的語言在混合成UI卻并不容易，這是因為javascript本來就不適合與HTML混合使用，但到了現在javascript已經是前端的主流，有著不可動搖的地位，所以如果更合理地把這三種元素整合成了前端工程師頭痛的問題。

WEB技術已經發展二十多年的今天，又有那些解決方案呢？我先說一說我接觸過的方案。

jQuery

jQuery是大流行，絕大部分WEB控件都基于它，WEB UI離不開它。但jQuery更多被視為工具庫，而不是一套UI，它沒有一套UI的開發規范，各式各樣的UI有各種使用方法，讓人不得不查詢文檔，而很多UI控件之間難以交互，可能需要寫一大堆callback實現交互。以jQuery UI為例，經典代碼如下：


  
    ...

  
...

jQuery UI代表著大多數jQuery插件的使用方法，可以看得出代碼也相當的簡潔，只要有固定的HTML結構與一個觸發源基本就成了。不過這僅僅只是表現一種效果，互動性比較弱。例如它現在需要CLICK TAB或者HOVER可以進行元素切換，我想其它插件自動激活它的切換就需要寫callback，有些效果默認沒有，我需要擴展新的效果，需要寫不少javascript代碼。

extjs

這是一套很專業很龐大的UI，完全由javascript來構造UI，省去了HTML和CSS，讓UI的語種更統一。javascript邏輯性很強，所以更為復雜的互動性可以更容易被實現。但完全由javascript構造，代碼難以有可讀性，而且難以掌握。HTML其實都是很好的結構表現語言，但extjs直接把它們放棄了，就去掉了代碼表現力的優勢。

       Ext.onReady(function () {
            //創建一個窗體
            var win = new Ext.Window({
                width: 300,
                height:300,
                items: [],
                modal: true,
                buttonAlign: "center",
                buttons: [{
                    text: "測試", id: "btnTest", handler: function () {
                        Ext.Msg.show({
                            title: "詢問",
                            msg: "您喜歡 ExtJs 嗎？",
                            fn: processResult,
                            icon: Ext.Msg.QUESTION,
                            buttons: Ext.Msg.YESNO
                        });
                    }
                }
                ]
            });
            win.show();
        });
AngularJS

無疑是MVVM的代表作，其最大優點是大量使用了HTML的構造方法并彌補HTML的互動需要，讓代碼變得更為優雅。使用它來構造富客戶端很適合，不過組件概念比較弱，代碼復用性不高，組件一般用jquery等工具來構造，不過這也并無不好，只是某些情況下仍不夠理想。


  
    
    
  • 
      {{phone.name}}
    
    {{phone.snippet}}
    
    
    •
React

與一般的MVVM不同，也與extjs不同，它主要是以javascript為主，但它沒有拋棄HTML的優勢，讓HTML在javascript中更自然，創造了JSX的語法。雖然語法看起來比較奇怪，但我認為這是目前各取所長的最好的方案，然而React目前還不夠好，它有很多改進的空間，但JSX的路是對的。

var ListItemWrapper = React.createClass({
  render: function() {
    return 
  • {this.props.data.text}
    • ;
  }
});
var MyComponent = React.createClass({
  render: function() {
    return (
      
      
        {this.props.results.map(function(result) {
           return ;
        })}
      
    
    );
  }
});
    理想結構

    綜合以上架構，我認為UI應該有以下特點：

    代碼可讀性高，利于維護

    強大的邏輯表現力

    模塊化，可以復用并整合各個模塊

    貌以目前還沒有UI可以完全實現這些特點，不過不妨以JSX的方案假設一下，我希望有一個UI可以讓我這樣寫代碼：

    
  
  
    
    
      
      
    {{attr.price}}

    這樣看起來有就像ASP.NET的控件，ASP.NET控件的確是很好的方法，但我們更需要不依賴于后端語言的方案。

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85891.html

    相關文章

    • 簡析React 和 Redux 的特點和關系

      摘要：這對復雜問題定位是有好處的。同時，也是純函數，與的是純函數呼應。強約束約定，增加了內聚合性。通過約定和全局的理解，可以減少的一些缺點。約定大于配置也是框架的主要發展方向。 React+Redux非常精煉，良好運用將發揮出極強勁的生產力。但最大的挑戰來自于函數式編程（FP）范式。在工程化過程中，架構（頂層）設計將是一個巨大的挑戰。要不然做出來的東西可能是一團亂麻。說到底，傳統框架與rea...

      iOS122 評論0 收藏0

    • [轉]Node.js給前端帶來了什么

      摘要：兩個獨立的層即使這種技術風靡全球之后，前端工程師的主要工作也都是局限于瀏覽器窗口之內的。這是目前最主流的一種前后端分工方式帶來的改變一發布，立刻在前端工程師中引起了軒然大波，前端工程師們幾乎立刻對這一項技術表露出了相當大的熱情和期待。 轉載自：http://www.w3ctech.com/topic/37 原 文: https://www.nczonline.net/blog/201...

      BearyChat 評論0 收藏0

    • 我對移動端適配的了解

      摘要：隨著移動端的發展，在手機上看電腦端的頁面已成為非常普及現象。方案一固定高度，使其寬度自適應這也是我接觸移動端適配第一次使用的方案。 不知不覺做前端已經兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應用(手機廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發展對于大前端發展是喜聞樂見的，這次的快應用的手機廠...

      import. 評論0 收藏0

    • 我對移動端適配的了解

      摘要：隨著移動端的發展，在手機上看電腦端的頁面已成為非常普及現象。方案一固定高度，使其寬度自適應這也是我接觸移動端適配第一次使用的方案。 不知不覺做前端已經兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應用(手機廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發展對于大前端發展是喜聞樂見的，這次的快應用的手機廠...

      snowLu 評論0 收藏0

    發表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <