javascript 코드를 dom 요소와 연결하는 방법은 무엇입니까?

Question

페이지로드시에 내용이 업데이트되는 다양한 dom 요소가 있습니다. 일반적으로 서버의 데이터로 ajax에 의해 업데이트됩니다. 일반적으로 차트 및 표 정보 같은 것을 표시합니다.

깨끗한 상태를 유지하기 위해 차트 표시와 같은 일반적인 작업에 대한 최종 html을 생성하는 코드를 재사용했습니다. html 속성에 옵션을 넣고 데이터 URL에 대한 속성을 지정합니다. 예 :

<div class="standard_chart" 
    chart_title="Trend of X vs. Y" 
    data_url="/data/x_vs_y"></div> 

이 조직은 js 코드를 크게 향상 시켰습니다.

문제점

때때로 내가 먼저 데이터를 처리해야합니다. 예를 들어, 필터링하기 :

var filter_outliers_for_x_vs_y_data = function(data){ 
    data = data.filter(function(d){ 
     return -1000 < d.y && d.y < 1000; 
    }); 
    return data; 
}; 

I은 ​​단지 특정 DOM ID의 데이터 처리 기능을 다시 쓸 DIV에 id 속성 넣어 싫은이다. 이것을 고려 : 그 HTML 문서에서, 차라리 거라고

$(document).ready(function(){ 
    $('#my_x_vs_y_chart').each(function(){ 
     // ... reworked code just for this element 
    }); 
}); 

, html 요소에 바로 옆에 사전 처리 기능을 넣어 (또는에서). 그게 가장 좋은 장소 같아.

특정 dom 요소와 자바 스크립트를 연결하는 가장 좋은 방법은 무엇입니까?

내 아이디어 지금까지이 :

1. 
<div class="standard_chart" 
    chart_title="Trend of X vs. Y" 
    data_url="/data/x_vs_y" 
    pre_process_fn="...some js code..."></div> 
// then use `eval` to use the js code in the attribute 


2. 
<div class="standard_chart" 
    chart_title="Trend of X vs. Y" 
    data_url="/data/x_vs_y" 
    pre_process_fn="...some js code..."> 
    <pre_process_fn> 
     <script>... function definitions ... </script> 
    </pre_process_fn> 
</div> 
// then somehow get and associate the js internal to the element 

나는 다른 옵션이 무엇인지 확실하지 않다, 그리고 상대적 이점은 무엇입니까.

당신은 속성에 자바 스크립트 렌더링하지 않고,이 아이디어를 사용할 수

Answer 1

하지만 FN 이름 :

<div class="standard_chart" 
    chart_title="Trend of X vs. Y" 
    data_url="/data/x_vs_y" 
    preprocess_fn="preprocess_x_vs_y"></div> 

다음 전처리 기능을 보유하는 객체를 정의 var preprocessors = { };가 미리 정의 된 경우

var preprocessors = { 
    "preprocess_x_vs_y": function() { 
     var dataUrl = $(this).attr("data_url"); 
     var chartTitle = $(this).attr("chart_title"); 
     // do the processing 
    } 
}; 

을 (머리 부분에서) 나중에 함수를 html 스크립트 요소로 렌더링 할 수도 있습니다 :

<script type="text/javascript"> 
preprocessors["preprocess_x_vs_y"] = function() { 
    var dataUrl = $(this).attr("data_url"); 
    var chartTitle = $(this).attr("chart_title"); 
    // do the processing 
}; 
</script> 

문서 준비 이벤트에 지금

,

$(document).ready(function() { 
    $('.standard_chart').each(function() { 
     var preproc_fn = $(this).attr("preprocess_fn"); 

     // now call the preprocessor (with this === dom element) 
     if (preprocessors[preproc_fn] instanceof Function) { 
      preprocessors[preproc_fn].call(this); 
     } 

    }); 
});