Javascript 为什么要把我所有的jquery插件放在一个文件中呢；不行？

以前，我有过这样的经历：

<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/json2.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-msdropdown/js/jquery.dd.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-ui-1.8.7.custom/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/alertbar.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.masonry.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/fileuploader.js" type="text/javascript"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.growfield2.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.placeholder.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.color.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/tipsy/src/javascripts/jquery.tipsy.js"></script>

现在，当我包含“allplugins.js”时，我得到了未捕获的类型错误。对象#没有方法“editable”

编辑抱歉-关于使用“>>”而不是“>”的东西可能是不必要的，因为重定向发生在“find”命令的级别，所以应该可以。很抱歉

这些东西是不必要的

应该是：

find somedir/ -name '*.js' -exec cat {} + >> ../allplugins.js

（即，“>>”而不是“>”）在前面加上：

rm ../allplugins.js

或者类似的效果，或者每次构建时都会使文件变大

结束不必要的部分

您将面临的另一个问题是，文件将根据可能完全任意的顺序进行连接，而它们几乎肯定具有要求特定偏序的相互依赖性。您应该重命名树中的文件，使简单的连接命令以正确的顺序执行其操作，或者以正确的顺序显式列出文件以进行连接。您得到的脚本标记的原始序列将是文件排序的良好起点

另外，找到你的朋友并向他/她扔一个水气球。

编辑抱歉-关于使用“>>”而不是“>”的东西可能是不必要的，因为重定向发生在“查找”命令的级别，所以应该可以。很抱歉

这些东西是不必要的

应该是：

find somedir/ -name '*.js' -exec cat {} + >> ../allplugins.js

（即，“>>”而不是“>”）在前面加上：

rm ../allplugins.js

或者类似的效果，或者每次构建时都会使文件变大

结束不必要的部分

您将面临的另一个问题是，文件将根据可能完全任意的顺序进行连接，而它们几乎肯定具有要求特定偏序的相互依赖性。您应该重命名树中的文件，使简单的连接命令以正确的顺序执行其操作，或者以正确的顺序显式列出文件以进行连接。您得到的脚本标记的原始序列将是文件排序的良好起点

---

另外，找到你的朋友，向他/她扔一个水气球。

由于相互依赖，合并的文件顺序不正确。以与以前工作时相同的顺序合并。

由于依赖于其他文件，合并的文件顺序不正确。以与之前相同的顺序进行合并。

您应该按照导入javascript插件的相同顺序连接javascript插件

您可以通过在一个文件（比如plugins.list）中列出它们来做到这一点，每个文件名对应一行。然后使用以下方法构建allplugins.js：

cat plugins.list | while read jsfile; do
  echo
  echo "//===== `basename "$jsfile"` ====="
  cat "$jsfile"
done > ../allplugins.js

例如，如果您有一个文件inc.js

obj = { 'editable': function(){ return 42; } };

然后script.js尝试使用inc.js中定义的对象：

obj.editable()

---

如果颠倒这两个文件的顺序，可以看到obj正在使用，但尚未定义。

您应该按照导入javascript插件的相同顺序连接它们

您可以通过在一个文件（比如plugins.list）中列出它们来做到这一点，每个文件名对应一行。然后使用以下方法构建allplugins.js：

cat plugins.list | while read jsfile; do
  echo
  echo "//===== `basename "$jsfile"` ====="
  cat "$jsfile"
done > ../allplugins.js

例如，如果您有一个文件inc.js

obj = { 'editable': function(){ return 42; } };

然后script.js尝试使用inc.js中定义的对象：

obj.editable()

---

如果您颠倒这两个文件的顺序，您可以看到obj正在使用，但尚未定义。

我注意到您用django标记了这个问题。您可能对自动处理js文件连接的方法感兴趣（请参阅）：

连接的文件在中指定 使用已加入的MEDIASYNC dict。这是一个 将单个媒体映射到特定媒体的dict 合并文件的别名

“已加入”：{
'styles/joined.css'：['styles/reset.css'，'styles/text.css']，
'scripts/joined.js'：['scripts/jquery.js'，'scripts/processing.js']，
}，

中列出的文件将被合并 使用 别名的名称。个人CSS 文件也将被推送到S3。 别名必须以.css或.js结尾 为了使内容类型 适当地设置

可以使用现有的模板标记 指加入的媒体。简单地 将联接的别名用作参数：

{%css\u print“joined.css”%}

在本地提供时，模板标记 将为以下各项呈现一个HTML标记： 组成连接的文件 文件：

远程服务时，一个HTML标记 将使用 加入的文件：

---

这是为了通过类似Amazon S3的方式使用静态内容站点而设计的，但它也可以用于从本地服务器提供静态媒体，同时自动处理文件联系。

我注意到你用django标记了这个问题。您可能对自动处理js文件连接的方法感兴趣（请参阅）：

连接的文件在中指定 使用已加入的MEDIASYNC dict。这是一个 将单个媒体映射到特定媒体的dict 合并文件的别名

“已加入”：{
'styles/joined.css'：['styles/reset.css'，'styles/text.css']，
'scripts/joined.js'：['scripts/jquery.js'，'scripts/processing.js']，
}，

中列出的文件将被合并 使用 别名的名称。个人CSS 文件也将被推送到S3。 别名必须以.css或.js结尾 为了使内容类型 适当地设置

可以使用现有的模板标记 指加入的媒体。简单地 将联接的别名用作参数：

{%css\u print“joined.css”%}

在本地提供时，模板标记 将为以下各项呈现一个HTML标记： 电影