扩展和删除工具栏按钮

Question

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

此工具栏按预期工作,但现在有一个新的要求,提供一种机制,使用外部的新按钮扩展此工具栏(可能通过json配置...),或删除默认按钮.

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

我的主要问题是:

1. 我应该使用什么样的模式(设计模式)来扩展这个工具栏(如果可能的话:)).请记住,想要扩展工具栏的人应该为按钮提供逻辑.
2. 如何构建项目
3. 我想将按钮的功能划分为不同的javascript文件,并将它们加载到一起index.html.建议的方法是什么？注意:我不能使用ES6(也应该支持IE11 :()而且我不使用节点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>

Answer 1

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

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

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