JSを使用したフロントエンドとバックエンドの同型性の手順の詳細な説明

今回は、JSがフロントエンドとバックエンドの同型性を実行するための手順について詳しく説明します。JSがフロントエンドとバックエンドの同型性を実行するための注意事項は次のとおりです。 、見てみましょう。

フロントエンドとバックエンドの同型性とは

3 つの概念を明確にします。「バックエンド レンダリング」は、従来の ASP、Java、または PHP レンダリング メカニズムを指します。「フロントエンド レンダリング」は、JS を使用してレンダリングすることを指します。ページのコンテンツの大部分は、現在人気の SPA シングルページ アプリケーションを表します。「同型レンダリング」とは、フロントエンドとバックエンドが JS を共有し、最初のレンダリング中に Node.js が HTML を直接出力するために使用されることを意味します。一般に、同形レンダリングはフロントエンドとバックエンドの間で共通の部分です。

フロントエンドは本当に苦労しているように感じます。フロントエンドとフロントエンドの分離は、なぜ今になってフロントエンドとバックエンドを同型にする必要があるのでしょうか。

その理由は、人気のある SPA フロントエンドのシングルページ アプリケーションは比較的重く、最初のアクセス時に多くのファイルをロードする必要があるためです。最初のロードが遅すぎるため、ユーザーはフロントエンドを待つ必要があります。ページをレンダリングします。 SEO やキャッシュには適しておらず、開発には一定のしきい値があります。

フロントエンドとバックエンドの同型性により、テンプレートと JS ファイルを再利用することで、コードをサーバーとブラウザーで同時に実行できます。最初のレンダリングでは、nodejs を使用してページをレンダリングし、次に SPAルーティング を使用して、ジャンプ。初めてアクセスするユーザーの待ち時間を効果的に短縮でき、SEO に優しく、キャッシュも容易です。

プロジェクトの紹介

このフロントエンドとバックエンドの同型プロジェクトは主に 2 つの部分に分かれており、1 つは koa2 に基づくレンダリング サーバーであり、もう 1 つはネイティブ JS と zepto に基づくフロントエンド SPA です。

プロジェクトの特徴は、vueやreactなどのフレームワークを使用せず、敷居が低く、開発速度が速く、始めやすく、コアのルーター部分が100行程度と比較的軽量であることです。コードの。これは、ページの操作がほとんどなく、変更が頻繁に行われないシナリオに適しており、パフォーマンスと読み込み速度を効果的に向上させることができます。

フロントエンド部分

フロントエンド部分の中核となるのは、履歴 API またはハッシュに基づくことができます。今回は主にインターネット上の実装について説明します。
フロントエンド部分はMVC階層構造を採用しています。

ルーター層は主にルーティングの例を作成し、ルートの get メソッドを呼び出し、制御層からの関数を特定のページにバインドします。
フォームは次のとおりです:

import control from '../control'
//路由的构造函数支持传入渲染函数，路由的全局名称，路由跳转前调用的钩子
router = new Router(render,'ROUTER',beforeFn)
router.get('/page/a', control.pageA')

コントロール層の主な目的は、バックエンドと共有されるレンダリング テンプレートとレンダリング データをロードし、ページのレンダリング後にページ関数を実行することです。

フォームは次のとおりです。

ビューレイヤーはテンプレートであり、ここではxtplが使用されます。テンプレートはサーバー環境とフロントエンド環境の両方でページのレンダリングをサポートします

ページ関数の形式

ページ関数はes6モジュールの記述を使用する必要があります。 webpackのオンデマンドローディング機能と併用します

let control = {
 pageA(req,res) {
  //webpack的动态加载，代码分割功能
  import(/* webpackChunkName: "pageA" */'script/pageA').then(module=> {
  // 检测该页面是否已有服务器渲染好，是的话直接运行module.default
  //否则加载模板和数据进行渲染,最后再调用页面函数
  if(this.needRender(module.default)) {
  //加载数据时访问的地址就是当前准备渲染的页面地址，只是加上了json=1的参数
   loadData('pageA').then(data => 
    res.render(xtpl,data,module.default))
  }
 }
}
// 捕捉webpack热更新，让他只进行相当于页面跳转的操作而不是刷新页面
if(module.hot) {
 module.hot.accept(['script/pageA'], () => {
  control[ROUTER.req.currentControl].call(ROUTER,null,ROUTER.res)
 })
}

バックエンド部分

koa2で構築されたレンダリングサーバーは、フロントエンドからページリクエストを受信するとAPIサーバーにデータをリクエストし、ページリクエストに json=1 パラメータが含まれているかどうかを確認します。含まれている場合は、フロントエンドのルートがジャンプするときに使用されます。json パラメータがない場合は、フロントエンドと共有されているテンプレートを読み込みます。 、データを使用してレンダリングし、ブラウザに送信します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue-devtoolsのインストール手順の詳細な説明

jsとtypescriptでのクラスの使用法の詳細な説明

以上がJSを使用したフロントエンドとバックエンドの同型性の手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。