javascript를 사용하여 .dic 파일에서 단어 열기 및 찾기

좋아, 분해하자

    <script   src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script type="text/javascript">
            var dictionary;
            
            function load() {
                $( '#loading-progress' ).append( 'Loading affix data...' ).append( $( '<br />' ) );
                
                $.get( 'typo/dictionaries/en_US/en_US.aff', function ( affData ) {
                    $( '#loading-progress' ).append( 'Loading English dictionary (this takes a few seconds)...' ).append( $( '<br />' ) );
                    
                    $.get( 'typo/dictionaries/en_US/en_US.dic', function ( wordsData ) {
                        $( '#loading-progress' ).append( 'Initializing Typo...' );
                
                        dictionary = new Typo( "en_US", affData, wordsData );
                        
                        checkWord( 'mispelled' );
                    } );
                } );
            }
            
            function checkWord( word ) {
                var wordForm = $( '#word-form' );
                wordForm.hide();
                
                var resultsContainer = $( '#results' );
                resultsContainer.html( '' );
                
                resultsContainer.append( $( '<p>' ).text( "Is '" + word + "' spelled correctly?" ) );
        
                var is_spelled_correctly = dictionary.check( word );
                
                resultsContainer.append( $( '<p>' ).append( $( '<code>' ).text( is_spelled_correctly ? 'yes' : 'no' ) ) );
                
                if ( ! is_spelled_correctly ) {
                    resultsContainer.append( $( '<p>' ).text( "Finding spelling suggestions for '" + word + "'..." ) );
                    
                    var array_of_suggestions = dictionary.suggest( word );

                    resultsContainer.append( $( '<p>' ).append( $( '<code>' ).text( array_of_suggestions.join( ', ' ) ) ) );
                }
                
                wordForm.show();
            }
        </script>

1 단계 : dom 조작을 위해 typo.js 및 Jquery를로드합니다.

<script type="text/javascript" src="typo/typo.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

두 번째 단계의 주요 기능은로드입니다. 코드의 주석을 읽어보세요.

function load() {}

jquery $ .get 함수를 사용하는 구성로드 함수를 채울 수 있습니다.

$.get( 'file path over the internet', function ( callback ) {}); 

$ .get에 DOM으로 다운로드 할 파일을 알려주고 프로세스가 완료되면 실행될 콜백을 제공합니다. 따라서 $ .get 콜백에서 콜백으로 자체 콜백이있는 또 다른 $ get이 있습니다. 따라서 아래와 같이 중첩 된 연산이 있습니다.

$.get( 'first file', function ( callback on first file ) {
$.get( 'second file', function ( callback on second file ) {});
}); 

이것이 파일을 읽을 수 있도록 준비하는 전체 메커니즘입니다. 실제 코드를 할 수 있습니다.

//create variable while will hold dictionary data

    var dictionary;
    
    function load() {
    //first file                
    $.get( 'typo/dictionaries/en_US/en_US.aff', function ( affData ) {
    //second file       
    $.get( 'typo/dictionaries/en_US/en_US.dic', function ( wordsData ) {
    
    //assign data to variable using typo object
    dictionary = new Typo( "en_US", affData, wordsData );
    
    //then finally do the search trough another custom function                 
    checkWord( 'check me' );
                        } );
                    } );
                };
                

체크 워드는 화면과의 상호 작용을하는 간단한 UI 기능입니다.

    function checkWord( word ) {
// find wordfrom is from in the web page
var wordForm = $( '#word-form' );

// initially hiding the form when function is called
wordForm.hide();

// prepare div where to show results and clear everything in it
                    
var resultsContainer = $( '#results' );
resultsContainer.html( '' );

// then populate it with some form of indication ohh was it spelled right or what ever

resultsContainer.append( $( '<p>' ).text( "Is '" + word + "' spelled correctly?" ) );
            
// this is your truthy 
// we are going to call the fucntion from typo js through object we created on dictionary variable. moment of truth. It will return true or false. 

var is_spelled_correctly = dictionary.check( word );
// next we chow it to the world by appending Paragraph with text
// what it is doing is running ternary function a short hand for if else e.g. your condition ? 'show yes if meets': 'show no otherwise';
//based on truthy we ran above if its true it will show yes else no. Just visual gimmic.

resultsContainer.append( $( '<p>' ).append( $( '<code>' ).text( is_spelled_correctly ? 'yes' : 'no' ) ) );
//next if it was not spelled correctly run suggestion, based on truthy we ran above if its false run suggestions. Just visual gimmic.           

if ( ! is_spelled_correctly ) {
resultsContainer.append( $( '<p>' ).text( "Finding spelling suggestions for '" + word + "'..." ) );

var array_of_suggestions = dictionary.suggest( word );
resultsContainer.append( $( '<p>' ).append( $( '<code>' ).text( array_of_suggestions.join( ', ' ) ) ) );
                    }
//in the end show form again.                   
                    wordForm.show();
                }

웹 페이지의 양식에서 함수를 호출하고 결국 false를 반환하면 인터넷에서 실행이 중지됩니다.

<form method="GET" action="" onsubmit="checkWord( document.getElementById( 'word' ).value ); return false;

페이지로드시로드 함수가 호출되기 전에 호출되었습니다.

<body onload="load();">

당신은 스크립트에서 자신의 선호도를 호출 할 수 있습니다.

이것이 이해를 돕기를 바랍니다. 오타를 실행하려면 .aff 및 .dic 파일이 필요하므로 두 개가 하나만로드 된 다음 다른 하나를로드 할 때 중첩 된 방식으로 실행됩니다.

모든 것이 완료된 후 check 함수를 호출하고 모든 것이 전역 범위에 있기 때문에 여기서부터는 함수를 호출합니다. var 사전이 함수 외부에 있다는 것을 알았습니까? 기본적으로 다른 함수에 액세스 할 수있는 전역 범위에 있었으므로로드 함수를 반복해서 실행할 필요가 없습니다.
다른 모든 것이 준비되면 UI를 실행하는 간단한 호출 확인 기능

소스보기 : https://www.chrisfinke.com/files/typo-demo/