1。インターフェイスの流ency性
優れたインターフェイスはスムーズで理解しやすく、主に次の側面を反映しています。
1。シンプル
特定の要素のCSS属性を操作するには、以下がネイティブ方法です。
document.QuerySeLectorall（ '＃id'）。style.color = 'red';
パッケージング後
関数a（selector、color）{document.queryselectorall（selector）[]。style.color = color} a（ '＃a'、 'red'）;数十文字のある長い行から単純な関数呼び出しまで、APIはシンプルで使いやすいです
2。読みやすさ
a（ '＃a'、 'red'）は、要素を簡単かつ実際に変更するのに役立つ良好な関数ですが、問題は機能変更を初めて使用すると、より混乱することです。誰も彼に何の関数とは何かを伝えません。インターフェイスの開発について1つのことを知る必要があります。人々は怠zyです。色割り当て関数の観点からは、書き込まれたコードは少なくなりますが、メモリコストが増加します。これを行うたびに、マッピング関係が必要です。 A ---->色。それがいくつかの単純なものである場合、それは問題ではありませんが、通常、フレームワークのセットには数十または数百のAPIがあり、マッピングコストの増加により、プログラマーは崩壊します。必要なのは、インターフェイスを意味のあるものにすることです。機能を書き直しましょう。
関数letsomeElementChangeColor（selector、color）{document.queryselectorall（selector、color）;}letsomeElementChangeColorには、Aに対して言語的意味が与えられ、誰もがその意味を知るでしょう。
3.メモリコストを削減します
今私たちが今ちょうどこのような機能もあります。長すぎます。 letsomeElementChangeColorはマッピングコストを削減しますが、メモリコストが増加します。アカデミックマスターを含む誰も口頭でいるのが好きではないことを知っておく必要があります。ネイティブにDOMを取得するAPIには、この問題document.getElementsByClassNameもあります。 document.getElementsByName; document.queryselectorall;これらのAPIは、言葉が長すぎるという感覚を人々に与えます。彼らが与える意味は非常に明確ですが、このアプローチは単純さを犠牲にすることに基づいています。したがって、この以前の機能をもう一度書き直します
関数setColor（セレクター、カラー）{xxxxxxxxxxxxx}大幅な変更なしに関数名を削減します。読みやすく、覚え、使用できるようにします。
4。拡張
いわゆる拡張は、機能の使用が、流れる水のように書き込みの順に実行され、実行チェーンを形成することを意味します。
document.getElementById（ 'id'）。style.color= 'red'; document.getElementbyid（ 'id'）。style.fontsize = 'px'; document.getElementById（ 'id'）。style.backgourdcolor = 'pink';
以前の方法は、2つの関数SetFontsize、SetBackGroundColorを再びカプセル化することでした。そして、それらを実行しますsetcolor（ 'id'、 'red'）; setFontSiez（ 'id'、 '12px'）; setbackgroundcolor（ 'id'、 'pink'）;明らかに、このアプローチは領域を超えて行くのが怠zyではありません。 ID要素は毎回再取得する必要があり、パフォーマンスに影響を与え、失敗する必要があります。新しいメソッドを追加する必要があるたびに、失敗すると、これらのメソッドは毎回呼び出されるか、失敗します。以下に、拡張機能に書き直しました。最初に、取得IDメソッドをオブジェクトにカプセル化し、次にオブジェクトの各メソッドでこのオブジェクトを返します。
function getelement（selector）{this.style = document.queryselecotrall（selector）.style;} getElement.prototype.color = function（color）{this.style.color = color; return this;} getElement.Prototype.background = function（bg）{This.Style.Backgreatlor = Color; this;} getElement.prototype.fontsize = function（size）{this.style.fontsize = size; return this;} // call var el = new getelement（ '＃id'）el.color（ 'red'）。シンプルでスムーズで、後で読みやすい、パラメーターで最適化し続ける方法について説明します。したがって、誰もがjQuery APIを使用することを好みます。 $シンボルは実用的な意味を表していませんが、単純なシンボルは私たちの使用に有益です。上記の原則を具体化します：シンプルで読みやすい、覚えやすい、チェーンライティング、マルチパラメーター処理。
ナイトウェア：
document.getElementById（ 'id'）。style.color= 'red'; document.getElementbyid（ 'id'）。style.fontsize = 'px'; document.getElementById（ 'id'）。style.backgourdcolor = 'pink';
夢：
$（ 'id'）。css（{color： 'red'、fontsize： '12px'、backgroundcolor： 'pink'}）2。一貫性
1。インターフェイスの一貫性
関連するインターフェイスは、一貫したスタイルを維持します。 APIの完全なセットは、親しみやすさと快適さの感覚を伝えると、開発者の新しいツールに対する適応性を大幅に減らします。これに名前を付ける：短いものと自己説明の両方、そして最も重要なことには、一貫性を維持します。 「コンピューターサイエンスコミュニティには2つの頭痛のみがあります。キャッシュの失敗と命名の問題」-Phil Karltonは、好きな単語を選択し、継続的に使用します。スタイルを選択して、それを保持します。
ナイトウェア：
setcolor、
レットバックグラウンド
ChangeFontsize
makedisplay
夢：
setcolor;
setbackground;
setFontSize
セット.........
コードスタイルと命名スタイルを維持して、人々が同じ人が書いた記事を読んでいるかのようにあなたのコードを読むことができるようにしてください。
3。パラメーター処理
1。パラメーターのタイプ
あなたのプログラムに安定した保証を提供するためにパラメーターのタイプを決定する
//色が文字列型関数setcolor（color）を受け入れることを規定しています{if（typeof color！== 'string'）return; dosomething}2。jsonを使用してパラメーターを渡します
JSONで値を渡すことには多くの利点があります。パラメーターに名前を付けたり、パラメーターの特定の位置を無視したり、デフォルト値を指定したりすることもできます。たとえば、次の悪い状況：
関数fn（param1、param2 ............ paramn）
それに応じて各パラメーターを順番に渡す必要があります。そうしないと、メソッドは予想とは異なる方法で実行されます。正しい方法は次のとおりです。
function fn（json）{//必要なパラメーターのデフォルト値を設定するvar default = extend（{param： 'default'、param： 'default' ......}、json）}この関数コードは、パラメーターを渡さない場合でも実行されると予想されます。なぜなら、宣言すると、特定のビジネスに基づいてパラメーターのデフォルト値を決定するからです。
4。スケーラビリティ
ソフトウェア設計の最も重要な原則の1つは、インターフェイスを変更しないでください。それを拡張することを意味します！スケーラビリティには、インターフェイスに対する単一の責任も必要であり、複数の責任インターフェイスを拡張することは困難です。栗を取る：
//要素のフォントと背景を同時に変更する必要があります// nightware：function set（selector、color）{document.queryselectroall（selector）.style.color = color; document.queryselectroall（selector）.style.backgroundcolor = color;} //関数は拡張できません。フォントサイズをもう一度変更する必要がある場合は、この関数を変更して、関数の後にフォントサイズを変更するためにコードを入力することのみができます。 px）{var el = set（selector、color）el.style.fontsize = px; return el;}上記は、単純な色の追加です。ビジネスは複雑であり、コードはそれを書くときではありません。前のコードを読んで変更する必要があります。明らかに、それは閉鎖された原則に準拠していません。修正された関数は要素オブジェクトを返し、次に変更する必要があるときに、処理のために再び戻り値を取得します。
2。これの使用
スケーラビリティには、これの柔軟な使用、呼び出しおよび適用方法も含まれます。
関数saysbonjour（）{alert（this.a）} obj.a =; obj.say = saybonjour; obj.say（）; /// orsaybonjour.call || apply（obj）; //5。処理エラー
1。エラーの予見
Typeofを使用したり、... CACTを検出したりすることができます。 typeofは、検出オブジェクトにエラーをスローしないように強制し、未定義の変数に特に役立ちます。
2。エラーを投げます
ほとんどの開発者は間違いを犯したくないので、対応するコード自体を見つける必要があります。最良の方法は、コンソールに直接出力して、ユーザーに何が起こったのかを伝えることです。ブラウザの出力API：console.log/warn/errorを使用できます。また、プログラムに何らかの方法を残すこともできます。
関数エラー（a）{if（typeof a！== 'string'）{console.error（ 'param a must of string'）}} function error（）{try {//ここでは間違っている可能性があります}キャッチ（ex）{console.wran（ex）;}}}}}6。先見性
予測可能な臭気プログラムインターフェイスは堅牢性を提供し、コードのスムーズな実行を確保するには、異常な期待を考慮する必要があります。前のsetColorを使用して、予期せぬコードと予見可能なコードの違いを見てみましょう
// nighwarefunction set（selector、color）{document.getelementbyid（selector）.style.color = color;} // dreamzepto.init = function（selector、context）{var dom // empty zepto collectionif（！selector）return zepto.z（） selector.trim（）//それがHTMLフラグメントの場合、それからノードを作成する//注：chromeとfirefoxの両方で、domエラー//フラグメントが<if（selector [] = '<' <'&& fragmentre.test（selector））dom = zepto.fragment（contectrectunection、conterect、conterect。最初にそのコンテキストを選択し、[context！== undefined）return $（context）.find（selector）// css selectorの場合は//ノードを選択します。 Zeptoコレクションが指定されます。ITELSEを返します（Zepto.isz（selector））return selectorelse {//ノードの配列が指定されている場合は、配列を正規化します（isarray（selector））dom = compact（selector）// wrap dom nodes.else if（isobject（selector）dom = [selector basment] Itelse if（fragmentre.test（selector））dom = zepto.fragment（selector.trim（）、regexp。$、context）、selector = null //そのコンテキストでコレクションを作成する場合、最初に//ノードを作成し、（コンテキスト！==未定義）$（contex nodes.else dom = zepto.qsa（document、selector）} //ノードから新しいZeptoコレクションを作成するZEPTO.Z（dom、selector）}を作成する上記はZeptoのソースコードです。著者は、着信パラメーターを予測するときに多くの処理を行っていることがわかります。実際、予測可能性は、プログラムにいくつかの入り口を提供しますが、いくつかの論理的な判断にすぎません。 Zeptoはここで多くの正しい判断と間違った判断を使用しており、これもコードの長さにつながり、読書には適していません。要するに、予測可能性では、実際に場所の物理オブジェクトのパラメーターをさらに記述する必要があります。外部検出を内部検出に変更します。はい、それを使用する人は快適で喜んで使用します。今！人生で最も重要なことは邪魔です。
7。コメントと文書の読みやすさ
最良のインターフェースは、ドキュメントなしで使用することですが、多くの場合、インターフェイスの数が多い場合、ビジネスが増加すると、使用が少し難しくなります。したがって、インターフェイスドキュメントとコメントを慎重に書く必要があります。コメントは、単純で簡潔さの原則に従います。そして、数年後に来る人たちが彼らを見せるためです。
// Annotation Interface、PPTを実証するには、function commentary（）{//リテラル意味のない変数を定義する場合は、コメントを書くことが最善です。 return go.navigate（ 'hash'、function（）{data.clear（）;}）;}やっと
APIドキュメントとGitHub Royal Documentを作成する文書を作成することをお勧めします。シンプルで高速で、コードが強調表示され、あまり言わないでしょう。
上記は、編集者が紹介したJavaScript APIデザインの原則の完全な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！