[英]what should I know before merging javascript files into one?
So I'm just learning to use grunt to concatenate, and if it ever gets to that point, minify/uglify my various js scripts to reduce HTTP requests
. 所以我只是学习使用grunt进行连接,如果它到达那一点,请缩小/ uglify我的各种js脚本以减少
HTTP requests
。
However, I'm suspecting it's not as easy as simply picking files to concatenate and expect it work. 但是,我怀疑它并不像简单地选择连接文件那样简单并期望它能够正常工作。 Most of the javascript works after I have merged it, however, particularly the Foundation portion is failing.
在合并之后,大多数javascript都可以工作,但是,特别是基础部分失败了。 To those who dont know, Foundation is a frontend framework, and is initialized by calling it like so:
对于那些不知道的人,Foundation是一个前端框架,并通过调用它来初始化:
$(document).foundation();
the error log shows me this: 错误日志显示我:
TypeError: $(...).foundation is not a function
$(document).foundation();
In any case, I would like to know what makes some javascript work when merged, and why others do not. 在任何情况下,我想知道是什么让一些javascript在合并时工作,以及为什么其他人没有。 Does it have something to do with the order in which they are merged?
它与合并的顺序有关吗? Also what should I know about writing javascript before I play with minifying/compressing and concatenating?
另外,在我使用缩小/压缩和连接之前,我应该知道如何编写javascript? I am just starting to learn using namespaces myself, and I have seen them mentioned in this regard.
我自己开始学习使用命名空间,我已经看到过这方面的提及。 But I can't find sources on their importance and how exactly it is used in my case.
但我无法找到它们的重要性以及它在我的案例中的用途。
If anyone is interesting in what my Gruntfile looks like, here it is: 如果有人对我的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']);
};
Any help is appreciated :) 任何帮助表示赞赏:)
The order in which you merge them is what matters most of the time. 合并它们的顺序在大多数情况下都很重要。 For example, lets say you have two small JS files.
例如,假设您有两个小JS文件。 One contains
var a="hi"
and the other contains alert(a)
. 一个包含
var a="hi"
,另一个包含alert(a)
。 If you merged them in the order that they are, everything would work fine and an alert box containing "hi" would appear. 如果按照它们的顺序合并它们,一切都会正常工作,并会出现一个包含“hi”的警告框。 But if you merge them the other way, it would alert undefined because a isn't defined yet.
但是如果你以另一种方式合并它们,它会提示undefined,因为尚未定义。 Typically, the JS that defines variables and functions should come first.
通常,定义变量和函数的JS应该首先出现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.