マインドマップギャラリー プロジェクト指向プログラミング プロジェクト ソリューション
プロジェクト プログラミングのプロジェクト計画に向けて、このマップでは ES6、自動車見積プロジェクト ネットワーク、プロジェクト プロセス、mysql、サーバーなどが紹介されています。参考のために下の画像を保存してください。
2022-04-29 13:59:10 に編集されましたプロジェクト指向プログラミング プロジェクト ソリューション
ES6
変数
させて
定数
es5 を使用して、書き込み可能な属性記述子を変更して const を実装します。
Object.defineProperty(obj,'a',{writable:false})
書き込み可能な属性は変更できません
構成可能な属性を削除したり、属性記述子を変更したりすることはできません。
列挙可能なプロパティは走査できません
値属性
セット
得る
ie8 はdefineProperty をサポートしていないため、vue は ie8 と互換性があります。
関数内のブロックレベルのスコープ: クロージャ
機能: モジュール化の実装
デメリット: メモリリークが発生する
アロー関数
アロー関数。定義時にスコープを指します。
通常の関数。これは呼び出されたときにスコープを指します。
配列とオブジェクト
配列であるかどうかを判断します: Array.isArray
疑似配列を配列に変換します: Array.from()||[...]Array.prototype.slice.call()
オブジェクトの構造化: let{callback}=this.props
オブジェクトの結合: Object.assign({},{a:1},{b:2})
最も単純なディープ コピー: JSON.strigify==>JSON.parse() はオブジェクトのみを処理でき、配列は処理できません。
約束
3つの州
初期化状態: 保留中
完了ステータス: 解決済み
拒否ステータス: 拒否されました
2 つのパラメータ
保留中から解決済みに変更するときに、resolve メソッドが呼び出されます。
保留から拒否に変更する場合は、reject メソッドを呼び出します。
4つの方法
Promise をまとめる: Promise.all()
どのような Promise も完了できます: Promise.race()
ステータスが保留中から解決済みに即座に変わる Promise を生成します: Promise.resolve()
ステータスが保留中から拒否に即座に変わる Promise を生成します: Promise.rejected()
エラーキャッチ: キャッチ
チェーン呼び出し、定数を直接返すだけ
Promise のネイティブ実装: setTimeout を使用して同期操作を非同期操作に変える
非同期/非同期
非同期関数: コードの実行をブロックします。
Promise awiat 式の実行結果は、resolve のパラメータです
エラーのキャプチャ: try/catch はエラーをキャプチャします
発生器
非同期関数 (先頭に * が付きます)
yield を使用して非同期操作を変更する
最初の呼び出しはイテレータを返します
イテレータの next メソッドを呼び出し、yield ステートメントまたは return が見つかるまで実行を続けます。
生成された式の戻り値、next を呼び出すときに next に渡されるパラメーター
クラス
オブジェクト指向プログラミング
es6クラス
es5 関数プロトタイプ チェーン
特徴
過負荷
抽象的な
継承する
カプセル化
継承: 拡張
jsには単一継承しかありません
スーパーキーワード
super() を関数として使用すると、継承が実装され、親クラスがコピーされ、サブクラスの this が返されます。
super.render() は、オブジェクトとして使用される場合、親クラスを指し、this はサブクラスを指します。
静的プロパティと静的メソッドはインスタンス化せずに呼び出すことができます
静的プロパティはクラスの外に書き込まれます
静的メソッドは静的メソッドで変更されます。
モジュールと分解
モジュールのインポート/エクスポート
エクスポート関数 getData(){}
「…」から {getData} をインポートします
エクスポートのデフォルト
getDataをインポートする
'…' から * をエクスポート
require.js
2 つのパラメータを定義します
配列: 依存関係リスト
関数: 以前の依存関係を関数パラメーターとして挿入します。
共通.js
エクスポート: module.exports
インポート: 必須
車の見積もりプロジェクト
統計
ページPV、UV
ボタンイベントの統計
エラー監視: セントリー
エラー報告
チャート統計
担当者にメールで通知
最適化
遅延読み込み
画像の遅延読み込み
リストの遅延読み込み
ルートの遅延読み込み
プリロード
画像のプリロード
イベント処理
スロットル
デバウンス
DOM操作
再描画
リフロー
タッチイベント
タッチスタート
タッチムーブ
タッチエンド
サードパーティのサービス
SMS認証コード
メールサーバー
通信網
TCP/IPプロトコルの5層アーキテクチャ
アプリケーション層
短いリンク
通常のリンク: http
暗号化: https
証明書: 購入代金を支払った
特徴: セキュリティ
機能: オペレーターのハイジャックを防止します。
ロック
すべてのリソースが https 経由でロードされる場合、ロックは正常です。
一部のリソースが http 経由でロードされると、ロックが異常になり、「i」が表示されます。
長いリンク
ウェブソケット
トランスポート層
信頼性の高い送信方式: TCP。データ送信前に 3 回ハンドシェイクが成功します。
信頼性の低い方法: UDP。接続が確立されているかどうかに関係なく、手紙を書いてデータを直接送信するのと同じです。
ネットワーク層
IP
IPの分類
カテゴリ A: ネットワーク-ホスト-ホスト-ホスト
カテゴリ B: ネットワーク-ネットワーク-ホスト-ホスト
カテゴリ C: ネットワーク-ネットワーク-ネットワーク-ホスト
プライベートIPアドレス
10.0.0.0-10.255.255.255 (クラス A アドレス)
172.16.0.0-172.31.255.255 (16 クラス B アドレス)
192.168.0.0-192.168.255.255 (256 クラス C アドレス)
特別なIPアドレス
自分自身を指す: 0.0.0.0
自分自身へのポイント: 127.0.0.1
ネットワークにアクセスできない場合に割り当てられるアドレス: 169.254.x.x
DNSサービス
ドメイン名からIPアドレスを確認する
Macアドレス
メディアアクセス制御アドレス
データリンク層
ハードウェア通信機器:スイッチ、ルーター
物理層
ツイストペア
重要なHTTPヘッダー情報
要求
クライアント認証情報: Cookie、有効期限あり
クライアントのログインステータスの保持
クライアント情報: ユーザーエージェント
ブラウザ情報、アプリ環境、WeChatかどうかを判断するために使用されます
アクセスを開始する場所: を参照してください。
機能: アンチホットリンク
リクエストタイプ: Content-Type
レス
Cookie を設定します: set-cookie
圧縮するかどうか: content-encoding:gzip
クロスオリジンを許可: access-control-allow-origin:
Cookie を許可するかどうか: access-control-allow-credentials:true
ログインステータス: トークン
(通常は 16 文字以上の文字列)
ログイン資格情報 (ログインごとに再生成)
ログインする必要はありません
トークンを一定期間保存し、インターフェイスを呼び出すたびに検証を行います。
Cookieの有効期間を通じてトークンの保存時間を設定します。
シングル・サインオン
ログイン状態を記録する場合は、ログインした各デバイスのデバイス番号を記録してください。ログイン後、その他のログイン状態はすべて無効な状態に変更してください。
ドメイン間でログインステータスを共有する
ログインに成功したら、他のいくつかのドメイン名のログイン インターフェイスを呼び出し、それぞれ Cookie を設定します。共有ログイン状態に達します。
フロントエンドの仕事
ログイン インターフェイスを呼び出した後、サーバーから返されたログイン ステータス トークンをローカル Cookie に保存します。
対応する有効期限を設定します
今後インターフェースを呼び出すたびにトークンを持参するだけです。
クロスドメイン
開発中
charles パケット キャプチャ ツールのマッピング
キャプチャするデバイスを Charles と同じ Web サイトに接続します
プロキシを設定します (https には証明書をインストールする必要があります)
リクエストを転送するように Map Remote を構成する
仮想ドメイン名
ホスト ファイルを見つけます: C\windows\system32\drivers\etc\hosts
管理者権限で開いて変更し、レコードの行を追加します。先頭はローカル ループバック アドレス、最後は構成する仮想ドメイン名です。
Webpack 構成を変更する
ポート: 80に変更されました
ホストチェックを無効にする disableHostCheck:true
サービスを開始し、ポートが 80 であることを確認し、仮想ドメイン名を使用してアクセスします。
プロキシ
webpack devSever のプロキシ フィールドを変更する
'/api'
目標:'
'
変更元: true
pathRewrite{'/api:'/'}
ユニバーサルソリューション
JSONP
原則: scrip タグを動的に作成し、src をリクエスト アドレスとして設定し、関数を返します。script タグにはオリジンの制限がありません。
関数名は渡されるコールバックです。
該当するシナリオ: 取得リクエストの処理
CORS (クロスオリジンリソースシェア)
クロスドメインリクエストヘッダー: access-control-allow-origin
ワイルドカード: * (適用しないようにしてください)
固定値:'
'
動的構成: リクエスト ヘッダーの orgin が配列内にあるかどうかを判断して、応答ヘッダーのフィールドを動的に構成します。
Cookie を含むヘッダー: access-control-allow-credentials:true
プロキシ
Web サーバーのサポートが必要: nginx/apache
原則: ブラウザの同一生成元ポリシー: プロトコル ドメイン名ポート
安全性
クロスサイト スクリプティング攻撃: XSS (クロスサイト スクリプト)
他の人の Web サイトに js を挿入し、危険な操作を実行する
クロスサイト リクエスト フォージェリ: CSRF (クロスサイト リクエスト フォージェリ)
原則: 開始されたリクエストに応じて、ブラウザは自動的に Cookie を対応するドメイン名に配置します。
攻撃を防ぐ: 検証コードと乱数を追加して、送信しきい値を増やします。
RESTFul リクエスト: リクエスト メソッドを通じて実行される操作を決定します。
挿入: POST
変更: PUT
削除: 削除
クエリ: GET
ブラウザキャッシュ
キャッシュプロセス
強力なキャッシュ
ステータスコード: 200 (キャッシュから)
有効期限: http1.0、有効期限が切れる前にリクエストが発生すると、ローカルの強力なキャッシュにヒットします。
キャッシュ制御: http 1.1 はクライアント キャッシュ メカニズムを強化します
max-ag=number の場合、リクエスト時間が有効期限より前の場合はキャッシュにヒットしますが、それ以外の場合は機能しません。
キャッシュなし、強力なキャッシュを使用しない
no-store、ブラウザによるデータのキャッシュを直接禁止し、毎回完全なリソースをダウンロードします。
パブリック、エンド ユーザーおよび CDN などの中間プロキシ サーバーを含むすべてのユーザーによってキャッシュされます
プライベート、エンド ユーザーおよび CDN などの中間プロキシ サーバーを含むすべてのユーザーによってキャッシュされます
キャッシュ制御と期限切れが同時に存在する場合、キャッシュ制御の優先順位が期限切れよりも高くなります。
キャッシュをネゴシエートする
ステータスコード: 304 (未変更)
最終変更日/変更日以降: サーバー上のリソースの最終変更時刻 (秒単位で正確)
Etag/If None Match: 各リソースの一意の識別文字列。この値は、リソースが変更される限り変更されます。
Last-Modified と ETag は一緒に使用できます。それらが一致している場合、サーバーは最初に ETag を検証します。
Last-Modified の比較を続け、最終的に 304 を返すかどうかを決定します。
キャッシュを破棄して新しいリソースをロードする
ページ内のリソースのアプリケーション パスを変更する
プロジェクトの流れ
開発プロセス
①要件レビュー(プロジェクトリーダー、上司、プロダクトマネージャー、テクニカルディレクター)
②技術レビュー(フロントエンド、バックエンド開発者、UI、テスト)、プロトタイプ図面公開済み(比較的ラフ)
③ スケジューリングについては、最初にバックエンドに時間を見積もらせ、プロダクト マネージャーが受け入れられる場合は、できるだけ長く見積もるようにします。
(定義されたインターフェース時間、開発時間、共同デバッグ時間)
④先に設計が始まり、フロントエンドとバックエンドが待機します。
⑤開発段階:インターフェース定義、自主開発、共同デバッグ
⑥ テストを送信するには、まずファイルをサーバー (git オートメーションまたは ftp ファイルサーバー) にアップロードします。
パス フォームに結合: テスト アドレスといくつかの手順を含む電子メールをテストに送信します。
⑦テストに合格しオンラインで公開される
プロジェクトの仕様
コード仕様: プロジェクトのディレクトリ構造、コーディング グリッド (ESLint)
コード管理仕様:Svn、Gitブランチ管理、1人1ブランチ、開発完了後にプルリクエストを提出
ウェアハウス管理: gitlab、コーディング、gitee、github
リリース仕様: 成熟したリリース システム、CI システム、自動展開
プロジェクトツール
プロジェクトの進捗状況とバグ管理ツール
タップ
ゼンタオ
トレロ
アナログインターフェース
ラップ、イージーモック、MOCK.js
ドキュメントツール
記録インターフェイス、docute、vuepress
OA: オフィスオートメーション
プロジェクトコミュニケーション
需要側
プロダクトマネージャー
具体的なニーズを判断する
後部
インターフェイスを決めて、スケジュールに従ってコミュニケーションするだけです。
コミュニケーションツール
プロジェクト人員構成(20名)
テクニカルリーダー/プロジェクトディレクター/テクニカルディレクター/CTO (1)
テクノロジーの選択
プロジェクト全体をコントロールする
需要側 (3)
プロダクトマネージャー (2)
運営スタッフ(1名)
開発者(16)
UIデザイン(2)
フロントエンド開発(4)
バックエンド開発(7)
テスター (2)
運用保守担当者(オンライン化とオンライン環境の設定を担当)(1)
インターフェースの構成
インターフェースの役割
渡されるパラメータ
インターフェースの戻り値
コード: ステータスコード
データ: ビジネスデータ
msg: エラー メッセージ。バックエンドによって返されます。通常、フロントエンドは直接プロンプトを表示します。
mysql
環境:XAMPP統合環境
mysqlクライアント
ナビキャット
作業台
ノードでの使い方
ミドルウェアmysqlを導入する
インスタンスを作成します: mysql.createConnection
声明
追加: user(username,password,create_time)values("zhixi","123456",${ new Date()}) に挿入します。
("zhixi2","123456",${ new Date()})
削除: ユーザー名 = '${req.body.username}' およびパスワード = '${req.body.password}' のユーザーから削除します。
変更: ユーザーセットの更新 create_time=${10000000},username='${req.body.username}007'where username=
'${req.body.username} およびパスワード='${req.body.password}'
チェック: id = 1 のユーザーから * を選択
サーバ
Webサービス:nginx、クライアントツール:XShell
ファイルサーバー:ftp(ファイルトランスポートプロトコル)、クライアントツール:XFtp
サーバー側スクリプト: ノード
デーモン: pm2
リストサービス: pm2 リスト
サービスの停止: pm2 stop ${id}
サービスを開始します: pm2 start ${id}
サービスを再起動します: pm2 restart ${id}
ログを確認します: pm2 ログ
Expressを使用したインターフェースの開発
Web サービスを開始します: app.listen()
リスニングルート: app.get() | app.post()
パラメータの取得: body-parser
戻りデータ: res.json() | res.send()
自動更新用ツール:node-dev
コードのデプロイメント
簡単なロールバックのための自動展開
Git フックはプッシュ イベントをリッスンします
シンプルな FTP アップロード