JavaScript 数学运算和模板引擎-under

JavaScript 数学运算和模板引擎-underscore

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/

在线咨询

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

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript 数学运算和模板引擎-under

您的项目需求