Question

我正在尝试转换为使用ES6。目前我正在使用gulp来处理所有事情，我已经让babel发现我的ES6就好了。我已经将需求转换为进口，一切正常。

我无法弄清楚如何最好地构建将所有内容联系在一起的主JS文件。

过去我有一个自动调用的Site函数，它有全局变量，一个模块对象和一个init函数，它循环遍历'模块对象内的所有函数并运行它们。

然后我有了第二个自动调用的函数，我曾经通过传递的引用将函数注入模块对象，此时我也会传递全局变量。

然而，使用ES6导入时这似乎是错误的。我只是找不到一个如何将模块绑定到实际构建站点的示例，而不会有一个JS文件的绝对混乱。

我已经考虑过将Site功能转换为类来保留内部函数相互调用的能力。虽然这不太理想。我也一直在考虑将所有单独的功能组件分成单独的模型，但我再次需要一种初始化这些模块的方法，而且我只是想要一个方块。

有没有人举例说明如何构建一个JS站点文件，该文件以易于阅读和清理的方式使用模块？

我希望能够拥有如下文件夹结构

js
├── modules/
│   ├── initialisaiton.js
│   ├── banner.js
│   ├── testimonials.js
│   └── navigation.js
├── utils.js
└── mian.js

能够将每个单独的功能块分离到自己的文件中。我知道如何以这种方式工作，但理想情况下我不希望在main.js文件中有大量的导入列表，我需要能够在其他模块中使用导航调用函数来交叉模块。 / p>

我花了很长时间查阅教程和指南并查看其他SO问题，但这些似乎总是关于ES6功能的基本示例，或者如何制作模块。现在关于将所有东西捆绑在一起的结构。如果有人有一些建议，例子或代码样本，那将是一个很好的。

编辑：这是我目前转换为ES6课程的内容

import * as utils from './utils';

const moduleRegistration = function(m, u, ui, win, doc){

    // Example Module
    m.example = function(){
        // Do stuff, the m.example module gets auto initialized.
    };

    // Document loaded class
    m.docLoad = function(){
        u.addClass(doc.body, 'is-loaded');
    };

};

class Site {

    constructor() {
        // DOM caching
        this.win = window;
        this.doc = document;

        this.doc.documentElement.setAttribute('data-ua',  navigator.userAgent);

        // Globals
        this.ui = {
            fast: 0.2,
            slow: 0.4,
            step: 0.03
        };
        this.modules = {};

        this.init();
    }

    init(){
        moduleRegistration(this.modules, utils, this.ui, this.win, this.doc);

        for (const prop in this.modules) {
            if ( this.modules.hasOwnProperty(prop) ) {
                this.modules[prop]();
            }
        }
    }

}

utils.documentReady(()=>{ new Site(); });

编辑：原作

jQuery(document).ready(function($) {
    Site.init();
});

var Site = (function($) {

    // DOM caching
    var win = window;

    // Globals
    var w = {
        width:  win.innerWidth,
        height: win.innerHeight,
        scroll: win.pageYOffset
    };

    var ui = {
        fast: 0.2,
        slow: 0.4,
        step: 0.03
    };

    function updateGlobals(){
        w.width  = win.innerWidth;
        w.height = win.innerHeight;
        w.scroll = win.pageYOffset;
    }

    win.addEventListener('resize', updateGlobals, true);
    win.addEventListener('scroll', updateGlobals, true);
    win.addEventListener('load', updateGlobals, true);

    document.documentElement.setAttribute('data-ua',  navigator.userAgent);

    return {
        autoInits: require('./auto'),
        init: function(){

            for (var prop in this.modules) {
                if ( this.modules.hasOwnProperty(prop) ) {
                    this.modules[prop]();
                }
            }

            for (var props in this.autoInits) {
                if ( this.autoInits.hasOwnProperty(props) ) {
                    var $selector = $(props);

                    if ($selector.length) {
                        this.autoInits[props]($selector);
                    }
                }
            }
        },
        utils: require('./utils'),
        ui: ui,
        w: w
    };

})(jQuery);

(function(m, u, ui, w, a, $){

    var menu_state = false;

    // Example Module
    m.example = function(){
        // Do stuff, the m.example module gets auto initialized.
    };

    // Document loaded class
    m.docLoad = function(){
        u.addClass(document.body, 'is-loaded');
    };

})(Site.modules = Site.modules || {}, Site.utils, Site.ui, Site.w, Site.anim, jQuery);

使用ES6构建主JS站点文件

0 个答案: