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)
 })
}

この記事の事例を読んだ後は、あなたはそれを習得したと思います。 さらにエキサイティングな方法については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS 変数 var、let.const を宣言する方法

vue の計算プロパティとメソッド リスナーの使用方法

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