序文：
同社の開発プロジェクトでは、Emoticonプラグインの使用が必要なため、Baiduに長い間行われています。多くのEmoticonプラグインは、多くのJSファイルを参照する必要があり、使用する既製のデモはありません。いくつかのプラグインは多くの写真を参照しており、各絵文字を再度リクエストする必要があります。このような機能については、多くのJSとIMGを紹介する努力の価値はありません...
したがって、ブロガーは、将来的に簡単に使用できるように、小さな「Expressionプラグイン」をコーディングしました。
関数
関数：式に対応する文字形式を背景に渡し、背景は文字列を返し、フロントエンドは文字列を対応する式に解析してページに表示します。
使い方：
オプションで必要なパラメーターを構成します
var option = {emojiarray：['Angry']、// emoji文字列の配列を入力します。 'emojicontainer'、//絵文字を保存するコンテナオブジェクト： 'send'、//情報を送信するボタンidemojitranslatecls： 'emoji-comment'、// emojiに変換する必要があるコンテナクラス名（img） emoji（option）; text.init（）;おおよその効果のスクリーンショット：（UIは彼らのニーズに応じて美化できます）
[送信]をクリックした後、背景に送信されたデータは次のとおりです。
Emoticonプラグインの3つの原則：
•表現を表示する方法は？
CSSスプライト（画像統合テクノロジー）は、最初に背景アイコンを設定し、次に各小さなアイコンの位置、幅、高さを定義し、表示する表現を表示します。この期間中に遭遇する問題：表示された式のサイズを制御する方法は？私が最初に考えたのは、バックグラウンドサイズの方法ですが、その位置を再定義することは非常に「物理的」です。その後、未来が暗いとき、私はプロパティ変換を見つけました：スケール（1.5）;現在の要素スケーリング比を制御するために、ハハ、コードの1行が行われます〜式を大きくても小さくしたいのですが、サイズに満足していませんか？すべてのコードを完成させます•入力ボックスに絵文字を表示する方法は？
最初は入力のTextareaを選択しましたが、入力ボックスにEmoticonの「追加」を配置すると、アイコンは表示されませんでした。後で、私はDIVを試してから「追加」してから、式を正常に表示できることを発見しましたが、Divはテキストを入力できませんでした。
予備的なアイデア：入力リスニングを使用して、Textarea値をリアルタイムでDIVに追加します。同様に、これはありがたいです〜探求し続けます...
その後、多数の属性を発見しました。 contentedable = "true"、そして喜んでContentedableを選択しました。
最初はSpanを使用してEmoticonアイコンをホストしますが、DivまたはSpanタグで画像を配置すると、デフォルトでコンテンツ誘導型が最後のDiv/Spanに追加されるため、Emoticonアイコンを入力してテキストを入力します。最後のテキストは最後のDiv/SPANになり、テキストが表示されません。わかりました...私はとても疲れています...
Div/SPANは不可能なため、IMGタグを使用して式をホストします。これにより、最終的に正常に入力できます。
[Contentedableには問題があり、豊富なテキストをサポートし、安全ではなく、ユーザーエクスペリエンスが低いです。 】
たとえば、ユーザーが貼り付けると、フォーマットが自動的に表示されます。例は次のとおりです。
これは、豊富なテキスト関数を削除するためのオンラインマスターのコードです。特定のリファレンスについて：マスターブログ投稿
•写真とテキストを変換する方法は？
現時点では、強力なルールを使用する必要があります。最初にHTML（）を使用してコンテンツを取得し、コンテンツを処理します。テキストに変換：
1 content.replace（/<img/b [^>]*/、imgobj [j]）//すべて<img/>を一致させ、対応する形式に置き換えます
2 imgobj.push（format + img [i] .getattribute（ "alt"） + format）; //ここでフォーマットを使用します。したがって、これに似た形式です。恐ろしい：画像に変換するには：
var keys = '//+| - |||| ball | a | ab | abcd | abcd | accept ...' //いくつかの正規表現のみがここにリストされています。 regex = new regexp（ ':(' + keys + '）：'、 'g'）、//このような形式を一致させる：$（obj [i]）。html（）。置換（regex、絵文字）// function emoji（）{var key = arguments []; return '<img src = "フォーマット}プラグイン全体のコード形式は、カプセル化の一般的な方法でもあります。
// emojiオブジェクト可変属性関数emoji（option）{this.emoji = option.emojiArray、this.textareaid = option.textareaid、this.lowid = option.loadid、option.sendid、thisemojicontainer = option.emojicontainer、thisemojitranslatecls option.emojitranslatecls;}//インスタンスが生成されるたびに、上記の属性が再生されるため、固定メソッドの場合、より多くのメモリを消費します。これは環境にやさしくも効率的でもありません。したがって、これらの変更されていないプロパティとメソッドは、プロトタイプオブジェクトで直接定義できます。現時点では、すべての固定方法は実際には同じメモリアドレスであり、プロトタイプオブジェクトを指しているため、操作効率が向上します。
emoji.prototype = {init：function（）{//いくつかの初期化方法this.toemoji（）; this.lowemoji（）; this.bindevent（）;}、bindevent：function（）{}、toemoji：function（）{}、//サーバーデータをemoticons totext：function（）{} //テキストloademoji：function（）{} // load emoticons}に変換するOK、このようなExpressionプラグインが完成したとしても、それに縛られるのは簡単ですか？現在、当面はjqueryに頼る必要があります。エネルギーがある場合は、ネイティブJSに基づいてO（∩_∩）Oをいじり続けます。特定の実装コードはGitHubにあります。最後に、githubアドレスを添付してください：https：//github.com/beidan/emoji
上記は、編集者が0から紹介したJavaScriptの紹介です。すべての人に役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！