一つには、頻繁に繰り返され、それは退屈し、退屈することは簡単ですが、私は、元の熱意を失いました。
無限のビジネスニーズ、翌日、私は、すべて手作業を退屈な仕事を感じ、
より多くを行うには、エンドC、、デザインを求めて、退屈な、特に迷惑な何もチャレンジビジネスロジックを感じない;
B側よりを行うには私は無味データ、クールな特殊効果でプレーするチャンスがないに対して毎日、プラットフォームを書くために日々感じた。
多くを行うには技術的な建物、そして、彼らは疲れている何をすべきかを見て、
いくつかの凝った、およびない仕事内容で、意義は何であり、
最新のテクノロジーが、歴史的な理由と頻繁にアクセスできないのためのプロジェクトについてたい......
当然のことながら、私は、オリジナルの熱意を失った達成感を見つけ、とさえ彼はフロントエンドに適していないではないことを疑うことができない、それはキャリアの変更はありませんが、ジョブを変更することではないでしょうか？
同じことを同じようにやって避けてください
あなたが同じことを行うために、同じ態度にされている場合に、それは退屈することは容易であるが、達成感のありません。だから、戻って速く、同じことをやっての効率を向上させる必要があると速く完了するまでに、自然に暖かいがあるだろう、毎日自分の進歩を見てきた
コードの品質を向上させ、コード流線
コピーしたい場合は、あなたが望むロジックが引き離すためのパッケージは、コードを再利用する場所を見てみたいことがあり
ほぼすべて同じコードの重複が存在せてはいけない
、我々は始めに、あなたはこのコードを書いたことがあります。
ホーム</a>の<A>
の<a>会社案内</a>の
<A>協力が</a>の
<A>参加します我々は</A>
反応し、後に見つかった、VUEは、V-用することができ、コードをコピーして、ネイティブの挿入リサイクルすることができフラグメント、最終的に1回の追記をマッピングすることができます。
我々は見つけることができることは極めて明白で、あまり目立たない場合も、私はそれを見つけたかの再利用？ここでも、あなたが再利用できるコードをコピーするとき。antd一形態の一般的なシナリオの場合：
<Form1の>
<商品ラベル= "名前">
{getFieldDecorator（ '名前'、{
ルール：[{
必須：真、へ
のメッセージ：「'名前を入力してください
}]
}） （<入力/>）}
</商品>
<商品ラベル= "説明">
{getFieldDecorator（ 'DESC'、{
ルール：[{
必須：trueに、
メッセージ：「説明を入力してください'
}]
}）（< INPUT />）}
<
必要：trueに、
メッセージ：「種類を選択してください」、
}]、
}）（<チェックボックス/>）}
</商品>
</ Form1の>
コード・ルーチンが同じでコピーし、構造が同じである、我々は構成を維持この形状を維持することを目的：
CONST商品= [
{
ラベル： '名前'、
キー： '名前'、
デコレータ：{
ルール：[{
必須：trueに、
メッセージ： '名前を入力してください'、
}]
}、
コンポーネント：< INPUT />
}
// ...
]
バックフロントエンド処理エラーコード、コードの共通部分で、非常に長い場合の別の例のコードを複製：
//前
（===タイプ1）IF {
にconsole.log（ '追加'）、
他}（タイプ=== 2）{IF
はconsole.log（ '削除'）
}他===（IFタイプ3）{
にconsole.log（[編集]）
}他{
コンソール。ログイン（ '取得'）
}
//後
{MAP CONST =
： '追加'、1
2： '削除'、
3： '編集'、
4： 'GET'
}
にconsole.log（MAP [タイプ]）
のコードをコピーし
、オブジェクトを配置するサイクルをレンダリングしコードの重複を減らします
私たちは、 "遅延書き込みコード"の考え方が必要です
アクションのようにReduxのタイプ
のconst = FETCH_LIST 'FETCH_LIST'
のconst = FETCH_LIST_SUCCESS 'FETCH_LIST_SUCCESS'
のconst = FETCH_LIST_FAILED 'FETCH_LIST_FAILED'
のconst = FETCH_USERINFO 'FETCH_USERINFO'
のconst = FETCH_USERINFO_SUCCESS 'FETCH_USERINFO_SUCCESS'
のconst = FETCH_USERINFO_ERROR「FETCH_USERINFO_ERRORを「
非常にきちんとしたコードと非常に快適に見えますが、それらはすべて共通、非同期要求を持っている、要求コードをコピーし、要求が成功し、要求がタイプに失敗しました。新しいたびに、私たちはまずここのコピーの3行を来て、その後、変更するように変更します。ほぼすべて以来、我々はタイプジェネレータを書くことができます：
関数actionGenerator（K = ''）{
constのキー= k.toUpperCase（）
の戻り{
...（K
{？
[`FETCH_${key}_SUCCESS`]: `FETCH_${key}_SUCCESS`,
[`FETCH_${key}_ERROR`]: `FETCH_${key}_ERROR`,
}
: {}),;}
}
//それ以来、大幅にコードACTION_TYPEのラインの数を減らすことは
、オブジェクトが割り当て繰り返されるための関数の別の例のコードを複製：
//前
obj.a. 1 =
obj.b = 2
。obj.c = 5
//後
CONST = {NEWVALSである
:. 1、
B：2、
C :. 5
}
//トラフィックが元のOBJ内の参照に依存している場合、元のオブジェクトを変更することはできません
Object.keys（NEWVALSである）.forEach（キー=> {
OBJ [キー] = NEWVALSあります[キー]
}）
OBJ内の事業は、元の参照に依存していない場合は、//、あなたは元のオブジェクトを変更することができ
OBJ OBJ = {...、... newVals}
//後で私は行くことができラインnewValsを変更する、何かを変更したい
コピー別の例では、コード・ページのコピーである、我々は簡単に変更した後に、統一されたコンフィギュレーション・ファイルにのみ実行することができます
2より<ヘッダ>以下と半分研修生</ヘッダ>運動を
<節>私はちょうど研修生</部>です
< UL>
<LI>歌います。</ li>
<LI>ジャンプ</ LI>
<LI> RAPます。</ li>
</ ulの>
<フッタ>連絡先：000 </フッタ>
コード定数= {constのコピー
「練習二年未満と研修生の半分」：タイトル
DESC：「私はちょうど研修生だ」
趣味：[「歌う」、「ジャンプ」、「RAP」]を、
TEL：「000」
}
<ヘッダ> CONSTANT.title {} </ヘッダ>
<sectionTop> CONSTANT.desc {} </ sectionTop>
<UL>
{
CONSTANT.hobbies.map（（趣味、I）=> <キーのLi = {I}> { }ホビーます。</ li>）
}
</ UL>
<フッタ>連絡先：{CONSTANT.tel} </フッタ>
のコードをコピーし、これは、追加のコードが複雑になるの書き込みであるように見えます。一般的に、これは必須ではありません。運用上のニーズのために、このプログラムは、その変化に対応するために、いつでも変更することができますコピーを変更する必要が容易で、ページ構造を気にする必要はありません、あなたは、ファイルが直接そのようなことがCONSTANT置く書く場所を見つけるために、内部のhtmlをコピーする必要はありませんA。しかし、このオブジェクトはまた、再利用することができ、状況の「ページの変更のコピー数十の変更」のようなものがあるでしょう。
別のシナリオは、我々は、通常、多くのそのようなコードを書くことができる：
sayHi（名前、単語）{機能
はconsole.log（ ${name}: ${word}）
}
CONST aSayHi =（）=> sayHi（ 'A'、 'ハイ'）
（CONST aSayGoodbye =を）=> sayHi（ 'A'、 'さようなら'）
CONST aSayFuck =（）=> sayHi（ 'A'、 'ファック'
） 関数の引数は、sayHiを渡された場合、これは非常に単純なシナリオですもちろんのコードをコピーし、多くがありますが、繰り返しの単語の数、コードの冗長性があります。現時点では、一部の機能の最適化を使用する必要があります。
constのAsay =（名）=> sayHi（ 'A'、名前）
のconst aSayHi =（）=> Asay（ 'こんにちは'）
のconst aSayGoodbye =（）=> Asay（ 'さようなら'）
のconst aSayFuck =（）=> Asay （「性交」）
一緒に短絡して、いくつかの例をコード三元表現をコピーする
前に、//
IF（真のタイプ===）{
値= 1
} {他
値= 2
}
//後、
値型=？。1 ：2
//前
（タイプ=== DEL）{もし
this.delateData（ID）
}他{
this.addData（ID）
}
//後
、このタイプ=== DEL？'delateData'： 'は、addData'
//または
;（タイプ=== DEL this.delateData：？this.addData）（ID）
//前
（！ARR）IF {
ARR = []
}
arr.push（項目）
//それが推奨されないeslintに属する後
;（編曲||（ARR = []））プッシュ（アイテム）
//前
IF（A）{
戻りC
}
//後
リターン&& C
ような重複キー割り当て処理としてコードをコピーする最後の例は、可変キーと簡略化することができる
スイッチ（キー）{
ケース「A」：
リターン{A ：newValに}
ケース'B'：
リターン{B：newValに}
ケース'C'：
リターン{C：newValに}
}
//後
リターン{[キー]：newValには}
使い慣れたマルチコードは、よりを書くときにかかわらずしかし、コードをコピーしませんさて、あなたはまた、コメントを書き込む必要があります。コアアルゴリズム、公共アセンブリ、パブリックコメントが必要な特定の機能
/ **
- ツリー組織構造を作成します。
- @param {オブジェクト} ORGS
- @param {アレイ} [親= []
- @paramは{ブール}がチェックするかどうかをチェックする必要がある
*は/
コードのコピー
概要：ショートコード番号の重複を、そして脂っこいではない自分自身を見て、取り外したロジック機能は、共通の目に見えないコードの品質を向上させるカプセル化します。「最後ではないすべてのコピー、そして彼の手と単にエレガントなコードを見て、ますます多くの需要たい」を最後にそれは開発効率を加速するだけでなく、開発の経験と成果を向上させるメリット
運用要件が退屈されていないようにする方法を
企業のほとんどが彼の家の主力製品に加えて、ビジネス需要主導型、反復的な要件に基づいており、他は通常の補助などの運用ニーズです。クラスの動作要件は、一般的に短命、高周波特性が期限を持っています。
1つのオペレータの活動は、運用プレイシナリオ--abテストで最善の解決策を見つけるために調整されたデータによると、表示レイアウト、ロジックの様々な製品事業のランダムな組み合わせの様々な様々なモードがあるかもしれません。
このような状況に直面して一部の人々は、いつもため息：十分なあなたが幸せに、彼らが戻ってどのように変化するか、需要も変化している、と何も毎日と変わっていません。実際には、このような状況は、私たちは変更することが本当に無料の後ろに、でも基本的な開発する必要はありません、自分で先に良い計画の道を与える
：私たちは、単純なユーザー情報ページの例で始まる
（）{レンダリング
のconst {名前、このスコア} =を.state.info
リターン（
<メイン>
<ヘッダ> {名前} </ヘッダ>
スコア<sectionTop>スコア{} </ sectionTop>
</メイン>
）
}
コード増加アダプテーション層コピー
我々は共通のコアロジックを移動しないようにしようとコードは、「それならば追加します。」と言っていません 新しいコードの導入は、他のバグ導入することができる（一般的な錯覚の1：バグを引き起こすことはありません、私は行か2を追加した）を、一定のリスクがあります。
トピックに戻る、あなたは突然、このイベントが直接要求された変更に別のゲームのスコアを引き、その後、フィールドのすべてのコンポーネントを変更置くために言うならば、もちろん、それは方法です。あなたが完了し、すぐに変更する場合は、戻って変更は、それが血を吐いていないと言わざるを得ない。明らかに、我々は適応層を必要とする：
機能アダプタ（応答、情報を）{
Object.keys（NEWCONF）.reduceを返す（（RESキー）=> {
RES [キー] =応答[NEWCONF [キー]
リターンRES
}、{}）
}
//前
関数fetchA（）{
復帰要求（」 / A '）
}
fetchA.then（RES => {
this.setState（{
情報：{名：res.nickname、スコア：res.counts}
}）
}）
//要求関数の直後に修正
機能fetchA（）{
。次いで（RES => {復帰要求（「/ A」）の
ときに、外部の一定の使用、適応の結果を返す//
戻りアダプタ（RES {
名前：「ニックネーム」、
スコア：「カウント」
}）
}）
}
私たちが一緒に集中するようになってコードをコピーし、変更することは、それぞれ、限りアダプテーション層は、ここに変化するよう、要求インタフェースを変更することができます。もちろん、当時、すべての団結は最高ですが、の気まぐれに変更されていない歴史的な理由がある場合。
変更の多くがそうするようにインターフェイスを変更する場合は、次の拡張？
この時点で、我々は直接前のコードを取り除くためにではなく、コンフィギュレーション・テーブルを維持するために必要な、要求と適応オブジェクトを保存します
cgiMAp = {CONST
「/ A」：{
名：「ニックネーム」、
スコア：「カウントが」
}
// ...
}
この構成により、パッケージ内部読み出し要求の論理機能を読み取ることによって、コードをコピーし、適合させることができます関連するすべてのインタフェースを持ちます。データソースの後ろに変更した場合、光の速度のニーズに対処し、その
関数reqGenerator（CFG）を{
Object.keys（CFG）.reduce（（RES、KEY）=> {返す
（RES [key.slice（1）] = ）=>要求（KEY）.then（R＆LT =>アダプタ（R＆LT、CFG [キー]））
RESを返す
}、{}）
}
CONST = reqGeneratorのREQS（cgiMAp）
reqs.a（）
遵守のコードコンポーネントをコピーします
ユーザーの情報ページの前の例では、ユーザ情報ページでは、スコアを表示したくない場合は、それを埋めるために、より多くのコンテンツを必要とする場合は？
この場合、第一および製品側を確認し、将来はでなければならず、何がなるものです。部分を変更すると、我々は直接来るコンテンツの時間を使用する：
クラスアプリザは、コンポーネント{延び
// ...
レンダリング（）{
CONST {名前、スコア= this.state.info}
リターン（
<メイン>
<ヘッダ> {名前} </ヘッダ>
<sectionTop> this.props.children {} </ sectionTop>
スコア<sectionTop>スコア{} </ sectionTop>
</メイン>
）
}
}
限り上部アセンブリは、パーソナライゼーション・コンポーネントを包み込むように、コードをこのようにコピーOK上のコンテンツ
<アプリケーション>
<節>私はちょうど研修生</部>
<UL>
<LI>歌います。</ li>
<LI>ジャンプ</ LI>
<LI> RAPます。</ li>
</ ulの>
< /アプリケーション>
CONST [IS_NO_JOIN、IS_PAY、IS_SCORE_HIGH] = [1、2、3]
CONST MAP = {
}
関数ヘッダ（小道具）{
CONST [タイプはsetType] = useState（ '正常'）
useEffect（（）=> {
//用名字获取用户身份
requestTypeByName（props.children）.then（RES => {
はsetType（RES .TYPE）
}）
}、[]）
リターン（
<ヘッダ
クラス名= {クラス名（MAP [タイプ]）}
props.children} {
</ヘッダ>
）
}
のコードをコピーしたり、構造をレンダリングする、コアロジックが固定されておらず、シーケンスは移動しません。私たちの親コンポーネントのコントロールの上部からよりカスタマイズ機能は、制御ロジック、表示部品、コピーライティングなどディスプレイ上にレンダリング、上部親コンポーネントは、小道具のコアコンポーネントを通過し、良好な組み立て。このプロセスは、そのような同僚の前に書くように、コアレンダリングロジックです。同僚に注入ヘッダー要素が書き込まれ、Bの同僚は、この責任はありませんが、bは、開発者の需要なので、良い姿勢調整をレンダリングする必要があり、適応は、コア・ロジック・コンポーネントに手紙を書きました。最終的な性能は、この方法は、侵襲性の低い、低リスク、およびスキームの強い展開され、変更を行うために、B、Bに制御を与えることです。
完了論理的な説明が作業をオフに笑った後、文書の訓練と準備B、およびB「の成功は、鍋をダンプ」 - これは、よりエレガントかつセキュアなソリューションである、我々はすべてを理解します
変更を行う場合、ビューの抗前方のポイントは、（コア・モジュールは巨大複雑であると仮定してのホールドにクイックスタートだけでは生きていけない）：
//スタイルの行を追加し、N
//論理状態を処理する追加、およびビジネス・ロジックを追加することはできません。元の論理変化に影響を与える慎重た
フィールドを変更するように適合され@、および数行の
レンダリング（）{
CONST {名前、スコア= this.state.info}
リターン（
<メイン>
<ヘッダ・クラス名=「XXX」> {名前} </ヘッダ>
<セクション> {this.props.children} </セクション>
スコア：<セクション> {スコア} </セクション>
</メイン>
）
}
//符号化後：MMPの、なぜBを必要とするべきです私を助けて、私が見ると、需要のニーズを理解するためにゼロからスタートしなければならない
コードのコピー
ラインで、変化を、突然、オペレータは、背後にあったか、この斜線部分で....心臓XXXを求めて
操作は、インタフェース設定
、我々は非常に小さな変更を行っている、前の例を完了しました。もちろん、変更の単語を変更するには、各桁、フロントエンドがリリースされ、これはエレガントな解決策ではありません。プラットフォーム構成上の1つのオペレータ、フロントエンドインタフェースは、ページをレンダリングするためにバックプラットフォームの設定を通して読むことをして最終的な解決策は、設定のこの部分は、引き出されるべきです。オペレータは、我々はちょうどプラットフォーム構成の変更に配置する必要があり、変更する必要があります。
//書き込むように可視化構成インターネット上に配置
する@ cgiMAp = CONST {
{：// '/ A'
//名前： 'ニックネーム'、
'カウント'：//スコア
、//}
// // .. 。
//}
関数reqGenerator（CFG）{
戻りObject.keys（CFG）.reduce（（RES、KEY）=> {
RES [key.slice（1）] =（）=>要求（KEY）.then（R＆LT =>アダプタ（R＆LT、CFG [キー]））
リターンRES
}、{}）
}
リクエスト（ '/設定'）。次いで、（RES => {
CONST = reqGenerator REQS（res.cgiMAp）
reqs.a（）
}）
ページのユーザビリティ、アクセシビリティ外観を向上させ、コードをコピーしても、キャッシング、災害復旧を考慮してください。
インターフェイスは、のユーザーエクスペリエンス向上にどのように、ハングアップされている場合は
埋もれ、このような監視など、手でページを作成する方法を
強固なページを行う方法、およびさまざまなマシンとユーザーの無差別操作の被害に耐えることができます
最後に、
私は関係なく、自分の上にあるものよりソフトスキル、方法論、考え方の多様性のため、技術に加えて、成長の一種ではありません、フロントラベルを置きます。唯一の社会的、コーディングは、おそらく人生の最も簡単な一部であり、調べるには