방금 공식 경력을 시작했으며 최근에 회사를 위해 통합 헤드 라인 JS를 해왔습니다. 스크립트의 사용자 지정 속성을 통해 구성 매개 변수를 전달하는 메소드를 생각해 냈습니다.
때때로 우리는 JS 플러그인을 작성합니다. 이 플러그인을 사용하려면 먼저 HTML에 플러그인 JS를 소개 한 다음 스크립트 태그를 추가하고 호출해야합니다. 그림 스위치 플러그인과 같은. 코드는 대략 다음과 같습니다.
$ .fn.picswitch = function (옵션) {// 이미지 전환 코드입니다}이 플러그인을 도입 한 후에는 다른 스크립트 태그에 통화 코드를 추가해야합니다.
$ ( '#pic'). picswitch ({ 'speed': '400', 'derection': 'left'/... 여기에 구성})물론 이것에 문제가 없지만 때로는 스크립트 태그를 더 추가하고 싶지 않습니다. 스크립트 태그 만 소개하는 경우 구성 매개 변수를 전달하는 방법은 무엇입니까?
현재 스크립트의 사용자 정의 속성을 사용하여 구성 매개 변수를 전달할 수 있습니다. 이 전에는 먼저 이미지 스위칭 플러그인을 처리해야합니다. 수정 된 코드는 다음과 같습니다.
$ .fn.picswitch = function () {// 이미지 전환 코드};// 작성 후 플러그인을 호출하여 직접 전화하십시오.
$ ( '여기서 선택기가 있습니다. 스크립트 태그에서 가져와야합니다').
그런 다음 스크립트의 매개 변수를 전달하고 HTML 페이지에서 다음과 같이 JS 플러그인을 참조하십시오.
<head> <Script SRC = '/script/picswitch.js'id = 'picswitch'obj = '#pic'옵션 = '{ "속도": "400", "derection": "left"}'> </script> </head> <div id = "pic"> // 특정 구조 </div> </div>마지막으로 플러그인을 다음과 같이 수정하십시오.
$ .fn.picswitch = function () {// 이미지 전환 코드}; // 플러그인을 작성한 후 var script = $ ( '#picswitch'), // idSelector에서 tag = script.attr ( 'selector'), 옵션 = json.parse ( '옵션'); $ (selector) .picswitch (옵션);이런 식으로 함수는 하나의 태그만으로 실현되며 구성 변경은 스크립트 사용자 정의 속성 만 변경하면됩니다.