2013-02-27 49 views
6

所有,我正在研究一个高度交互式的web应用程序,它需要大量的jquery或js代码,而且我发现我的代码变得有点难以维护,并不全是可读的。有时甚至作者也找不到指定的代码。如何使javascript代码易于维护

到目前为止,我为清晰代码所做的工作如下。在一个JS文件

  1. 一个JS组件。(例如,CustomTab.js是在我的应用程序一个凸片部件。)
  2. 使用templete以基于JSON部件HTML。
  3. 使用JQuery UI。
  4. Unobtrusive JavaScript。

有没有其他要点需要注意的地方?无论如何,任何建议或建议使js库/框架容易miantanance的技巧是appeciated,谢谢。

+0

好的问题。我会留下来看看这篇文章得到了什么回复! ;-) – 2013-02-27 05:51:47

+1

你也可以试试'jquery cdn',这样你可以从你的javascript文件夹中删除jquery文件 – Prateek 2013-02-27 05:51:58

+0

为什么你说你的代码变得难以维护?你遇到了什么具体问题?具体来说,为什么作者找不到代码?有没有更多的细节可以帮助我们? – MattDiamant 2013-02-27 05:54:23

回答

4

我可以建议你使用模块模式和RequireJS一起组织你的JavaScript代码。对于生产,您将能够使用RequireJS优化器将您的模块构建到一个JavaScript文件中。

此外,如果你期望你的客户端应用程序将是巨大的,考虑使用一些JavaScript MVC框架,如Backbone.js和服务器端RESTful服务。

+0

嗨,Evgeniy,我喜欢你的想法。你能告诉我更多关于js mvc吗?它有什么好处?谢谢。 – 2013-02-27 06:10:16

+0

最主要的好处是浏览器关心视图渲染和用户的操作处理,所以你将服务器卸载了很多,交互通常通过AJAX进行,并且它改善了用户体验。我目前的项目中有86%的JavaScript代码和12%的Python代码(RESTful服务),因此您可以想象在客户端使用了多少处理器时间以及服务器上有多少处理器时间。 – 2013-02-27 06:46:48

+0

我可以将jQuery UI与它结合起来吗?因为我认为jQuery UI很擅长UI展示。谢谢 – 2013-02-27 07:07:33

1

我用我的图书馆这个命名空间模式:

MyLibrary.ListView.js:

var MyLibrary = MyLibrary || {}; 

MyLibrary.ListView = { 

    doSomethingOnListView: function() { 
     ... 
     return this; 
    }, 

    doSpecialThing: function() { 
     ... 
     return this; 
    }, 

    init: function() { 

     // Additional methods to run for all pages 
     this.doSomethingOnListView(); 

     return this; 
    } 
}; 

无论页面需要这样的:

<script type="text/javascript" src="/js/MyLibrary.ListView.js"></script> 
<script type="text/javascript"> 
$(function() { 
    MyLibrary.ListView 
     .init() 
     .doSpecialThing(); 
}); 
</script> 

你甚至可以链方法,如果一定页面需要额外的功能。

1

目前我还在为我的公司开发JS框架。我在做的是我使用面向JS的OOP元素。换句话说,我正在实现类似于C#库的代码(并非如此,模拟将是正确的词)。作为C#中的示例,您使用Microsoft.Window.Forms,因此我可以使用JSOOP并使用方法扩展和重写来创建相同的场景。但是如果你在你的项目中走得太远,把你的JS代码转换成JSOOP将会很耗时。

使用JSLint,这将验证您的代码,并使其成为可读的脚本引擎友好代码。尽管JSLint非常严格,您也可以使用JSHint。

对每个组件使用单独文件是一个好主意,我也在做。

如果你喜欢,你可以下载jQuery开发者版本,你可以有一个大概的想法他们如何创建框架。我学习了很多关于jQuery框架的东西!

1

这和我每次问自己的问题完全一样。我认为有几种方法可以轻松维护代码。

  • 在JavaScript开源项目中贡献并了解他们如何解决这个问题。我认为你可以从每个项目中收集一些独特的解决方案,项目结构的公共部分将回答你关于维护的问题。

  • 使用准备好的解决方案,如backboneknockoutemberangularjs如果我没有记错的角度不给你的结构,但对于用更少的代码创建页面为您提供强大的工具。同时检查todomvc的现成解决方案。

  • 阅读书籍并尝试为您的需求创建一些结构。这将是困难和漫长的,但结果(也许几年后:))将是真棒。

+0

嗨,鲁本,他们都是好方法,但我更喜欢第二个。试试js mvc框架,谢谢。 – 2013-02-27 07:14:02