精华内容
下载资源
问答
  • 我们大多数人开始为自己编写组件的原因:我们有一个问题,然后决定通过构建一个组件来解决它。 有时我们发现自己想要在代码库的新位置解决相同的问题,所以我们提取组件并对其进行重构,使其可重用。然后我们想在...

    很少有人最初编写Vue组件时打算将其开源。我们大多数人开始为自己编写组件的原因:我们有一个问题,然后决定通过构建一个组件来解决它。

    有时我们发现自己想要在代码库的新位置解决相同的问题,所以我们提取组件并对其进行重构,使其可重用。然后我们想在一个不同的项目中使用它,所以我们把它移到一个独立的包中。然后我们想“嘿,为什么不把这个分享给全世界呢?”,所以我们开放了组件的源代码。

    一方面,这意味着对于任何在Vue工作的人来说,都有大量且不断增长的开源组件可用性(在npmjs.com上搜索“Vue”,会发现超过12000个包)。

    另一方面,由于这些组件中的大多数都是从特定的环境演化而来的,并且并不是所有人都有跨许多环境重用组件的设计经验,所以这些组件中的许多都不能很好地利用Vue生态系统。

    "play nice"是什么意思?在高层次上,它意味着以Vue开发人员觉得自然的方式工作,并且易于扩展和集成到任何类型的应用程序中。

    在探索了广泛的开源组件之后,我认为下面是如何制作一个运行良好的Vue组件:

    1. 实现v模型兼容性

    2. 对事件透明

    3. 将属性分配给正确的元素

    4. 接受键盘导航的浏览器规范

    5. 优先使用事件而不是回调

    6. 限制在组件样式

    实现v模型兼容性

    对于本质上是表单字段的组件——无论是自动完成搜索字段、日历日期字段,还是在单个字段周围应用附加功能以允许用户指定数据的任何其他字段——惯用性的最重要方法之一是支持v-model。

    根据组件上的vue指南,组件上的v-model实际上通过传入值属性和应用输入事件处理程序来工作。

    例如,如果我们实现了一个包装输入的日期选择器,我们将使用值prop初始化我们的datepicker,并在选择时发出一个输入事件,如下所示:

    import datepicker from 'my-magic-datepicker';
    
    export
    default {
            props:
            ['value'],
            mounted() {
                datepicker(this.$el, {
                    date: this.value,
                    onDateSelected: (date) = >{
                        this.$emit('input', date);
                    },
                });
            }
        }

    对事件透明

    为了实现v模型,组件需要实现输入事件。但其他活动呢?比如单击事件、键盘处理等等?虽然原生事件作为HTML冒泡,但是Vue的事件处理在默认情况下并不冒泡。

    例如,除非我做一些具体的事情,否则这是行不通的:

    <my-textarea-wrapper @focus="showFocus">

    除非我们在实际发出焦点事件的包装器组件中编写代码,否则将永远不会调用showFocus事件处理程序。然而,Vue确实为我们提供了一种通过编程访问应用于组件的侦听器的方法,因此我们可以将它们分配到正确的位置:$listener对象。

    再一想,原因是显而易见的:这允许我们将侦听器传递到组件中的正确位置。例如,我们的文本区域包装组件:

    <div class="my-textarea-wrapper">
      <textarea v-on="$listeners"></textarea>
    </div>

    现在发生在textarea上的事件就是那些被传递的事件。

    为正确的元素分配属性

    如何处理属性,例如用于文本区域的行或用于在任何元素上添加简单工具提示的标题标记?

    默认情况下,Vue接受应用于组件的属性,并将它们放在组件的根元素上。这经常发生,但并不总是你想要的。然而,如果我们再次从上面查看textarea包装器,在这种情况下,将属性应用到textarea本身而不是div将更有意义。

    为此,我们告诉组件默认情况下不要应用这些属性,而是直接使用$attrs对象应用它们。在我们的JavaScript:

    export
    default {
            inheritAttrs:
            false,
        }

    然后在我们的模板中:

    <div class="my-textarea-wrapper">
      <textarea v-bind="$attrs"></textarea>
    </div>

    接受键盘导航的浏览器规范

    可访问性和键盘导航是web开发中最常被遗忘的部分之一,如果您编写的组件是为了在生态系统中发挥良好的作用,那么正确使用它们是最重要的事情之一。

    从根本上说,这意味着要确保组件符合浏览器规范:tab键应该允许选择表单字段。Enter通常用于激活按钮或链接。

    W3C网站上可以找到通用组件的完整键盘导航建议列表。遵循这些建议将允许您的组件在任何应用程序中使用,而不仅仅是那些不关心可访问性的应用程序。

    优先使用事件而不是回调

    当涉及到从组件到其父组件的数据和用户交互的通信时,有两个常见的选项:道具中的回调函数和事件。由于Vue的自定义事件不像原生浏览器事件那样弹出,所以这两个事件在功能上是等价的,但对于可重用组件,我几乎总是建议在回调期间使用事件。为什么?

    Fullstack Radio的一期节目中,Vue核心团队成员Chris Fritz给出了以下理由:

    1. 使用事件使父母可以非常清楚地知道什么。它在“我们从父母那里获得的东西”和“我们发送给父母的东西”之间创造了明确的分离。

    2. 您可以直接在事件处理程序中使用表达式,从而为简单的情况提供极其紧凑的事件处理程序

    3. 它更具惯用性--Vue示例和文档倾向于使用事件从组件到其父组件进行通信。

    幸运的是,如果您当前正在使用回调函数方法,则可以很容易地修改组件以发出事件。使用回调的组件可能如下所示:

    // my-custom-component.vue
    export
    default {
            props:
            ['onActionHappened', ...] methods() {
                handleAction() {... // your custom code
                    if (typeof this.onActionHappened === 'function') {
                        this.onActionHappened(data);
                    }
                }
            }
        }

    然后当它被包含时,它看起来像:

    <my-custom-component :onActionHappened="actionHandler" />

    更改为基于事件的方法将如下所示:

    // my-custom-component.vue
    export
    default {
            methods() {
                handleAction() {... // your custom code
                    this.$emit('action-happened', data);
                }
            }
        }

    父结点会变成:

    <my-custom-component @action-happened="actionHandler" />

    限制组件内部样式

    Vue的单文件组件结构允许我们将样式直接嵌入到组件中,特别是当与范围相结合时,它为我们提供了一种很好的方式,以一种不会影响应用程序其他部分的方式交付完全打包的样式化组件。

    由于该系统的强大功能,将所有组件样式放入组件并运送完全样式的组件可能很诱人。而且因为组件样式通常包含在全局样式表之后,所以它可能会变成一个特殊的噩梦来覆盖它。

    为了防止这种情况,我建议您的组件(颜色,边框,阴影等)在结构上不需要的任何CSS应该从组件文件本身中排除,或者可以关闭。相反,请考虑发布可自定义的SCSS部分,以便用户根据自己的内容进行自定义。

    仅运送SCSS的缺点是它需要组件的用户将SCSS拉入他们的样式表编译中,或者看到一个非常简单的组件。为了充分利用这两个方面,您可以使用可以通过支柱关闭的类来为您的文件内样式设置范围,以便为想要自定义样式的用户提供支持。

    如果您将SCSS构建为mixin,则可以使用相同的SCSS partial,您的用户可以使用它来获得更多自定义样式。

    <template>
      <div :class="isStyledClass">
        <!-- my component --></div>
    </template>

    然后在JavaScript中:

    export
    default {
            props:
            {
                disableStyles:
                {
                    type:
                    Boolean,
                default:
                    false
                }
            },
            computed: {
                isStyledClass() {
                    if (!this.disableStyles) {
                        return 'is-styled';
                    }
                },
            }

    然后,您可以

    @import 'my-component-styles';
    .is - styled {
             @include my - component - styles();
    }

    这将允许开箱即用的样式是无论你的愿望,但用户想要定制不再需要创建高度专一覆盖,他们只是关闭样式通过设置disableStyles道具为真,可以使用mixin的设置或从头开始重塑自己的一切纯粹。

    更多web开发知识,请查阅 HTML中文网 !!

    展开全文
  • 构建angular组件库 本文由Vildan Softic... 它是对Google流行JavaScript框架的完全重写,并且出于所有正确的原因而不断成为新闻。 与以前的版本相比,它提供了一些重大改进,因此我们今天选择它来构建一些漂亮的图...

    构建angular组件库

    本文由Vildan Softic同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态!

    作为Web开发人员,如果您不能错过任何内容,那就是Angular 2 它是对Google流行JavaScript框架的完全重写,并且出于所有正确的原因而不断成为新闻。 与以前的版本相比,它提供了一些重大改进,因此我们今天选择它来构建一些漂亮的图表。

    对于图表,我们将使用FusionCharts提供JavaScript图表库。 它提供了大量图表,并与所有主要浏览器兼容。 尽管FusionCharts提供了专用于Angular的插件 ,但它尚未与Angular 2兼容。因此,我将不使用它,而是直接使用JavaScript和Angular 2进行编码。( 注意:如果您正在使用,建议您使用该插件您的应用中的Angular 1 )。

    我们将要绘制的图表将描述一个有趣的统计数据-五家顶级高科技公司(亚马逊,苹果,Facebook,谷歌和微软)的收入,并且可以选择在2014年和2015年的收入数据之间进行切换。通过在Angular 2中创建图表的逐步过程。构建基本图表之后,我们将介绍一些高级主题,例如添加注释和更新图表数据。

    与以往一样,您可以从我们的GitHub存储库下载本教程的代码,或者可以跳到文章结尾的完成图表的演示

    Angular 2和Angular 1.x

    Angular 2与以前的主要版本(Angular 1.x)相比有一些重大变化,例如,它对诸如TypeScript和Dart之类的语言的支持以及它计算DOM更新的方式。 如果您想了解有关Angular 1概念和技术如何映射到Angular 2的更多信息,可以查看官方快速参考 如果您有兴趣将应用程序从Angular 1.x迁移到Angular 2,则可以阅读官方迁移指南

    尽管Angular 2支持TypeScript和Dart,但由于熟悉,我们将在本教程中使用本机JavaScript编写Angular 2应用程序。 使用TypeScript或Dart也将引入不必要的构建步骤。

    建立

    有多种方法可以启动和运行Angular 2项目。 最简单的方法可能是前往官方网站,并按照其5分钟快速入门教程进行操作

    但是,此方法的一个小警告是,它依赖于您在计算机上安装了Node和npm。 我们确实为此提供了指南 ,但是如果您希望在不安装这些指南的情况下遵循本教程,则可以使用以下模板:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Angular 2 FusionCharts Demo</title>
    
        <!-- 1. Load custom CSS & fonts-->
        <link rel="stylesheet" href="styles.css">
        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>
    
        <!-- 2. Load Angular 2 specific libraries -->
        <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>
    
        <!-- 3. Load FusionCharts library-->
        <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
    
        <!-- 4. Load component -->
        <script src='main.js'></script>
      </head>
      <body>
    
        <!-- 5. Display the application -->
        <angular-chart>Loading...</angular-chart>
      </body>
    </html>

    创建图表组件

    组件是任何Angular 2应用程序的构建块。 它们是包含视图和一些逻辑的可重用代码段。 如果您熟悉Angular 1,则可以将它们视为带有模板和控制器的指令。

    这是图表组件的基础:

    (function(chartApp){
      chartApp.AppComponent = ng.core.Component({
        selector: 'angular-chart',
        template: '<div>Chart will render here</div>'
      }).Class({
        constructor: function(){}
      });
    
      document.addEventListener('DOMContentLoaded', function() {
        ng.platform.browser.bootstrap(chartApp.AppComponent);
      });
    })(window.chartApp || (window.chartApp = {}));

    让我们花一点时间看看发生了什么。

    我们从IIFE( 立即调用的函数表达式 )开始,该IIFE用于为应用程序命名空间。 我们将其传递给window.chartApp作为参数,如果未定义,则将其初始化为空对象。 这是我们的应用程序将要存在的地方-在全局对象的单个属性中。

    在IIFE内部,我们通过链接ng.core (Angular核心组件的集合)中的ComponentClass方法来创建组件( AppComponent )。 我们正在向Component方法传递一个包含以下属性的配置对象:

    • selector :一个简单CSS选择器,用于指定宿主HTML元素。 每当遇到与该选择器匹配HTML元素时,Angular都会创建并显示该组件的实例。

    • template :渲染组件时要使用的模板。 当前,我们正在传递包含占位符<div>元素的字符串,但理想情况下,我们应将其移至其自己的模板中。

    Class方法中,我们为模板添加行为和事件绑定。

    定义了基本组件之后,我们将使用Angular的浏览器启动函数对其进行初始化。

    此时,您应该能够在浏览器中运行代码,并看到消息“图将在此处呈现”。

    创建图表

    免费学习PHP!

    全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

    原价$ 11.95 您的完全免费

    让我们继续创建图表并显示2014年的一些数据。

    为此,我们需要使用FusionCharts构造函数 ,向该函数传递一个对象,该对象包含图表实例的所有配置参数:

    • type :我们希望创建的图表类型
    • renderAt :将图表渲染到的DOM选择器
    • widthheight :图表尺寸
    • id :生成的图表的ID
    • dataFormat :传递给dataSource选项的数据格式
    • dataSource :实际图表的配置及其应显示的数据
    new FusionCharts({
      "type": "column2d",
      "renderAt": "chart-container",
      "width": "550",
      "height": "400",
      "id": "revenue-chart",
      "dataFormat": "json",
      "dataSource": {
        "chart": {
          "yAxisName": "Revenue (In USD Billion)",
          "yAxisMaxValue": "200",
          ...
        },
        "data": [{
          "label": "Amazon",
          "value": "88.99"
        }, {
          "label": "Apple",
          "value": "182.8"
        }
        ...
        ]
      }
    });

    这是完整的配置文件

    如果不确定任何chart选项的实际作用,或者不确定如何配置图表外观,请参考FusionCharts文档中的“ 图表属性”页面。

    我们要做的另一件事是更新模板,以包括图表应呈现到的容器。 您可以通过为Component的template属性指定一个字符串来做到这一点(就像我们之前所做的那样),或者将模板移到其自己的文件中并使用templateUrl对其进行引用。

    chartApp.AppComponent = ng.core.Component({
      selector: 'angular-chart',
      templateUrl: 'chart.html'
    }).Class({
      ...
    });

    无论哪种方式,这都是我们的模板的外观。

    <div class="container">
      <h1>Revenue of Top Tech Companies (2014)</h1>
      <div id ="chart-container"></div>
    </div>

    这是到目前为止的演示:

    您可以在Plunker上查看此演示的代码

    如果单击Plunker上的演示,可能会注意到在文件main.js ,我们已将FusionCharts配置数据分离到其自己的文件中,然后使用Angular的HTTP类进行获取。 这是为了清楚起见(它使Angular特定的代码更易于遵循),也因为对数据的请求是您在现实生活中通常要做的。

    但是,这不是绝对必要的,通过直接在chartApp构造函数中执行所有操作,您将获得相同的结果:

    (function(chartApp) {
      chartApp.AppComponent = ng.core.Component({
        selector: 'angular-chart',
        template: '<div class="container"><h1>Revenue of Top Tech Companies (2014)</h1><div id ="chart-container"></div></div>'
      }).Class({
        constructor: function() {
          FusionCharts.ready(function(){
            var revenueChart = new FusionCharts({
              // config data here
            }).render();
          });
        }
      });
    
      document.addEventListener('DOMContentLoaded', function() {
        ng.platform.browser.bootstrap(chartApp.AppComponent);
      });
    })(window.chartApp || (window.chartApp = {}));

    唯一要提及的是,初始化代码包含在FusionCharts.ready方法中。 这样可以防止在加载FusionCharts库之前调用图表实例化代码。

    准备好基本图表后,就该添加更多功能了,例如使用公司徽标代替名称,并使用2015年的新数据更新图表。

    添加注释

    要将公司徽标添加到x轴,我们将使用FusionCharts的强大功能之一- 注解 通过FusionCharts对象上的注释,您可以在图表上的指定位置绘制自定义形状或图像。

    假设您想在图表中心添加公司徽标。 您可以使用批注宏来实现 宏将为您提供图表中心的坐标,而注释将使您可以在该位置添加图像。

    当您使用动态注释来获取例如依赖于图表数据的位置信息时,事情会变得很有趣。 想象一下,您想在列的确切位置绘制一些内容。 您可以使用动态注释宏$dataset.0.set.1.endX$dataset.0.set.1.endY确定列端点的x和y坐标,然后在该端点上绘制一些内容。 您可以在此FusionCharts文档页面上了解有关注释以及如何使用它们的更多信息。

    对于我们的图表,我们将使用动态注释宏来获取每一列的开始和结束坐标,然后在此处绘制各自的公司徽标。 我们还将使用图表属性"showLabels": "0"禁用默认的x轴标签。

    为了实现上述目标,请将以下代码添加到图表的配置中:

    {
      "type": "column2d",
      ...
      "dataSource": {
        "chart": {
          "showLabels": "0",
          ...
        },
        "data": [{ ... }],
        "annotations": {
          "groups": [{
            "id": "logo-images",
            "xScale": "30",
            "yScale": "30",
            "showBelow": "0",
            "items": [{
              "type": "image",
              "url": "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/06/1465735364amazon.jpg",
              "x": "$dataset.0.set.0.startx + 25",
              "y": "$dataset.0.set.0.endY + 10"
            }, {
              "type": "image",
              "url": "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/06/1465735362apple.jpg",
              "x": "$dataset.0.set.1.startx + 85",
              "y": "$dataset.0.set.1.endY + 10"
            }, {
              "type": "image",
              "url": "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/06/1465735369facebook.jpg",
              "x": "$dataset.0.set.2.startx + 20",
              "y": "$dataset.0.set.2.endY + 10"
            }, {
              "type": "image",
              "url": "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/06/1465735358google.jpg",
              "x": "$dataset.0.set.3.startx + 5",
              "y": "$dataset.0.set.3.endY + 5"
            }, {
              "type": "image",
              "url": "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/06/1465735372microsoft.jpg",
              "x": "$dataset.0.set.4.startx + 30",
              "y": "$dataset.0.set.4.endY + 10"
            }]
          }]
        }
      }
    }

    在上面的代码中:

    • type设置注释的类型。
    • url设置图像的地址。
    • xy设置图像的起始x和y坐标。

    添加以上代码后,您应该看到在x轴上呈现的公司徽标。 要了解有关使用注释以及可能进行的其他操作的更多信息,请参阅文档页面 (上述)。

    在数据集之间切换

    我们要实现的最后一件事是允许用户在年份之间切换,根据所选年份(2014或2015)查看不同的数据集。

    结构化数据。

    因此,我们需要考虑如何以可以定义不同年份的不同数据集的方式来构造数据。 如前所述,FusionCharts期望配置选项包含一个data属性,该属性应该是一个包含标签/值对集合的数组。

    {
      "type": "column2d",
      ...
      "dataSource": {
        "chart": {},
        "data": [
          {
            "label": "whatever",
            "value": "a value"
          }
        ]
      }
    }

    处理多个数据集的一种方法是在构造函数的顶部定义一个dataSet对象,并使用别名将其附加到构造函数。

    var chartComp= this;
    chartComp.dataSet = {
      "2014": [{
        "label": "Amazon",
        "value": "88.99"
      }, {
        "label": "Apple",
        "value": "182.8"
      }, {
        "label": "Facebook",
        "value": "12.47"
      }, {
        "label": "Google",
        "value": "65.67"
      }, {
        "label": "Microsoft",
        "value": "86.83"
      }],
      "2015": [{
        "label": "Amazon",
        "value": "107.01"
      }, {
        "label": "Apple",
        "value": "233.72"
      }, {
        "label": "Facebook",
        "value": "17.93"
      }, {
        "label": "Google",
        "value": "74.54"
      }, {
        "label": "Microsoft",
        "value": "93.58"
      }]
    }

    然后,在配置选项中传递给FusionCharts构造函数,我们可以执行以下操作:

    "data": chartComp.dataSet['2014'],

    在Toggle中更新图表数据

    我们也希望图表与2015年的数据,一旦有人点击了2015年按钮,切换回显示了2014年,被点击2014年按钮时的数据进行更新。

    让我们添加两个按钮,这两个按钮将用于执行此操作并为其提供样式 修改组件模板,如下所示:

    <div class="container">
      <h1>Revenue of Top Tech-companies</h1>
    
      <div class="actions">
        <button (click)="yearChange(2014)"
                [ngClass] = "{selected: selectedYear== 2014}">2014
        </button>
        <button (click)="yearChange(2015)"
                [ngClass] = "{selected: selectedYear== 2015}">2015
        </button>
      </div>
      <div id ="chart-container"></div>
    </div>

    请注意,在Angular 2中添加了事件侦听器并添加了ngClass指令的新语法。它们与Angular 1几乎相同,但带有一些花括号和括号。

    我添加了一个ngClass指令,通过将selected CSS类应用于按钮元素来突出显示当前选定的年份。 这基于组件上的selectedYear属性,该属性在单击按钮后即会更新。

    通过将以下行添加到构造函数的顶部,我们可以将组件选定的当前年份设置为2014年:

    chartComp.selectedYear = 2014;

    处理按钮单击的逻辑将添加到new yearChange函数中。

    .Class({
      constructor: function(){ ... },
      yearChange: function(){ // button logic here }
    );

    为此,我们将使用FusionChart的setChartData方法,该方法需要图表配置选项和实际图表数据。 我们将使用getChartData方法从已呈现的图表中获取图表属性,而不是先存储图表属性然后再引用它们,而是使用特定年份的数据修改该数据。

    yearChange: function(year) {
      var revenueChart = FusionCharts.items['revenue-chart'];
      var chartJson = revenueChart.getChartData('json');
      chartJson.data = this.dataSet[year];
      revenueChart.setChartData(chartJson);
      this.selectedYear = year;
    }

    添加按钮HTML和上述按钮的单击处理程序后,单击这些按钮应加载该图表的当年数据。

    演示版

    这是最终的演示。

    您可以在Plunker上查看此演示的代码 或者,您可以从我们的GitHub存储库下载代码。

    如果单击进入Plunker,您将看到我们已经直接在config.json文件中定义了dataSet属性。 这使我们的组件变得更加整洁。

    结论和后续步骤

    我们首先构建一个简单的Angular图表,然后使用注释和其他FusionCharts的API向其添加更多功能。 但这只是冰山一角,使用Angular 2和FusionCharts可以完成更多工作。 您可以自己探索一些东西:

    • 包括更多图表:柱形图并不总是代表数据集的最佳方法。 根据您的用例,您可能希望使用不同的图表,例如瀑布图,雷达图,量规等。因此,请尝试使用本教程中说明的过程来绘制不同的图表,并查看是否能够成功完成该过程。

    • 在您的应用程序中包含图表:如果您要制作混合移动应用程序,则必须意识到Ionic 2 (最新版本的Ionic)基于Angular2。这是一个好消息,因为您可以使用本教程作为基础也为您的Ionic应用程序创建图表。

    • 探索更多事件:在本教程中,我解释了如何使用setChartData方法,但是您可以使用许多其他事件方法来增强应用程序的用户体验。 查看上面的链接页面,以了解有关FusionCharts提供的各种事件和方法的更多信息。

    如果您在尝试自己制作图表时遇到任何困难,请参阅AngularFusionCharts文档(取决于问题),或在下面发表评论。 我将竭诚为您服务!

    翻译自: https://www.sitepoint.com/chart-component-angular2-fusioncharts/

    构建angular组件库

    展开全文
  • 去公司内部交流活动参数了一个讲“构建可复用 WebUI 组件模型”交流,前面对 WebUI 差异性分析引发了我一些思考。 与软件(我猜指是桌面软件) UI 实现不同,WebUI 实现变动大。我会认为,给予了更...

    去公司内部的交流活动参数了一个讲“构建可复用的 WebUI 组件模型”的交流,前面对 WebUI 差异性的分析引发了我的一些思考。

    与软件(我猜指的是桌面软件)的 UI 实现不同,WebUI 的实现变动大。我会认为,给予了更多我的实现手段。

    造成差异的原因:

    1. 设计风格
    2. 代码实现

    关于第一点,不同的人,希望看到的界面是不同的,具体来说,界面上的 CSS 不同,图不同, DOM 结构不同。

    关于第二点,因为交互的需求不同,同时因为不同的程序员和不同的实现思路,那么写出来的所有代码都可能不同。

    我们的目的,是在于包容上面两种差异的情况下,来实现组件的复用。(不过,我没有在 topic 中听到怎么去解决)

    提到了几种手段:

    1. 类的继承
    2. 类的组合
    3. 模板系统

    这些手段我们都知道,不过,任何一种,至少在现在,我看都不太容易完善地解决以上两种差异产生的问题。

    要把界面外观,和交互实现相分离,同时实现复用,我个人认为,必须使两方面在某个点,以约定的规则进行无须沟通的统一。而这个规则的实现,才是我们应该思考的。 任何单方面的去考虑怎么去封装 js 代码,然后让前端开发者去复用,都不可能解决上面所说的差异

    需要同时考虑前端开发者的复用,和前端设计师的复用。而且,这两者复用,还要统一,无须沟通。

    一个美丽的远景是:

    • 前端开发写代码时不关心具体的页面是什么样,写出的代码没问题,则界同上的交互没有问题。
    • 设计做页面不关心交互的流程,页面通过规则验证,则可以保证交互实现不会出问题。

    无法完美实现的话,我们只是经常考虑在哪些方面妥协。


    展开全文
  • //有时候要获取一个组件的位置总是返回0,原因是组件还没绘制完成,该方法就是等待组件构建完成回调 mView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @...
    //有时候要获取一个组件的位置总是返回0,原因是组件还没绘制完成,该方法就是等待组件构建完成回调
    mView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            //组件构建完成
        }
    });
    展开全文
  • 为什么要构建自己 PHP 框架? 现在 PHP 框架很多,当然不止 PHP ,即使是其他编程语言也有很多框架,这篇文章讲 PHP 框架构建是因为我对 PHP 生态最为...原因就在于市面上开源框架,是给大部分人用,给...
  • 我相信答案是肯定的,而且很快所有开发框架都将会是基于组件的——这是近在眼前的事情。下面让我来向你揭示这一切的原因。你怎么来建设你的房子?一般你会从砌块开始。我们可以将构建Web应用与构建你的乡间小屋进行...
  • 用于构建基于和浏览器devtools扩展的组件和工具。 是否曾经想构建自己浏览器扩展或devtools面板? 这个项目可以提供帮助! 我们构建了一组实用程序和React组件,可让您镜像Chrome / FireFox开发人员工具功能。 ...
  • 该项目是从头开始逐步学习Angular教程一部分,其中我们从Angular Framework基本概念和原因进行探索,以至使用Angular Material组件构建完整Angular 7应用程序。 在本《 Angular教程》中,我们一个接一个地...
  • 一、使用gulp的原因 gulp是基于Node.js的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成等功能。 gulp...
  • 这是从谷歌流行的JavaScript框架完全重写,并不断为所有正确的原因的消息。 它提供了比以前的版本,并且我们为什么选择今天来构建一些美观的图表中的一些重大改进。 对于图表,我们将使用所提供的JavaScr...
  • 在vs2019中构建界面上,一拖Arcgis engine 的组件,就无响应,然后退出程序了请问是什么原因。</p>
  • IT界著名尼古拉斯·高尔包曾说:轮子是IT进步阶梯!热门框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起跨平台开发框架...  本文准备了超过50个轮子推荐,工作原因,尽量每1-2天更新一个组件
  • 编写react组件Are you using React to build user interfaces? Well, I am too. And now, you’ll learn why you should write your React applications using ReasonML. 您是否正在使用React构建用户界面? 好吧,...
  • winCE中文显示为下划线,只要把组件(International-->Locale Specific Support-->Chinese (Simplified)-->GB18030 Data Converter)去掉就显示正常。 
  • 构建属于自己elasticsearch Docker镜像

    千次阅读 2016-07-21 16:56:50
    官方给出的elasticsearch镜像需要做不少的修改,并且个人感觉镜像有点太大,所以萌生了自己做...此Docker镜像基于alpine的jre8镜像(使用alpine的原因就是没有太多不必要的组件和命令,docker内部也不需要太多组件
  • 并非游戏/模拟中的所有关系都使用父子关系进行了适当的建模,这就是我们进入这些情况的原因。 ECS是替代架构: Ëntities有0或多个组件 组件是纯数据,没有任何行为 小号ystems有行为,但没有数据 此处的整个ecs...
  • 虚拟视图 七巧板项目 安卓 的iOS 服务器 在Android系统中,页面结构可以通过config动态修改,而业务组件... 动态构建业务组件的XML模板和提高性能的虚拟视图,这是使用VirtualView的两个最重要的原因。 有关更多信息
  • 可能的原因是:在你的项目中引用了第三方组件,并且这个第三方组件是个商业组件,他在组件的主使用类定义了LicenseProvider(typeof(LicFileLicenseProvider)) 这个Attribute。 编译时检测到这个类的时候,会检查到...
  • React的学习曲线相对较浅,这就是最近它得到所有关注的原因之一。 尽管有很多重要的概念需要讨论,但不可否认的是组件是React的灵魂。 对组件有充分的了解将使您作为React开发人员的生活变得轻松。 先决条件 本...
  • 使用ReactMarkdown组件。 并。 安装 : npm install react-markdown 为什么是这个? 在React中还有其他降低价格方法,那么为什么要使用这种方法呢? 两个主要原因是,他们经常dangerouslySetInnerHTML依赖...
  • React 组件模式

    2020-06-24 11:24:39
    简评:组件(component)是 React 的核心,...这就是 React 被称为声明性 API 的原因,你只需要声明你希望得到的 UI ,之后 React 负责具体的细节。 组件 API 当安装 React 后,便可以使用 React 提供的 API,基本可.
  • 我创建这个主题的原因是,我无法确定如何设置Jekyll项目以使其与Polymer很好地兼容,也因为找不到任何使用Polymer或遵循Google的材料设计规范的Jekyll博客主题。 产品特点 使用 分页首页 支持精选的帖子图像(显示...
  • 前言:构建的ES组件使用CNPM发布内网上过程 1. 使用Create-React-APP开的组件 如果直接上传到NPM,你引用时候会报: You may need an appropriate loader to handle this file type. 如果你直接复制到你项目...
  • React 普及似乎在不断增长,在 Stack overflow 2017 年最受欢迎的组件库中,React 处于领先地位: React 虚拟 DOM,...使用 React 另一个重要原因组件组件让你把用户界面分成独立,可重复使用部分...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 683
精华内容 273
关键字:

构建组件的原因