我认为理想的Javascript UI是怎么样的

Astrian 发布于2019-08-21 10:37 / 1255人阅读

摘要：虽然语法看起来比较奇怪，但我认为这是目前各取所长的最好的方案，然而目前还不够好，它有很多改进的空间，但的路是对的。

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.name}}
      {{attr.price}}

这样看起来有就像ASP.NET的控件，ASP.NET控件的确是很好的方法，但我们更需要不依赖于后端语言的方案。

GPU云服务器云服务器怎么提交我的建站需求我阿里云备用的域名怎么找我购买的阿里云服务器怎么登录微博怎么不让别人看到我的关注

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85891.html

简析React 和 Redux 的特点和关系

摘要：这对复杂问题定位是有好处的。同时，也是纯函数，与的是纯函数呼应。强约束约定，增加了内聚合性。通过约定和全局的理解，可以减少的一些缺点。约定大于配置也是框架的主要发展方向。 React+Redux非常精炼，良好运用将发挥出极强劲的生产力。但最大的挑战来自于函数式编程（FP）范式。在工程化过程中，架构（顶层）设计将是一个巨大的挑战。要不然做出来的东西可能是一团乱麻。说到底，传统框架与rea...

iOS122 2019-08-21 11:35 评论0 收藏0
[转]Node.js给前端带来了什么

摘要：两个独立的层即使这种技术风靡全球之后，前端工程师的主要工作也都是局限于浏览器窗口之内的。这是目前最主流的一种前后端分工方式带来的改变一发布，立刻在前端工程师中引起了轩然大波，前端工程师们几乎立刻对这一项技术表露出了相当大的热情和期待。转载自：http://www.w3ctech.com/topic/37 原文: https://www.nczonline.net/blog/201...

BearyChat 2019-08-19 17:43 评论0 收藏0
我对移动端适配的了解

摘要：随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。方案一固定高度，使其宽度自适应这也是我接触移动端适配第一次使用的方案。不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...

import. 2019-08-30 14:16 评论0 收藏0
我对移动端适配的了解

摘要：随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。方案一固定高度，使其宽度自适应这也是我接触移动端适配第一次使用的方案。不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...

snowLu 2019-08-22 15:45 评论0 收藏0