vue 切换功能_使用vue启用高级功能切换

最新推荐文章于 2022-10-25 16:43:44 发布

cuk5340

最新推荐文章于 2022-10-25 16:43:44 发布

阅读量757

点赞数

文章标签： vue java python javascript html ViewUI

原文链接：https://vuejsexamples.com/enables-advanced-feature-toggle-with-vue/

版权

vue 切换功能

Vue功能切换 (vue-feature-toggle)

Enables advanced feature-toggle with vue.

使用vue启用高级功能切换。

Vue-Feature-Toggle implements the feature-toggle-api v 3.3.0". Only a subset of features is listed here. For the others, watch the documentation of the api.

Vue-Feature-Toggle实现了feature-toggle-api v 3.3.0“。此处仅列出了部分功能。对于其他功能，请查看api的文档。

安装 (Install)

npm install vue-feature-toggle --save

问题 (The Problem)

Imagine you have an onlineshop with an testmode and in multiple languages. Your shop is written in vue. Anywhere you have a vue-template like this:

想象一下，您有一个具有测试模式和多种语言的网上商店。您的商店是用vue编写的。在任何具有这样的vue模板的地方：

<content-area>
    <!-- Show important debugging information for testmode -->
    <testmode-nav v-if="testmode"></testmode-nav>

    <!-- That's the old one, in a few days the new one, commented out here will be released 
        <left-nav-new></left-nav-new>
    -->
    <left-nav></left-nav>

    <!-- Every shop has a slider with amazing foodinfo on the startpage-->
    <startpage-slider-de ref="food/bratwurst" v-if="shop == 'de'"></startpage-slider-de>
    <startpage-slider-en ref="food/fishnchips" v-if="shop == 'en'"></startpage-slider-en>
    <startpage-slider-fr ref="food/croissant" v-if="shop == 'fr'"></startpage-slider-fr>

    <footer-new></footer-new>
    <!-- 
    New footer just went live. When there are some problems, we rollback and comment out the new footer and uncomment the old one
    <footer-old></footer-old> -->
</content-area>

It's generally a bad idea to have visibility rules in the template. Of course, by refactoring the template a little bit the code will look better. But that's not the point. The problem is: The view-logic is spread in .html and .js files and if the viewlogic changes, you have to change at least them. And all visibility rules are spread over the whole system. That's not good.

在模板中具有可见性规则通常是一个坏主意。当然，通过稍微重构模板，代码看起来会更好。但这不是重点。问题是：视图逻辑分布在.html和.js文件中，如果视图逻辑发生更改，则至少必须更改它们。并且所有可见性规则都分布在整个系统中。这不好。

解决方案 (The solution)

Feature-toggle. All View-Logic is placed in one place. This can be a config file, a webservice or a tool with a User Interface.a When you want to change a visibility rule, for example "Show feature XYZ also in the french shop", you just have to update the config or add this info in an UI. And no developer is needed for it.

功能切换。所有View-Logic都放置在一个地方。这可以是配置文件，Web服务或带有用户界面的工具。a当您想要更改可见性规则时，例如“在法国商店中也显示XYZ功能”，您只需要更新配置或添加此配置即可。用户界面中的信息。而且不需要开发人员。

Read the article from Martin Fowler about feature toggle for a more understanding.

阅读Martin Fowler撰写的有关功能切换的文章，以了解更多信息。

用法 (The Usage)

Look in the example folder for working examples.

在示例文件夹中查找工作示例。

初始化 (Initialisation)

Create a vue project. For example with the vue-cli.

创建一个vue项目。例如，使用vue-cli。

npm install -g vue-cli
    vue init browserify vue-feature-toggle-example
    cd vue-feature-toggle-example
    npm install

Now install the vue-feature-toggle component.

现在安装vue-feature-toggle组件。

npm install vue-feature-toggle --save

Replace the index.html - file with the following:

将index.html-文件替换为以下内容：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>vue-feature-example</title>
</head>

<body>
  <div id="app">
        <!-- The name property is required -->
        <feature name="feature1">This is "Feature1"</feature>
        
        <!-- The variant property is optional and can be any string -->
        <feature name="feature2">This is "Feature2"</feature>
        <feature name="feature2" variant="new">This is "Feature2" with variant "new"</feature>
        <feature name="feature2" variant="old">This "Feature2" with variant "old"</feature>
        <feature name="feature2" variant="grumpfel">This "Feature2" with variant "grumpfel"</feature>
        
        <feature name="feature3" variant="old" data="grumpfel">This "Feature3" with variant "old" has some Data.</feature>
        <feature name="feature3" variant="new" :data="{'text':'grumpfel'}">This "Feature3" with variant "old" has some Data. (watch the : before the data-attribute. Otherwise you'll get this as a string...)</feature>
  </div>
  <script src="dist/build.js"></script>
</body>
</html>

Replace the src/main.js file with the following:

将src / main.js文件替换为以下内容：

var Vue = require('vue');
var feature = require('vue-feature-toggle');

//Feature1 will always be shown
feature.visibility('feature1',function () {
    return true;
});

//write down the other visibility-rules here    

var vue = new Vue({
    el: '#app',
    components: { 'feature': feature }
})

//IMPORTANT: Don't write your rules after the new Vue()-declaration - they won't work here....

特征 (Features)

Only a subset of features is listed here. See the documentation of the feature-toggle-api for more features

For the next examples we will always use the HTML from above. Just insert the visibility rules under the other rule

对于下一个示例，我们将始终使用上面HTML。只需在其他规则下插入可见性规则

基本可见性 (Basic visibility)

// shows Feature1
//Feature2 is not configured, so it will be hidden
feature.visibility('feature1',true);

//You can also write it like this
feature.visibility('feature1',function (rule) {
        //here would be some more complex logic, in this example we keep it simple
        return true;
});

/* 
    shows all features with name feature2, in this case: 
    <feature name="feature2"/>
    <feature name="feature2" variant="new"/>
    <feature name="feature2" variant="old"/>
    <feature name="feature2" variant="grumpfel"/>
 */
feature.visibility('feature2', function (rule) {
        return true;
});

/*
    This overwrites the rule above for "feature2", variant "new"    
    <feature name="feature2"/> -> shown
    <feature name="feature2" variant="new"/> -> hidden
    <feature name="feature2" variant="old"/> -> shown
    <feature name="feature2" variant="grumpfel"/> -> shown
*/
feature.visibility('feature2','new', function (rule) {
        return false;
});

/*
You can pass data via the data-attribute. Corresp. HTML-Tag: <feature name="feature3" :data="grumpfel"/>
*/
feature.visibility('feature3','new', function (rule) {
      return rule.data == "grumpfel";
});

//Write a : before the data-tag to parse the content in the data-attribute <feature name="feature3" :data="{'text':'grumpfel'"/> Otherwise the data is returned as a string.
feature.visibility('feature3','new', function (rule) {
      return rule.data.text == "grumpfel";
});

默认可见性 (Default Visibility)

Bored of writing the same visibility rule again and again? Use defaultVisibility. This is the default-rule and will be overwritten by feature.visibility() - rules.

厌倦了一次又一次地编写相同的可见性规则？使用defaultVisibility。这是默认规则，将被feature.visibility()-规则覆盖。

feature.defaultVisibility(function(rule){
    return true;
});

feature.visibility('feature2', 'new', function(rule){
    return false;
});
/*
    "Feature2", variant "new" is overwritten, all other features have the defaultVisibility
    <feature name="feature2"/> -> shown
    <feature name="feature2" variant="new"/> -> hidden
    <feature name="feature2" variant="old"/> -> shown
    <feature name="feature2" variant="grumpfel"/> -> shown
*/

所需的可见性 (Required Visibility)

This rule is allways executed, before the other rules. When it returns false, the other rules are ignored.

该规则始终在其他规则之前执行。当它返回false时，其他规则将被忽略。

/*
   Imagine a config that is loaded via ajax. When the name is in the config, it returns true.
   And this config looks like this: 
   var globalConfig = { "feature2" : true }
*/

feature.requiredVisibility(function(rule){
    //In this case it returns true, when name == 'feature2'
    return globalConfig[rule.name] === true;
});

/*
  feature2, variant "new" returns false, but requiredConfig returns true. Both rules must match, so it will be hidden
*/
feature.visibility('feature2','new',function(rule){
    return false;
});

/*
  feature3 returns true, but requiredConfig returns false. Both rules must match, so Feature3 is hidden
*/
feature.visibility('feature3',function(rule){
    return true;
});

/*
    <feature name="feature2"/> -> shown
    <feature name="feature2" variant="new"/> -> hidden
    <feature name="feature2" variant="old"/> -> shown
    <feature name="feature2" variant="grumpfel"/> -> shown
    
     <feature name="feature3" variant="old"/> -> hidden
    <feature name="feature3" variant="new"/> -> hidden
*/

集装箱标签 (Container Tag)

Normally a feature has a div-element as root-element.

通常，要素具有div元素作为根元素。

<feature name="anAmazingFeature">an amazing feature</feature>
    will be rendered to (if visible):
    <div>an amazing feature</div>

But unfortunately sometimes div-elements are already styled by legacy-css-classes. To prevent this, you can define the root-element.

但是不幸的是，有时div元素已经由legacy-css-classs设置样式。为防止这种情况，您可以定义根元素。

<feature name="anAmazingFeature" tag="span">an amazing feature</feature>
    will be rendered to (if visible):
    <span>an amazing feature</span>

显示日志 (ShowLogs)

Imagine this following html-snippet:

想象下面的html代码片段：

<!-- Why is this ******* feature hidden? I checked the visibilityrule. It should be visible... -->
    <feature name="anAmazingFeature">This feature should be shown</feature>

All developers of the world agree with you, debugging sth lik this is horrible. But don't worry, we have a perfect solution for it. And it's just one line of code.

世界上所有的开发人员都同意您的看法，这很可怕。但是不用担心，我们有一个完美的解决方案。这只是一行代码。

feature.showLogs(); //or feature.showLogs(true);

This returns a log like the following:

这将返回如下日志：

Check Visibility of Feature "anAmazingFeature".
The requiredVisibility rule returns false. This feature will be hidden.

Check Visibility of Feature "anotherAmazingFeature", variant "new" with data {"id":"bla"}.
The requiredVisibility rule returns true. This feature will be shown when no other rule rejects it.
No visibility rule found matching name and variant.
No rules found for name anotherAmazingFeature without variants.
No default rule found.
Only the requiredVisibility rule was found. This returned true. => This feature will be visible.

With this you don't have to waste your time with debugging the visibility state.

这样，您就不必浪费时间调试可见性状态。

记录 (Log)

Log a custom message, when showLogs() == true.

当showLogs()== true时，记录自定义消息。

feature.log("Here's my custom message");

Noscript (Noscript)

You work in a company and your customers have disabled javascript? Well, that makes life harder but we can still use it. We can provide at least a basic functionality with pure css. Just look at the modified index.html file.

您在一家公司工作，而您的客户已禁用JavaScript？好吧，这使生活更加艰难，但我们仍然可以使用它。我们至少可以提供纯CSS的基本功能。只需查看修改后的index.html文件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>vue-feature-example</title>
   <style type="text/css">
   /*Hides all features by default. When javascript is enabled, this attribute is overwritten*/
    feature{
      display:none;
    }

    /*Shows all features with noscript attribute*/
    feature[noscript="noscript"], feature[noscript="true"]{
      display:block;
    }
    </style>
</head>

<body>
  <div id="app">
        <feature name="feature1">This is hidden without javascript</feature>
        
        <feature name="feature2" noscript="noscript">This is shown without javascript.</feature>
        <feature name="feature2" variant="new" noscript="true">This is shown without javascript.</feature>
  </div>
  <script src="dist/build.js"></script>
</body>
</html>

翻译自: https://vuejsexamples.com/enables-advanced-feature-toggle-with-vue/

vue 切换功能

cuk5340

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 切换功能_使用vue启用高级功能切换

vue 切换功能 Vue功能切换 (vue-feature-toggle)Enables advanced feature-toggle with vue. 使用vue启用高级功能切换。 Vue-Feature-Toggle implements the feature-toggle-api v 3.3.0". Only a subset of features is listed here...
复制链接

扫一扫