我们开发了一个工具栏（bootstrap-navbar），其中包含许多按钮/控件。
此工具栏按预期工作，但现在有新要求提供机制来扩展此工具栏，使用外部的新按钮（可能通过json配置） ...），或删除默认按钮。
例如，假设我们将此工具栏作为服务提供，并且有一些选项可以通过配置或其他东西添加/删除按钮，目前还不确定如何...
我的主要问题是：
- 我应该使用什么样的模式（设计模式）来扩展这个工具栏（如果可能的话:)）。请记住，想要扩展工具栏的人应该提供按钮 逻辑。
- 如何构建项目
- 我想将按钮的功能划分为不同的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>