[ jquery ] jquery 활용 js 파일 include 하기 > javascript&jQuery

본문 바로가기

사이트 내 전체검색

javascript&jQuery

[ jquery ] jquery 활용 js 파일 include 하기

작성일 18-09-27 17:08

페이지 정보

작성자 웹지기 조회 5,248회 댓글 0건

본문

jquery를 이용해 js 파일들을 인클루드 하는 플러그인

먼저 include 해야할 js 파일을 한 후 순차적으로 js 파일을 인클루드


1. 기본환경설정

[code]

<script src="/common/js/jquery-1.7.1.min.js" ></script>

<script src="/common/js/jquery.extended.js" ></script>

[/code]


2. 사용법

    # 방법 1

[code]

$.include(

    'js/my.js', // my.js 로딩 후 my1.js 를 로딩함

    $.include('js/my1.js')

);

[/code]


    # 방법 2

[code]

$.include('js/my.js',

    // my.js를 먼저 로딩 후 my1.js, my2.js 를 불러 들입니다.

    [

        $.include('js/src/my1.js'),

        $.include('js/src/my2.js')

    ]

);

[/code]


@ jquery.extended.js 소스

[code]

/**

 * $.include - script inclusion jQuery plugin

 * Based on idea from http://www.gnucitizen.org/projects/jquery-include/

 * @author Tobiasz Cudnik

 * @link http://meta20.net/.include_script_inclusion_jQuery_plugin

 * @license MIT

 */

// overload jquery's onDomReady

if ( jQuery.browser.mozilla || jQuery.browser.opera ) {

    document.removeEventListener( "DOMContentLoaded", jQuery.ready, false );

    document.addEventListener( "DOMContentLoaded", function(){ jQuery.ready(); }, false );

}

jQuery.event.remove( window, "load", jQuery.ready );

jQuery.event.add( window, "load", function(){ jQuery.ready(); } );

jQuery.extend({

    includeStates: {},

    include: function(url, callback, dependency){

        if ( typeof callback != 'function' && ! dependency ) {

            dependency = callback;

            callback = null;

        }

        url = url.replace('\n', '');

        jQuery.includeStates[url] = false;

        var script = document.createElement('script');

        script.type = 'text/javascript';

        script.onload = function () {

            jQuery.includeStates[url] = true;

            if ( callback )

                callback.call(script);

        };

        script.onreadystatechange = function () {

            if ( this.readyState != "complete" && this.readyState != "loaded" ) return;

            jQuery.includeStates[url] = true;

            if ( callback )

                callback.call(script);

        };

        script.src = url;

        if ( dependency ) {

            if ( dependency.constructor != Array )

                dependency = [dependency];

            setTimeout(function(){

                var valid = true;

                $.each(dependency, function(k, v){

                    if (! v() ) {

                        valid = false;

                        return false;

                    }

                })

                if ( valid )

                    document.getElementsByTagName('head')[0].appendChild(script);

                else

                    setTimeout(arguments.callee, 10);

            }, 10);

        }

        else

            document.getElementsByTagName('head')[0].appendChild(script);

        return function(){

            return jQuery.includeStates[url];

        }

    },

    readyOld: jQuery.ready,

    ready: function () {

        if (jQuery.isReady) return;

        imReady = true;

        $.each(jQuery.includeStates, function(url, state) {

            if (! state)

                return imReady = false;

        });

        if (imReady) {

            jQuery.readyOld.apply(jQuery, arguments);

        } else {

            setTimeout(arguments.callee, 10);

        }

    }

});

[/code]


추천0

비추천 0

댓글목록

등록된 댓글이 없습니다.

전체 63건 3 페이지

이미지 목록

게시물 검색
Copyright © 즐거운 코딩 생활 ( funyphp ). All rights reserved.
PC 버전으로 보기