Question

我制作了一个小脚本，使我在部分页面中的JS初始化更容易一些。它只搜索所有data-onload属性，并执行在那里定义的函数。还有一些其他功能。因此，当通过AJAX调用加载特定的局部视图时，data-onload会自动调用。

无论如何，语法如下所示：

<div class="some-partial-html-stuff">
    <button>[...]</button>
</div>

<script data-onload="partialInit">

    function partialInit()
    {
       // executes onload and on-ajax-load stuff for this Partial Page
        $('.some-partial-html-stuff button').doSomething();
     }

    function otherFunctions()
    {
        // [...]
    }

</script>

我唯一想要解决的问题是，现在我需要为每个部分页面都有一个唯一的functionName（否则名称会在加载时发生冲突）。所以我有manageProfileInit()，editImageInit()等。

现在我的OCD-devil想知道是否有某种方法可以进一步清理它（没有太多的负面后果）。我希望能够在任何脚本块中都有一个简单的干净functon init()，并具有上述相同的功能。

当然在当前情况下，所有功能都会互相覆盖。但有没有人知道一个很好的技巧或解决方法如何工作？

总而言之，我想创建一个脚本，确保它可以在每个部分页面上工作，没有任何冲突。

<div class="some-partial-html-stuff">
    <button>[...]</button>
</div>

<script data-autoinit>

    function init()
    {
        // this method is automatically called if the 'data-autoinit' is defined
        // executes onload and on-ajax-load stuff for this Partial Page
        $('.some-partial-html-stuff button').doSomething();
    }

</script>

Answer 1

当我做这样的事情时，我称之为功能。标签看起来像这样：

<div data-feature="featureName"></div>

然后我们获取所有带有data-feature标记的标记并循环遍历它们，创建一个页面将要使用的功能数组：

var featureObjects = $('[data-feature]');
var features = [];
if ( !featureObjects.length ) return false;
for ( var i = 0, j=featureObjects.length; i<j; i++ ) {
    var feature = $(featureObjects[i]).data('features');
    if ($.inArray(feature, features) == -1){
        if (feature !== ""){
            features.push(feature);
        }
    }
};

现在你想要异步加载JS文件，并在加载后调用它的init函数：

for (var i=0, j=features.length; i<j; i++){
    var feature = features[i];
    $.ajax({
        url: "path/to/js/" + feature + ".js",
        dataType: "script",
        async: false,
        success: function () {
            App.features[feature].init();
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

实际的模块看起来像这样，并将自己附加到App.features以供以后使用：

App.features.featureName = (function(feature){

    // INIT FUNCTION
    feature.init = function(){

    };

    return feature;
}(App.features.featureName || {}));

请记住在执行所有操作之前确保App.features是一个数组，希望在main.js文件的顶部。我在应用程序中保留了其他功能，例如帮助程序和实用程序，所以我通常会用以下内容启动它：

var App = {
    utilities: {},
    features: {},
    helpers: {},
    constants: {}
};

现在您可以使用数据功能标记标记DOM对象，并根据需要自动添加功能，在特定的JavaScript和特定的DOM之间保持良好的联系，但不需要保持JS inline next到实际的DOM。如果需要在其他地方使用它们，它还可以使这些“模糊”可重用，这可以降低在处理应用程序时的维护开销。

每个脚本块调用初始化函数

1 个答案: