"그녀는 과거에 쓸모가 있었다!"이번 주에 해결된 웹 개발 문제 검토

웹 개발 프로젝트에 종사할 때, 나는 자주 이런 말을 들었다. "그것은 과거에 매우 유용했다."지난 일주일 동안 나는'It가 일했었던'프로젝트를 처리할 기회가 있었다. 이것은 이 프로젝트에 대한 회고이다.

디테일

아름다운 강아지 협회(PPA)*는 회원과 다른 강아지 애호가들에게 사이트를 제공한다.이것은 내장된 표현식 엔진으로, 그들은 낮은 순서의 플러그인 (기타 플러그인) 과 jQuery를 사용합니다.
그들의 채널 중 하나는 국가 강아지 채널이다.그것은 미국 각 주의 공식 강아지 (푸에르토리코 한 마리) 가 참가한 51개의 작품을 가지고 있다.항목마다 사진 한 장, 품종 명칭, 강아지 품종에 대한 기본 정보가 있다.
* 이는 완전히 조작된 것이지만 최종 사이트의 주제는 이 글에 중요하지 않다.

그것은 일찍이 기능상에서 작용한 적이 있다

PPA 사이트 홈페이지에는 이 특색 있는 강아지의 그림과 품종명을 보여주는 스포트라이트 코너가 있다.이곳에서 사용자는 밑에 있는 메뉴에서 그들이 있는 주의 공식 강아지를 선택할 수 있다.그들이 선택을 할 때, 스포트라이트 구역의 사진과 품종 이름이 그들의 선택과 일치하도록 변화할 것이다.사용자가 장래에 이 사이트를 방문할 때, 그들이 마지막으로 선택한 강아지는 스포트라이트 기능에 나타나야 한다.

비밀 번호

홈 템플릿에 select 요소만 있는 폼을 포함하여spotlight 부분 자체가 있습니다.당신은 어느 곳에서든 강아지의 특정한 정보(품종, 이미지 URL)가 있다는 것을 알게 될 것입니다.아무것도 아니에요.이러한 정보는 JavaScript를 통해 읽어들여 DOM에 배치됩니다.
select 요소 자체는 저중 정렬 플러그인의 도움말 아래 표현식 엔진을 통해 채워집니다.

<div class="section-4 puppysection">
    <div class="row">
        <div class="container">
            <h2 class="col-md-12 spotlighthdr"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Spotlight On Spot</span></h2>
            <div class="col-md-4">
                <div class="homefeatured">
                    <a class="puppylink" href="URL"><div id="divFeaturedPuppyBreed" class="featuredbreed">Breed</div></a>
                    <a id="aFeaturedPuppy" href="URL"><img id="imgFeaturedPuppy" src="IMG" class="img-responsive puppy-photo" alt="BREED" width="326" height="336" /></a>
                </div>
            </div>
            <div class="col-md-8">
                {exp:channel:entries channel="new_home_page" dynamic="off" limit="1"}
                    {spotlight_text}
                {/exp:channel:entries}
                <div class="col-md-8">
                    <form class="connectform">
                        <div class="col-md-8 nopadding">
                            <label title="Pick a state to see that state's official state puppy and get a link to read more." for="drpPuppies" class="hiddenLabel2">Pick a state to see that state's official state puppy and get a link to read more.</label>
                            <select id="drpPuppies" name="puppylist" form="puppyform">
                                {exp:low_reorder:entries  set="puppies" dynamic="no" disable="member_data|category_fields"}
                                    <option value="{entry_id}">{state}</option>
                                {/exp:low_reorder:entries}
                            </select>
                        </div>
                    </form>
                    <div style="clear:both;padding-top:20px;">
                        <a id="aFeaturedPuppyLink" href="URL">Read more about the <span class="sbreed"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

홈 템플릿에 내장된 JavaScript도 있습니다.상태 선택에 변경 이벤트 탐지기가 설정되어 있습니다.변경 이벤트를 트리거하면/site/puppy info/VALUE OF SELECTION에서 JSON 데이터를 읽어들입니다.만약 우리가 성공적인 GET 요청을 한다면, 이 정보는 우리의 스포트라이트 부분에서 선택한 강아지의 정보를 채우는 데 사용될 것이다.
스크립트의 맨 밑에 있는 것을 우리는 보았다$('#drpPuppies').change();.이 코드는 변경 이벤트를 터치하고 있지만 사용자가 실제로 선택하지 않았습니다.이것은 다음 달에 중요해질 것이다.

function jqExt() {
    $('#drpPuppies').on('change', function () {

        $.getJSON("/site/puppy-info/" + this.value, function (result, status) {
            if (status == "success") {
                $('#divFeaturedPuppyName').text(result.name);
                $('.sname').text(result.name);
                $('.puppylink').attr("href", result.bio_url);
                $('#aFeaturedPuppy').attr("href", result.bio_url);
                $('#aFeaturedPuppyLink').attr("href", result.bio_url);
                $('#imgFeaturedPuppy').attr("alt", result.name);
                $('#imgFeaturedPuppy').attr("width", result.image_width);
                $('#imgFeaturedPuppy').attr("height", result.image_height);
                $('#imgFeaturedPuppy').attr("src", result.image_url);
            }
        });
    });
    $('#drpPuppies').change();
}

"/site/puppy info/"

            {exp:low_reorder:entries set="puppies" entry_id="{segment_3}" }
    {exp:ce_img:pair src="{puppy_picture}" width="300" height="340" crop="yes|center,top|0,0|yes" allow_scale_larger="yes"}
    <?php
        setcookie("exp_custom_default-puppy-id", {entry_id}, time() + (86400 * 365), "/", $_SERVER['SERVER_NAME']);
        header("Content-Type: application/json");
        $data = array( 'id' => '{entry_id}', 'breed' => '{breed}', 'image_url' => '{made}', 'image_width' => {width}, 'image_height' => {height}, 'puppy_url' => '{url_title_path="puppies/bio"}' );
        echo json_encode($data);
    ?>
    {/exp:ce_img:pair}
{/exp:low_reorder:entries}

눈을 깜빡이면 setcookie () 함수를 놓칠 수 있습니다.사용자가 선택 드롭다운 목록을 변경하면 GET 요청이/site/puppy info/VALUE SELECTED 로 전송됩니다.이 값이 선택되었거나 항목 id가 쿠키로 설정되었습니다.
사용자가 홈페이지를 떠나 돌아올 때 그들이 마지막으로 선택한 강아지가 스포트라이트 부분에 나타날 것이라고 상상할 수 있습니까?그건 없었어.

문제의 소재

Spotlight on Spot 섹션에는 사용자가 마지막으로 선택한 강아지가 표시되지 않고 기본적으로 드롭다운 메뉴의 첫 번째 상태인 앨라배마주-블랙독이 표시됩니다.(이 예도 만들었어요. 알라바마에는 공식 개 품종이 없어요.)
왜?우선 과자는 다 만들었지만 이렇게.

쿠키는 읽히지 않았고 쿠키의 가치를 처리한 적이 없습니다.
그 밖에 select 요소의 작업 방식 때문에 변경 사건을 촉발하여 특색 있는 강아지가 항상 알라바마 주에 위치하게 되었다.선택 요소의 첫 번째 옵션은 항상 기본값입니다.따라서 페이지를 불러오고 변경 이벤트가 터치됩니다.기본값은 Alabama이고 쿠키 값은 Alabama입니다.한 번 또 한 번...

솔루션

이 문제를 해결하는 데는 네 가지 주요 부분이 있다. 창이 불러올 때 쿠키를 읽기;이 값은 GET 요청에 사용됩니다.변경 이벤트가 자동으로 트리거되지 않습니다.

<script>
    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }
    function setPuppy(result) {
        $('#divFeaturedPuppyName').text(result.name);
        $('.sname').text(result.name);
        $('.puppylink').attr("href", result.bio_url);
        $('#aFeaturedPuppy').attr("href", result.bio_url);
        $('#aFeaturedPuppyLink').attr("href", result.bio_url);
        $('#imgFeaturedPuppy').attr("alt", result.name);                    $('#imgFeaturedPuppy').attr("width", result.image_width);
        $('#imgFeaturedPuppy').attr("height", result.image_height);
        $('#imgFeaturedPuppy').attr("src", result.image_url);
    }
    window.onload = (event) => {
        puppySelect = document.getElementById('drpPuppies');
        let myPuppy = getCookie("exp_custom_default-puppy-id");
        if(myPuppy == "" || myPuppy == null){
            myPuppy = "27";
        }
        puppySelect.value = myPuppy;
       $.getJSON("/site/puppy-info/" + myPuppy, function (result, status) {
            if (status == "success") {
                setPuppy(result)
            }
        });
    };
    function jqExt() {
        $('#drpPuppies').on('change', function () {
            $.getJSON("/site/puppy-info/" + this.value, function (result, status) {
                if (status == "success") {
                   setPuppy(result)
                }
            });
        });
    }
</script>

우선 함수 getCookie() 가 있습니다. 이 함수는 주어진 이름의 쿠키를 검색합니다.
다음에 나는 spotlight 부분에서 강아지의 특정 정보를 새로운 함수setPuppy()로 설정했다. 그러면 나는 다른 두 함수에서 강아지를 호출할 수 있고 자신의 조작을 반복하지 않아도 된다.GET 요청의 결과를 매개변수로 사용합니다.
옆에는 창문이 하나 있다.onload 이벤트, "exp custom default-puppy-id"쿠키를 확인하고 변수 myPuppy에 저장합니다.설정하지 않으면 기본값(플로리다 27!)을 반환합니다.
myPuppy 값은 GET 요청에 사용됩니다.이런 방식을 통해 우리는 모든 사용자가 이전에 가 본 적이 있든 없든, 과자가 기한이 지났든 귀여운 강아지 한 마리를 받을 수 있다.GET 요청 결과에서 참조하는 요소의 값을 설정하려면 setPuppy()도 사용합니다.
마지막으로 우리trustyjqExt() 함수입니다. 변경 이벤트 탐지기는 아직 완전무결합니다.사용자가 선택할 때, 이것은 정확한pup을 보여 줍니다.setPuppy () 함수도 호출합니다.

사상

사실은 이런 유용했던 방식이 지금까지 효과가 없었다는 것을 증명한다.그것은 웹 사이트를 업데이트할 때 요청한 것이지만, 이 기능은 요청한 방식대로 작동하지 않았다.이 사이트의 이전 교체 중에는 메인 페이지를 불러올 때마다 스포트라이트 부분을 무작위로 채운다.
당신은 최근에'예전에 유용했다'는 프로젝트를 해 본 적이 있습니까?