如何构造我的javascript/jquery代码? [英] How to structure my javascript/jquery code?
问题描述
我正在玩一个非常密集的基于ajax的jquery Web应用程序.在某种程度上，我几乎不了解应该触发哪些动作等的事件.
I am toying around with a pretty intensive ajax based jquery web application. It is getting to a point where I almost loose track of what events that should trigger what actions etc.
从某种程度上来说，我有点觉得我的javascript结构是错误的.你们如何构造javascript/jquery代码，事件处理等，对于新手javascript开发人员有何建议.
I am sort of left with a feeling that my javascript structure is wrong, on a more basic level. How do you guys structure your javascript/jquery code, the event handling etc., any advise for a newbie javascript developer.
推荐答案
AMDS！
自从第一份答案发布到这个问题已经有一段时间了，许多事情已经改变了. 首先，JS浏览器世界似乎正朝着用于代码组织的AMD(异步模块定义)发展.
It's been awhile since first answers got posted to this question and many things have changed. First and foremost, the JS browser world seems to be moving towards AMDs (asynchronous module definition) for code organization.
有效的方法是将所有代码编写为AMD模块，例如:
The way that works is you write ALL your code as AMD modules, e.g.:
define('moduleName', ['dependency1', 'dependency2'], function (dependency1, dependency2) {
/*This function will get triggered only after all dependency modules loaded*/
var module = {/*whatever module object, can be any JS variable here really*/};
return module;
});
然后使用例如 curl.js 或 require.js 等的AMD加载器加载模块，例如:
And then modules get loaded using AMD loaders like curl.js or require.js etc, for example:
curl(
[
'myApp/moduleA',
'myApp/moduleB'
],
).then(
function success (A, B) {
// load myApp here!
},
function failure (ex) {
alert('myApp didn't load. reason: ' + ex.message);
}
);
优点是:
-
您只需要在页面上包含一个单独的
<script>元素即可加载AMD加载程序本身(其中一些很小).
You only have to include single
<script>element on your page that loads AMD loader itself (some of them are quite tiny).
之后，所有JS文件将以异步NON BLOCKING自动获取！时尚，因此速度更快！
After that all JS files will be fetched automatically in asynchronous NON BLOCKING! fashion, thus way faster!
必需的模块仅在其依赖项加载后才会执行.
Necessary modules will get executed only after its dependencies got loaded.
模块化(意味着易于维护和重用的代码).
Modular (which means code that is easier to maintain and re-use).
如果使用正确，可以完全抑制全局变量污染.
Global variables pollution can be completely curbed if used correctly.
老实说，一旦概念在您的脑海中得到了点击的点击，您将永远不会回到原来的方式.
Honestly, once concept has clicked in your head, you'll never go back to your old ways.
P.S:从1.7版开始，jQuery确实将自己注册为AMD模块.
P.S: jQuery does register itself as AMD module starting from version 1.7.
有关AMDS的更多信息:
More information on AMDS:
- https://github.com/cujojs/curl
- http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition
- http://requirejs.org/
- http://www.bennadel.com/blog/2275-Using-RequireJS-For-Asynchronous-Script-Loading-And-JavaScript-Dependency-Management.htm
- https://github.com/cujojs/curl
- http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition
- http://requirejs.org/
- http://www.bennadel.com/blog/2275-Using-RequireJS-For-Asynchronous-Script-Loading-And-JavaScript-Dependency-Management.htm
- https://github.com/Integralist/Blog-Posts/blob/master/2012-01-04-Beginners-guide-to-AMD-and-RequireJS.md
这篇关于如何构造我的javascript/jquery代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
