整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
nderscore.js
jQuery是DOM之王，那么underscore就是數學之王（擅長計算）。
Underscore一個JavaScript實用庫，提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。
Underscore提供了100多個函數,包括常用的: map, filter, invoke 當然還有更多專業的輔助函數,
如:函數綁定, JavaScript模板功能,創建快速索引, 強類型相等測試, 等等.
Underscore不依賴環境，不限制使用場景，可以加載到HTML中在瀏覽器運行，也可以中Nodejs服務器環境中使用。
封裝了一堆實用函數，這些函數基本都是針對：數組、對象、函數的。
官網：http://underscorejs.org/
中文文檔：
http://www.css88.com/archives/5443
CDN公共資源庫：
http://cdn.code.baidu.com/
數學運算使用方法:
<!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的隨機數
// console.log(_.random(1,100));
//創建一個范圍整數數組
// console.log(_.range(1, 10)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
//取數組中的最大值和最小值
// var num=[10,5,100,2,1000]
// console.log(_.max(num))
// console.log(_.min(num))
//把數組轉成對象 {a: 10, b: 20, c: 30}
// console.log(_.object(['a','b','c'], [10,20,30]))
//each遍歷方法，對集合循環操作，可以遍歷數組、類數組arguments、JSON對象
// _.each(['小王','大王','鬼王'], function(item,index){
// console.log(item,index)
// })
//JSON遍歷
// _.each({a: 10, b: 20, c: 30}, function(item,index){
// console.log(item,index)
// })
// map可以遍歷數組、JSON對象
// var arr=_.map({a: 10, b: 20, c: 30}, function(item,index){
// return item * 2
// })
// console.log(arr)
//filter 過濾數組中符合條件的元素
// 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()方法可接受三個參數：
參數1：是必須的參數是模版字符串, 你可以通過<%=%> 來插入變量, 還可以通過<% %>來插入js代碼, 也可以通過<%- %>來進行html轉義,
如果變量很多, 可以使用<% print() %>來簡化。
參數2：是傳入模版的數據, 如果不傳第二個參數, 那么這個方法會返回一個模版函數, 這個模版函數可以傳入數據返回完成的模版,
如果傳入data參數則會直接返回一個已完成的模版。
參數3：是設置, 比如這個方法默認是尋找<% %>來進行替換, 可以通過設置它來改變具體的方法。
_.template 支持以下三種模板:
<% %> 執行一些代碼
<%=%> 在模板中打印或者說成輸出一些值
<%- %> 打印一些HTML轉義的值
解釋：
<% %> 里包裹的是一些可執行的 JavaScript 語句，比如 if-else 語句，for 循環語句等等。
<%=%> 會打印傳入數據相應的 key 的值，
<%- %> 和前者相比, 多了步 HTML 實體編碼的過程, 可以有效防止 XSS 攻擊。
//模板
var str="我很<%=xinqing %>??！買了一個<%=dongxi%>，花了<%=price%>元";
//通過move字符串生成一個數據綁定函數
var compile=_.template(str);
//數據
var obj={
xinqing:"高興",
dongxi:"iPhone手機",
price:8888
}
//字符串和數據進行綁定生成
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>學號</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</table>
</body>
<!-- 我們使用一個故意寫錯的type標簽存放模板，然后讀取html內容 -->
<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">
//通過模板字符串生成一個數據綁定函數
var compile=_.template($('#template').html());
//Ajax請求數據
$.get('data/student.json', function(data){
// console.log(data.result)
data.result.forEach(function(obj){
//數據綁定，得到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是一個可以將HTML生成PD并保留樣式效果的PHP第三方擴展。
下面就一步步講解如何使用：
一、通過composer安裝
composer require dompdf/dompdf安裝過程
二 、編寫測試代碼
（1）引用autoload.php
include 'vendor/autoload.php'; （2）實例化Dompdf
$dompdf=new \Dompdf\Dompdf();（3）加載HTML
$dompdf->loadHtml($html); //$html 為HTML字符串（4）設置紙張和方向
$dompdf->setPaper('A4', 'landscape'); //紙張大小和紙張方向（5）生成PDF并下載
$dompdf->render();
$dompdf->stream('數據字典.pdf');三、導出PDF測試，發現中文亂碼了
導出PDF發現中文亂碼了
四、解決中文亂了問題
（1）下載支持中文的字體包放到根目錄下（和vendor目錄同級），這里演示使用的是阿里巴巴的普惠字體（字體格式是ttf的，小編原先下載使用的字體格式是otf格式的無效）
（2）下載dompdf字體安裝工具解壓到根目錄（和vendor目錄同級）
下載地址：https://github.com/dompdf/utils（3）在命令行（CMD定位到根目錄）下執行命令
php load_font.php "puhui" Alibaba-PuHuiTi-Light.ttf執行成功后在路徑（vendor\dompdf\dompdf\lib\fonts）下就會出現剛才的字體
（4）在樣式文件中指定使用剛才安裝的字體
body{font-family:puhui;}（5）再次導出PDF測試成功
亂碼問題解決
，打包css資源
此時需要引入style-loader與css-loader。
css-loader的作用是將css以模塊的形式插入到js中。
style-loader的作用是創建一個style標簽，并將js中的css插入到style標簽里，最后將style標簽插入到html中的head里。
npm i style-loader css-loader -D
2，打包less資源
此時需要引入less與less-loader。
less-loader的作用是將less資源編譯成css資源。
npm i less-loader less -D
3，打包scss資源。
此時需要引入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/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
