我正在使用一个非常密集的基于ajax的jquery Web应用程序.它已经到了我几乎无法跟踪应该触发什么动作等事件的地步.
我有点觉得我的javascript结构错了,在更基础的层面上.你们如何构建你的javascript/jquery代码,事件处理等,对新手javascript开发人员的任何建议.
AMDS!
这已经有一段时间了,因为第一个答案被发布到这个问题并且许多事情都发生了变化.首先,JS浏览器世界似乎正朝着代码组织的AMD(异步模块定义)发展.
有效的方法是将所有代码编写为AMD模块,例如:
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加载器加载模块,例如:
curl( [ 'myApp/moduleA', 'myApp/moduleB' ], ).then( function success (A, B) { // load myApp here! }, function failure (ex) { alert('myApp didn't load. reason: ' + ex.message); } );
优点是:
您只需在页面上包含加载AMD加载程序本身的单个元素(其中一些非常小).
之后,所有JS文件将在异步非阻塞中自动获取!时尚,因此更快!
只有在加载了依赖项后,才会执行必要的模块.
模块化(这意味着代码更易于维护和重用).
如果使用得当,可以完全抑制全局变量污染.
老实说,一旦概念点击了你的脑袋,你将永远不会回到过去的方式.
PS:jQuery从版本1.7开始将自己注册为AMD模块.
有关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/Integralist/Blog-Posts/blob/master/2012-01-04-Beginners-guide-to-AMD-and-RequireJS.md
对于javascript代码,我发现Christian Heilmann的以下链接不可或缺
模块模式
配置脚本
我也非常喜欢Peter Michaux 在这里描述的方法
对于jQuery,我衷心地建议阅读有关创作的指南,我发现这个关于jQuery 插件模式的教程非常好
为了控制我的事件,我使用了发布/订阅机制
jQuery.subscribe = function( eventName, obj, method ){ $(window).bind( eventName, function() { obj[method].apply( obj, Array.prototype.slice.call( arguments, 1 ) ); }); return jQuery; } jQuery.publish = function(eventName){ $( window ).trigger( eventName, Array.prototype.slice.call( arguments, 1 ) ); return jQuery; }
这是一个使用它的例子
// a couple of objects to work with var myObj = { method1: function( arg ) { alert( 'myObj::method1 says: '+arg ); }, method2: function( arg1, arg2 ) { alert( arg1 ); //republish $.publish( 'anEventNameIMadeUp', arg2 ); } } var myOtherObj = { say: function(arg){ alert('myOtherObj::say says: ' + arg); } } // you can then have all your event connections in one place //myObj::method2 is now listening for the 'start' event $.subscribe( 'start', myObj, 'method2' ); //myOtherObj::say is now listening for the 'another' event $.subscribe( 'anotherEvent', myOtherObj, 'say' ); //myObj::method1 is now listening for the 'anEventNameIMadeUp' event $.subscribe( 'anEventNameIMadeUp', myObj, 'method1' ); //so is myOtherObj::say $.subscribe( 'anEventNameIMadeUp', myOtherObj, 'say' ); // ok, trigger some events (this could happen anywhere) $.publish( 'start', 'message1', 'message2' ); $.publish( 'anotherEvent', 'another message' );
除了模块模式之外,我绝对建议您阅读对象文字模式; 这是一篇很好的文章:
http://ajaxian.com/archives/show-love-to-the-object-literal