JavaScript에서의 코드 구성에 대해 일반적으로 인정되고 있는 베스트 프랙티스
jQuery와 같은 JavaScript 프레임워크가 클라이언트 측 웹 애플리케이션을 보다 풍부하고 기능적으로 만들면서 한 가지 문제가 생기기 시작했습니다.
도대체 어떻게 정리한 거야?
- 모든 핸들러를 한 곳에 배치하고 모든 이벤트에 대한 함수를 작성하시겠습니까?
- 모든 기능을 포괄하는 기능/클래스를 작성하시겠습니까?
- 미친 듯이 글을 쓰면서 그게 잘 되길 바라는 거야?
- 포기하고 새로운 경력을 쌓으라고요?
jQuery를 언급하고 있습니다만, 이것은 일반적인 JavaScript 코드입니다.행에 행이 쌓이기 시작하면 스크립트 파일을 관리하거나 원하는 것을 찾기가 어려워집니다.제가 발견한 가장 큰 문제는 같은 일을 할 수 있는 방법이 너무 많아서 현재 일반적으로 받아들여지고 있는 베스트 프랙티스가 어떤 것인지 알 수 없다는 것입니다.
.js 파일을 어플리케이션의 다른 부분과 마찬가지로 깔끔하게 유지하는 방법에 대해 일반적인 권장 사항이 있습니까?아니면 IDE만의 문제일까요?더 좋은 방법은 없을까?
편집
이 질문은 파일 구성이 아니라 코드 구성에 대한 것입니다.파일을 병합하거나 콘텐츠를 분할하는 좋은 예가 몇 가지 있습니다.
질문입니다.실제 코드를 정리하기 위해 일반적으로 받아들여지고 있는 베스트 프랙티스는 무엇입니까?페이지 요소와 상호 작용하여 서로 충돌하지 않는 재사용 가능한 코드를 만드는 방법 또는 권장 방법은 무엇입니까?
네임스페이스가 있는 사람도 있어요.그 밖에 어떤 방법이 있을까요? 보다 구체적으로 페이지의 요소를 다루고 코드를 정리하고 깔끔하게 유지하는 방법.
javascript에 네임스페이스가 내장되어 있으면 좋겠지만, Dustin Diaz가 여기서 설명한 것처럼 정리하는 것이 나에게 많은 도움이 된다고 생각한다.
var DED = (function() {
var private_var;
function private_method()
{
// do stuff here
}
return {
method_1 : function()
{
// do stuff here
},
method_2 : function()
{
// do stuff here
}
};
})();
다른 "네임스페이스"와 때로는 개별 클래스를 별도의 파일에 넣습니다.보통 하나의 파일로 시작하고 클래스 또는 네임스페이스가 충분히 커지면 해당 파일을 자체 파일로 구분합니다.툴을 사용하여 모든 파일을 조합하여 제작하는 것도 좋은 방법입니다.
HTML에 javascript가 포함되지 않도록 합니다.모든 코드는 클래스로 캡슐화되어 각 클래스는 자체 파일에 저장됩니다.개발을 위해 각 js파일을 포함하는 별도의 <스크립트>태그를 가지고 있지만 HTTP 요청의 오버헤드를 줄이기 위해 하나의 큰 패키지로 통합됩니다.
일반적으로 각 애플리케이션에 대해 하나의 '메인' js 파일이 있습니다.survey 어플리케이션을 작성하면 survey.js라는 js파일이 생깁니다.여기에는 jQuery 코드의 진입점이 포함됩니다.인스턴스화 중에 jQuery 참조를 작성한 후 파라미터로 객체에 전달합니다.즉, javascript 클래스는 '순수'이며 CSS ID 또는 클래스 이름에 대한 참조가 포함되어 있지 않습니다.
// file: survey.js
$(document).ready(function() {
var jS = $('#surveycontainer');
var jB = $('#dimscreencontainer');
var d = new DimScreen({container: jB});
var s = new Survey({container: jS, DimScreen: d});
s.show();
});
또한 읽기 쉽도록 명명 규칙이 중요하다고 생각합니다.예를 들어 다음과 같습니다.모든 jQuery 인스턴스 앞에 j를 붙입니다.
위의 예에서는 DimScreen이라고 하는 클래스가 있습니다(화면이 어두워지고 경보 상자가 표시되는 것을 전제로 합니다).화면을 덮기 위해 확대해서 경보 상자를 추가할 수 있는 div 요소가 필요하기 때문에 jQuery 객체를 전달합니다.jQuery는 플러그인 개념을 가지고 있지만 실제적인 장점이 없는 상태에서 제한적으로 보입니다(예: 인스턴스가 지속적이지 않고 액세스할 수 없음).따라서 DimScreen 클래스는 jQuery를 사용하는 표준 javascript 클래스입니다.
// file: dimscreen.js
function DimScreen(opts) {
this.jB = opts.container;
// ...
}; // need the semi-colon for minimizing!
DimScreen.prototype.draw = function(msg) {
var me = this;
me.jB.addClass('fullscreen').append('<div>'+msg+'</div>');
//...
};
이 접근방식을 사용하여 상당히 복잡한 애플리케이션을 구축했습니다.
스크립트를 개발을 위해 별도의 파일로 분할한 후 "릴리스" 버전을 만듭니다. 이 버전에서는 스크립트를 모두 함께 주입하여 YUI 압축기 또는 이와 유사한 기능을 실행할 수 있습니다.
이전 투고에서 영감을 얻어 와이시햇(changelog에서 언급한 RTE)에서 배포된 Rake 파일 및 벤더 디렉토리를 복사하고 JSLint에서의 코드 체크와 YUI 컴프레서에서의 최소화를 포함하도록 몇 가지 수정했습니다.
(WysiHat에서) Sprokets를 사용하여 여러 JavaScript를 하나의 파일로 병합하고 JSLint와 병합된 파일의 구문을 확인한 후 배포하기 전에 YUI Compressor를 사용하여 최소화하는 것이 아이디어입니다.
전제 조건
- 자바 런타임
- 루비와 갈퀴의 보석
- Classpath에 JAR을 삽입하는 방법을 알고 있어야 합니다.
이제 하다
- Rhino를 다운로드하여 클래스 경로에 JAR("js.jar")를 배치합니다.
- YUI 컴프레서를 다운로드하여 클래스 경로에 JAR(build/yuicpressor-xyz.jar)를 배치합니다.
- WysiHat을 다운로드하여 JavaScript 프로젝트의 루트에 "vendor" 디렉토리를 복사합니다.
- JSLint for Rhino를 다운로드하여 "vendor" 디렉토리에 넣습니다.
이제 JavaScript 프로젝트의 루트 디렉터리에 "Rakefile"이라는 이름의 파일을 만들고 다음 내용을 추가합니다.
require 'rake'
ROOT = File.expand_path(File.dirname(__FILE__))
OUTPUT_MERGED = "final.js"
OUTPUT_MINIFIED = "final.min.js"
task :default => :check
desc "Merges the JavaScript sources."
task :merge do
require File.join(ROOT, "vendor", "sprockets")
environment = Sprockets::Environment.new(".")
preprocessor = Sprockets::Preprocessor.new(environment)
%w(main.js).each do |filename|
pathname = environment.find(filename)
preprocessor.require(pathname.source_file)
end
output = preprocessor.output_file
File.open(File.join(ROOT, OUTPUT_MERGED), 'w') { |f| f.write(output) }
end
desc "Check the JavaScript source with JSLint."
task :check => [:merge] do
jslint_path = File.join(ROOT, "vendor", "jslint.js")
sh 'java', 'org.mozilla.javascript.tools.shell.Main',
jslint_path, OUTPUT_MERGED
end
desc "Minifies the JavaScript source."
task :minify => [:merge] do
sh 'java', 'com.yahoo.platform.yui.compressor.Bootstrap', '-v',
OUTPUT_MERGED, '-o', OUTPUT_MINIFIED
end
모든 작업을 올바르게 수행한 경우 콘솔에서 다음 명령을 사용할 수 있습니다.
rake merge합니다.rake check-- 코드의 구문을 확인합니다(이것은 기본 태스크이므로 입력만 하면 됩니다).rake)rake minify합니다.JS 코드입니다.
소스 머지 시
하면 JavaScript 프리프로세서 Sprokets )를 할 수 .require 파일 JavaScript 파 。다음 구문을 사용하여 초기 파일의 다른 스크립트('main.js'라는 이름)를 포함합니다.단, Rake 파일에서 변경할 수 있습니다.
(function() {
//= require "subdir/jsfile.js"
//= require "anotherfile.js"
// some code that depends on included files
// note that all included files can be in the same private scope
})();
그리고...
자동 장치 테스트를 설정하려면 WysiHat과 함께 제공되는 Rake 파일을 확인하십시오.좋은 물건 :)
그리고 이제 답을 위해
이것은 원래의 질문에 잘 대답하지 못한다.알아요, 죄송한데요. 하지만 다른 사람이 그들의 난장판을 정리하는 데 도움이 되었으면 해서 여기에 올렸습니다.
이 문제에 대한 나의 접근법은 가능한 한 많은 객체 지향 모델링을 하고 구현을 다른 파일로 분리하는 것이다.을 사용하다「 」를 List싱글톤도 좋아요.
그리고 네임스페이스...더 깊은 물체 구조에 의해 모방될 수 있습니다.
if (typeof org === 'undefined') {
var org = {};
}
if (!org.hasOwnProperty('example')) {
org.example = {};
}
org.example.AnotherObject = function () {
// constructor body
};
저는 모조품을 별로 좋아하지 않지만, 글로벌 범위에서 벗어나고 싶은 물건이 많다면 도움이 될 수 있습니다.
코드 조직에서는 다음과 같은 규약과 문서 표준을 채택해야 합니다.
네임스페이스 1. 물리 파일의 네임스페이스 코드
Exc = {};
이 2에 . javascript는 javascript입니다.
하기 위한 또는 를 설정합니다. 실제 물체를 표현하기 위한 프로토타입 또는 관련 기능 또는 클래스를 설정합니다.
Exc = {};
Exc.ui = {};
Exc.ui.maskedInput = function (mask) {
this.mask = mask;
...
};
Exc.ui.domTips = function (dom, tips) {
this.dom = gift;
this.tips = tips;
...
};
합니다.4 . 규칙을 설정하여 코드를 개선합니다.예를 들어, 모든 내부 함수 또는 메서드를 개체 유형의 클래스 속성으로 그룹화합니다.
Exc.ui.domTips = function (dom, tips) {
this.dom = gift;
this.tips = tips;
this.internal = {
widthEstimates: function (tips) {
...
}
formatTips: function () {
...
}
};
...
};
및합니다.5 . 네임스페이스, 클래스, 메서드 및 변수의 문서를 작성합니다.필요에 따라서, 코드의 일부에 대해서도 논의합니다(일부 FI와 Fors는, 통상, 코드의 중요한 로직을 실장합니다).
/**
* Namespace <i> Example </i> created to group other namespaces of the "Example".
*/
Exc = {};
/**
* Namespace <i> ui </i> created with the aim of grouping namespaces user interface.
*/
Exc.ui = {};
/**
* Class <i> maskdInput </i> used to add an input HTML formatting capabilities and validation of data and information.
* @ Param {String} mask - mask validation of input data.
*/
Exc.ui.maskedInput = function (mask) {
this.mask = mask;
...
};
/**
* Class <i> domTips </i> used to add an HTML element the ability to present tips and information about its function or rule input etc..
* @ Param {String} id - id of the HTML element.
* @ Param {String} tips - tips on the element that will appear when the mouse is over the element whose identifier is id <i> </i>.
*/
Exc.ui.domTips = function (id, tips) {
this.domID = id;
this.tips = tips;
...
};
이것들은 몇 가지 힌트일 뿐이지만, 코드를 정리하는 데 큰 도움이 되었습니다.성공하려면 훈련이 있어야 한다는 걸 명심해!
훌륭한 OOO 디자인 원칙과 디자인 패턴을 따르는 것은 코드를 쉽게 유지하고 이해할 수 있도록 하는 데 큰 도움이 됩니다.하지만 최근에 발견한 최고의 것 중 하나는 게시/구독이라는 신호와 슬롯입니다.간단한 jQuery 구현에 대해서는http://http://markdotmeyer.blogspot.com/2008/09/jquery-publish-subscribe.html 를 참조해 주세요.
이 아이디어는 GUI 개발에 다른 언어에서도 잘 사용되고 있습니다.코드에서 중요한 일이 발생하면 다른 개체의 다른 메서드가 구독할 수 있는 글로벌 모의 이벤트를 게시합니다.이렇게 하면 물체를 분리할 수 있습니다.
도조(그리고 시제품)라고 생각합니다.이 테크닉의 빌트인 버전이 있습니다.
전 직장에서 Ext JS 어플리케이션에 Javascript Module Pattern을 성공적으로 적용할 수 있었습니다.캡슐화된 코드를 쉽게 만들 수 있습니다.
도조는 처음부터 모듈 시스템을 가지고 있었다.사실 그것은 도장의 주춧돌로 여겨지는데, 도장은 모든 것을 하나로 묶어주는 접착제입니다.
- dojo.doc : 공식 문서.
- dojo.declare, dojo.require 및 dojo.provider에 대해 설명합니다.
- 도조를 소개합니다.
모듈을 사용하여 Dojo는 다음과 같은 목적을 달성합니다.
- 코드의 (도조 코드)
dojo.declare()- 코드를 - "도조" - "도조 인식 코드입니다. - 동기 ( 「 」 )
dojo.require()를 참조해 주세요. - 모듈 의존성을 분석하여 하나의 파일 또는 상호의존 파일 그룹(이른바 계층)을 생성하여 웹 응용 프로그램에 필요한 것만 포함시킴으로써 커스텀 빌드를 수행합니다.커스텀 빌드에는 Dojo 모듈 및 고객 제공 모듈도 포함될 수 있습니다.
- Dojo 및 사용자 코드에 대한 투명한 CDN 기반 액세스입니다.AOL과 구글 모두 이러한 방식으로 도조를 가지고 있지만, 일부 고객들은 그들의 맞춤형 웹 어플리케이션에서도 그렇게 하고 있다.
다음과 같은 작업을 수행할 수 있습니다.
코드를 모델, 뷰 및 컨트롤러 레이어로 분할합니다.
모든 코드를 하나의 프로덕션 파일로 압축하다
자동 생성 코드
장치 테스트 생성 및 실행
그리고 더 많은...
무엇보다도 jQuery를 사용하기 때문에 다른 jQuery 플러그인도 활용할 수 있습니다.
상사는 아직도 모듈러 코드(C 언어)를 썼을 때를 이야기하며 요즘 코드가 너무 형편없다고 불평합니다.프로그래머는 어떤 프레임워크에서도 어셈블리를 작성할 수 있다고 합니다.코드 구성을 극복하기 위한 전략은 항상 존재한다.기본적인 문제는 자바 스크립트를 장난감처럼 취급하고 그것을 배우려고 하지 않는 남자들에게 있다.
제 경우 UI 테마 또는 응용 프로그램 화면 기반으로 적절한 init_screen()을 사용하여 js 파일을 씁니다.적절한 ID 명명 규칙을 사용하여 루트 요소 수준에서 네임스페이스 경합이 없는지 확인합니다.눈에 띄지 않는 window.load()에서는 최상위 ID를 기준으로 묶습니다.
자바 스크립트 클로저와 패턴을 엄격하게 사용하여 모든 개인 메서드를 숨깁니다.이렇게 하면 속성/함수 정의/변수 정의의 충돌 문제에 직면하지 않습니다.그러나 팀원들과 함께 일할 때는 종종 같은 엄격함을 강요하기가 어렵습니다.
아무도 MVC 프레임워크에 대해 언급하지 않았다니 놀랍다.Backbone.js를 사용하여 코드를 모듈화하고 분리해 왔습니다.그것은 매우 귀중한 것입니다.
이런 종류의 프레임워크는 꽤 많이 있지만, 대부분 매우 작습니다.제 개인적인 의견으로는 화려한 UI를 위해 jQuery를 몇 줄 이상 쓰거나 풍부한 Ajax 애플리케이션을 원할 경우 MVC 프레임워크로 인해 생활이 훨씬 쉬워질 것입니다.
"마치 쓰면서 잘 되길 바랄 뿐?" 단 2명의 개발자가 개발하고 관리하는 이런 프로젝트를 본 적이 있는데, 자바스크립트 코드가 많은 거대한 어플리케이션입니다.게다가 생각할 수 있는 모든 jquery 함수에는 다른 단축키가 있습니다.코드를 플러그인으로 정리할 것을 제안했습니다.클래스, 모듈, 네임스페이스에 해당하는 jquery입니다.그리고 전 우주를요.하지만 상황은 훨씬 악화되었고, 이제 그들은 프로젝트에 사용된 세 줄의 코드 조합을 모두 대체하는 플러그인을 만들기 시작했습니다.개인적으로는 jQuery는 악마이며 javascript가 많은 프로젝트에서 사용하면 안 된다고 생각합니다.왜냐하면 jQuery는 게으름을 피우고 코드를 정리할 생각을 하지 않도록 하기 때문입니다.jQuery 함수 40개가 연결된 한 줄보다 javascript 100줄을 읽는 게 낫겠다(진짜야).일반적인 생각과는 달리 javascript 코드를 네임스페이스나 클래스와 동등하게 정리하는 것은 매우 쉽습니다.그게 YUI와 도조가 하는 일이에요.당신이 원한다면 당신은 쉽게 당신의 것을 굴릴 수 있습니다.저는 YUI의 접근 방식이 훨씬 더 낫고 효율적이라고 생각합니다.단, 편리한 것을 쓰고 싶다면, 통상, 스니펫을 서포트하는 훌륭한 에디터가 필요합니다.
화면에 여러 번 인스턴스화할 필요가 없는 모든 것에 대해 싱글톤을 만들고, 다른 모든 것에 대한 클래스를 만듭니다.그리고 모두 같은 파일에 있는 동일한 네임스페이스에 배치됩니다.모든 것에 코멘트를 붙이고 UML, 상태도를 사용하여 설계합니다.javascript 코드는 html이 없기 때문에 인라인 javascript는 없으며 크로스 브라우저 문제를 최소화하기 위해 jquery를 사용하는 경향이 있습니다.
지난번 프로젝트 Viajeros.com에서는 여러 가지 기술을 조합하여 사용했습니다.웹 앱의 구성 방법을 모릅니다.Viajeros는 여행자를 위한 소셜 네트워킹 사이트이기 때문에 지역별로 코드를 분리하는 것은 간단합니다.
사이트 섹션에 따라 네임스페이스 시뮬레이션과 모듈의 느린 로딩을 사용합니다.페이지 로드마다 "vjr" 개체를 선언하고 항상 공통 함수 집합을 로드합니다(vjr.base.js).그런 다음 각 HTML 페이지에서 다음과 같은 간단한 방법으로 필요한 모듈을 결정합니다.
vjr.Required = ["vjr.gallery", "vjr.comments", "vjr.favorites"];
Vjr.base.js는 서버에서 각 gzip을 가져와 실행합니다.
vjr.include(vjr.Required);
vjr.include = function(moduleList) {
if (!moduleList) return false;
for (var i = 0; i < moduleList.length; i++) {
if (moduleList[i]) {
$.ajax({
type: "GET", url: vjr.module2fileName(moduleList[i]), dataType: "script"
});
}
}
};
모든 "모듈"은 다음과 같은 구조를 가지고 있습니다.
vjr.comments = {}
vjr.comments.submitComment = function() { // do stuff }
vjr.comments.validateComment = function() { // do stuff }
// Handlers
vjr.comments.setUpUI = function() {
// Assign handlers to screen elements
}
vjr.comments.init = function () {
// initialize stuff
vjr.comments.setUpUI();
}
$(document).ready(vjr.comments.init);
Javascript의 지식이 한정되어 있기 때문에, 이것을 관리할 수 있는 더 좋은 방법이 있을 것이라고 생각합니다만, 지금까지는 잘 되고 있습니다.
Jquery 중심의 네임스페이스 방식으로 코드를 구성하는 방법은 다음과 같습니다.또한 프로토타입, Ext와 같은 다른 Javascript API와 충돌하지 않습니다.
<script src="jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var AcmeJQ = jQuery.noConflict(true);
var Acme = {fn: function(){}};
(function($){
Acme.sayHi = function()
{
console.log('Hello');
};
Acme.sayBye = function()
{
console.log('Good Bye');
};
})(AcmeJQ);
// Usage
// Acme.sayHi();
// or
// <a href="#" onclick="Acme.sayHi();">Say Hello</a>
</script>
이게 도움이 됐으면 좋겠다.
복잡한 Javascript 앱을 관리하려면 OO+MVC의 좋은 원칙이 분명 도움이 될 것입니다.
기본적으로 앱과 Javascript를 다음과 같은 익숙한 디자인으로 정리하고 있습니다(데스크탑 프로그래밍 시절부터 Web 2.0까지).
이미지의 숫자 값 설명:
- 응용 프로그램의 보기를 나타내는 위젯입니다.이것은 확장 가능하고 깔끔하게 분리되어 MVC가 달성하려는 좋은 분리가 되어야 한다. 내 위젯을 스파게티 코드(HTML에 Javascript의 큰 블록을 직접 넣는 웹 앱과 동일). 각 위젯은 다른 위젯에 의해 생성된 이벤트를 듣고 다른 위젯을 통해 통신하여 강력한 기능을 줄입니다.관리 불가능한 코드를 초래할 수 있는 위젯 간의 결합(스크립트 태그의 글로벌 함수를 가리키는 클릭을 어디에서나 추가한 날을 기억하십니까?으으...)
- 위젯에 채울 데이터를 나타내며 서버로 주고받는 개체 모델입니다.데이터를 모델에 캡슐화함으로써 애플리케이션은 데이터 형식 불가지론자가 됩니다.예를 들어, 기본적으로 Javascript에서는 이러한 오브젝트 모델은 대부분 JSON으로 시리얼화 및 디시리얼라이즈 됩니다만, 서버가 통신에 XML을 사용하고 있는 경우는, 시리얼화/디시리얼라이즈 레이어 변경만 하면 됩니다.또, 위젯 클래스를 모두 변경할 필요는 없습니다.
- 서버로의 비즈니스 로직 및 통신을 관리하는 컨트롤러 클래스 + 경우에 따라서는 캐싱 레이어.이 계층은 서버에 대한 통신 프로토콜을 제어하고 필요한 데이터를 개체 모델에 넣습니다.
- 클래스는 대응하는 네임스페이스에 깔끔하게 정리되어 있습니다.Javascript에서 글로벌 네임스페이스가 얼마나 지저분할 수 있는지 모두 알고 있을 것입니다.
예전에는 파일을 js로 분리하여 Javascript에서 OO원칙을 작성했습니다.JS OO를 쓰는 방법은 여러 가지가 있으며, 모든 팀원이 같은 접근방식을 가지고 있는 것은 아니라는 것을 곧 알게 되었습니다.팀이 커질수록(저의 경우 15명 이상), 오브젝트 지향 Javascript에는 표준적인 접근법이 없기 때문에 이 작업은 복잡해집니다.동시에 나는 내 자신의 틀을 쓰고 나보다 똑똑한 사람들이 해결했다고 확신하는 몇 가지 일을 반복하고 싶지 않다.
jQuery는 Javascript Framework로서 매우 훌륭하고 마음에 듭니다만, 프로젝트가 커질수록, 특히 OOO의 업무 표준화를 촉진하기 위해 제 웹 앱의 추가 구조가 필요하게 되었습니다.몇 번의 실험을 통해 YUI3 Base 및 Widget(http://yuilibrary.com/yui/docs/widget/ 및 http://yuilibrary.com/yui/docs/base/index.html) 인프라스트럭처는 내가 필요로 하는 것을 정확하게 제공한다는 것을 알게 되었습니다.내가 그것들을 사용하는 몇 가지 이유.
- 이름 공간 지원을 제공합니다.OO의 진정한 요구와 코드 정리가 필요합니다.
- 클래스 및 객체의 개념을 지원합니다.
- 클래스에 인스턴스 변수를 추가할 수 있는 표준화 수단을 제공합니다.
- 수업 연장을 깔끔하게 지원한다.
- 생성자와 파괴자를 제공합니다.
- 렌더링 및 이벤트 바인딩을 제공합니다.
- 기본 위젯 프레임워크가 있습니다.
- 각 위젯은 이제 표준 이벤트 기반 모델을 사용하여 서로 통신할 수 있습니다.
- 가장 중요한 것은 모든 엔지니어에게 Javascript 개발을 위한 OO 표준을 제공한다는 것입니다.
많은 견해와 달리 jQuery와 YUI3 중 하나를 선택할 필요는 없습니다.이 둘은 평화롭게 공존할 수 있다.YUI3는 복잡한 웹 앱에 필요한 OO 템플릿을 제공하지만, jQuery는 여전히 우리 팀에게 우리 모두가 사랑하고 친숙해지는 사용하기 쉬운 JS Abstraction을 제공합니다.
YUI3를 사용하여 모델로서의 기반을 확장하는 클래스, 보기로서의 위젯을 확장하는 클래스를 구분하여 MVC 패턴을 만들 수 있었습니다.또한 컨트롤러 클래스는 필요한 로직과 서버 측 호출을 수행합니다.
위젯은 이벤트 기반 모델을 사용하고 이벤트를 청취하며 미리 정의된 인터페이스를 기반으로 필요한 작업을 수행하여 서로 통신할 수 있습니다.간단히 말해, JS에 OO+MVC 구조를 넣는 것은 저에게 기쁨입니다.
저는 야후를 위해 일하는 것이 아니라 단지 원래의 질문에 의해 제기되는 같은 문제에 대처하기 위해 노력하는 건축가입니다.만약 누군가가 동등한 OO 프레임워크를 찾는다면, 이것도 효과가 있을 것이라고 생각합니다.기본적으로 이 질문은 다른 기술에도 적용됩니다.프로그래밍을 보다 쉽게 할 수 있도록 OOO 원칙 + MVC를 생각해 주신 모든 분들께 감사드립니다.
Dojo의 패키지 관리를 사용하고 있습니다(dojo.require ★★★★★★★★★★★★★★★★★」dojo.provide 시스템 클래스 시스템)dojo.declare또한 간단한 다중 상속이 가능)을 통해 모든 클래스/클래스를 개별 파일로 모듈화할 수 있습니다.코드를 정리할 수 있을 뿐만 아니라 클래스/위젯을 제 때 로딩할 수 있습니다.
며칠 전 37Signals에서 RTE 컨트롤을 출시했습니다.그들은 일종의 사전 프로세서 명령을 사용하여 javascript 파일을 번들하는 라이브러리를 만들었습니다.
JS파일을 분리하여 최종적으로 하나로 병합하기 위해 사용하고 있습니다.이렇게 하면 관심사를 분리할 수 있으며, 결국 파이프를 통과하는 파일은 1개뿐입니다(지퍼링, 그 이상).
템플릿에서 개발 모드인지 확인하고 개별 파일을 포함하며, 실제 가동 중인 경우 최종 파일(직접 빌드해야 함)을 포함합니다.
가짜 클래스를 만들고, 이치에 맞는 다른 함수에 넣을 수 있는 것은 무엇이든 그렇게 합니다.또, 코멘트를 많이 해 주세요.스파게티 코드를 쓰지 말고, 모든 것을 섹션으로 정리해 주세요.예를 들어, 내 이상을 묘사하는 말도 안 되는 코드.물론 실생활에서는 기본적으로 그 기능을 망라한 라이브러리를 많이 쓰고 있습니다.
$(function(){
//Preload header images
$('a.rollover').preload();
//Create new datagrid
var dGrid = datagrid.init({width: 5, url: 'datalist.txt', style: 'aero'});
});
var datagrid = {
init: function(w, url, style){
//Rendering code goes here for style / width
//code etc
//Fetch data in
$.get(url, {}, function(data){
data = data.split('\n');
for(var i=0; i < data.length; i++){
//fetching data
}
})
},
refresh: function(deep){
//more functions etc.
}
};
상속 패턴을 사용하여 대형 jQuery 응용 프로그램을 구성합니다.
이것은 아마도 DDD(Domain-Driven Design)와 관련이 있다고 생각합니다.현재 작업하고 있는 어플리케이션은 정식 API가 없지만 서버측 코드(클래스/파일명 등)를 통해 이러한 힌트를 주고 있습니다.이를 바탕으로 문제 영역 전체의 컨테이너로 최상위 개체를 만든 다음 필요한 위치에 네임스페이스를 추가했습니다.
var App;
(function()
{
App = new Domain( 'test' );
function Domain( id )
{
this.id = id;
this.echo = function echo( s )
{
alert( s );
}
return this;
}
})();
// separate file
(function(Domain)
{
Domain.Console = new Console();
function Console()
{
this.Log = function Log( s )
{
console.log( s );
}
return this;
}
})(App);
// implementation
App.Console.Log('foo');
JavaScript 조직의 경우 다음을 사용하고 있습니다.
- 모든 Javascript 폴더
- 페이지 레벨 javascript는 페이지 이름과 동일한 자체 파일을 가져옵니다.ProductDetail.aspx는 ProductDetail이 됩니다.js
- 라이브러리 파일용 javascript 폴더 안에 lib 폴더가 있습니다.
- 응용 프로그램 전체에서 사용할 lib 폴더에 관련 라이브러리 기능을 넣습니다.
- javascript 폴더 밖으로 이동하여 자신의 폴더를 얻을 수 있는 javascript는 Ajax뿐입니다.그런 다음 클라이언트와 서버 두 개의 하위 폴더를 추가합니다.
- 클라이언트 폴더는 모든 .js 파일을 가져오고 서버 폴더는 모든 서버 측 파일을 가져옵니다.
난 이 작은 것을 사용하고 있어.JS 및 HTML 템플릿 모두에 대해 '포함' 지시문을 제공합니다.엉망진창이 완전히 사라집니다.
https://github.com/gaperton/include.js/
$.include({
html: "my_template.html" // include template from file...
})
.define( function( _ ){ // define module...
_.exports = function widget( $this, a_data, a_events ){ // exporting function...
_.html.renderTo( $this, a_data ); // which expands template inside of $this.
$this.find( "#ok").click( a_events.on_click ); // throw event up to the caller...
$this.find( "#refresh").click( function(){
widget( $this, a_data, a_events ); // ...and update ourself. Yep, in that easy way.
});
}
});
jquery mx(javascriptMVC에서 사용)를 사용할 수 있습니다.jquery mx는 모델, 뷰 및 컨트롤러를 사용할 수 있는 스크립트 세트입니다.프로젝트에서 사용하고 있으며 압축으로 인해 최소한의 스크립트 크기로 구조화된 Javascript를 작성할 수 있도록 도와왔습니다.다음으로 컨트롤러의 예를 나타냅니다.
$.Controller.extend('Todos',{
".todo mouseover" : function( el, ev ) {
el.css("backgroundColor","red")
},
".todo mouseout" : function( el, ev ) {
el.css("backgroundColor","")
},
".create click" : function() {
this.find("ol").append("<li class='todo'>New Todo</li>");
}
})
new Todos($('#todos'));
뷰 및 모델 부품에 관심이 없는 경우 jquerymx의 컨트롤러 측만 사용할 수도 있습니다.
당신의 질문은 작년 말에 저를 괴롭혔던 질문입니다.차이점 - 프라이빗 및 퍼블릭 메서드에 대해 들어본 적이 없는 신규 개발자에게 코드를 전달합니다.간단한 걸 만들어야 했어요
그 결과 객체 리터럴을 jQuery로 변환하는 작은 프레임워크(약 1KB)가 생성되었습니다.이 구문은 시각적으로 스캔하기 쉽고 js가 매우 커지면 재사용 가능한 쿼리를 작성하여 사용된 선택기, 로드된 파일, 종속 함수 등을 찾을 수 있습니다.
여기에 작은 틀을 올리는 것은 비현실적인 일이기 때문에 예를 들어 블로그에 글을 올렸습니다(처음입니다.그건 모험이었어!)한번 봐주세요.
몇 분 안에 확인하실 수 있는 다른 분들을 위해 피드백을 주시면 감사하겠습니다!
FireFox는 오브젝트 쿼리 예시로 toSource()를 지원하므로 권장됩니다.
건배!
아담
저는 대부분의 이벤트 핸들러를 저장하기 위해 Ben Nolan의 행동에 영감을 받은 커스텀 스크립트를 사용합니다(안타깝게도 현재 링크도 찾을 수 없습니다).이러한 이벤트 핸들러는 예를 들어 className 또는 Id 요소에 의해 트리거됩니다.예를 들어:
Behaviour.register({
'a.delete-post': function(element) {
element.observe('click', function(event) { ... });
},
'a.anotherlink': function(element) {
element.observe('click', function(event) { ... });
}
});
글로벌 동작을 포함하는 라이브러리를 제외한 대부분의 Javascript 라이브러리를 즉시 포함시키고 싶습니다.이를 위해 Zend Framework의 HeadScript() 플레이스홀더 도우미를 사용하지만, 예를 들어 Ajile을 사용하여 다른 스크립트를 로드하는 경우에도 javascript를 사용할 수 있습니다.
서버측 언어에 대해서는 언급하지 않았습니다.또는 서버측에서 사용하고 있는 프레임워크(있는 경우)를 나타냅니다.
IME, 저는 서버 쪽에서 정리하고 웹 페이지에 모든 것을 전달합니다.프레임워크에는 모든 페이지가 로딩되어야 하는 JS뿐만 아니라 생성된 마크업으로 작동하는 JS fragment를 정리하는 작업이 주어집니다.이러한 fragment는, 통상, 1회 이상 방출하고 싶지 않습니다.그 때문에, 그 문제를 해결하기 위해서, 그 fragment가 그 코드의 프레임워크에 추상화됩니다. :- )
독자적인 JS를 발신할 필요가 있는 엔드 페이지의 경우는, 통상, 생성된 마크업에 논리적인 구조가 있는 것을 알 수 있습니다.이러한 국소화된 JS는 종종 그러한 구조물의 시작 및/또는 끝에 조립될 수 있다.
이것들 중 어느 것도 효율적인 JavaScript를 쓰는 것을 방해하지 않습니다. :-)
지연 필요 시 필요한 코드를 로드합니다.구글은 그들의 google.loader에서 이와 같은 일을 한다.
언급URL : https://stackoverflow.com/questions/247209/commonly-accepted-best-practices-around-code-organization-in-javascript
'programing' 카테고리의 다른 글
| 명령줄에서 PHP 스크립트 실행 (0) | 2022.10.30 |
|---|---|
| javascript에서 [.slice.call]에 대한 설명 (0) | 2022.10.30 |
| https를 통해 파일을 다운로드하려면 openssl 확장자를 사용하도록 설정해야 합니다. (0) | 2022.10.30 |
| Java List에서 Scala List를 가져오려면 어떻게 해야 하나요? (0) | 2022.10.30 |
| Symfony2 - 내장된 양식 유형에 대해 유효성 검사가 작동하지 않음 (0) | 2022.10.30 |