javascript - 다음 패키징 솔루션 중 가장 좋은 방법은 무엇입니까? ~

Question

초기 상태:

으아악

1. 당연히 가장 많이 반복되는 클래스 이름은 weui_icon_search-focus인데, 수정이 필요하다면 한곳에서 수정하면 되지 않을까요? 으아악

2.focus Blur 이 두 이벤트는 실제로 거의 동일한 작업 동작을 가지므로 캡슐화해야 합니까? 이 경우 여러 곳에 쓰여 있는 weui_icon_search-focus 문제도 해결할 수 있습니다

으아악

하지만 if(searchMain.val())로 판단한 위치의 동작은 어쩔 수 없군요. 결국 fn과도 함께 해야 한다고 생각합니다. , 두 개를 변경해야 합니다. fn에 매개변수를 추가하여 두 번째 문장만 실행하도록 할 수도 있지만, 정상적으로 실행된다면 여전히 그 정도의 판단을 거쳐야 한다는 것이 항상 불편합니다~

아직 완벽한 솔루션이 있나요? ~

Answer 1

이보다 더 좋은 방법은 생각나지 않습니다. 개인적으로는 jquery 객체일 때 $를 추가하면 변수를 구분할 수 있다고 생각합니다

var $searchMain = $('.c-search_search'), // 온톨로지 검색

으아아아

if ($searchMain.val()) {

으아아아

}

$searchMain.on('초점', 함수 () {

으아아아

}).on('blur', function () {

으아아아

});

function fn(a,mark) {

으아아아

}

Answer 2

캡슐화를 위해 캡슐화하는 중입니다. 함수는 한 가지 작업만 수행하는 것이 가장 좋습니다.

hide 및 show도 토글을 사용하여 함께 패키징할 수 있지만 일반 addClass는 이 기능과 분명히 다릅니다.

여기에는 명령이 하나만 필요하므로 함께 캡슐화할 필요가 없습니다. 그리고 이때 비슷한 요구사항이 있다면 캡슐화한 함수에 또 다른 판단을 추가해야 할까요?

여기서 함수를 캡슐화하는 목적은 가독성을 높이기 위한 것이지만, 비슷한 기능을 무턱대고 함께 캡슐화하는 것은 그 반대입니다.

Answer 3

위 답변에 동의합니다.

귀하의 요구 사항은 하나의 요소를 표시하고 포커스가 있을 때 다른 요소에 클래스를 추가하는 것입니다. 초점을 잃는 것은 그 반대입니다.

그러면 구현은 다음과 같아야 합니다

으아아아

논리는 명확하고 명확합니다. 왜 불필요한 캡슐화가 필요한가요?

단순화를 고려해야 한다면 요소를 표시하고 요소에 클래스 스타일을 추가하는 관점에서 고려해야 합니다. 예를 들어 상위 요소에 show 클래스를 추가합니다. CSS의 하위 선택기를 사용하여 요소 표시/숨기기 및 스타일 전환 문제를 완료합니다. show。 来使用css中的子选择器完成你对元素显示隐藏和样式切换的问题。

// 通常jq对象命名前会加$,以便和dom对象区分。
$el
    .on('focus',function(){
        // TODO
    })
    .on('blur',function(){
        // TODO
    });

这样就只用在focus时给.parent这个元素添加show样式，blur 으아아아

이런 방식으로 .parent 요소에 포커스가 있을 때만 show 스타일을 추가하고 blur. 🎜