Javascript和jQuery文件结构

我已经创建了一个相当大的应用程序javascript和jQuery。然而，我的文件结构变得有点混乱

目前我有一个大的JS文件，上面有一个

if（$（'#myDiv'）.length>0）{

test，只在正确的页面上执行代码，这是一个好的做法吗

同一个文件中还混合了普通JS函数和jQuery扩展名，例如

$.fn.myFunction=function（e）{

我还有一些代码如下所示：

function Product() {
  this.sku = '';
  this.name = '';
  this.price = '';
}
var myProduct = new Product;

Basket = new Object;

我的问题是关于javascript和jQuery项目的良好实践的指针。

代码

if（$（'#myDiv'）.length>0）{

不是良好实践。相反，将页面特定的JS作为函数，并在相应页面中执行它们。如下所示：

var T01 = function(){
  // JS specific to Template 01
};
var T02 = function(){
  // JS specific to Template 02
};

模板01的HTML头：

<script type="text/javascript"> $(T01); </script>

$（T01）；

是的，最好将尽可能多的代码放入单独的JS文件中，这样可以在传输之前对其进行压缩，从而加快下载速度。但是，不，您不应该有类似的代码

如果（$（'#myDiv'）。长度>0）{

在每个页面上。将JS代码拆分为可管理的函数，并在需要时调用这些函数

---

我认为在同一个文件中混合使用JS和jQuery函数没有问题。

一致性是黄金法则

您可以反复讨论设计模式，但如果您希望有易于维护的代码，新员工可以很快进入并获得概述，那么最重要的部分，无论您选择什么设计模式，都是要有一个一致的代码库

---

这也是最难做到的事情——作为程序员，尤其是作为一个团队，保持代码库的干净性和一致性可能是最难做到的事情。

当然，我能给你的第一个技巧是在自己的源文件中分离jQuery扩展名。你总是可以用一个缩小工具来处理所有事情，所以你可以我们不应该担心性能

关于你提到的代码，可以简化为

var Product = {
    sku: '',
    name: '',
    price: ''
}

var myProduct = objectCopy(Product);
var Basket = {};

假设您编写了一个简单的

objectCopy

函数，该函数循环遍历对象自身的属性并将它们复制到新对象（您可以根据需要制作浅拷贝或深拷贝）

最后，如果您认为您的代码开始变得混乱，您可能需要学习一些模式来组织JS代码，如。或者，如果您熟悉在后端执行此操作，您可能需要按照MVC模式组织应用程序。个人广告-我自己编写了一个同样的任务也有许多其他库，通常还会添加其他功能

如果您遵循MVC模式，您的页面实际上将对应于某个控制器中的某个操作，您可以通过如下调用启动它

<script>someController.someAction()</script>

并使用

$(document).ready(function() {
    mcv.autostart();
});

---

将代码拆分为多个文件对组织来说更好，但对下载时间来说更糟。每个额外的javascript文件都是一个必须发生的额外HTTP请求，因此这实际上会增加下载时间。不过，更干净的代码的好处可能超过了速度减慢的好处，而且您始终可以找到一种方法将文件合并到如果这成为一个问题，我会进行编译。此外，我不认为多个文件中的代码可以比一个文件中的代码更小。当然，你应该在服务器上组合js文件，有很多这样的例子。谢谢，我以后会使用函数容器

$(document).ready(function() {
    mcv.autostart();
});