当使用 Django、Kohana、Rails 等 MVC 网络框架构建网络应用程序时,我最初将没有 JS 驱动组件的应用程序放在一起,然后将它们作为“改进”添加到 UI。
这种方法导致非侵入式 JS,但我没有一个好的“标准”方法来组织 JS 工作。我在此类应用程序中编写的大多数 JS 都是 10-30 行的 JQuery 片段,它们挂接到 UI 的某些非常特定的部分。
到目前为止,我经常将这些东西与它们管理的 UI 部分一起内联。这让我觉得很脏,我希望 JS 代码像 python/php/ruby 代码一样有条理,我希望它是可测试的,我希望它是可重用的。
在这样的设置中组织 JS 代码的最佳方式是什么,我们没有构建成熟的 JS 客户端应用程序,主要内容仍然是服务器端?
最佳答案
我也很想知道其他人对此有何评论。我采用的方法是使用对象文字表示法来存储大部分函数,并将它们存储在一个包含在所有页面(库)中的文件中
uiHelper = {
inputDefault:function(defaulttext){
// function to swap default text into input elements
},
loadSubSection:function(url){
// loads new page using ajax instead of refreshing page
},
makeSortable:function(){
// apply jQuery UI sortable properties to list and remove non javascript controls
}
}
然后我在任何需要使用库的页面上包含一个 .js 文件,该库将该页面上的元素与库中的函数联系起来。我已尝试使每个函数尽可能可重用,有时页面上的事件绑定(bind)函数会调用我的几个库函数。
$(document).ready(function(){
$('#mybutton').live('click',uiHelper.loadSubSection);
//more complicated helper
$('#myotherbutton').live('click',function(){
uiHelper.doThisThing;
uiHelper.andThisThing;
});
});
编辑:使用 jsDoc http://jsdoc.sourceforge.net/注释这些函数的符号可以为“库”生成文档,并有助于使您的代码易于阅读(按注释拆分函数)。
以下问题与您自己的问题类似 - 您应该检查一下...
Commonly accepted best practices around code organization in JavaScript
关于javascript - 在主要 "meat"仍然是服务器端的 webapps 中组织 JS 代码的最佳方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4080851/