2019-03-11 (월)

$.fn

jQuery 객체에 사용자 정의 메소드를 추가하여 사용하는 방법

https://annotations.tistory.com/89

use strict

잠정적인 에러를 막아주는 ES5에서 새롭게 나온 directive입니다.

https://moon9342.github.io/javascript-use-strict

extend는 jquery에 기본으로 내장되어 있는 함수

$.extend( object1, object2 );

이런식으로 사용해서 두 개 이상이 객체를 합칠 수 있게 해주는 건데, 

object1 부분에 설정 안했을 경우 기본값으로 사용할 옵션값을 넣고 

object2 부분에 사용자가 정의할 옵션값을 넣어서 사용하려고 씀

근데 저 object2 부분에 option이라는 변수를 넣고,

그 변수 안에 우리가 설정할 사용자 정의 옵션 값들을 넣어서 사용하기 위해서

function () <- 이 괄호 안에 option이라는 변수를 먼저 선언

실행문에서 저 option 안에 들어갈 값들을 써서 실행하도록 구조를 짜서 사용했엇구요

//scroll
$.fn.setCheckShow = function (options) {
    var settings = $.extend({
        classPrefix: 'scroll'
    }, options);

    this.each(function () {
        var $selector = $(this)
        var scrollTop = 0;
        var offsetTop = 0;
        var windowHeight = 0;
        var elementHeight = 0;
        var startShow = 0;
        var endShow = 0;
        var classPrefix = settings.classPrefix;
        var isCounted = false;

        checkShow();
        $(window).on('scroll resize', function () {
            checkShow();
        });

        function checkShow() {
            scrollTop = $(document).scrollTop();
            offsetTop = $selector.offset().top;
            windowHeight = $(window).height();
            elementHeight = $selector.outerHeight();
            startShow = offsetTop - windowHeight;
            endShow = offsetTop + elementHeight;
            if (scrollTop > startShow) { //아래
                $selector.addClass(classPrefix + '-show');
            }
            if (scrollTop > endShow) { //위
                $selector.removeClass(classPrefix + '-show');
            }
        }
    }); // end of each
} // end of definition of method      

$('section').setCheckShow();

---

init()

init() 함수는 패키지가 로드될 때 가장 먼저 호출되는 함수로, 패키지의 초기화 로직이 필요할 때 선택적으로 사용하면 된다.

https://thebook.io/006806/ch02/05/04/