简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

フロントエンドフレームワーク ThinkJSフレームワークの詳細説明

小云云
リリース： 2018-02-08 16:25:39
オリジナル
7401 人が閲覧しました

この記事では、主にフロントエンド フレームワーク ThinkJS フレームワークについて詳しく説明します。Thinkjs は、MVC およびオブジェクト指向に基づいた高速でシンプルな Node.js 開発フレームワークであり、MIT ライセンスの下でリリースされています。シンプルで使いやすい設計原則を貫き、優れたパフォーマンスと最小限のコードを維持しながら、開発経験と使いやすさを重視し、WEBアプリケーション開発を強力にサポートします。

Thinkjs の多くの機能は ThinkPHP から来ていますが、同時に、Node.js の特性に応じて、コードをより簡潔かつエレガントにするために Promise、WebSocket などの機能が使用されています。最大の特徴は、es6、es7、typescriptなど、現在流行している文法機能のサポートが充実していることです。これに伴い、aysnc/awaitなどの機能もサポートされ、よりファッショナブルなコードになります。

インストール

コマンドラインツールをインストールします: 

$ npm install -g thinkjs
ログイン後にコピー

次に、thinkjs 新しいデモを使用して新しいプロジェクトを作成します。ユーザー エラーによって既存のファイルが確実に上書きされるようにするために、thinkjs new コマンドは、存在しないフォルダーまたは空のフォルダーにのみ適用されます。それ以外の場合は、次のエラーが報告されます。 

path `/data/www/demo` is already a thinkjs project.
ログイン後にコピー

この機能の実装は、実際にはプロジェクトのルート ディレクトリにある隠しファイル .thinkjsrc に依存しています。このファイルを開くと、ls -a を使用します。次の内容が表示されます: 

{  "createAt": "2017-02-12 19:08:38",  "mode": "module",  "es": true}
ログイン後にコピー

コマンドを使用します。 その後、システムはプロジェクトのビルドを開始します: 

$ thinkjs new demo
  create : demo
  create : demo/package.json
  create : demo/.babelrc
  create : demo/.thinkjsrc
  create : demo/nginx.conf
  create : demo/pm2.json
  create : demo/.gitignore
  create : demo/README.md
  create : demo/www
  create : demo/www/development.js
  create : demo/www/production.js
  create : demo/www/testing.js
  create : demo/www/README.md
  create : demo/www/static
  create : demo/www/static/js
  create : demo/www/static/css
  create : demo/www/static/img
  create : demo/src
  create : demo/src/common/bootstrap
  create : demo/src/common/bootstrap/middleware.js
  create : demo/src/common/bootstrap/global.js
  create : demo/src/common/config
  create : demo/src/common/config/config.js
  create : demo/src/common/config/view.js
  create : demo/src/common/config/db.js
  create : demo/src/common/config/hook.js
  create : demo/src/common/config/session.js
  create : demo/src/common/config/error.js
  create : demo/src/common/config/env
  create : demo/src/common/config/env/development.js
  create : demo/src/common/config/env/testing.js
  create : demo/src/common/config/env/production.js
  create : demo/src/common/config/locale
  create : demo/src/common/config/locale/en.js
  create : demo/src/common/controller
  create : demo/src/common/controller/error.js
  create : demo/view/common
  create : demo/view/common/error_400.html
  create : demo/view/common/error_403.html
  create : demo/view/common/error_404.html
  create : demo/view/common/error_500.html
  create : demo/view/common/error_503.html
  create : demo/src/home/config
  create : demo/src/home/config/config.js
  create : demo/src/home/controller
  create : demo/src/home/controller/base.js
  create : demo/src/home/controller/index.js
  create : demo/src/home/logic
  create : demo/src/home/logic/index.js
  create : demo/src/home/model
  create : demo/src/home/model/index.js
  create : demo/view/home
  create : demo/view/home/index_index.html

  enter path:
  $ cd demo

  install dependencies:
  $ npm install

  run the app:
  $ npm start
ログイン後にコピー

新しいプロジェクトを作成するときは、大量の Babel が必要となるため、プロジェクトの構築は依存パッケージには主に以下が含まれます: 

 "dependencies": {    "thinkjs": "2.2.x",    "babel-runtime": "6.x.x",    "source-map-support": "0.4.0"  },
ログイン後にコピー

ディレクトリ

.├── README.md
├── app
│   ├── common
│   │   ├── bootstrap
│   │   ├── config
│   │   └── controller
│   └── home
│       ├── config
│       ├── controller
│       ├── logic
│       └── model
├── nginx.conf
├── package.json
├── pm2.json
├── src
│   ├── common
│   │   ├── bootstrap
│   │   ├── config
│   │   └── controller
│   └── home
│       ├── config
│       ├── controller
│       ├── logic
│       └── model
├── tree.txt
├── view
│   ├── common
│   │   ├── error_400.html
│   │   ├── error_403.html
│   │   ├── error_404.html
│   │   ├── error_500.html
│   │   └── error_503.html
│   └── home
│       └── index_index.html
└── www
    ├── README.md
    ├── development.js
    ├── production.js
    ├── static
    │   ├── css
    │   ├── img
    │   └── js
    └── testing.js388 directories, 1381 files
ログイン後にコピー

起動プロセス分析

1) 起動コマンド

npm start
ログイン後にコピー

startを使用した後、システムは何をしますか? 

 "scripts": {    "start": "node www/development.js",    "compile": "babel src/ --out-dir app/",    "watch-compile": "node -e \"console.log(&#39;<npm run watch-compile> no longer need, use <npm start> command direct.&#39;);console.log();\"",    "watch": "npm run watch-compile"  },
ログイン後にコピー

www/development.js を実行するために Node を使用します。これは、Thinkjs が使用する 3 つの環境です:

  • 開発 開発モード

  • テスト テストmode

  • thinkjs は、www をノードのプロジェクト ディレクトリとして扱い、www の下の static は静的リソース ファイル ディレクトリです。 www/development.js ディレクトリは次のとおりです: 

    var instance = new thinkjs({
  APP_PATH: rootPath + path.sep + &#39;app&#39;,
  RUNTIME_PATH: rootPath + path.sep + &#39;runtime&#39;,
  ROOT_PATH: rootPath,
  RESOURCE_PATH: __dirname,
  env: &#39;development&#39;});
    ログイン後にコピー
    • もちろん、「tree src -L 3」コマンドを使用してプロジェクト ディレクトリを表示できます: 
$ tree src -L 3         src
├── common
│   ├── bootstrap
│   │   ├── global.js
│   │   └── middleware.js
│   ├── config
│   │   ├── config.js
│   │   ├── db.js
│   │   ├── env
│   │   ├── error.js
│   │   ├── hook.js
│   │   ├── locale
│   │   ├── session.js
│   │   └── view.js
│   └── controller
│       └── error.js
├── home
│   ├── config
│   │   └── config.js
│   ├── controller
│   │   ├── base.js
│   │   └── index.js
│   ├── logic
│   │   └── index.js
│   └── model
│       └── index.js16 directories, 19 files
ログイン後にコピー

共通モジュール構成 (後で詳しく説明します): 

$ thinkjs module topic(能创建不能删除，略遗憾)

  create : src/topic/config
  create : src/topic/config/config.js
  create : src/topic/controller
  create : src/topic/controller/base.js
  create : src/topic/controller/index.js
  create : src/topic/logic
  create : src/topic/logic/index.js
  create : src/topic/model
  create : src/topic/model/index.js
  exist : /Users/sang/workspace/github/nodewebframework/demo/view/topic/index_index.html
ログイン後にコピー

この時のディレクトリ構造は以下の通り: 

src
├── common
├── home
└── topic
ログイン後にコピー

3) ビジネスモジュールディレクトリ

├── home
│   ├── config
│   │   └── config.js
│   ├── controller
│   │   ├── base.js
│   │   └── index.js
│   ├── logic
│   │   └── index.js
│   └── model
│       └── index.js
ログイン後にコピー

4) ルーティングとビューの識別 デフォルトでは、ルートの識別はモジュール/コントローラー/オペレーション/パラメーター 1/パラメーター 1 の値/パラメーター 2/パラメーター 2 の値に基づきます。これは実際には規則です。

例/次のように解析されます:

デフォルトのモジュールはhomeです

  • コントロールはindexです

  • 操作はindexActionです

  • 別のものがあった場合はどうなりますか? 

    &#39;use strict&#39;;import Base from &#39;./base.js&#39;;export default class extends Base {  /**
   * index action
   * @return {Promise} []
   */  indexAction(){    //auto render template file index_index.html    return this.display();  }  myAction(){    //auto render template file index_index.html    return this.display();  }}
    ログイン後にコピー
    • myAction を追加してエラーを報告する [エラー] エラー: テンプレート ファイル /Users/sang/workspace/github/nodewebframework/demo/view/home/index_my.html が見つかりません

Copy view/home/index_index.html view/home/index_my.html として。原則として、my は、index_my.html モジュールに対応する必要があります。つまり、index はコントローラー、my はアクションです。

これを理解すると、index_index という名前はそれほど奇妙ではないと感じるでしょう。残りはビュー書き込みなどですが、ここでは説明しません。

パフォーマンス

前述したように、開発フェーズは Babel を使用して記述されるため、効率はあまり高くありません。

rreee

ちょっと悲惨ですよね？ただし、これは開発モードであり、テストするにはオンライン実稼働モードを使用する必要があります。 

$ autocannon -c 100 -d 5 -p 10 localhost:8360Running 5s test @ http://localhost:8360100 connections with 10 pipelining factor

Stat         Avg       Stdev    Max       
Latency (ms) 108.9     201.32   866       Req/Sec      891.8     148.37   1000      Bytes/Sec    417.79 kB 50.76 kB 458.75 kB 

4k requests in 5s, 2.09 MB read
ログイン後にコピー

同じ機能をexpress + ejsテンプレートの方法で以下に表現します。 

$ npm run compile
$ node www/production.js 
$ autocannon -c 100 -d 5 -p 10 localhost:8360Running 5s test @ http://localhost:8360100 connections with 10 pipelining factor

Stat         Avg       Stdev     Max       
Latency (ms) 61.76     124.71    763       Req/Sec      1567.2    734.94    1993      Bytes/Sec    679.12 kB 242.25 kB 884.74 kB 

8k requests in 5s, 3.4 MB read

$ autocannon -c 100 -d 5 -p 10 localhost:8360Running 5s test @ http://localhost:8360100 connections with 10 pipelining factor

Stat         Avg       Stdev     Max      
Latency (ms) 54.65     105.47    707      Req/Sec      1813.4    368.21    1999     Bytes/Sec    807.73 kB 156.09 kB 917.5 kB 

9k requests in 5s, 4.09 MB read

$ autocannon -c 100 -d 5 -p 10 localhost:8360Running 5s test @ http://localhost:8360100 connections with 10 pipelining factor

Stat         Avg       Stdev     Max     
Latency (ms) 54.14     89.81     465     Req/Sec      1816.4    319.14    2000    Bytes/Sec    914.23 kB 145.96 kB 1.05 MB 

9k requests in 5s, 4.55 MB read
ログイン後にコピー

モジュールの分解

プロジェクトの作成後、基本的なコードのフレームワークが確立されており、デフォルトのホームとコモンは要件を確実に満たすことができません。プロジェクトに関連する階層構造を確立する必要があります。一般的なモジュール分類方法をいくつか示します。参考まで。

シンプルな Web サイト

公式 Web サイト、ブログ、コミュニティなど。このタイプのシステム構造は比較的単純で、通常は 1 つのフロントエンドと 1 つのバックエンド管理で要件を満たすことができます。通常、次のモジュールを含める必要があります: 

$ autocannon -c 100 -d 5 -p 10 localhost:3000Running 5s test @ http://localhost:3000100 connections with 10 pipelining factor

Stat         Avg       Stdev     Max       
Latency (ms) 53.85     177.72    1309      Req/Sec      1728      385.85    2075      Bytes/Sec    702.87 kB 159.56 kB 851.97 kB 

9k requests in 5s, 3.53 MB read

$ autocannon -c 100 -d 5 -p 10 localhost:3000Running 5s test @ http://localhost:3000100 connections with 10 pipelining factor

Stat         Avg       Stdev     Max       
Latency (ms) 46.06     141.52    739       Req/Sec      2061.2    320.53    2275      Bytes/Sec    842.14 kB 134.95 kB 950.27 kB 

10k requests in 5s, 4.2 MB read

$ autocannon -c 100 -d 5 -p 10 localhost:3000Running 5s test @ http://localhost:3000100 connections with 10 pipelining factor

Stat         Avg       Stdev    Max       
Latency (ms) 45.97     139.58   620       Req/Sec      2059.4    122.93   2167      Bytes/Sec    829.03 kB 52.43 kB 884.74 kB 

10k requests in 5s, 4.2 MB read
ログイン後にコピー

電子商取引プラットフォーム

電子商取引プラットフォーム システムは、主に決済済みの販売者、登録顧客、マネージャー、オペレーターなどのユーザー グループを考慮します。また、考慮する必要もあります。より大きな機能モジュールのセグメント化 (システムが JD.com や Tmall に類似するほど十分に大きい場合は、データ、機能、サービス、場所などからセグメント化する必要があります)。 

src/src/common/  # 通用模块，放置主配置参数、boostrap adapter middleware service 等相关组件
src/home/  # 前端默认模块
src/backend/  # 后端管理模块
src/util/  # 系统工具类
ログイン後にコピー

インスタント メッセージング プラットフォーム

リアルタイム プッシュ プラットフォームは、WebSocket 接続とメッセージの蓄積と送信を処理するだけでなく、対応するサービス パッケージの購入、接続数のカウント、ダウンストリーム トラフィックのカウント、接続認証の実行などの複数のユーザーの処理も行います。 。通常含まれるモジュールは次のとおりです: 

src/src/common/src/home/src/sso/  # 单点登录、令牌管理等
src/rest/  # 针对Wap、App等多客户端的 rest api
src/goods/  # 商品管理及服务
src/storage/  # 库存管理及服务
src/cart/  # 购物车
src/order/  # 订单
src/delivery/  # 快递
src/pay/  # 在线支付、空中支付
src/member/  #
src/coupon/  # 电子券
src/promotion/  # 促销
src/points/  # 积分
src/merchant/  # 入驻商户
src/shop/  # 商户门店
src/finance/  # 财务核算及款项清算
src/stat/src/log/src/monitor/src/util/src/task/src/message/  # 消息队列
ログイン後にコピー

オンライン教育、ライブ ブロードキャスト プラットフォーム

オンライン教育またはライブ ブロードキャスト プラットフォームには、通常、リアルタイムのオーディオとビデオのアップロード、トランスコーディング、ストレージ、ブロードキャストなどの厳しい要件があります。関連するコースウェア、学生、教師、コース選択、システムなどの管理に加え、関連するメディア ファイルの処理も担当します。 

src/src/common/src/home/src/rest/src/storage/src/websocket/  # ws 或者 wss 服务
src/webhook/  # 钩子服务
src/middleware/  # 搭载中间件运行
src/pay/src/member/src/stat/src/log/src/monitor/src/util/src/message/  # 消息队列
ログイン後にコピー

パラメータ設定

設定ファイルの読み込みシーケンスは次のように説明されています: フレームワークのデフォルト設定 -> プロジェクト パブリック設定 -> プロジェクト モードでのパブリック設定 -> 。

第三个和第四个则是在不同的项目创建模式下的默认 config 配置文件夹，位置在：

# normal mode
thinkjs_normal/src/config/*
# module mode
thinkjs_module/src/common/config/*
ログイン後にコピー

最后一个是指的在 module mode 下的项目，每个 module 自己的 config，位置在：

thinkjs_module/src/home/config/*
ログイン後にコピー

明白了多个地方多个配置文件的玩法之后，你可以创建多个 module，并给每个 module 配置自身独特的配置参数。

需要注意的是：thinkjs 加载配置文件是有顺序的！！！多个配置文件最终会在 thinkjs 运行时被全部加载，并合并在一起。所以当存在多个配置文件时，需要注意配置参数的 key（即属性名）尽量不要重复，因为按照加载顺序，后加载的 key 的值会覆盖先加载的 key 的值，导致出现不希望的结果。

举例来说，有两个配置文件 src/common/config/assets.js 和 src/home/config/assets.js，

// src/common/config/assets.jsexport default {  "site_title": "my site"};// src/home/config/assets.jsexport default {  "site_title": "my test"};// src/home/controller/index.jslet assets = this.config(&#39;assets&#39;);let siteTitle = assets[&#39;site_title&#39;];console.log(&#39;siteTitle is: &#39;, siteTitle); // my test
ログイン後にコピー

Babel 编译时删除注释

开发时的工作代码都在 src 下面，运行时才会编译到 app 下面成为运行脚本（经过 Babel 编译），如果不想自己写的各种注释也出现在 app 下面的代码中，可以修改项目目录下的一个隐藏文件 .babelrc 增加相应 comments 参数。

{  "presets": [    ["es2015", {"loose": true}],    "stage-1"  ],  "plugins": ["transform-runtime"],  "sourceMaps": true,  "comments": false  # <-- 就是这个参数}
ログイン後にコピー

controller

目前，thinkJs支持两种控制器：普通的控制器和多级控制器。 支持__before和__after这样的回调钩子，对于app和controller控制来说是非常实用的。使用co来实现也是可圈可点，此处如果使用koa可以更加优雅。例如：

class PathController extends BaseController {  constructor(app, ctx, next) {    super(app, ctx, next)    this.path = &#39;/c&#39;    // this.global_filter.push(&#39;custom_filter&#39;)    this.post_filter = [this.log]  }  before() {  }  log(ctx, next) {
    ctx.someText = &#39;some&#39;    // console.log(&#39;before&#39;)    return next().then(function(){      // console.log(&#39;after&#39;)    })  }  post(req, res) {
    console.log(this.ctx.someText)    var a = this.reqbody.a    return res.body = this.ctx.someText  } 

  after() {  }}
ログイン後にコピー

修改 pm2 日志位置

pm2 （官网 http://pm2.keymetrics.io）是一个优秀的 Node.js 进程管理器。thinkjs 推荐使用 pm2 来管理项目运行，并自动生成了 pm2 的配置文件 pm2.json 。

它的强大之处在于不仅可以作为 Node.js 项目的守护进程，还具备可配置化启动、分布式支持、内存监控、热重载（优雅重载）、支持数据统计、运行日志记录、实时运行监控、API 和脚本支持等强大的特性。

默认生成的 pm2 配置文件不含日志记录部分，如果不单独配置，pm2 的日志将会保存在安装目录中，查找起来很不方便。普遍的做法是：在项目目录下建立 logs 文件夹，用来放置 pm2 以及其他（诸如 log4js 等等）日志，打开 pm2.json ，给 apps[0] 增加如下几行配置参数：

{  "apps": [{    "error_file"      : "/data/www/thinkjs_module/logs/pm2-err.log",    "out_file"        : "/data/www/thinkjs_module/logs/pm2-out.log",    "log_date_format" : "YYYY-MM-DD HH:mm:ss Z",    "merge_logs"      : false  }]}
ログイン後にコピー

  • error_file pm2 捕捉到的致命错误记录在这里

  • out_file pm2 接收到的 console 输出记录在这里

  • log_date_format 日期和时间格式

  • merge_logs 是否给日志文件增加进程id的后缀

总结

主要优势：

  • 完全自己实现，对已有框架很少借鉴

  • 内置各种adapter，db，中间件，hook，插件，非常丰富，all in one 比组装更适合新手

  • 遵循mvc和coc

  • 使用最潮的es6/es7/ts特性，对aysnc函数，exports等都非常好的支持

  • 支持i18n等实用功能

  • 内置pm2和nginx集成，部署方便

  • 有自己的脚手架，稍弱

  • 性能不错，虽然比express稍弱，但功能强大许多

  • 测试丰富，代码质量有保障

  • 文档健全，是经过设计的，支持多语言

  • 背后有75团和李成银支持，最近一周内有更新，代码提交2600+，35人贡献，整体来说算健康

附：ThinkJS官网文档

相关推荐：

实例讲解thinkjs 文件上传功能

Node.js框架 ThinkJS 开发 controller讲解

ThinkJS 开发 config 实例教程

以上がフロントエンドフレームワーク ThinkJSフレームワークの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript フレーム
ソース：php.cn
前の記事：JavaScript 配列の重複排除に関するいくつかのアイデアの詳細な例 次の記事：オブジェクト指向 JavaScript の新たな理解
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！