찾다

집 >웹 프론트엔드 >JS 튜토리얼 >프론트엔드 프레임워크 ThinkJS 프레임워크에 대한 자세한 설명

프론트엔드 프레임워크 ThinkJS 프레임워크에 대한 자세한 설명

小云云
小云云원래의
2018-02-08 16:25:397441검색

이 기사에서는 주로 프런트 엔드 프레임워크 ThinkJS 프레임워크에 대한 자세한 설명을 공유합니다. Thinkjs는 MVC 및 객체 지향을 기반으로 하는 빠르고 간단한 경량 Node.js 개발 프레임워크입니다. 단순성과 사용 편의성의 디자인 원칙을 고수하면서 뛰어난 성능과 최소한의 코드를 유지하면서 개발 경험과 사용 편의성에 중점을 두고 WEB 애플리케이션 개발을 강력하게 지원합니다.

Thinkjs의 많은 기능은 ThinkPHP에서 비롯되었습니다. 동시에 Node.js의 특성에 따라 Promise, WebSocket 및 기타 기능을 사용하여 코드를 더욱 간결하고 우아하게 만듭니다. 가장 큰 특징은 es6, es7, typescript 등과 같이 매우 널리 사용되는 문법 기능을 지원한다는 것입니다. 이를 통해 aysnc/await와 같은 기능도 지원하여 코드를 더욱 멋지게 만듭니다.

Install

명령줄 도구를 설치하세요: 

$ 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

새 프로젝트를 생성할 때 많은 바벨이 필요하므로 프로젝트 구축이 필요하다는 점에 유의해야 합니다. 종속 패키지에는 주로 다음이 포함됩니다. 

 "dependencies": {    "thinkjs": "2.2.x",    "babel-runtime": "6.x.x",    "source-map-support": "0.4.0"  },

Directory

.├── 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"  },

Node를 사용하여 www/development.js 실행 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

  • 복사 view/home/index_index.html 보기/홈/index_my.html로. 원칙은 my가 index_my.html 모듈과 일치해야 한다는 것입니다. 즉, index는 컨트롤러이고 my는 액션입니다.

    • 이것을 이해하고 나면 index_index라는 이름이 별로 이상하지 않다는 것을 느낄 수 있을 것입니다. 나머지는 view writing 등이므로 여기서는 설명하지 않겠습니다.

  • 성능

    • 앞서 언급했듯이 개발 단계는 Babel을 사용하여 작성되므로 효율성이 그다지 높지는 않습니다. 
$ 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

좀 비참하죠? 하지만 이것은 개발 모드이므로 테스트하려면 온라인 생산 모드를 사용해야 합니다. 

$ 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

아래는 동일한 기능을 express + ejs 템플릿 방식으로 표현한 것입니다. 

$ 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

모듈 분해

프로젝트를 생성한 후 기본 코드 프레임워크가 설정되었지만 기본 홈과 공통은 확실히 요구 사항을 충족할 수 없습니다. 우리는 프로젝트에 관련된 계층 구조를 확립해야 합니다. 다음은 몇 가지 일반적인 모듈 분류 방법입니다. 참고용으로만 사용하세요.

간단한 웹사이트

공식 웹사이트, 블로그, 커뮤니티 등 이러한 유형의 시스템 구조는 비교적 간단하며 일반적으로 하나의 프런트엔드와 하나의 백엔드 관리가 요구 사항을 충족할 수 있습니다. 일반적으로 다음 모듈을 포함해야 합니다. 

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

전자상거래 플랫폼

전자상거래 플랫폼 시스템은 주로 정착 판매자, 등록 고객, 관리자, 운영자 등과 같은 사용자 그룹을 고려합니다. 또한 고려해야 할 사항도 있습니다. 더 큰 기능 모듈의 세분화(시스템이 JD.com 및 Tmall과 유사할 만큼 큰 경우 데이터, 기능, 서비스, 위치 등에서 세분화되어야 함). 

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/  # 消息队列

인스턴트 메시징 플랫폼

실시간 푸시 플랫폼은 WebSocket 연결과 메시지 저장 및 전송을 처리할 뿐만 아니라 해당 서비스 패키지를 구매하는 여러 사용자, 연결 수 계산, 다운스트림 트래픽 계산, 연결 인증 수행 등을 처리합니다. . 일반적으로 포함되는 모듈은 다음과 같습니다. 

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/  # 消息队列

온라인 교육, 라이브 방송 플랫폼

온라인 교육 또는 라이브 방송 플랫폼에는 일반적으로 실시간 오디오 및 비디오 업로드, 트랜스코딩, 저장 및 방송과 같은 엄격한 요구 사항이 있습니다. 관련 코스웨어, 학생, 교사, 강좌 선택, 시스템 등을 관리하고 관련 미디어 파일을 처리하는 업무도 담당합니다. 

src/src/common/src/home/src/rest/src/sso/  # 单点登录、令牌管理等
src/media/  # 课件、音视频等媒体文件
src/bulk/  # 流媒体
src/process/  # 编解码处理
src/storage/src/live/  # 直播
src/pay/src/student/src/teacher/src/schedule/src/stat/src/log/src/monitor/src/util/src/task/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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript 배열 중복 제거에 대한 여러 아이디어의 자세한 예다음 기사：JavaScript 배열 중복 제거에 대한 여러 아이디어의 자세한 예

관련 기사

더보기