javascript - 如何将外部 js 函数包含为内部 js 函数？

Question

我有用于循环进度条的外部 js 文件。我不想让我的 js 文件作为外部文件。我希望这个函数也作为一个内部 js 函数。当我尝试包含这个函数时，我得到函数未定义错误。 .

下面是代码..内部js脚本...

  <script>
 ( function( $ ){
$( '#circle' ).progressCircle();

$( '#submit' ).click( function() {
    $( '#circle' ).progressCircle({
        nPercent        : 100,
        showPercentText : true,
        thickness       : 4,
        circleSize      : 50
    });
    })
    })( jQuery );
    </script>

    My external js file...

    ( function( $ ){
     var ProgressCircle = function( element, options ){

    var settings          = $.extend( {}, $.fn.progressCircle.defaults, 
    options );
    var thicknessConstant = 0.02;
    var nRadian           = 0;

    computePercent();
    setThickness();

    var border      = ( settings.thickness * thicknessConstant ) + 'em';
    var offset      = ( 1 - thicknessConstant * settings.thickness * 2 ) + 
    'em';
    var circle      = $( element );
    var progCirc    = circle.find( '.prog-circle' );
    var circleDiv   = progCirc.find( '.bar' );
    var circleSpan  = progCirc.children( '.percenttext' );
    var circleFill  = progCirc.find( '.fill' );
    var circleSlice = progCirc.find( '.slice' );

    if ( settings.nPercent == 0 ) {
        circleSlice.hide();
    } else {
        resetCircle();
        transformCircle( nRadians, circleDiv );
    }
    setBorderThickness();
    updatePercentage();
    setCircleSize();

    function computePercent () {
        settings.nPercent > 100 || settings.nPercent < 0 ? settings.nPercent 
     = 0 : settings.nPercent;
        nRadians = ( 360 * settings.nPercent ) / 100;
    }

    function setThickness () {
        if ( settings.thickness > 10 ) {
            settings.thickness = 10;
        } else if ( settings.thickness < 1 ) {
            settings.thickness = 1;
        } else {
            settings.thickness = Math.round( settings.thickness );
        }
    }

    function setCircleSize ( ) {
        progCirc.css( 'font-size', settings.circleSize + 'px' );
    }

    function transformCircle ( nRadians, cDiv ) {
        var rotate = "rotate(" + nRadians + "deg)";
    cDiv.css({
      "-webkit-transform" : rotate,
      "-moz-transform"    : rotate,
      "-ms-transform"     : rotate,
      "-o-transform"      : rotate,
      "transform"         : rotate
    });
    if( nRadians > 180 ) {
        transformCircle( 180, circleFill );
        circleSlice.addClass( ' clipauto ');
        }
    }

    function setBorderThickness () {
        progCirc.find(' .slice > div ').css({
            'border-width' : border,
            'width'        : offset,
            'height'       : offset
        })
        progCirc.find('.after').css({
            'top'    : border,
            'left'   : border,
            'width'  : offset,
            'height' : offset
        })
    }

    function resetCircle () {
        circleSlice.show();
        circleSpan.text( '' );
        circleSlice.removeClass( 'clipauto' )
        transformCircle( 20, circleDiv );
        transformCircle( 20, circleFill );
        return this;
    }

    function updatePercentage () {
        settings.showPercentText && circleSpan.text( settings.nPercent + '%' 
    );
    }
   };

    $.fn.progressCircle = function( options ) {
    return this.each( function( key, value ){
    var element = $( this );
    if ( element.data( 'progressCircle' ) ) {
    var progressCircle = new ProgressCircle( this, options );
    return element.data( 'progressCircle' );
    }
    $( this ).append( '<div class="prog-circle">' +
                            '   <div class="percenttext"> </div>' +
                            '   <div class="slice">' +
                            '       <div class="bar"> </div>' +
                            '       <div class="fill"> </div>' +
                            '   </div>' +
                            '   <div class="after"> </div>' +
                            '</div>');
    var progressCircle = new ProgressCircle( this, options );
    element.data( 'progressCircle', progressCircle );
    });
    };

    $.fn.progressCircle.defaults = {
    nPercent        : 50,
    showPercentText : true,
    circleSize      : 100,
    thickness       : 3
    };

    })( jQuery );

如何将此外部 js 与内部 js 脚本集成并使其工作？

标签： javascriptjquery

Answer 1

脚本是线性运行的。因此，如果您想访问外部脚本中的代码，则需要在内部脚本之前引用它。

<script src="external script path"></script>
<script>
  your internal script with access to external script
</script>