定製一個包並且引用此包.
目錄結構:
![圖片.png]( "1527835759107604.png")
假定此包的作用是用來處理字符串轉整型,整型車字符串的工具包.
那麼,需要先寫2個js文件,這2個文件就是做類型轉換工作的模塊,並且將其放到utils/libs目錄下.
str2int.js
![圖片.png]( "1527836026221768.png")
int2str.js
![圖片.png]( "1527836062531176.png")
好了,功能寫完了.我們還需要寫一個包的入口程序,那就是main.js,放在功能模塊同目錄下
![圖片.png]( "1527836209514720.png")
當然，這樣還不行，因爲我們還需要一個package.json來指定此包的入口程序，這是由程序員自己定義,更加靈活，當然如果你不想寫package.json.也可以將前面的包入口程序main.js改爲index.js(小插曲,這裏我採用的是自己定義).此文件需要放至到utils目錄下,也就是與libs是兄弟級關係.
package.json
![圖片.png]( "1527836503867911.png")
至此,我們的包就定義好了,節下來我們來看看怎麼使用它吧.
test.js
輸出結果:
2.Express模板引用之xTemplate模板引擎使用.
在當前項目目錄下執行
cnpm install xtpl xtemplate --save
修改app.js
app.set('view engine','xtpl')
app.engine('html', require('xtpl').__express);
app.set('view engine', 'html');這樣，我們的views目錄裏就可以使用x.html的擴展名了.而且還可以支持模板之間的引用.
base.html是基礎模板，供其它繼承.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/stylesheets/bootstrap.css">
{{{block('styles')}}}
</head>
<body>
<header>
<div>
<div>
<h1>{{title}}</h1>
</div>
</div>
</header>
<section>
<div>
{{{block('body')}}}
</div>
</section>
{{{block('scripts')}}}
</body>
</html>index.html繼承之base.html
{{extend('./layout/base')}}
{{#block('body')}}
<div class="body">
express xtpl解析引擎
</div>
{{/block}}路由控制routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express by jacky' });
});
module.exports = router;使用supervisor bin/www啓動後
3.Express模板引用之nunjucks模板引擎使用.
因爲我習慣使用django默認模板引擎jinja，就從網上找到nunjucks,它可以滿足我的需求，故在這裏記錄下.
在當前項目目錄下執行
cnpm install nunjucks --save
修改app.js
const nunjucks = require('nunjucks');
app.set('view engine','njk');
nunjucks.configure('views',{autoescape:true,express:app});
app.set('view engine', 'html');這樣，我們的views目錄裏就可以使用x.html的擴展名了.而且還可以支持模板之間的引用.
base.html是基礎模板，供其它繼承.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %} 首頁 {% endblock %} - nunjucks演示</title>
<link rel="stylesheet" href="/stylesheets/bootstrap.css">
{% block custom_css %} {% endblock %}
</head>
<body>
<header style="text-align:center;">
<p>Header</p>
<hr>
<header>
{% block main %} {% endblock %}
{% block footer %}
<footer>
<hr/>
<div style="text-align:center;">
Footer - by opdevos
</div>
</footer>
{% endblock %}
{% block custom_js %} {% endblock %}
</body>
</html>default.html繼承了這個base.html
{% extends './base.html' %}
{% block title %} 首頁 {% endblock %}
{% block main %}
<h1>姓名：{{ name }}</h1>
<p>使用的模板引擎是：{{ title }}</p>
{% endblock %}
{% block footer %}
頁尾
{% endblock %}路由route/index.js需要做些調整
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('default', { title: 'nunjucks' ,name:'opdevos'});
});
module.exports = router;使用supervisor bin/www啓動後
這樣就舒服多了,俺也可以不用再花時間去學其它的引擎了,哈哈...