我認爲理想的Javascript UI是怎麼樣的

時間 2019-11-16

原文原文鏈接

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

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

jQuery

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

<div id="tabs">
  <ul>...</ul>
  <div id="tab1">...</div>
</div>
<script>
$(function() {
  $( "#tabs" ).tabs();
});
</script>

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

extjs

這是一套很專業很龐大的UI，徹底由javascript來構造UI，省去了HTML和CSS，讓UI的語種更統一。javascript邏輯性很強，因此更爲複雜的互動性能夠更容易被實現。但徹底由javascript構造，代碼難以有可讀性，並且難以掌握。HTML其實都是很好的結構表現語言，但extjs直接把它們放棄了，就去掉了代碼表現力的優點。jquery

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等工具來構造，不過這也並沒有很差，只是某些狀況下仍不夠理想。後端

<body ng-controller="PhoneListCtrl">
  <ul>
    <li ng-repeat="phone in phones">
      {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>
  </ul>
</body>

React

與通常的MVVM不一樣，也與extjs不一樣，它主要是以javascript爲主，但它沒有拋棄HTML的優點，讓HTML在javascript中更天然，創造了JSX的語法。雖然語法看起來比較奇怪，但我認爲這是目前各取所長的最好的方案，然而React目前還不夠好，它有不少改進的空間，但JSX的路是對的。前端工程師

var ListItemWrapper = React.createClass({
  render: function() {
    return <li>{this.props.data.text}</li>;
  }
});
var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        {this.props.results.map(function(result) {
           return <ListItemWrapper key={result.id} data={result}/>;
        })}
      </ul>
    );
  }
});

理想結構

綜合以上架構，我認爲UI應該有如下特色：架構

代碼可讀性高，利於維護app
強大的邏輯表現力模塊化
模塊化，能夠複用並整合各個模塊

貌以目前尚未UI能夠徹底實現這些特色，不過不妨以JSX的方案假設一下，我但願有一個UI可讓我這樣寫代碼：

<products>
  <products_filter type="type1"/>
  <products_list type="type1" data="{{products}}">
    <div class="row">
      <label>{{attr.name}}</label>
      <div>{{attr.price}}</div>
    </div>
  </products_list>
</products>

<script type="text/jsx">
app.addModule('products_filter', function() {
  app.render(
    <form>
      <input name="keywords" type="text"/>
      <button>submit</button>
    </form>
  );
});

app.addModule('products_list', function(element) {
  var data = element.getAttribute('data');
  var row = element.getBody();
  app.render(
    <ul>
      {data.map(function(result) {
        return <li><row name="{result.name}" price="{result.price}" /></li>;
      })}
    </ul>
  );
});
</script>

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。