尝试优化代码以使用Mixitup构建多个过滤器实例

Question

我当前正在使用Mixitup库为我当前正在工作的网站构建过滤器功能。现在，由于我设置了多个过滤器实例，因此我正在尝试优化和减少代码量。有没有一种方法可以将我正在处理的代码优化为一个实例，而不是创建多个实例？

            // First Filter

            var containerEl = document.querySelector('.work-block');
            var checkboxGroup = document.querySelector('.checkbox-group');
            var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
            var allCheckbox = checkboxGroup.querySelector('input[value="all"]');

            var mixerOne = mixitup(containerEl);

            checkboxGroup.addEventListener('change', function(e) {
                var selectors = [];
                var checkbox;
                var i;

                if (e.target === allCheckbox && e.target.checked) {
                    
                    for (i = 0; i < checkboxes.length; i++) {
                        checkbox = checkboxes[i];

                        if (checkbox !== allCheckbox) checkbox.checked = false;
                    }
                } else {
                    
                    allCheckbox.checked = false;
                }


                for (i = 0; i < checkboxes.length; i++) {
                    checkbox = checkboxes[i];

                    if (checkbox.checked) selectors.push(checkbox.value);
                }

                var selectorString = selectors.length > 0 ?
                    selectors.join(',') : // or '.' for AND logic
                    'all';

                mixerOne.filter(selectorString);
            });


            //Second Filter

            var containerElTwo = document.querySelector('.work-block-two');
            var checkboxGroupTwo = document.querySelector('.checkbox-group-two');
            var checkboxestwo = checkboxGroupTwo.querySelectorAll('input[type="checkbox"]');
            var allCheckboxtwo = checkboxGroupTwo.querySelector('input[value="all"]');

            var mixerTwo = mixitup(containerElTwo);

            checkboxGroupTwo.addEventListener('change', function(e) {
                var selectors = [];
                var checkbox;
                var i;

                if (e.target === allCheckboxtwo && e.target.checked) {
                    
                    for (i = 0; i < checkboxestwo.length; i++) {
                        checkbox = checkboxestwo[i];

                        if (checkbox !== allCheckboxtwo) checkbox.checked = false;
                    }
                } else {
                    
                    allCheckboxtwo.checked = false;
                }


                for (i = 0; i < checkboxestwo.length; i++) {
                    checkbox = checkboxestwo[i];

                    if (checkbox.checked) selectors.push(checkbox.value);
                }

                var selectorString = selectors.length > 0 ?
                    selectors.join(',') : // or '.' for AND logic
                    'all';

                mixerTwo.filter(selectorString);
            });

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* Target Elements
---------------------------------------------------------------------- */
.mix,
.gap {
  display: inline-block;
  vertical-align: top; }

.mix {
  background: #fff;
  border-top: .5rem solid currentColor;
  border-radius: 2px;
  margin-bottom: 1rem;
  position: relative; }

.mix:before {
  content: '';
  display: inline-block;
  padding-top: 56.25%; }

.mix.green {
  color: #91e6c7; }

.mix.pink {
  color: #d595aa; }

.mix.blue {
  color: #5ecdde; }

.work-block {
  display: flex;
  flex-wrap: wrap; }
  .work-block .work-card {
    flex: 25%; }

/*# sourceMappingURL=style.css.map */

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js"></script>


        <div class="controls">
            <div class="checkbox-group">
                <div class="checkbox">
                    <label class="checkbox-label">All</label>
                    <input class="filter-one" type="checkbox" value="all" checked/>
                </div>

                <div class="checkbox">
                    <label class="checkbox-label">Green</label>
                    <input class="filter-one" type="checkbox" value=".green"/>
                </div>

                <div class="checkbox">
                    <label class="checkbox-label">Blue</label>
                    <input class="filter-one" type="checkbox" value=".blue"/>
                </div>

                <div class="checkbox">
                    <label class="checkbox-label">Pink</label>
                    <input class="filter-one" type="checkbox" value=".pink"/>
                </div>
            </div>

            <button type="button" class="control" data-sort="default:asc">Asc</button>
            <button type="button" class="control" data-sort="default:desc">Desc</button>
        </div>


        <ul class="work-block">
            <li class="mix work-card green">green</li>
            <li class="mix work-card green">green</li>
            <li class="mix work-card blue">blue</li>
            <li class="mix work-card pink">pink</li>
            <li class="mix work-card green">green</li>
            <li class="mix work-card blue">blue</li>
            <li class="mix work-card pink">pink</li>
            <li class="mix work-card blue">blue</li>
            <li class="mix work-card blue green">blue green</li>
            <li class="mix work-card pink green" >pink green</li>
        </ul>



        <div class="controls">
            <div class="checkbox-group-two">
                <div class="checkbox">
                    <label class="checkbox-label">All</label>
                    <input class="filter-two" type="checkbox" value="all" checked/>
                </div>
    
                <div class="checkbox">
                    <label class="checkbox-label">Green</label>
                    <input class="filter-two" type="checkbox" value=".green"/>
                </div>
    
                <div class="checkbox">
                    <label class="checkbox-label">Blue</label>
                    <input class="filter-two" type="checkbox" value=".blue"/>
                </div>
    
                <div class="checkbox">
                    <label class="checkbox-label">Pink</label>
                    <input class="filter-two" type="checkbox" value=".pink"/>
                </div>
            </div>
    
            <button type="button" class="control" data-sort="default:asc">Asc</button>
            <button type="button" class="control" data-sort="default:desc">Desc</button>
        </div>
    
    
        <ul class="work-block-two">
            <li>
                <span class="mix work-card green">green</span>
            </li>
            
            <li>
                    <span class="mix work-card green">green</span>
            </li>

            <li>
                    <span class="mix work-card blue">blue</span>
            </li>

            <li>
                    <span class="mix work-card pink">pink</span>
            </li>

            <li>
                    <span class="mix work-card green">green</span>
            </li>
    
            <li>
                    <span class="mix work-card blue">blue</span>
            </li>

            <li>
                    <span class="mix work-card pink">pink</span>
            </li>

            <li>
                    <span class="mix work-card blue">blue</span>
            </li>

            <li>
                    <span class="mix work-card blue green">blue green</span>
            </li>

            <li>
                    <span class="mix work-card pink green" >pink green</span>
            </li>

        </ul>