Question

我想获得一些关于构建我的javascript代码和jquery函数的建议。我喜欢使用JQuery进行dom事件处理和ajax等。我在过去写过看起来很糟糕的代码，我的整个js文件由一堆匿名的Jquery函数组成。

我想知道 - 与JQuery结合时，“结构良好”的javascript文件是什么样的？是否会有许多标准的javascript函数，然后在需要时放入一些JQuery $()函数？以纯粹的程序方式处理代码是否可以，或者最好使用一些OOP概念？我总是只有一堆函数，这些函数在这里和那里分层调用辅助函数并没有对象（除了使用一些随机第三方库时使用的那些）。

我不是一个javascript程序员（主要是Java），所以来自经验丰富的js开发人员的任何建议都会很棒。

Answer 1

老实说，我尝试将MVC概念应用于jQuery。一旦你超过500行，不这样做只会让你很难跟上这些东西。

模型

任何本地缓存的数据
缓存
读/写服务器（AJAX）

查看

基本上所有的DHTML内容（HTML生成/操作，CSS更改，动画/效果等）

控制器

事件处理（用户事件和自定义事件）

此处甚至有some projects out there。

Answer 2

我建议面向对象的结构，不仅仅是因为这个概念是最先进的，但是出于概述的原因，你应该封装彼此属于的函数。

如果您有一个大型的js文件（出于性能原因，您应该只有一个），如果您没有按功能构建代码，那么几周后您就找不到任何内容。

Answer 3

如果你上床用jQuery，那么我的建议就是一路上床。这意味着在适当的时候编写自己的jQuery插件代码，只要你发现自己想要编写一个以jQuery对象作为参数的函数。

因为网页的Javascript代码的性质基本上都是在事件循环中发生的，所以大多数例程都非常小。可能要完成的最大工作块是初始化所有处理程序的代码。当您将具有许多页面的应用程序网站组合在一起时，您可以选择：

让每个页面成为自己的特殊雪花，并为自己的行为提供自己的Javascript

或

将所有网页的行为收集并标准化为单一的全球机制

我经历过这两种方式，第二种方式肯定更好，但它有自己的问题。您必须始终处于最佳状态，并确保特殊情况不会导致代码流失到HTML（或JSP）源中。有人必须处理站点全局脚本代码的性能问题，试图将自己应用于每个页面。当然，你开始发展一个可怕的初始化函数。

什么使我免于维护地狱这样的事情是一个构建步骤，将单独的脚本文件（每个页面“功能”，或多或少，加上自定义jQuery插件）组合成一个单片脚本，以实际部署到服务器。我使用FreeMarker做到了这一点，但还有很多其他方法可以做到。这个步骤的一个很好的副产品是运行YUICompressor的好时机。

Answer 4

我必须得到Peter Bailey的回答，因为最好将M V和C分开。我发现GUI小部件的最佳风格是创建一个初始化小部件的功能（创建HTML，添加样式或附加动画事件），然后将自定义事件处理程序附加到使用它的不同位置

自定义事件是 key ，用于可重用的小部件。它使代码在GUI小部件中对DOM更改不那么脆弱，并使代码更具可读性。

例如，假设您有一个自定义按钮，可以动态创建HTML结构，如下所示：

<div class="MyButton"><div class="button-helpful-wrapper"><img src="/blah.png"/></div></div>

假设您的初始化代码使用点击事件添加了一些淡入淡出或其他内容。没关系。

有趣的是你想要使用这个按钮;您将“点击”事件附加到哪个div？而不必知道GUI小部件的结构，最好只为小部件创建一种新类型的事件。像这样：

$('#MyButton_Instance1').bind('myclick', function () {...} );

对小部件的结构完全不了解。

要完成这项工作，您所要做的就是添加一些将实际事件代理到自定义事件的绑定/触发器。放置它的最佳位置是您的小部件初始化代码：

$('.MyButton').myButton();

哪里

myButton = function () {
    $(this).find('.button-helpful-wrapper').bind('click', function (event) {
        $(this).trigger('myclick', event);
    });
}

这使得您的小部件非常可重用，因为您没有附加到特定的DOM元素事件，而是附加到通用的小部件事件。试试吧。

Answer 5

首先，您可以使用对象样式方法，函数方法

实施例

var User = {
    loggedin : false,
    name : "Robert PItt",
    id : 45
}

你可以在js文件中创建一个系统项，如此

if(typeof System == undefined)
{
    System = new Object();
}

System.Globals = 
{
   //Some Global Settings,uri's etc in here
}

System.Gui = {
   Init : function()
   {
      if(User.loggedin == true)
      {
          this.RemoveItem("#userlogin");
      }
   },
   RemoveItem: function(form)
   {
       $(form).remove();
   }
}

System.Gui.init(); //Within head maybe/

正如您所看到的，您可以创建几个“容器”来保存您的方法，容器可以帮助您组织代码并同时分离它，您可以创建GUI等事物，如Ajax，Tools，安全，回调等。

javascript / jquery代码组织

5 个答案: