스크립트 사용자 정의 속성_javascript 기술을 통해 구성 매개변수를 전달하는 방법-JS 튜토리얼-php.cn

스크립트 사용자 정의 속성_javascript 기술을 통해 구성 매개변수를 전달하는 방법

WBOY

풀어 주다： 2016-05-16 16:36:20

원래의

1348명이 탐색했습니다.

저는 이제 막 공식적인 경력을 시작했습니다. 지난 며칠 동안 회사의 통합 헤더 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);

로그인 후 복사

이런 방식으로 기능을 구현하는 데는 하나의 태그만 사용됩니다. 구성 변경에는 스크립트 사용자 정의 속성만 변경하면 됩니다.