스크립트 사용자 정의 속성_javascript 기술을 통해 구성 매개변수를 전달하는 방법
- WBOY원래의
- 2016-05-16 16:36:201397검색
저는 이제 막 공식적인 경력을 시작했습니다. 지난 며칠 동안 회사의 통합 헤더 JS 작업을 하면서 스크립트 사용자 정의 속성을 통해 구성 매개변수를 전달하는 방법을 생각해 냈습니다.
때때로 우리는 js 플러그인을 작성합니다. 플러그인을 사용하려면 먼저 html로 플러그인 JS를 도입한 다음 스크립트 태그를 추가하고 내부에서 호출해야 합니다. 사진 전환 플러그인 등. 코드는 대략 다음과 같습니다.
$.fn.picSwitch = function(option){
//这里是图片切换的代码
}
플러그인을 도입한 후 다른 스크립트 태그에 호출 코드를 추가해야 합니다
$('#pic').picSwitch({
'speed' : '400',
'derection' : 'left'
//... 这里是配置
})
물론 문제는 없지만 다른 스크립트 태그를 추가하고 싶지 않은 경우도 있습니다. 스크립트 태그만 도입하는 경우 어떻게 해야 하며 구성 매개변수를 어떻게 전달해야 하나요?
이제 스크립트의 사용자 정의 속성을 사용하여 구성 매개변수를 전달할 수 있습니다. 이를 수행하기 전에 먼저 이미지 전환 플러그인을 처리해야 합니다. 수정된 코드는 다음과 같습니다.
$.fn.picSwitch = function(){
//这里是图片切换的代码
};
//플러그인 작성 후 직접 호출
$('여기에 스크립트 태그에서 가져와야 하는 선택기가 있습니다.').picSwitch('여기에 스크립트 태그에서 가져와야 하는 구성 매개변수가 있습니다.')
다음 단계는 스크립트를 사용하여 매개변수를 전달하고 다음과 같이 html 페이지에서 js 플러그인을 참조하는 것입니다.
<head>
<script src='/script/picSwitch.js' id='picSwitch' obj='#pic' option='{"speed":"400","derection":"left"}'></script>
</head>
<body>
<div id="pic">
//这里是具体结构
</div>
</body>
마지막으로 플러그인을 다음과 같이 수정합니다.
$.fn.picSwitch = function(){
//这里是图片切换的代码
};
//写好插件后就直接调用
var script = $('#picSwitch')，//标签上的id
selector = script.attr('selector'),
option = JSON.parse(script.attr('option'));//标签上的是字符串需要转为json对象
$(selector).picSwitch(option);
이런 방식으로 기능을 구현하는 데는 하나의 태그만 사용됩니다. 구성 변경에는 스크립트 사용자 정의 속성만 변경하면 됩니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.