Dreamer’s Blog 몽상가의 블로그

英文原文：The seven rules of Unobtrusive JavaScript 영어 원서 : 겸손한 자바 스크립트의 규칙 7
原文地址： http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/ 원래 주소 : http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
原文作者： Chris Heilmann 원래 저자 : Chris Heilmann

写在前面 ：前一段时间kejun给我们培训JavaScript的时候，在幻灯片上推荐了很多特别经典的文章，其中就有这一篇。 사설 : 몇 년 전에 우리가 자바 스크립트를 kejun 훈련, 슬라이드의 주차장에 특별 전형적인 기사의 추천이 하나있다. 读过之后感觉很不错，不过我看文章往往理解不深入，恰好这篇文章我没有发现中文版本，所以就萌生了把这个东西翻译过来的想法，这样既可以分享，又可以加深自己的理解。 좋은 느낌을 읽고 나면,하지만 난 - 심층 기사를 종종 이해가 안 돼요, 난 그냥, 그래서 우리가 공유할 수 있지만, 그것도 자신의 이해를 깊게 생각 번역된 것들의 개시 중국에있는 문서, 등등을 찾지 못했습니다. 本文的作者Chris Heilmann是Yahoo! 英国的一位工程师（据kejun说是“教父”级的人物），本文的翻译也是征得了他本人的同意的。 크리스 Heilmann 야후!, 영국의 기술자 (kejun로했다 "대부"- 클래스 캐릭터)에 따르면이 문서의 저자는이 문서의 번역을 자신의 동의하에입니다.

这里多说一句，以前我也翻译过不少东西，不过那时候我更多是为了翻译而翻译，很多技术文章都没领悟，所以到现在还是个菜鸟。 여기에 한가지 더, 나 또한 여러 가지 번역된 말이지만 난 통역 및 번역에 대한 더 많은 시간이 있고,이 기사는, 그래서 지금까지 여전히 신인 기술의 많은 이해하지 못했다. 以后我还会继续翻译一些文章，不过应该只会翻译那些需要仔细体会的经典文章。 이후 일부 기사의 번역을 계속한다, 그러나해야 될 사람은 오직 문서의 고전 번역의 경험주의가 필요합니다. 有时间还是要多写代码，实践才是王道。 아직 코드를 작성하는 시간입니다 자비로운 정부의 실천입니다.

术语的翻译：关于“Unobtrusive JavaScript”一词，我现在也没想到一个特别贴切的译法。 난 특별한에서 적절한 번역 용어의 번역 : "겸손한 자바 스크립트는"단어, 생각하지 마. 在网上搜了一下，发现有翻译成“低调JavaScript”的，也有翻译成“非侵入式JavaScript”的，台湾那边有的翻译成“不乱入JavaScript”……经过多方考证，我决定采用“不唐突的JavaScript”这种译法（虽然这个还是不太合我心意），具体请看这篇文章 。 다음은 웹 검색과 발견이 낮은 - Key는 자바 스크립트 "로"번역도 "대만이 아닌 - 침략적 측면의 자바 스크립트"로 번역, 일부는 "혼란에 자바 스크립트로"번역 ... ... 조심 연구 후에, 나는 입양 "결정 자바 스크립트가 계셨고, "이 번역은 (비록이 내 마음을), 특정 문서에서 보이는 것 같지도 않다. 其实“Unobtrusive JavaScript”包含了很多意思，也很难用一个词来概括，有兴趣的可以看一下维基百科上面对“Unobtrusive JavaScript”的解释 。 사실, "겸손한 자바 스크립트", 그것을 한 마디로 요약된다 어렵다 관심이 위키 피 디아의 얼굴 "겸손한 자바 스크립트"설명에 보면 수 많은 의미가 포함되어있습니다. 另外，我觉得翻译就是要把作者的意思表达出来，而不一定非要逐字逐句翻译，所以文章中我为了方便读者理解，删减了一些，增加了一些，不过这些都是在不伤害原文意思的基础上进行的。 또한, 그 번역 저자의 의미를 표현하는 것입니다, 그리고 기분이 단어를 번역하지 않아도, 독자의 편의를 위해 문서를, 그 일부의 삭제,하지만 몇 가지 추가 이들은 원래의 의미의 이해를 해치지 않을 수있습니다 기초.

要说明的还有一点，那就是我翻译水平很业余，所以译文中难免有纰漏，还请多多指正。 또 다른 요점은 내가 번역의 아마추어 수준을 오전, 번역 힘들어, 결함을 피하기 위해 나를 올바른 참고하시기 바랍니다.

译者：Dreamer 。 역자 : 몽상. 转载请注明英文原文地址和译文地址，谢谢。 제발이 지정하는 주소의 원래 영어 텍스트를 재현하고 주소를 요청, 감사합니다.

不唐突的JavaScript的七条准则 자바 스크립트 일곱 기준의 공세 아니다

经过多年的开发、教学和编写不唐突的JavaScript， 我发现了下面的一些准则。 수년 간의 개발, 교육 및 JavaScript가 아니라 공격의 준비 후에, 나는 다음과 같은 기준의 일부를 발견했다. 我希望它们可以帮助你对“为什么这样设计和执行JavaScript比较好”有一点理解。 나는 그들이 당신이 도움이 될 것입니다, "왜 자바 스크립트의 설계 및 구현을 이해 해 주길 바래 낫다"이해는 한가지 특징이있다. 这些规则曾经帮助我更快地交付产品，并且产品的质量更高，也更容易维护。 이러한 규칙을 내게하고 높은 품질의 제품을 제공하는 제품을 더 빨리, 더 쉽게 유지하는 데 도움이 됐을뿐만 아니라.

1.不要做任何假设 （JavaScript是一个不可靠的助手） 1.) (자바 스크립트를 신뢰할 수 조수되지 않은 가정을 만들지 말라

可能不唐突的JavaScript 的最重要的一个特性就是——你要停止任何假设： 자바 스크립트에서 가장 중요한 기능의 공격이되지 않을 수도있습니다 - 당신은 가정을 중지시켜야 :

• 不要假设JavaScript是可用的，你最好认为它很有可能是不可用的，而不是直接依赖于它。 JavaScript를 사용할 수있습니다 가정하지 마십시오, 당신은 그것을 가장 잘 사용되지 않고 직접 그것에 의존보다 높습니다 믿을 거라고.
• 在你经过测试确认一些方法和属性可以使用之前，不要假设浏览器支持它们。 당신은 몇 가지 특성과 방법을 확인하려면 브라우저를하기 전에 그들이 지원하는 가정해서는 안 사용할 수있는 테스트.
• 不要假设HTML代码如你想象的那样正确，每次都要进行检查，并且当其不可用的时候就什么也不要做。 HTML 코드를 가정해서는 안하면 옳은 방법을 생각 할 때마다 확인하고는 아무것도 할 수있는 시간을 사용할 수없습니다.
• 让JavaScript的功能独立于输入设备 그래서 자바 스크립트 함수는 입력 장치의 독립
• 要记住其他的脚本可能会影响你的JavaScript的功能，所以要保证你的脚本的作用域尽可能地安全。 그래서 귀하의 JavaScript 함수에 영향을 미칠 수 있는지 확인해야합니다 기억하려면 다른 스크립트는 그 스크립트를 가능한만큼 안전의 범위.

在开始设计你的脚本之前，要考虑的第一件事情就是检查一下你要为其编写脚本的HTML代码，看看有什么东西可以帮助你达到目的。 전에 스크립트의 디자인의 시작, 자네는 HTML 코드의 준비를위한 스크립트에서 혹시라도 자신의 목표를 달성하는 데 도움이 될만한 뭔가가를 볼 필요가 제일 먼저 고려해야 할 필요가있다.

2.找出钩子和节点关系 （HTML是脚本的基石） 2. 후크와 노드 사이 (HTML에 스크립트의 초석이되는 관계를 찾아)

在开始编写脚本之前，要先看一下你要为之编写JavaScript的HTML。 전에 스크립트의 준비의 시작, 자네는 HTML 자바 스크립트를 보면서 그들을 준비할 필요가있다. 如果HTML是未经组织的或者未知的，那么你几乎不可能有一个好的脚本编写方案——很可能就会出现下面的情况：要么是会用JavaScript创建太多标记，要么就是应用太依赖于JavaScript。 HTML을 구성되지 않았거나 알려지지 않은 경우, 거의 좋은 스크립트 프로그램으로 준비 할 수 없어 - 가능성 다음 :도 너무 많은 부호, 또는 응용 프로그램을 만드는 자바 스크립트를 이용하는 것입도에 따라 달라집니다 자바 스크립트.

在HTML中有一些东西需要考虑，那就是钩子和节点关系。 HTML에서 몇 가지 즉, 후크와 노드 사이의 관계를 고려해야합니다.

<1>.HTML 钩子 <1>. HTML을 훅

HTML最初的和最重要的钩子就是ID，而且ID可以通过最快的DOM方法——getElementById 访问到。 HTML과 가장 중요한 첫 후크 ID입니다, 그리고 ID는 빠른 DOM 메소드가 될 수있는 -를 방문 getElementById는. 如果在一个有效的HTML文档中所有的ID都是独一无二的话（在IE中关于name 和ID 有一个bug，不过有些好的类库解决了这个问题），使用ID就是安全可靠的，并且易于测试。 모든 단어에 대한 올바른 HTML 문서는 고유 ID는 IE (이름 및 ID 만약에 버그가있다지만, 좋은 클래스 라이브러리 문제 해결), 신분증의 사용을 안전하고 신뢰성 테스트하고 쉽습니다.

其他一些钩子就是是HTML元素和CSS类，HTML元素可以通过getElementsByTagName方法访问，而在多数浏览器中都还不能通过原生的DOM方法来访问CSS类。 일부 다른 후크의 HTML과 CSS - 타입 요소, HTML 요소, 메소드는 getElementsByTagName 수 있으며, 대부분의 브라우저는 CSS DOM 메소드는 네이티브없습니다 카테고리에 액세스할 수있습니다. 不过，有很多外部类库提供了可以访问CSS类名（类似于getElementsByClassName） 的方法。 그러나 거기에 CSS 클래스 이름에 대한 액세스를 제공하는 많은 외부 라이브러리가있다 (getElementsByClassName과 유사).

<2>.HTML 节点关系 <2>. HTML을 노드 관계

关于HTML的另外比较有意思的一点就是标记之间的关系，思考下面的问题： HTML에 다른 것은 더 흥미로운 마크 사이의 관계는 다음과 같은 문제점에 대한 생각 :

• 要怎样才可以最容易地、通过最少的DOM遍历来到达目标节点？ 어떻게하면 가장 쉽게, 트래버스 위해 DOM 적어도 통해 대상 노드에 도달?
• 通过修改什么标记，可以尽可能多地访问到需要修改的子节点？ 어떻게 자식 노드 방문만큼 가능할 마크를 수정하여 개정해야 하나요?
• 一个给定的元素有什么属性或信息可以用来到达另外一个元素？ 주어진 요소의 속성이나 다른 요소에 도달하는 데 사용된 모든 정보가 될 수 있을까?

遍历DOM很耗资源而且速度很慢，这就是为什么要尽量使用浏览器中已经在使用的技术来做这件事情。 DOM을 탐색 자원의 소비와 아주 천천히, 그리고 그 이유만큼 브라우저 기술의 사용이 가능하다 그것도 할 사용되어왔다.

3.把遍历交给专家来做 （CSS，更快地遍历DOM） 3. 트래버스 전문가 (CSS는, 빠른 트래버스, DOM)은 할

有关DOM的脚本和使用方法或属性（getElementsByTagName, nextSibling, previousSibling, parentNode以及其它）来遍历DOM似乎迷惑了很多人，这点很有意思。 DOM을 트래버스하는 DOM은 스크립트와 속성 또는 메서드의 사용에 대해 (는 getElementsByTagName, nextSibling, previousSibling, 부모뿐 다른로서) 많은 사람을 혼란스럽게하고,이 매우 흥미가있는 것 같습니다. 而有趣的是，我们其实早已经通过另外一种技术—— CSS ——做了这些事情。 흥미로운 일은 이미 - CSS는 - 다른 기술을 승인했다고 우리가 이러한 사실을 이뤄라.

CSS 是这样一种技术，它使用CSS选择器，通过遍历DOM来访问目标元素并改变它们的视觉属性。 CSS는 CSS를 기술, 대상 요소에 대한 액세스를 통해 DOM을 탐색하고 자신의 시각적인 속성을 변경하는 데 사용하도록 선택할 수있다. 一段复杂的使用DOM的JavaScript可以用一个CSS选择器取代： DOM은 자바 스크립트의 복잡한 사용하기 위해 CSS를 선별 교체하는 데 사용될 수있습니다 :

var n = document.getElementById('nav');
if(n){
var as = n.getElementsByTagName('a');
if(as.length > 0){
for(var i=0;as[i];i ){
as[i].style.color = ‘#369′;
as[i].style.textDecoration = ‘none’;
}
}
}

/* 下面的代码与上面功能一样*/ / * *와 같은 위의 기능과 함께 다음 코드, /

#nav a{ # 비행 (
color:#369; 색상 : # 369;
text-decoration:none; 텍스트 - 장식 : 없음;
} )

这是一个可以好好利用的很强大的技巧。 이 강력한 기술의 매우 좋은 사용하는 것입니다. 你可以通过动态为DOM中高层的元素添加class 或者更改元素ID来实现这一点。 당신은 높은 수준의 클래스에 동적 - DOM 요소로 이것을 달성하기 위해 신분증 요소를 추가하거나 변경하실 수있습니다. 如果你使用DOM为文档的body添加了一个CSS类，那么设计师就很可以容易地定义文档的静态版本和动态版本。 만약 당신이 시체를위한 CSS에 클래스를 추가해야하므로 설계자들이 매우 쉽게 정적 및 동적 버전의 정의 문서 수있는 DOM 문서를 사용합니다.

JavaScript: 자바 스크립트 :

var dynamicClass = 'js';
var b = document.body;
b.className = b.className ? b.className ' js' : 'js';

CSS: CSS는 :

/* 静态版本*/

#nav { # 비행 (
.... ...
} )

/* 动态版本*/ / * 동적 버전 * /

body.js #nav { body.js # 비행 (
.... ...
} )

4.理解浏览器和用户 （在既有的使用模式上创建你所需要的东西） 기존 모델의 브라우저의 4. 이해와 사용자 (사용하면 뭐가 필요)를 만드는

不唐突的JavaScript 中很重要的一部分就是理解浏览器是如何工作的（尤其是浏览器是如何崩溃的）以及用户期望的是什么。 자바 스크립트 공격은 매우 중요한 부분에 대한 이해의 브라우저는 방법 (특히 작품이다되지 않을 경우, 브라우저는 어떻게 붕괴)뿐만 아니라, 사용자가 무엇을 기대합니다. 不考虑浏览器你也可以很容易地使用JavaScript创建一个完全不同的界面。 완전히 다른 인터페이스를 쉽게 만들 수있는 JavaScript를 사용하여 브라우저를 고려하지 않습니다. 拖拽界面，折叠区域，滚动条和滑动块都可以使用JavaScript创建，但是这个问题并不是个简单的技术问题，你需要思考下面的问题： 드래그 앤 드롭 인터페이스, 지역 폴딩, 압연 및 블록 슬라이딩 자바 스크립트를 사용하여 만들 수 있지만 문제는 단순한 기술적 문제가 아니라면, 다음과 같은 문제점에 반영해야합니다 :

• 这个新界面可以独立于输入设备么？ 새로운 인터페이스는 입력 장치를 당신의 독자가 될 수 있을까? 如果不能，那么可以依赖哪些东西？ 그 다음엔 무슨에 의존하지 않는 경우에?
• 我创建的这个新界面是否遵循了浏览器或者其它富界面的准则（你可以通过鼠标在多级菜单中直接切换吗？还是需要使用tab键？） 내가 직접 전환하는 멀티 브라우저 풍부한 인터페이스, 또는 다른 기준 (하실 수있습니다 마우스 - 수준의 메뉴와 함께 만든이 새로운 인터페이스를 준수? 아직도 Tab 키를 사용하려면 어떻게해야합니까?)
• 我需要提供什么功能但是这个功能是依赖于JavaScript的? 전 기능을 무엇이 필요하지만,이 자바 스크립트의 기능에 대한 의존도가?

最后一个问题其实不是问题，因为如果需要你就可以使用DOM来凭空创建HTML。 마지막 질문을하면 진공 HTML을 만들 수 있기 때문에 DOM을 사용할 수없습니다. 关于这点的一个例子就是“打印”链接，由于浏览器没有提供一个非JavaScript的打印文档功能，所以你需要使用DOM来创建这类链接。 이 연결에서 "인쇄"링크의 예로 브라우저가 아닌 - 문서를 인쇄하는 JavaScript 함수를 제공하지 않았다, 그래서 당신이 그러한 링크를 생성하기 위해 DOM을 사용할 필요가있다. 同样地，一个实现了展开和收缩内容模块的、可以点击的标题栏也属于这种情况。 마찬가지로, 수축의 시작의 실현과 모듈의 콘텐츠를, 당신도 지점을 클릭하면 제목 표시줄에있는 경우입니다. 标题栏不能被键盘激活，但是链接可以。 제목 표시줄,하지만 키보드가 활성화되지 않을 수있습니다 연결될 수있습니다. 所以为了创建一个可以点击的标题栏你需要使用JavaScript将链接加入进去，然后所有使用键盘的用户就可以收缩和展开内容模块了。 따라서 위해서는 자바 스크립트 제목 표시줄을 클릭, 링크를 추가하는 다음 갈 수 있도록 키보드를 사용하는 모든 사용자를 축소하고 모듈의 콘텐츠를 확장하는 데 필요한 사용해서 만들 수있을 것이다.

解决这类问题的极好的资源就是设计模式库。 이러한 문제를 해결하려면 리소스 라이브러리 훌륭한 디자인이다. 至于要知道浏览器中的哪些东西是独立于输入设备的，那就要靠经验的积累了。 브라우저에 관해서는 어떤 일들이 입력 장치와 무관한 알게되고, 그것은 축적된 경험에 의존해야 할 것이다. 首先你要理解的就是事件处理机制。 우선 당신이 이해해야만의 사건 처리 메커니즘이다.

5.理解事件 （事件处理会引起改变） 이벤트의 5. 이해 (사건들과 변화가 발생할 것입니다) 처리

事件处理是走向不唐突的JavaScript的第二步。 처리하는 자바 스크립트의 두 번째 단계로 공격을하지 않습니다. 重点不是让所有的东西都变得可以拖拽、可以点击或者为它们添加内联处理，而是理解事件处理是一个可以完全分离出来的东西。 초점이 될 수 있도록 모든 드래그하거나, 거래를 클릭할 수와 함께 그들을 추가할 수 있지만이 사건의 이해를 완전히 별도의 것들입니다. 我们已经将HTML,CSS和JavaScript分离开来，但是在事件处理的分离方面却没有走得很远。 우리는 HTML, CSS와 JavaScript를 분리하지만, 이번 사건 눈총을 아주 멀리 가지 않고있다.

事件处理器会监听发生在文档中元素上的变化，如果有事件发生，处理器就会找到一个很奇妙的对象（一般会是一个名为e的参数），这个对象会告诉元素发生了什么以及可以用它做什么。 만약이 사건은 프로세서 멋진 개체를 찾을 예정이다 프로세서 변화의 요소에 대한 문서에서 열린, (대개 전자 매개 변수)라는 개체가 무슨 일이 있었는지뿐만 아니라,이 사건 요소 말해주지 모니터한다 그것을 할 수있습니다.

对于大多数事件处理来说，真正有趣的是它不止发生在你想要访问的元素上，还会在DOM中较高层级的所有元素上发生（但是并不是所有的事件都是这样，focus和blur事件是例外）。 사건의 대부분 들어, 진짜 흥미로운 건 당신보다 더 많은 요소를 방문하고 싶지 그것뿐만 아니라, 높은에서 DOM에서 열린 - 수준의 모든 요소에서 열렸다이다 (하지만이 같은 모든 행사의 초점과 흐릿하게 이벤트는 예외입니다.) 举例来说，利用这个特性你可以为一个导航列表只添加一个事件处理器，并且使用事件处理器的方法来获取真正触发事件的元素。 예를 들어, 탐색 목록에 추가할 수있는 기능을 사용하는 경우에만 이벤트 프로세서, 그리고 프로세서 이벤트의 사용 방법의 한 요소로서이 사건의 실질적인 원인을 구하는 방법이다. 这种技术叫做事件委托，它有几点好处： 이 기술은,이 사건을 의뢰 전화, 그것은 몇 가지 장점이있습니다 :

• 你只需要检查一个元素是否存在，而不需要检查每个元素 당신이 유일한 요소가 있는지, 모든 요소를 확인하지 않고 있는지 확인 필요
• 你可以动态地添加或者删除子节点而并不需要删除相应的事件处理器 동적으로 자식 노드를 추가하거나 삭제하고 프로세서 해당 이벤트를 삭제하지 않아도됩니다
• 你可以在不同的元素上对相同的事件做出响应 당신 응답에서 동일한 사건의 다른 요소에있을 수있습니다

需要记住的另一件事是，在事件向父元素传播的时候你可以停止它而且你可以覆写掉HTML元素（比如链接）的缺省行为。 기억하고 또 다른 것은이 사건의 부모 요소의 확산을 때 그것을 막을 수 있지만 HTML 요소의 기본 동작을 링크 (등)으로 무시할 수있습니다. 不过，有时候这并不是个好主意，因为浏览器赋予HTML元素那些行为是有原因的。 왜냐하면 브라우저는 HTML 요소를 제공하지만, 가끔이 좋은 생각이 아닌 행동 좋은 이유. 举个例子，链接可能会指向页面内的某个目标，不去修改它们能确保用户可以将页面当前的脚本状态也加入书签。 예를 들어, 링크를 한 페이지에 대상이 아니라 내에서 스크립트의 현재 상태는 즐겨찾기 페이지의 사용자 수 있도록 그들을 개정을 가리키고있습니다.

6.为他人着想 （命名空间，作用域和模式） 6. 기타 (네임 스페이스, 범위와 모드를 위해서)

你的代码几乎从来不会是文档中的唯一的脚本代码。 귀하의 코드는 스크립트 코드의 거의 절대 유일한 문서입니다. 所以保证你的代码里没有其它脚本可以覆盖的全局函数或者全局变量就显得尤为重要。 그래서 당신의 코드가 전혀 다른 스크립트 함수 또는 전역 변수의 전체를 커버 수 있도록 특별히 중요하다. 有一些可用的模式可以来避免这个问题，最基础的一点就是要使用var 关键字来初始化所有的变量。 이미 모델이 문제를 방지하는 데 사용할 수있는 숫자하는 가장 기본적인 시점의 모든 변수를 초기화하기 위해 var 키워드를 사용하는 것입니다. 假设我们编写了下面的脚本： 우리는 그 다음 스크립트를 준비했다고 가정하면 :

var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}

上面的代码中包含了一个叫做nav的全局变量和名字分别为init,show 和reset 的三个函数。 위의 코드, 공연 컨셉과 기능을 재설정 3의 비행 글로벌 변수로 알려진 이름을 포함합니다. 这些函数都可以访问到nav这个变量并且可以通过函数名互相访问： 이 함수는 변수의 이름과 기능이 서로를 방문할 수있습니다로 비행에 액세스할 수있습니다 :

var nav = document.getElementById('nav');
function init(){
show();
if(nav.className === 'show'){
reset();
}
// do stuff
}
function show(){
var c = nav.className;
// do stuff
}
function reset(){
// do stuff
}


你可以将代码封装到一个对象中来避免上面的那种全局式编码，这样就可以将函数变成对象中的方法，将全局变量变成对象中的属性。 당신은 이상의 개체로 전세계의 종류 - 코딩을 피하기 위해, 그래서 그 함수 방법의 대상이 될 수있는 코드 패키지 수 전역 변수 속성의 객체가 될 것이다. 你需要使用“名字 冒号”的方式来定义方法和属性，并且需要在每个属性或方法后面加上逗号作为分割符。 당신과 각 속성이나 메서드는 쉼표로 구분하여 Fu의 뒤를에 대한 필요성이 메서드와 속성의 정의를 "접근, 콜론의" 이름을 사용해야합니다.

var myScript = {
nav:document.getElementById('nav'),
init:function(){
// do stuff
},
show:function(){
// do stuff
},
reset:function(){
// do stuff
}
} ') ('비행 var myScript = {
nav:document.getElementById('nav'),
init:function(){
// do stuff
},
show:function(){
// do stuff
},
reset:function(){
// do stuff
}
}

所有的方法和属性都可以通过使用“类名 点操作符”的方式从外部和内部访问到。 모든 특성과 메소드에서 "000 연산자를 가리킨 사용"을 통해 구입할 수있다는 외부와 내부를 방문했다.

var myScript = {
nav:document.getElementById('nav'),
init:function(){
myScript.show();
if(myScript.nav.className === 'show'){
myScript.reset();
}
// do stuff
},
show:function(){
var c = myScript.nav.className;
// do stuff
},
reset:function(){
// do stuff
}
}
') ('비행 var myScript = {
nav:document.getElementById('nav'),
init:function(){
myScript.show();
if(myScript.nav.className === 'show'){
myScript.reset();
}
// do stuff
},
show:function(){
var c = myScript.nav.className;
// do stuff
},
reset:function(){
// do stuff
}
}


这种模式的缺点就是，你每次从一个方法中访问其它方法或属性都必须在前面加上对象的名字，而且对象中的所有东西都是可以从外部访问的。 이 모델의 단점입니다 다른 방법으로하는 방법 또는 개체의 이름과 그의 방문을 밖 이르기까지 모든 개체의 속성과 결합되어야합니다 앞에 방문할 때마다. 如果你只是想要部分代码可以被文档中的其他脚本访问，可以考虑下面的模块（module）模式： 가능하면 그냥 다른 스크립트 코드가 문서의 일부를 방문하길 원한다면, () 모드 모듈 : 다음 모듈을 고려

var myScript = function(){
//这些都是私有方法和属性
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
//公有的方法和属性被使用对象语法包装在return 语句里面
return {
public:function(){ 사용되는 속성 var myScript = function(){
//这些都是私有方法和属性
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
//公有的方法和属性被使用对象语法包装在return 语句里面
return {
public:function(){

}, ),
foo:'bar' foo는 : '바'
} )
}(); ) ();

你可以使用和前面的代码同样的方式访问返回的公有的属性和方法，在本示例中可以这么访问：myScript.public() 和myScript.foo 。 당신을 방문할 수 : myScript.public ()와 myScript.foo 앞에있는 코드와 프로퍼티와 메소드를 방문하는 것과 같은 방법으로 다시 대중에게에서,이 예제에서 사용할 수있습니다. 但是这里还有一点让人觉得不舒服：当你想要从外部或者从内部的一个私有方法中访问公有方法的时候，还是要写一个冗长的名字（对象的名字可以非常长）。 그러나 그 불편함을 함께 느끼는 사람 : 언제 바깥이나 긴 이름은 개체의 (이름을 쓰는 공용 액세스 방법, 아니면 독자적인 방법 사이 원하는 위치에서 할 수있다 매우 긴). 为了避免这一点，你需要将它们定义为私有的并且在return语句中只返回一个别名： 이를 피하기 위해서, 당신이 필요로 민간과 같은 문장 안에서만 사용할 별칭을 반환 : 정의되어야

var myScript = function(){
// 这些都是私有方法和属性
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
// do stuff
}
function reset(){
// do stuff
}
var foo = 'bar';
function public(){

} )

//只返回指向那些你想要访问的私有方法和属性的指针 / / 돌아가기들만 당신은 방법과 지표의 사유 재산을 방문하고 싶지
return { 반환 (
public:public, 공공 : 공공,
foo:foo foo는 : foo는
} )
}(); ) ();

这就保证了代码风格一致性，并且你可以使用短一点的别名来访问其中的方法或属性。 이 코드는 스타일의 일관성을 보장하고 당신은 메서드 또는 속성에 액세스하는 짧은 별칭을 사용할 수있습니다.

如果你不想对外部暴露任何的方法或属性，你可以将所有的代码封装到一个匿名方法中，并在它的定义结束后立刻执行它： 혹시라도 어떤 방법이나 재산의 외부에 노출하고 싶지 않아, 당신은 익명의 방법으로, 그리고 정의는 그것의 끝을 후 즉시 모든 코드를 패키 지할 수있습니다 :

(function(){
// these are all private methods and properties
var nav = document.getElementById('nav');
function init(){
// do stuff
show(); // 这里不需要类名前缀
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
})();


对于那些只执行一次并且对其它函数没有依赖的代码模块来说，这种模式非常好。 그 사람이 아니라 한 번만 코드 모듈의 다른 기능에 의존해야 들어,이 모델이 아주 좋다.

通过遵循上面的那些规则，你的代码更好地为用户工作，也可以使你的代码在机器上更好地运行并与其他开发者的代码和睦相处。 위의 규칙을 다음으로, 귀하의 코드는 사용자를 위해, 또한 컴퓨터에 코드를 만들 수있는 코드의 실행을 조화에 살고있는 다른 개발자들과 더 나은. 不过，还有一个群体需要考虑到。 그러나, 거기에 필요한 계좌로 그룹 걸릴 것입니다.

7.为接手的开发者考虑 （使维护更加容易） 7. 개발자를위한 고려를 정복하려면 (그것을 쉽게 유지하기 위해) 만들기

使你的脚本真正地unobtrusive的最后一步是在编写完代码之后仔细检查一遍，并且要照顾到一旦脚本上线之后要接手你的代码的开发者。 정말 겸손한하게 스크립트 코드의 마지막 단계 이후에 대비해 이중 - 다시 확인, 그리고 스크립트의 코드를 개발자 후 한 번 라인에 인수를 돌보고있다. 考虑下面的问题： 다음 질문을 고려하려면 :

• 所有的变量和函数名字是否合理并且易于理解？ 모든 변수와 함수 이름을 합리적이고 이해하기 쉬운 일인 가요?
• 代码是否经过了合理的组织？ 합리적인 코드를 조직 여부? 从头到尾都很流畅吗？ 시작부터 매우 부드럽게 완성?
• 所有的依赖都显而易见吗？ 모두 그것에 의존하는 뻔한 거죠?
• 在那些可能引起混淆的地方都添加了注释吗？ 그 장소에있는 메모를 추가할 필요가 혼란을 일으킬 수 있을까요?

最重要的一点是：要认识到文档中的HTML和CSS代码相对于JavaScript来说更有可能被改变（因为它们负责视觉效果）。 가장 중요한 포인트입니다 : 반대로 자바 스크립트와 CSS는 문서의 HTML 코드를 인식할 수 많은 변화되고 (왜냐하면 그들은 시각적 효과에 대한) 책임이있다 가능성이 크다. 所以不要在脚本代码中包含任何可以让终端用户看到的class和ID，而是要将它们分离出来放到一个保存配置信息的对象中。 그래서 어떤 스크립트 코드를 포함하지 마십시오 클래스와 ID를 볼 수 있지만 최종 사용자들은 제목에 구성 정보를 저장할 수있게으로 구분해야합니다.

myscript = function(){
var config = {
navigationID:'nav',
visibleClass:'show'
};
var nav = document.getElementById(config.navigationID);
function init(){
show();
if(nav.className === config.visibleClass){
reset();
};
// do stuff
};
function show(){
var c = nav.className;
// do stuff
};
function reset(){
// do stuff
};
}();


这样维护者就知道去哪里修改这些属性，而不需要改动其他代码。 코드에 다른 변경 사항에 대한 필요없이 이러한 특성을 수정해야할지 어디로가는 길에 수비수,.

更多信息 자세한 내용은

以上就是我发现的七条准则。 내가 찾은 기준보다 7. 如果你想要了解更多与上面所探讨的主题相关的东西，可以看看下面的链接： 위의 경우와 자세한 내용을 보려면 - 관련된 사물의 테마를 탐험하고 싶다면, 아래 링크를 살펴보고있습니다 :

• Yahoo! Design Pattern Library 야후! 디자인 패턴 도서관
• Event Delegation 이벤트 위임
• Event Driven JavaScript Application Design 이벤트 구동 자바 스크립트 응용 프로그램을 설계
• JavaScript Programming Patterns JavaScript 프로그래밍 패턴
• Show love to the Object Literal 개체 그대로를 보여주 사랑
• A JavaScript Module Pattern 자바 스크립트 모듈 패턴

分享收藏 컬렉션 - 공유