여러 Jquery 준비 함수를 단일 준비 함수로 결합하기위한 잡담 작업

Question

병합하고 축소하려는 여러 파일에 준비 함수가 분산되어 있습니다. 모든 준비를 하나의 기능으로 병합하는 쓸데없는 작업이 있습니까?

// file1.js 
$(document).ready(function(){ 
    $(".class1").click(function() { 
     // Some Action 
    }) 
}) 


// file2.js 
$(document).ready(function(){ 
    $(".class3").on("blur", function() { 
     // Some Action 
    }) 
}) 

// file3.js 
$(document).ready(function(){ 
    $(".class2").on("change", function() { 
     // Some Action 
    }) 
}) 

// file4.js 
$(document).ready(function(){ 
    $(".class3").click(function() { 
     // Some Action 
    }) 
}) 

난 그냥 모든 파일을 결합하는 고된 작업을 실행하고 파일은 다음과 합병에 여러 준비 기능이있는 경우

// file.js 
$(document).ready(function(){ 
    $(".class1").click(function() { 
     // Some Action 
    }) 

    $(".class3").on("blur", function() { 
     // Some Action 
    }) 

    $(".class2").on("change", function() { 
     // Some Action 
    }) 

    $(".class3").click(function() { 
     // Some Action 
    }) 
}) 

그것이 성능을 해칠 ... 같은 뭔가를 찾고 있어요 grunt-contrib-uglify를 사용 하시겠습니까?

// file.js 
$(document).ready(function(){ 
    $(".class1").click(function() { 
     // Some Action 
    }) 
}) 

$(document).ready(function(){ 
    $(".class3").on("blur", function() { 
     // Some Action 
    }) 
}) 

$(document).ready(function(){ 
    $(".class2").on("change", function() { 
     // Some Action 
    }) 
}) 

$(document).ready(function(){ 
    $(".class3").click(function() { 
     // Some Action 
    }) 
}) 

이 질문을 확인해 주셔서 감사합니다. 좋은 하루 되세요. 이 질문이 반복되는 경우 미안합니다. 다른 곳에서는 답변을 찾을 수 없기 때문에이 질문을 게시하십시오.

Answer 1

원하는대로 할 수있는 grunt-jquery-ready를 사용할 수 있습니다.

먼저 모든 파일을 연결하고 이러한 방식으로이 무단 플러그인을 사용해야합니다. 나는 이것을 테스트하고 그것은 내가이 형식에서 내 파일을 가지고이 작업을 실행 한 후 결과로

grunt.initConfig({ 
 
    'jquery-ready' : { 
 
     path: 'path_to_your_folder/your_script_file.js', 
 
     runSync: false 
 
    } 
 
    
 
    grunt.loadNpmTasks('grunt-jquery-ready'); 
 
    
 
    grunt.registerTask('default', "jquery-ready"); 
 
});

작동 :

$(document).ready(function(){ 
 
    all the content of my script.js file is placed here automatically. 
 
});

가 주요 웹 사이트를 참조하세요 추가 정보 :

Wrapping your concatenated .js file into ready function