javascript - 在将 javascript 文件合并为一个文件之前我应该​​知道什么？

Question

所以我只是在学习使用 grunt 来连接，如果达到那个点，缩小/丑化我的各种 js 脚本以减少 HTTP 请求。

但是，我怀疑这并不像简单地选择要连接的文件并期望它起作用那么容易。大多数 javascript 在我合并后都可以工作，但是，特别是 Foundation 部分失败了。对于不知道的人来说，Foundation 是一个前端框架，通过这样调用它来初始化:

$(文档).foundation();

错误日志显示了这个:

    TypeError: $(...).foundation is not a function
    $(document).foundation();

无论如何，我想知道是什么让某些 javascript 在合并时起作用，以及为什么其他 javascript 不起作用。它与它们合并的顺序有关吗？另外，在玩缩小/压缩和连接之前，我应该了解有关编写 javascript 的哪些知识？我自己才刚刚开始学习使用 namespace ，并且看到他们在这方面有所提及。但我找不到关于它们的重要性以及它在我的案例中如何使用的来源。

如果有人对我的 Gruntfile 感兴趣，请看这里:

    module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
  options: {
    separator: ';'
  },
  dist: {
    src: [
        'bower_components/foundation/js/vendor/jquery.js',
        'bower_components/foundation/js/vendor/modernizr.js',
        'javascripts/vendor/quickform.js',
        'javascripts/vendor/jquery.dataTables.min.js',
        'javascripts/dataTables/dataTables.foundation.js',
        'javascripts/vendor/jstz.min.js',
        'bower_components/foundation/js/vendor/fastclick.js',
        'bower_components/foundation/js/foundation.js">',
    ],
    dest: 'dist/<%= pkg.name %>.js'
  }
},
uglify: {
  options: {
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
  },
  dist: {
    files: {
      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    }
  }
}
});

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  // Default task(s).
  grunt.registerTask('default', ['concat','uglify']);
};

感谢任何帮助:)

Answer 1

大多数情况下，合并它们的顺序很重要。例如，假设您有两个小的 JS 文件。一个包含 var a="hi"，另一个包含 alert(a)。如果您按它们的顺序合并它们，一切都会正常进行，并且会出现一个包含“hi”的警告框。但是如果你以其他方式合并它们，它会警告 undefined 因为 a 还没有定义。通常，定义变量和函数的JS应该放在第一位。

---

这就是我能给你的所有帮助。希望对您有所帮助。