[TOC] # 入口 如果需要編譯 ES6 ~~~ // start.js require('@babel/register') require("@babel/polyfill") require('./server/index') ~~~ 中間件 ~~~ import bodyParser from 'koa-bodyparser' import logger from 'koa-logger' export const addBodyParser = app => { app.use(bodyParser()) } export const addLogger = app => { app.use(logger()) } ~~~ 入口文件 ~~~ const Koa = require('koa') const {resolve} = require('path') const {connect, initSchemas, initAdmin} = require('./database/init') const R = require('ramda') const MIDDLEWARES = ['common', 'router'] // 1 MIDDLEWARES每一項依次執行R.map的一個回調參數 // 2 從右往左執行R.compose的參數 // 3 執行 name = > resolve()，返回文件路徑 // 4 將上一步返回的結果作為參數，執行require('文件路徑')，返回 { addBodyParser: [Function: addBodyParser], addLogger: [Function: addLogger]} // 5 將上一步返回的結果作為參數，執行R.forEachObjIndexed，遍歷參數的每一項，執行 addBodyParser(app), addLogger(app) const useMiddlewares = (app) => { R.map( R.compose( R.forEachObjIndexed( initWith => initWith(app) ), require, name => resolve(__dirname, `./middleware/${name}`) ) )(MIDDLEWARES) } ;(async() => { await connect() // 連接數據庫 initSchemas() // 導入Model const app = new Koa() await useMiddlewares(app) // 傳入 Koa實例給中間件初始化 app.listen(8888) })() ~~~ <br> # sequelize事務 ~~~javascript sequelize.transaction().then(transaction => { // 開啟事務 let finished = 0; let sum = save.length; for (let i = 0; i < save.length; i++) { achievementModel.findOrCreate({ // 查詢記錄是否存在，不存在則創建記錄 where: { userId: userId, achievementId: save[i].achievementId, receiveTime: save[i].receiveTime, effective: 1 }, transaction: transaction }).spread((achi, create) => { finished++; if (finished == sum) { transaction.commit().then(() => { // 提交事務 res.json({ result: 1, msg: '成功' }); }); } }).catch(err => { finished++; if (finished == sum) { transaction.rollback().then(() => { // 出現錯誤，回滾事務 resERROR(err, res); }); } }); } }); ~~~ <br> ## 需要登錄 ~~~javascript exports.userRequired = function (req, res, next) { if (!req.session || !req.session.user || !req.session.user._id) { return res.status(403).send('forbidden!'); } next(); } ~~~ <br> # 錯誤中間件 ~~~javascript exports.errorPage = function (req, res, next) { res.render404 = function (error) { return res.status(404).render('notify/notify', { error: error }); }; res.renderError = function (error, statusCode) { if (statusCode === undefined) { statusCode = 400; } return res.status(statusCode).render('notify/notify', { error: error }); }; next(); }; ~~~ # 自動加載 參考 [https://zhuanlan.zhihu.com/p/26865999](https://zhuanlan.zhihu.com/p/26865999) 如果瀏覽器不認識 `<script type="xxx">`中的屬性，里面的內容不會執行，因此，如果瀏覽器不支持 nomodule 屬性，需要將其刪除 ## 均以跨域資源共享方式載 module 腳本都是通過跨域資源共享的方式載入的。這意味著載入的 module 腳本必須返回正確的CORS頭 ~~~js <!-- This will not execute, as it fails a CORS check --> <script type="module" src="https://….now.sh/no-cors"></script> <!-- This will not execute, as one of its imports fails a CORS check --> <script type="module"> import 'https://….now.sh/no-cors'; addTextToBody("This will not execute."); </script> <!-- This will execute as it passes CORS checks --> <script type="module" src="https://….now.sh/cors"></script> ~~~ ## 默認延遲 ~~~js <!-- This script will execute after… --> <script type="module" src="1.js"></script> <!-- …this script… --> <script src="2.js"></script> <!-- …but before this script. --> <script defer src="3.js"></script> ~~~ 順序應該是 2.js, 1.js, 3.js。 腳本阻塞HTML加載是非常糟糕的情況。 你可以為腳本標簽添加一個 defer 屬性來防止頁面阻塞發生，同時也會使得這段腳本在文檔完成解析之后才會運行。默認的，module 類型的腳本的加載也類似于添加 defer 屬性的腳本 - 畢竟我們毫無理由讓這些腳本阻塞頁面的加載。 module 腳本與添加 defer 屬性的腳本使用相同的執行隊列。 ## 代碼 ``` // index.html <script type="module"> import("/scripts/index.js").then((_) => { console.log(_.default); }) </script> <script type="nomodule" src="https://cdn.bootcss.com/systemjs/3.1.6/system.js"></script> <script type="nomodule"> System.import("/scripts/index-bundle.js").then((_) => { console.log(_.default); }) </script> ``` ``` // .babelrc { "presets": [ [ "@babel/preset-env", { "modules": "systemjs" } ] ] } ```