js로 코딩 할 때 올바른 함수 시퀀스

Question

jquery를 사용하고 코드를 작성하는 방법에 대해 정말로 좌절합니다. 나는 몇 달 전에 JS와 jQuery를 코딩 시작하고 내 코드는 다음과 같이 보았다 : 전에

.ready $ (문서) 안에 모든 것을 넣어 않았다 기본적으로 무엇을

$(document).ready(function(){ 

$(function(){// a function that applies a plugin to an element}); 

$(function(){// another function that applies a plugin to an element}); 

$(function(){// and another function that applies a plugin to an element}); 

$(function(){// yet another function that applies a plugin to an element}); 
}); 

$(function(){//functions applied to certain elements that does not require to be initially loaded}) 

을 여기에 내가 얼마나입니다 코딩은 지금

function a(){//a function that applies plugin to an element} 

function b() {// another function} 

$(document.ready(function(){a(); b();}); 

$(function(){//functions applied to certain elements that does not require to be initially loaded}) 

조금 개선되었지만 만족스럽지 않습니다. 특정 페이지에 대해서만 특정 기능을 호출하고 싶다면 어떻게해야합니까? 이것을 성취 할 수있는 방법이 있습니까? 그리고 많은 플러그인을 사용하고있을 때 내 $ (문서)가 실제로 얼마나 거대 해지는지 정말 싫어합니다.

jquery에서 함수를 작성하는 방법에 대해 알려주십시오.

Answer 1

적어도 전역 네임 스페이스를 오염시키지 않도록 네임 스페이스를 지정하는 것이 좋습니다.예를 들면 다음과 같습니다.

var myNameSpace = { 
a: function(){//a function that applies plugin to an element}, 
b: function() {// another function} 
}; 

$(document).ready(function() { 

myNameSpace.a(); 

}); 

주된 이점은 특정 작업에 초점을 맞춘 논리적 작업 단위로 코드를 분류 할 수 있다는 것입니다. 코드 조직을 훨씬 쉽게 만들어줍니다. 로드 jQuery의 getScript() 메소드를 활용 http://bit.ly/6og36U

또한 그들 만의 독특한 파일로 JS를 분리 할 수 ​​있으며 일상적인 쓰기 :

레베카 머피는 당신이 여기에서 읽을 수있는이 주제에 멋진 쓰기까지했다 필요시 필요한 파일 (http://docs.jquery.com/Ajax/jQuery.getScript). 핵심은 스크립트의 종속성을 판별하고 적절한 시간에 .js 파일을로드하는 것입니다.

A : :은 여러 개의 파일로 자바 스크립트를 분할

Answer 2

기능을 여러 파일로 분할하고 각 페이지에 필요한 기능 만 포함 할 수 있습니다. 각각의 파일에서 별도의 것입니다 $(document).ready(function(){ ... });

Answer 3

나는 전체 사이트에 대해 하나의 자바 스크립트 파일을 갖는 것이 좋습니다. 이 파일에는 다음과 같은 함수 만 포함해야합니다.

function a() { ... } 
function b() { ... } 

이유는 한 파일에서 한 번 캐시됩니다 (올바르게 완료되면). 그리고 내가 넣어 각 페이지에 인라인 JS를 사용하여 : 정말 여러 ready() 통화를 할 필요를 발견하지 않았습니다

$(function() { 
    a(); 
    b(); 
}); 

.

이유는 효율성 때문입니다. 불필요한 Javascript를 실행하고 싶지 않고 외부 JS 파일이 실제로는 아무것도 수행하지 않고 호출 할 수있는 기능을 포함하는 이유는 무엇입니까? 그런 다음 각 페이지는 필요한 부분 만 호출합니다. 또한 한 곳 (페이지)을보고 쉽게 찾을 수 있습니다.

Answer 4

내 응용 프로그램에서는 네임 스페이스 문제를 피하기 위해 클로저 내에서 응용 프로그램의 특정 섹션에 대한 모든 기능을 작성하는 경향이 있습니다. 이 같은

뭔가 :

(function($) { 
    function a() { 
     // stuff 
    } 
    function b() { 
     // stuff 
    } 
    // ... 
    $(function() { 
     // invoke dom ready setup methods here 
    }); 
})(jQuery); 

이 내가 작업하고 같은 많은 DEVS 대형 웹 애플리케이션에 (내 코드는 프로토 타입 또는 다른 JS 라이브러리를 사용 할 수있는 다른 페이지에서 사용할 수시키기의 보너스를 가지고 네임 스페이스를 깨끗하게 유지하는 것이 중요합니다.

일반적으로 나는 하나만ready 파일 당 호출합니다. 이 호출은 해당 파일에서 관련된 모든 것을 설정하는 책임이 있습니다. 이를 통해 각 파일은 "라이브러리"의 역할을 수행 할 수 있습니다. 기능을 사용하려는 개발자는 해당 파일을 페이지에 포함시키고 적절한 마크 업을 추가하면 기능이 자체적으로 설정됩니다.

필자는이 레이아웃을 여러 jQuery 플러그인이 빌드되는 방식에서 복사 한 것을 인정합니다.

나는 앱이 너무 크지 않을 때만 cletus가 제안한 하나의 파일을 좋아합니다. 하나의 파일 안에 너무 많은 것을 가지고 있다면 유지 보수가 어려워집니다.

Answer 5

나는 이것을 달성하는 방법은 두 가지가 있다고 생각합니다. (하나 개의 라이브러리 파일 및 각면 - 특정 코드도 준비 함수를 호출합니다.)

B :

var tasksToRun = [ function_a, function_b,...] 

: 모든 자바 스크립트로 하나 개의 파일을 만든 다음 몇 가지 인라인이 같은 자바 스크립트 파일

라이브러리 JavaScript에서 전역 변수를 확인하고 배열에서 참조 된 각 함수를 실행합니다.