blocks|key|356598|text|将一些无名函数放入全局作用域函数(或您自己的“名称空间”对象)中，特别是重用函数，它看起来就不像您发布的那样了。有点像你链接的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356599|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Stick some of the anon functions into global scope functions (or your own "namespace" object), especially the re-used functions, and it begins to look less like what you posted. Kind of like what you linked to.

blocks|key|358775|text|好吧，首先，拥有一个理解javascript的好的IDE会有很大的帮助，即使只是识别匹配的分界(大括号、括号等)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|358776|如果您的代码真的变得如此复杂，请考虑创建您自己的静态对象来组织混乱-您不必费力地保持所有内容都是匿名的。|358777|var+aCustomObject+=+{
++++container:+$("#inputContainer"),
++++initialize:+function()
++++{
++++++++for(var+i=0;+i+<+5;+i%2B%2B)
++++++++{
++++++++++++$("<input/>").changed(+aCustomObject.changeHandler+);
++++++++}
++++},
++++changeHandler:+function(+event+)
++++{
++++++++$.ajax(+{success:+aCustomObject.ajaxSuccessHandler}+);
++++},
++++ajaxSuccessHandler:+function(+data+)
++++{
++++++++$.each(+aCustomObject.container.children(),+aCustomObject.updateBindings+)
++++},
++++updateBindings:+function(+j,+w+)
++++{
++++++++$(w).unbind().changed(+function(){}+);
++++}
}
aCustomObject.initialize();|code-block|syntax|javascript|358778|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Well, for one, having a good IDE that understands javascript can help tremendously, even if just to identify matching demarcations (braces, parens, etc).

If your code starts to really get that complex, consider making your own static object to organize the mess - you don't have to work so hard to keep everything anonymous.

<pre><code>var aCustomObject = {
 container: $("#inputContainer"),
 initialize: function()
 {
 for(var i=0; i &lt; 5; i++)
 {
 $("&lt;input/&gt;").changed( aCustomObject.changeHandler );
 }
 },
 changeHandler: function( event )
 {
 $.ajax( {success: aCustomObject.ajaxSuccessHandler} );
 },
 ajaxSuccessHandler: function( data )
 {
 $.each( aCustomObject.container.children(), aCustomObject.updateBindings )
 },
 updateBindings: function( j, w )
 {
 $(w).unbind().changed( function(){} );
 }
}
aCustomObject.initialize();
</code></pre>

blocks|key|3357990|text|到目前为止，我这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3357991|//+initial+description+of+this+code+block
$(function()+{++++++++
++++var+container+=+$("#inputContainer");

++++for(var+i=0;+i+<+5;+i%2B%2B)+{
++++++++$("<input/>").changed(inputChanged).appendTo(container);
++++};+

++++function+inputChanged()+{
++++++++$.ajax({
++++++++++++success:+inputChanged_onSuccess
++++++++});
+++++}+

+++++function+inputChanged_onSuccess(data)+{
++++++++$.each(container.children(),+function(j,w)+{
++++++++++$(w).unbind().changed(function()+{
+++++++++++++//replace+the+insanity+with+another+refactored+function
++++++++++});
++++++++});
++++++}
});|code-block|syntax|javascript|3357992|在JavaScript中，函数是一级对象，因此可以用作变量。|3357993|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

So far, I do it like this:

<pre><code>// initial description of this code block
$(function() { 
 var container = $("#inputContainer");

 for(var i=0; i &lt; 5; i++) {
 $("&lt;input/&gt;").changed(inputChanged).appendTo(container);
 }; 

 function inputChanged() {
 $.ajax({
 success: inputChanged_onSuccess
 });
 } 

 function inputChanged_onSuccess(data) {
 $.each(container.children(), function(j,w) {
 $(w).unbind().changed(function() {
 //replace the insanity with another refactored function
 });
 });
 }
});
</code></pre>

In JavaScript, functions are first-class objects and can thus be used as variables.

blocks|key|3145308|text|在我看来，BaileyP描述的方法是我开始使用的方法，然后我通常会将所有东西抽象成更多可重用的块，特别是当一些功能扩展到更容易抽象到一个插件而不是特定于一个站点的时候。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3145309|只要你把大段代码放在一个单独的文件中，并且编码得很好，你就可以得到一些真正干净的语法。|3145310|//+Page+specific+code
jQuery(function()+{
++++for(var+i+=+0;+i+<+5;+i%2B%2B)+{
+++++++++$("<input/>").bindWithServer("#inputContainer");
++++}
});

//+Nicely+abstracted+code
jQuery.fn.bindWithServer+=+function(container)+{
+++++this.change(function()+{
+++++++++++++jQuery.ajax({
+++++++++++++++++url:+'http://example.com/',
+++++++++++++++++success:+function()+{+jQuery(container).unbindChildren();+}
+++++++++++++});
+++++});
}
jQuery.fn.unbindChildren+=+function()+{
++++this.children().each(function()+{
++++++++jQuery(this).unbind().change(function()+{});
++++});
}|code-block|syntax|javascript|3145311|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In my opinion the method described by BaileyP is what I use to start off with then I normally abstract everything into more re-usable chunks, especially when some functionality expands to the point where it's easier to abstract it into a plugin then have it specific to one site.

As long as you keep the large blocks of code in a seperate file and coded nicely you can then end up with some really clean syntax.

<pre><code>// Page specific code
jQuery(function() {
 for(var i = 0; i &lt; 5; i++) {
 $("&lt;input/&gt;").bindWithServer("#inputContainer");
 }
});

// Nicely abstracted code
jQuery.fn.bindWithServer = function(container) {
 this.change(function() {
 jQuery.ajax({
 url: 'http://example.com/',
 success: function() { jQuery(container).unbindChildren(); }
 });
 });
}
jQuery.fn.unbindChildren = function() {
 this.children().each(function() {
 jQuery(this).unbind().change(function() {});
 });
}
</code></pre>

blocks|key|3358022|text|我只想补充一下前面提到的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3358023|$.each(container.children(),+function(j,w)+{
++++$(w).unbind().change(function()+{+...+});
});|code-block|syntax|javascript|3358024|可以优化为：|3358025|container.children().unbind().change(function()+{+...+});|3358026|这一切都是关于链接的，这是一种简化代码的好方法。|3358027|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Just want to add to what was mentioned previously that this:

<pre><code>$.each(container.children(), function(j,w) {
 $(w).unbind().change(function() { ... });
});
</code></pre>

can be optimized to:

<pre><code>container.children().unbind().change(function() { ... });
</code></pre>

It's all about chaining, a great way to simplify your code.

blocks|key|3358088|text|我描述了我的方法in+your+other+post。缩写形式：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3358089|3358090|不要混用javascript和HTML|unordered-list-item|3358091|使用类(基本上开始将应用程序看作是小部件的集合)|3358092|只有一个$(document).ready(...)block|3358093|将jQuery实例发送到您的类中(而不是使用插件)|3358094|3358095|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/247209/javascript-how-do-you-organize-this-mess#284700^0|8|I|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|-4|5|6|7|10|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|11|8|@]|9|@]|C|$]]|$1|H|3|I|5|G|7|12|8|@]|9|@]|C|$]]|$1|J|3|K|5|G|7|13|8|@]|9|@]|C|$]]|$1|L|3|M|5|G|7|14|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

I described my approach <a href="https://stackoverflow.com/questions/247209/javascript-how-do-you-organize-this-mess#284700">in your other post</a>. Short form:

<ul>
<li>do not mix javascript and HTML</li>
<li>use classes (basically start to see your application as a collection of widgets)</li>
<li>only have a single $(document).ready(...) block</li>
<li>send jQuery instances into your classes (instead of using plugins)</li>
</ul>

blocks|key|356698|text|有人写了一篇关于类似主题的帖子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356699|jQuery+Code+Does+not+have+to+be+Ugly|offset|length|356700|例如，作者Steve+Wellens建议不要使用匿名函数，因为这会使代码更难阅读。相反，将函数引用推送到jQuery方法中，如下所示：|356701|$(document).ready(DocReady);

function+DocReady()
{+++++++
++++AssignClickToToggleButtons();
++++ColorCodeTextBoxes();
}|code-block|syntax|javascript|356702|本文的另一个要点是将一个jQuery对象赋给一个具体的变量，这会使代码看起来更整洁，减少对实际jQuery对象的依赖，并且更容易分辨出某一行代码在做什么：|356703|function+ColorCodeTextBoxes()
{
++++var+TextBoxes+=+$(":text.DataEntry");

++++TextBoxes.each(function()
++++{
++++++++if+(this.value+==+"")
++++++++++++this.style.backgroundColor+=+"yellow";
++++++++else
++++++++++++this.style.backgroundColor+=+"White";
++++});
}|356704|entityMap|0|LINK|mutability|MUTABLE|url|http://weblogs.asp.net/stevewellens/archive/2010/01/25/jquery-code-does-not-have-to-be-ugly.aspx^0|0|0|10|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Somebody wrote a post on the similar topic.

<a href="http://weblogs.asp.net/stevewellens/archive/2010/01/25/jquery-code-does-not-have-to-be-ugly.aspx" rel="nofollow noreferrer">jQuery Code Does not have to be Ugly</a>

For instance, the author, Steve Wellens, suggests to not use anonymous functions, as it makes code harder to read. Instead, push the function reference into the jQuery methods, like so:

<pre><code>$(document).ready(DocReady);

function DocReady()
{ 
 AssignClickToToggleButtons();
 ColorCodeTextBoxes();
}
</code></pre>

Another takeaway from the article is to assign a jQuery object to a concrete variable, which makes the code look cleaner, less dependent on the actual jQuery object, and easier to tell what a certain line of code is doing:

<pre><code>function ColorCodeTextBoxes()
{
 var TextBoxes = $(":text.DataEntry");

 TextBoxes.each(function()
 {
 if (this.value == "")
 this.style.backgroundColor = "yellow";
 else
 this.style.backgroundColor = "White";
 });
}
</code></pre>

I've been struggling lately with understanding the best way to organize jQuery code. I asked another question earlier and I don't think I was specific enough (<a href="https://stackoverflow.com/questions/247209/javascript-how-do-you-organize-this-mess">found in this question here</a>).

My problem is that the richer you make an application, the quicker your client side gets out of control. Consider this situation...

<pre><code>//Let's start some jQuery
$(function() { 
 var container = $("#inputContainer");

 //Okay let's list text fields that can be updated
 for(var i=0; i &lt; 5; i++) {

 //okay let's add an event for when a field changes
 $("&lt;input/&gt;").change(function() {

 //okay something changed, let's update the server
 $.ajax({
 success:function(data) {

 //Okay - no problem from the server... let's update
 //the bindings on our input fields
 $.each(container.children(), function(j,w) {

 //YIKES!! We're deep in here now!!
 $(w).unbind().change(function() {

 //Then insanity starts...

 }); // end some function

 }); //end some loop

 } // what was this again?

 }); //ending something... not sure anymore

 }).appendTo(container); //input added to the page... logic WAY split apart

 }; //the first loop - whew! almost out!

}); //The start of the code!!
</code></pre>

Now this situation isn't too far from impossible. I'm not saying this is the right way to do it, but it's not uncommon to find yourself several levels down into a jQuery command and starting to wonder how much more logic can add before the screen begins to melt.

My question is how are people managing this or organizing to limit the complexity of their code?

<a href="https://stackoverflow.com/questions/247209/javascript-how-do-you-organize-this-mess#247382">I listed how I'm doing it in my other post</a>...

jQuery and "Organized Code"

我最近一直在努力理解组织jQuery代码的最佳方法。我之前问了另一个问题，我想我还不够具体()。我的问题是，你制作的应用程序越丰富，你的客户端就越快失控。考虑这种情况..。//Let's start some jQuery$(function() {            var container = $("#inp...

问jQuery和“有组织的代码”
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery和“有组织的代码”EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery和“有组织的代码”
EN