JavaScript 數(shù)學(xué)運(yùn)算和模板引擎-under

JavaScript 數(shù)學(xué)運(yùn)算和模板引擎-underscore

nderscore.js

jQuery是DOM之王，那么underscore就是數(shù)學(xué)之王（擅長(zhǎng)計(jì)算）。

Underscore一個(gè)JavaScript實(shí)用庫，提供了一整套函數(shù)式編程的實(shí)用功能，但是沒有擴(kuò)展任何JavaScript內(nèi)置對(duì)象。

Underscore提供了100多個(gè)函數(shù),包括常用的: map, filter, invoke 當(dāng)然還有更多專業(yè)的輔助函數(shù),

如:函數(shù)綁定, JavaScript模板功能,創(chuàng)建快速索引, 強(qiáng)類型相等測(cè)試, 等等.

Underscore不依賴環(huán)境，不限制使用場(chǎng)景，可以加載到HTML中在瀏覽器運(yùn)行，也可以中Nodejs服務(wù)器環(huán)境中使用。

封裝了一堆實(shí)用函數(shù)，這些函數(shù)基本都是針對(duì)：數(shù)組、對(duì)象、函數(shù)的。

官網(wǎng)：http://underscorejs.org/

中文文檔：

http://www.css88.com/archives/5443

CDN公共資源庫：

http://cdn.code.baidu.com/

數(shù)學(xué)運(yùn)算使用方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript">
//生成0~100的隨機(jī)數(shù)
// console.log(_.random(1,100));
//創(chuàng)建一個(gè)范圍整數(shù)數(shù)組
// console.log(_.range(1, 10)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
//取數(shù)組中的最大值和最小值
// var num=[10,5,100,2,1000]
// console.log(_.max(num))
// console.log(_.min(num))
//把數(shù)組轉(zhuǎn)成對(duì)象 {a: 10, b: 20, c: 30}
// console.log(_.object(['a','b','c'], [10,20,30]))
//each遍歷方法，對(duì)集合循環(huán)操作，可以遍歷數(shù)組、類數(shù)組arguments、JSON對(duì)象
// _.each(['小王','大王','鬼王'], function(item,index){
// console.log(item,index)
// })
//JSON遍歷
// _.each({a: 10, b: 20, c: 30}, function(item,index){
// console.log(item,index)
// })
// map可以遍歷數(shù)組、JSON對(duì)象
// var arr=_.map({a: 10, b: 20, c: 30}, function(item,index){
// return item * 2
// })
// console.log(arr)
//filter 過濾數(shù)組中符合條件的元素
// var arr=_.filter([1,2,3,4,5,6], function(item,index){
// return item % 2==0;
// })
// console.log(arr)
//sorby() 自定義比較方法
var arr=_.sortBy([3,4,2,1,6,88], function(item){
return Math.max(item)
})
console.log(arr)
</script>
</html>

underscore模板引擎

template()方法可接受三個(gè)參數(shù)：

參數(shù)1：是必須的參數(shù)是模版字符串, 你可以通過<%=%> 來插入變量, 還可以通過<% %>來插入js代碼, 也可以通過<%- %>來進(jìn)行html轉(zhuǎn)義,

如果變量很多, 可以使用<% print() %>來簡(jiǎn)化。

參數(shù)2：是傳入模版的數(shù)據(jù), 如果不傳第二個(gè)參數(shù), 那么這個(gè)方法會(huì)返回一個(gè)模版函數(shù), 這個(gè)模版函數(shù)可以傳入數(shù)據(jù)返回完成的模版,

如果傳入data參數(shù)則會(huì)直接返回一個(gè)已完成的模版。

參數(shù)3：是設(shè)置, 比如這個(gè)方法默認(rèn)是尋找<% %>來進(jìn)行替換, 可以通過設(shè)置它來改變具體的方法。

_.template 支持以下三種模板:

<% %> 執(zhí)行一些代碼

<%=%> 在模板中打印或者說成輸出一些值

<%- %> 打印一些HTML轉(zhuǎn)義的值

解釋：

<% %> 里包裹的是一些可執(zhí)行的 JavaScript 語句，比如 if-else 語句，for 循環(huán)語句等等。

<%=%> 會(huì)打印傳入數(shù)據(jù)相應(yīng)的 key 的值，

<%- %> 和前者相比, 多了步 HTML 實(shí)體編碼的過程, 可以有效防止 XSS 攻擊。

//模板

var str="我很<%=xinqing %>啊！買了一個(gè)<%=dongxi%>，花了<%=price%>元";

//通過move字符串生成一個(gè)數(shù)據(jù)綁定函數(shù)

var compile=_.template(str);

//數(shù)據(jù)

var obj={

xinqing:"高興",

dongxi:"iPhone手機(jī)",

price:8888

}

//字符串和數(shù)據(jù)進(jìn)行綁定生成

str=compile(obj);

console.log(str)

underscore模板引擎Ajax

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
table,tr,td,th{
border: 1px solid #000;
border-collapse:collapse;
}
</style>
</head>
<body>
<table id="table">
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</table>
</body>
<!-- 我們使用一個(gè)故意寫錯(cuò)的type標(biāo)簽存放模板，然后讀取html內(nèi)容 -->
<script type="text/template" id="template">
<tr>
<td><%=id %></td>
<td><%=name %></td>
<td><%=age %></td>
<td><%=sex %></td>
</tr>
</script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//通過模板字符串生成一個(gè)數(shù)據(jù)綁定函數(shù)
var compile=_.template($('#template').html());
//Ajax請(qǐng)求數(shù)據(jù)
$.get('data/student.json', function(data){
// console.log(data.result)
data.result.forEach(function(obj){
//數(shù)據(jù)綁定，得到DOM字符串
var str=compile(obj)
//上樹
$('table').append(str)
})
})
</script>
</html>
data/student.json
{
"result" :[
{
"id":100001,
"name":"小明",
"age":22,
"sex":"男"
},
{
"id":100002,
"name":"小紅",
"age":22,
"sex":"女"
},
{
"id":100003,
"name":"小黑",
"age":22,
"sex":"男"
},
{
"id":100004,
"name":"小白",
"age":22,
"sex":"女"
}
]
}

模板引擎的原理

ompdf是一個(gè)可以將HTML生成PD并保留樣式效果的PHP第三方擴(kuò)展。

下面就一步步講解如何使用：

一、通過composer安裝

composer require dompdf/dompdf

安裝過程

二、編寫測(cè)試代碼

（1）引用autoload.php

include 'vendor/autoload.php';

（2）實(shí)例化Dompdf

$dompdf=new \Dompdf\Dompdf();

（3）加載HTML

$dompdf->loadHtml($html); //$html 為HTML字符串

（4）設(shè)置紙張和方向

$dompdf->setPaper('A4', 'landscape'); //紙張大小和紙張方向

（5）生成PDF并下載

 $dompdf->render();
$dompdf->stream('數(shù)據(jù)字典.pdf');

三、導(dǎo)出PDF測(cè)試，發(fā)現(xiàn)中文亂碼了

導(dǎo)出PDF發(fā)現(xiàn)中文亂碼了

四、解決中文亂了問題

（1）下載支持中文的字體包放到根目錄下（和vendor目錄同級(jí)），這里演示使用的是阿里巴巴的普惠字體（字體格式是ttf的，小編原先下載使用的字體格式是otf格式的無效）

（2）下載dompdf字體安裝工具解壓到根目錄（和vendor目錄同級(jí)）

下載地址：https://github.com/dompdf/utils

（3）在命令行（CMD定位到根目錄）下執(zhí)行命令

php load_font.php "puhui" Alibaba-PuHuiTi-Light.ttf

執(zhí)行成功后在路徑（vendor\dompdf\dompdf\lib\fonts）下就會(huì)出現(xiàn)剛才的字體

（4）在樣式文件中指定使用剛才安裝的字體

body{font-family:puhui;}

（5）再次導(dǎo)出PDF測(cè)試成功

亂碼問題解決

，打包c(diǎn)ss資源

此時(shí)需要引入style-loader與css-loader。

css-loader的作用是將css以模塊的形式插入到j(luò)s中。

style-loader的作用是創(chuàng)建一個(gè)style標(biāo)簽，并將js中的css插入到style標(biāo)簽里，最后將style標(biāo)簽插入到html中的head里。

npm i style-loader css-loader -D

2，打包less資源

此時(shí)需要引入less與less-loader。

less-loader的作用是將less資源編譯成css資源。

npm i less-loader less -D

3，打包scss資源。

此時(shí)需要引入node-scss與sass-loader。

sass-loader的作用是將scss資源編譯成css資源。

npm i node-sass sass-loader -D

webpack.config.js配置如下：

const { resolve }=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/assets/index.html',
            hash: true,
            filename: 'index.html',
            favicon: './src/assets/favicon.ico'
        })
    ],
    mode: 'development'
}

package.json的配置如下：

{
  "name": "wpk5-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.0",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "node-sass": "^5.0.0",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0"
  }
}

gitee倉庫：

https://gitee.com/seimin/xiaoming2qianduan-webpack5/tree/v5.2/

在線咨詢

上一篇：「干貨」前后端分離怎么部署？
下一篇：8000字 - 詳解 Tkinter 的 GUI 界

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

JavaScript 數(shù)學(xué)運(yùn)算和模板引擎-under

您的項(xiàng)目需求