JSの依存関係を解決するRequireJSで、HTMLファイルも読んでみる。
JSだけでゴリゴリDOMを作るのは個人的にしんどい。
classなどに色々設定していくのは、自分でなく
ちゃんとしたデザイナがHTMLでやってもらいたい。
そこで、静的なHTMLファイルを作っておき、
それをテンプレートとして、JSでは変数を流し込むような使い方をした。
RequireJSのtextプラグインでそれができる。
以下で実行。
npm install
npm start
このGistに外部JSライブラリを置きたくないので、 npmで関連モジュールをインストールする。 JSファイルの配信URLは、Expressで細工している （回りくどいので、普通はlibフォルダを作って、そこにJSファイルを置けばいい）。
| <table> | |
| <tr> | |
| <th>Name</th> | |
| <td><%= name %></td> | |
| </tr> | |
| <tr> | |
| <th>Address</th> | |
| <td><%= address %></td> | |
| </tr> | |
| </table> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script data-main="main.js" src="require.js"></script> | |
| </head> | |
| <body> | |
| <div id="placeholder"></div> | |
| </body> | |
| </html> |
| require([ | |
| 'jquery', | |
| 'underscore', | |
| 'text!fragment.html' | |
| ], ($, _, fragment) => { | |
| let evalTemplate = _.template(fragment); | |
| $('#placeholder').html( | |
| evalTemplate({name: 'Yotsuya', address: 'Shinjuku'})); | |
| }); |
| { | |
| "name": "requrejs-text-sample", | |
| "version": "0.1.0", | |
| "description": "", | |
| "author": "Phil Owen", | |
| "main": "server.js", | |
| "scripts": { | |
| "start": "node server.js" | |
| }, | |
| "dependencies": { | |
| "jquery": "^3.1.1", | |
| "underscore": "^1.8.3", | |
| "express": "^4.14.0", | |
| "requirejs": "^2.3.2", | |
| "text": "github:requirejs/text" | |
| } | |
| } |
| const express = require('express'); | |
| const app = express(); | |
| const PORT = 8080; | |
| const ROOTDIR = __dirname + '/'; | |
| const MODULEDIR = ROOTDIR + 'node_modules/'; | |
| app.get('/', (req, res) => { | |
| res.sendFile(ROOTDIR + 'index.html'); | |
| }); | |
| app.get('/require.js', (req, res) => { | |
| res.sendFile(MODULEDIR + 'requirejs/require.js'); | |
| }); | |
| app.get('/text.js', (req, res) => { | |
| res.sendFile(MODULEDIR + 'text/text.js'); | |
| }); | |
| app.get('/jquery.js', (req, res) => { | |
| res.sendFile(MODULEDIR + 'jquery/dist/jquery.min.js'); | |
| }); | |
| app.get('/underscore.js', (req, res) => { | |
| res.sendFile(MODULEDIR + 'underscore/underscore-min.js'); | |
| }); | |
| app.get('/main.js', (req, res) => { | |
| res.sendFile(ROOTDIR + 'main.js'); | |
| }); | |
| app.get('/fragment.html', (req, res) => { | |
| res.sendFile(ROOTDIR + 'fragment.html'); | |
| }); | |
| app.listen(PORT); | |
| console.log('Running on http://localhost:' + PORT); |