您的位置：首页 > 移动开发 > Objective-C

【译】Using Objects to Organize Your Code

2016-07-03 23:58 369 查看
耗了一个晚上吐血翻译不过也学到了不少...《使用对象来组织你的代码》，翻译中发现原作者在原文中有部分代码有误或不全，本文已修改和添加~

丽贝卡·墨菲原文链接：http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code

当你不只是使用jQuery的简单片段而是开始开发更复杂的用户交互，你的代码会变得笨重和难以调试，这篇文章通过使用对象字面量的形式向你展示如何在行为特征的角度思考这些交互。

在过去几年，JavaScript库让初级开发者有能力为他们的站点制作炫酷的交互，就像jQuery，有着非常简单的语法得以让零编程经验的人装饰他们的网页，一个插件或自定义的几十行代码运行出的效果就能给人留下深刻印象。

但是等等，现今的需求早已改变了，现在你的代码可能需要根据ID的不同而被重用，这样的话用jQuery（或其他库）的编写的代码片段看似用处不大了，它们只是代码片段不是吗？当你不使用插件而实现 show() 或 hide() 的功能应该怎么设计你的代码呢？

Introducing the Object Literal Pattern 对象字面量的介绍

对象字面量提供了一个包括行为的方式去组织代码，这也意味着避免污染全局命名空间，这是对于一个较大项目的很好做法，它迫使你去思考你的代码在一开始就应该做什么以及哪些部分需要放置在合适的位置。对象字面量是封装相关行为的方式，如下所示：

var myObjectLiteral = {
myBehavior1 : function() {
/* do something */
},

myBehavior2 : function() {
/* do something else*/
}
};


假设你使用jQuery完成一个点击list项显示和隐藏的功能：

$(document).ready(function() {
$('#myFeature li')
.append('<div/>')
.each(function(){
$(this).find('div')
.load('foo.php?item=' + $(this).attr('id'));
})
.click(function() {
$(this).find('div').show();
$(this).siblings().find('div').hide();
});
});


就是这么简单，但是当你想在这个例子中改变一些需求，例如加载内容的URL的方式，以及加载内容的URL，或者是显示和隐藏的行为等等，对象字面量清晰地划分了这些功能特征，看起来如下：

var myFeature = {
config : {
wrapper : '#myFeature',
container : 'div',
urlBase : 'foo.php?item='
},

init : function(config){
$.extend(myFeature.config, config);
$(myFeature.config.wrapper).find('li').
each(function(){
myFeature.getContent($(this));
}).
click(function(){
myFeature.showContent($(this));
});
},

buildUrl : function($li){
return myFeature.config.urlBase + $li.attr('id');
},

getContent : function($li){
$li.append('<' + myFeature.config.container + '/>');
var url = myFeature.buildUrl($li);
$li.find(myFeature.config.container).load(url);
},

showContent : function($li){
$li.find(myFeature.config.container).show();
myFeature.hideContent($li.siblings());
},

hideContent : function($elements){
$elements.find(myFeature.config.container).hide();
}
};

$(document).ready(function() { myFeature.init(); });


最初的例子是很简单的，用对象字面量形式却让代码变得更长，说实话，对象字面量形式一般是不会节省你的代码量的。使用对象字面量我们将代码的逻辑部分分割开来，因此很容易找到我们想要改变的部分，我们已经取得我们的功能扩展，提供了覆写默认配置的功能。并且做了文档上的限制，很容易一眼看出该部分做什么功能。抛开这个例子的简单结构，随着需求的增长我们的代码结构将变得愈来愈清晰。

An in-depth example 一个更深层次的示例

我们的任务是创建每个部分含有多项内容的UI元素，点击一个区块将显示区块中项目的列表，点击项目列表中的项目，项目内容将显示在内容区域。每当区块被显示时，第一个项目列表应该也被显示。第一部分应该在页面加载时被显示。

作者想表达的效果图应该是这样的：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>An in-depth example 一个更深层次的示例</title>
<style type="text/css">
.current{
background: #f47460;
}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<h1>This is My Nifty Feature</h1>

<div id="myFeature">
<ul class="sections">
<li>
<h2><a href="/section/1">Section 1</a></h2>
<ul>
<li>
<h3><a href="/section/1/content/1">Section 1 Title 1</a></h3>
<p>The excerpt content for Content Item 1</p>
</li>
<li>
<h3><a href="/section/1/content/2">Section 1  Title 2</a></h3>
<p>The expert content for Content Item 2</p>
</li>
<li>
<h3><a href="/section/1/content/3">Section 1 Title 3</a></h3>
<p>The expert content for Content Item 3</p>
</li>
</ul>
</li>

<li>
<h2><a href="/section/2">Section 2</a></h2>
<ul>
<li>
<h3><a href="/section/2/content/1">Section 2 Title 1</a></h3>
<p>The excerpt content for Content Item 1</p>
</li>
<li>
<h3><a href="/section/2/content/2">Section 2  Title 2</a></h3>
<p>The expert content for Content Item 2</p>
</li>
<li>
<h3><a href="/section/2/content/3">Section 2 Title 3</a></h3>
<p>The expert content for Content Item 3</p>
</li>
</ul>
</li>

<li>
<h2><a href="/section/3">Section 3</a></h2>
<ul>
<li>
<h3><a href="/section/3/content/1">Section 3 Title 1</a></h3>
<p>The excerpt content for Content Item 1</p>
</li>
<li>
<h3><a href="/section/3/content/2">Section 3  Title 2</a></h3>
<p>The expert content for Content Item 2</p>
</li>
<li>
<h3><a href="/section/3/content/3">Section 3 Title 3</a></h3>
<p>The expert content for Content Item 3</p>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
var myFeature = {
'config': {
'container' : $('#myFeature')
},
'init': function(config){
if(config && typeof config == 'object'){
$.extend(myFeature.config, config);
}
//缓存变量
myFeature.$container = myFeature.config.container;
myFeature.$sections = myFeature.$container.
find('ul.sections > li');
myFeature.$items = myFeature.$sections.
find('ul > li');
myFeature.$section_nav = $('<p/>')
.attr('id', 'section_nav')
.prependTo(myFeature.$container);
myFeature.$item_nav = $('<p/>')
.attr('id', 'item_nav')
.insertAfter(myFeature.$section_nav);
myFeature.$content = $('<p/>')
.attr('id', 'content')
.insertAfter(myFeature.$item_nav);
//初始化新增的这三层DOM结构
myFeature.buildSectionNav(myFeature.$sections);
myFeature.$section_nav.find('li:first').click();
//隐藏原有的HTML结构
myFeature.$container.find('ul.sections').hide();
},
'buildSectionNav' : function($sections){
//绑定事件
$sections.each(function(){
var $section = $(this);
$('<li>').text($section.find('h2:first').text())
.appendTo(myFeature.$section_nav)
.data('section', $section)
.click(myFeature.showSection)
});
},
'buildItemNav' : function($items){
//绑定事件
$items.each(function(){
var $item = $(this);
$('<li>').text($item.find('h3:first').text())
.appendTo(myFeature.$item_nav)
.data('item', $item)
.click(myFeature.showContentItem);
});
},
'showSection' : function(){
//事件处理程序
var $li = $(this);
myFeature.$item_nav.empty();
myFeature.$content.empty();

var $section = $li.data('section');
$li.addClass('current')
.siblings().removeClass('current');
var $items = $section.find('ul li');
myFeature.buildItemNav($items);

myFeature.$item_nav.find('li:first').click();
},
'showContentItem' : function(){
//事件处理程序
var $li = $(this);
$li.addClass('current')
.siblings().removeClass('current');
var $item = $li.data('item');
myFeature.$content.html($item.html());
}
}

$(document).ready(function(){myFeature.init()});
</script>
</body>
</html>


View Code
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航