我以为抱负的Javascript UI是怎样的

2024年3月29日 187次阅读 来源: 猫之良品

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为例，典范代码以下：

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

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等东西来组织，不过这也并没有不好，只是某些情况下仍不够抱负。

<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应该有以下特性：

  1. 代码可读性高，利于保护

  2. 壮大的逻辑表现力

  3. 模块化，能够复用并整合各个模块

貌以现在还没有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控件的确是很好的要领，但我们更须要不依赖于后端言语的计划。

    原文作者：猫之良品
    原文地址: https://segmentfault.com/a/1190000003107159
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞