扩展和删除工具栏按钮

Posted 2023-02-22

【中文标题】扩展和删除工具栏按钮

【英文标题】：Extend and remove toolbar buttons

【发布时间】：2017-05-06 03:06:34

【问题描述】：

我们开发了一个工具栏 (bootstrap-navbar)，其中包含许多按钮/控件。

此工具栏按预期工作，但现在有一个新要求来提供一种扩展该工具栏的机制，该工具栏带有来自外部的新按钮（可能通过 json 配置） ...)，或删除默认按钮。

例如，假设我们将此工具栏作为服务提供，并且有一些选项可以通过配置或其他方式添加/删除按钮，目前不确定如何......

我的主要问题是：

我应该使用什么模式（设计模式）来扩展这个工具栏（如果可能，当然:)）。请记住，想要扩展工具栏的人应该为按钮提供 逻辑。 如何构建项目 我想把按钮的功能分成不同的javascript文件 并将它们一起加载到index.html。推荐的方法是什么？ 注意：我不能使用 ES6（也应该支持 IE11 :( ）并且我不使用 node js 来拥有 WebPack/Gulp/Grunt

项目结构

myProj
  >index.html
  >css
    >> style.css
  >js
   >>script.js

现在我想把这个大脚本分成更小的文件（如问题 3）， 我应该使用哪种技术？也许require.js（因为我没有编译选项...

任何例子都会很有帮助

这是 HTML 代码和 jsFile 中所有处理程序逻辑的示例

<div class="toggle-button">
  <div class="wrapper">
    <div class="menu-bar menu-bar-top"></div>
    <div class="menu-bar menu-bar-middle"></div>
    <div class="menu-bar menu-bar-bottom"></div>
  </div>
</div>

<nav id="navi" class="navbar navbar-inverse menuBar">
  <div class="container-fluid back">
    <div class="navbar-header">
      <a class="navbar-brand glyphicon glyphicon-dashboard" href="#"></a>
    </div>
    
    <ul class="nav navbar-nav">
      <li id="dropdown1" class="dropdown open keep-open">
        <a id="qlabel" class="dropdown-toggle glyphicon glyphicon-phone" data-toggle="dropdown" href="#">
          <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading"  data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                <a>
                  Collapsible Group 1</a>
              </div>
              <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                  <ul class="nav navbar-nav">
                    <li ><a id="s_e_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
                    <li ><a id="s_e_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
                    <li ><a id="s_e_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                  Collapsible Group 2</a>
              </div>
              <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                  <ul class="nav navbar-nav">
                    <li ><a id="s_e2_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
                    <li ><a id="s_e2_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
                    <li ><a id="s_e1_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                  Collapsible Group 3</a>
              </div>
              <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">

                </div>
              </div>
            </div>
          </div>
        </ul>
      </li>

      <li><a href="#" id="list1" class="glyphicon glyphicon-phone" onclick="list1(this)"></a></li>
    </ul>
 
    <ul class="nav navbar-nav" style="margin-left:25%;">
      <form class="navbar-form navbar-left">
        <div class="input-group">
          <span style="float:left; margin-top:3%; margin-right:3%; color:white;" class="box glyphicon glyphicon-search"></span>   
          <input type="search" class="form-control" style="height:30px; width:70%;" placeholder="Search" oninput="search(this)">
        </div>
      </form>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a class="dropdown-toggle glyphicon glyphicon-bell" data-toggle="dropdown" href="#" >
          <span class="badge badge-danger">2</span><span class="caret"></span>
        </a>
        <ul class="dropdown-menu notif" style="padding:20%;">
          <li>Hello</li>
          <hr>
          <li>Notif 2</li>
          <hr>
          <li>Notif 3</li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle glyphicon glyphicon-globe" data-toggle="dropdown" href="#">
          <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#" onclick="language(this)">English</a></li>
          <li><a href="#" onclick="language(this)">Hebrew</a></li>
          <li><a href="#" onclick="language(this)">Finnish</a></li>
        </ul>
      </li>
      
      <li><a href="#" onclick="logout()"><span class="glyphicon glyphicon-log-in"></span></a></li>
    </ul>
  </div>
</nav>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【问题讨论】：

如果你想使用动态选项来添加和删除按钮，那么你需要像 node.js 这样的服务器端语言。

你对使用 React 有什么想法（不需要服务器）？如今，通过功能而不是技术来分隔代码变得越来越标准（例如，与按钮相关的所有 HTML/CSS/JS 都存储在一起......而不是所有 HTML 在一起，所有 CSS 都在一起等）。

不确定你想要什么。您是否正在编写一个 javascript 库，以便用户可以通过包含一个 js 库来使用您的代码并在代码中进行所有设置？还是用户在另一个页面进行设置而无需编码的CMS？

你试过什么？我会投票结束这个问题，因为它太宽泛了，但因为有赏金所以不能。没有单一的正确答案，任何给出的答案都主要基于意见。

【参考方案1】：

TinyMCE 4 是一个很好的例子，一个预先存在的、广泛使用的、得到良好支持的库，它可以完成您所要求的确切事情。我强烈建议您查看他们的源代码。

特别是他们的Editor 类，其中包含一个很好的配置选项示例，包括工具栏和按钮。另请查看 AddOnManager，它使用 ScriptManager 加载必要的部分以及插件、语言等。

这可能会让你头晕目眩，但如果你需要帮助，那么背后有一个大社区可以为你指明正确的方向。