javascript - 使用 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>

这是第一步：您正在加载typo.js 和Jquery 以进行dom 操作。

<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' );
                        } );
                    } );
                };

Check word 是一个简单的 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 这就是为什么两个在加载一个时才以嵌套方式运行它们，然后才加载另一个。

我们在所有完成后调用检查函数，然后我们只调用该函数，因为一切都在全局范围内。您是否注意到 var 字典在函数之外，所以基本上它在全局范围内可供任何其他函数访问，因此我们不必一遍又一遍地运行加载函数。
简单的调用检查功能来运行 UI，因为其他一切都准备好了

查看源代码：https ://www.chrisfinke.com/files/typo-demo/

javascript - 使用 javascript 打开和查找 .dic 文件中的单词

问题描述

解决方案

推荐阅读