一、json数据页面展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.js"></script>
<style >
.json-document {
padding: 1em 2em;
}
ul.json-dict, ol.json-array {
list-style-type: none;
margin: 0 0 0 1px;
border-left: 1px dotted #ccc;
padding-left: 2em;
}
.json-string {
color: #0B7500;
}
.json-literal {
color: #1A01CC;
font-weight: bold;
}
a.json-toggle {
position: relative;
color: inherit;
text-decoration: none;
}
a.json-toggle:focus {
outline: none;
}
a.json-toggle:before {
font-size: 1.1em;
color: #c0c0c0;
content: "25BC";
position: absolute;
display: inline-block;
1em;
text-align: center;
line-height: 1em;
left: -1.2em;
}
a.json-toggle:hover:before {
color: #aaa;
}
a.json-toggle.collapsed:before {
transform: rotate(-90deg);
}
a.json-placeholder {
color: #aaa;
padding: 0 1em;
text-decoration: none;
}
a.json-placeholder:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="aaa"></div>
</body>
</html>
<script>
(function ($) {
function isCollapsable(arg) {
return arg instanceof Object && Object.keys(arg).length > 0;
}
function isUrl(string) {
var urlRegexp = /^(https?://|ftps?://)?([a-z0-9%-]+.){1,}([a-z0-9-]+)?(:(d{1,5}))?(/([a-z0-9-._~:/?#[]@!$&'()*+,;=%]+)?)?$/i;
return urlRegexp.test(string);
}
function json2html(json, options) {
var html = '';
if (typeof json === 'string') {
json = json
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/'/g, ''')
.replace(/"/g, '"');
if (options.withLinks && isUrl(json)) {
html +=
'<a href="' +
json +
'" class="json-string" target="_blank">' +
json +
'</a>';
} else {
if (json.indexOf('RED_SELF') > -1) {
json = json.replace('RED_SELF', '');
html +=
'<span class="json-literal" style="color:red">' + json + '</span>';
} else if (json.indexOf('RED_parent') > -1) {
json = json.replace('RED_parent', '');
html += '<span class="json-literal RED_parent">' + json + '</span>';
} else {
json = json.replace(/"/g, '\"');
html += '<span class="json-string">"' + json + '"</span>';
}
}
} else if (typeof json === 'number') {
html += '<span class="json-literal">' + json + '</span>';
} else if (typeof json === 'boolean') {
html += '<span class="json-literal">' + json + '</span>';
} else if (json === null) {
html += '<span class="json-literal">null</span>';
} else if (json instanceof Array) {
if (json.length > 0) {
html += '[<ol class="json-array">';
for (var i = 0; i < json.length; ++i) {
html += '<li>';
if (isCollapsable(json[i])) {
html += '<a href class="json-toggle"></a>';
}
html += json2html(json[i], options);
if (i < json.length - 1) {
html += ',';
}
html += '</li>';
}
html += '</ol>]';
} else {
html += '[]';
}
} else if (typeof json === 'object') {
var keyCount = Object.keys(json).length;
if (keyCount > 0) {
html += '{<ul class="json-dict">';
for (var key in json) {
if (Object.prototype.hasOwnProperty.call(json, key)) {
html += '<li>';
var keyRepr = options.withQuotes
? '<span class="json-string">"' + key + '"</span>'
: key;
if (isCollapsable(json[key])) {
html += '<a href class="json-toggle">' + keyRepr + '</a>';
} else {
html += keyRepr;
}
html += ': ' + json2html(json[key], options);
if (--keyCount > 0) {
html += ',';
}
html += '</li>';
}
}
html += '</ul>}';
} else {
html += '{}';
}
}
return html;
}
$.fn.jsonViewer = function (json, options) {
options = Object.assign(
{},
{
collapsed: false,
rootCollapsable: true,
withQuotes: false,
withLinks: true
},
options
);
return this.each(function () {
var html = json2html(json, options);
if (options.rootCollapsable && isCollapsable(json)) {
html = '<a href class="json-toggle"></a>' + html;
}
$(this).html(html);
$(this).addClass('json-document');
$(this).off('click');
$(this).on('click', 'a.json-toggle', function () {
var target = $(this)
.toggleClass('collapsed')
.siblings('ul.json-dict, ol.json-array');
target.toggle();
if (target.is(':visible')) {
target.siblings('.json-placeholder').remove();
} else {
var count = target.children('li').length;
var placeholder = count + (count > 1 ? ' items' : ' item');
target.after(
'<a href class="json-placeholder">' + placeholder + '</a>'
);
}
return false;
});
$(this).on('click', 'a.json-placeholder', function () {
$(this).siblings('a.json-toggle').click();
return false;
});
if (options.collapsed == true) {
$(this).find('a.json-toggle').click();
}
});
};
})(jQuery);
var obj={
"id": 1001,
"type": "donut",
"name": "Cake",
"description": "https://en.wikipedia.org/wiki/Doughnut",
"price": 2.55,
"available": {
"store": 42,
"warehouse": 600
},
"toppings": [
{ "id": 5001, "type": "None" },
{ "id": 5002, "type": "Glazed" },
{ "id": 5005, "type": "Sugar" },
{ "id": 5003, "type": "Chocolate" },
{ "id": 5004, "type": "Maple" }
],
"uuids": [
"826b23ce-2669-4122-981f-3e2e4429159d",
"e32111a0-6a87-49ab-b58f-a01bf8d28ba0",
"c055a894-698e-41c0-b85f-7510a7351d9d",
],
};
$('#aaa').jsonViewer(obj);
</script>
二、富文本编辑器 editor.md 的使用
1、下载依赖包并导入 git clone https://github.com/pandao/editor.md.git
<script src="./common/editor.md/editormd.min.js"></script>
2、如果编辑后台返回的数据，那么向后台发送请求，获取数据serverData
3、执行下列代码
that.testEditor = editormd("editormd", {
"100%",
height: "720",
watch: false, //关闭分栏
toolbar: false, //关闭工具栏
value: serverData||'',
path: "./common/editor.md/lib/",//依赖存放路径
});
setTimeout(function () {
var value = that.testEditor.getValue();//获取编辑数据
}, 500);
4、详细使用教程，百度“editor.md使用教程”
三、form大文件上传示例
<script src="./common/webuploader.js"></script>
<button type="button" id="updataButton">升级</button>
<style>
#updataButton input[type="file"] {
display: none;
}
</style>
//页面初始化的时候执行下面代码
var files;
var task_id = WebUploader.Base.guid();
var uploader = WebUploader.create({
server: './system/devinfo/upload',
pick: '#updataButton',
auto: false,//需要手动上传
chunked: true,//需要分片
chunkSize: 20 * 1024 * 1024,//每片大小
chunkRetry: 3,//如果某个分片由于网络问题出错，允许自动重传3次
threads: 1,//允许同时最大上传进程数为1
duplicate: true,//需要去重
formData: {//文件上传请求的参数表，每次发送都会发送此对象中的参数
task_id: task_id,
},
fileVal:'rule'//设置文件上传域的name
});
uploader.on('fileQueued', function (file) {
files = file;
//有交互：列队完成，告知后台，准备接受数据
//返回成功后执行：uploader.upload();开始上传，无前后台交互
//返回失败执行：uploader.removeFile(files);
}).on('fileDequeued', function () {
//console.log('remove queue success.');
}).on('startUpload', function () {
$scope.updata();//无前后台交互，出现弹窗，告知正在上传
}).on('uploadProgress', function (file, percentage) {
//上传中，出现进度条
}).on('uploadSuccess', function (file) {
//交互一、告知后台，数据发送完毕
//交互二、定时询问后台，是否更新完毕
}).on('uploadError', function () {
//上传出错
});
四、form小文件上传示例
1、原生事件中，这里默认传入实参this，指的是input上传的内容.
2、在angular1事件中，这里为空，所以需要用原生事件，调用angular1方法.
3、原生事件中调用angular方法, 比如input的onChange事件想调用angular里面定义的方法onChange
<form enctype="multipart/form-data" method="post" id="formID">
<div class="form-inline protocol-private-row">
<div class="form-group">
<label>
<span>*</span>
<span>协议名称</span>
</label>
<input type="text" class="form-control" name="name" ng-model="thisForm.name"
id="protocolID" style="padding-left: 50px;400px;" maxlength="40">
<span class="pre-protocol-string">UDF-</span>
</div>
</div>
<div class="form-inline protocol-private-row">
<div class="form-group">
<label>
<span>*</span>
<span>协议脚本</span>
</label>
<button type="button" >
选择文件 //注意：鼠标对象和元素对象
<input type="file" name="rule" onchange="angular.element(this).scope().fileChangedOne(this)">
</button>
<span>{{uploadOne[0].name||'请选择 .lua格式文件'}}</span>
</div>
</div>
<div class="form-inline protocol-private-row">
<div class="form-group ">
<label>
<span>*</span>
<span>协议描述</span>
</label>
<button type="button" >
选择文件
<input type="file" name="segment" onchange="angular.element(this).scope().fileChangedTwo(this)">
</button>
<span>{{uploadTwo[0].name||'请选择 .proto格式文件'}}</span>
</div>
</div>
<div class="form-inline protocol-private-row">
<div class="form-group">
<label></label>
<button type="submit" ng-click="startUpload()" style=" 250px" class="btn btn-primary"
ng-disabled="!uploadOne[0].name||!uploadTwo[0].name||!thisForm.name">导入</button>
</div>
</div>
</form>
$scope.fileChangedOne = function (ele) {
$scope.uploadOne = ele.files;
$scope.$apply();
};
$scope.fileChangedTwo = function (ele) {
$scope.uploadTwo = ele.files;
$scope.$apply();
};
$scope.startUpload = function () {
var formdata = new FormData(document.getElementById('formID'));
var protocolName = $('#protocolID').val();
formdata.set('name', ('UDF-'+protocolName));
$.ajax({
url: '/protocol/selfdefine/upload',
type: 'post',
data: formdata,
processData: false,//数据不编码
contentType: false,//不改变enctype="multipart/form-data"
success: function (res) {
if (res.status === 1) {
$scope.g_tip('上传成功！');
$scope.pagin_init.reload();
$scope.uploadOne = '';
$scope.uploadTwo = '';
$scope.thisForm.name = '';
angular.element('input[type = file]')[0].value = '';
angular.element('input[type = file]')[1].value = '';
} else if (res.status === 0) {
$scope.g_alert(res.msg);
} else if (res.status === 1000) {
dir_alert.set({
button: true,
cancel_hiden: true,
click_other_hidden: false,
icon_close: false,
title: '错误',
content: '当前会话已过期，即将跳到登录页。',
});
account_m.exit();
} else {
$scope.g_alert('上传失败！');
}
},
error: function () {
$scope.g_alert('通信失败！');
}
});
};
五、三种下载
1、a下载，普通JS下载后台文件。
下面后台返回的data为json数据，不是某种格式的文件。
function down(data) {
var a = document.createElement('a');
document.body.appendChild(a);
a.download = '111.txt';
a.href = URL.createObjectURL(data);
a.click();
a.remove();
};
function down(url) {
var a = document.createElement('a');
document.body.appendChild(a);
a.download = '111.txt';
a.href = url;
a.click();
a.remove();
};
2、Excel下载
(1)引入插件xlsx.core.min.js和alasql.min.js
(2)代码如下：
var tableTh=["times [时间]", "user [用户]", "ip [IP地址]", "result [登录结果]"];
var title="文件名"
var dataArray=[
{
times: "2003-03-04",//0
user: "wdsfm",//1
ip: "216.94.168.85"//2
result: 1,//3
ServiceType: "yhzuu",
id: 1,
operation: "刷新页面",
},{
times: "2003-03-04",//0
user: "wdsfm",//1
ip: "216.94.168.85"//2
result: 1,//3
ServiceType: "yhzuu",
id: 2,
operation: "刷新页面",
}
];
alasql('SELECT'+ tableTh+ 'INTO XLSX("'+ title+ '.xlsx",{headers:true}) FROM ?', dataArray);
3、PDF下载
(1)如果想通过纯前端技术实现文件下载，直接把a标签的href属性设置为文件路径即可，<a href = "https://cdn.shopify.com/s/Manaul.pdf" download = "test.pdf"> 下载</a>。txt、jpg、pdf等格式的文件，浏览器支持直接打开，
(2)PDF版报告的展示
<script src="/audit-html/static/common/jquery-media.js"></script>
步骤一：告诉后台我要下载文件，后台同意
步骤二：执行下面代码
$('#handout_wrap_inner').media({
'100%',
height: '680px',
autoplay: true,
src: url//后台存放pdf文件的地方
});
六、JSONP
1、Ajax，在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。
2、Ajax请求存在因同源策略而导致的跨域无权限访问的问题。
3、凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）。
4、JSONP的一般使用过程是，定义myCallback函数，添加一个<script>标签，通过问号传参的形式?callback=myCallback传给服务器；服务器收到参数后，以字符串的形式"myCallback({key:{key:value}})"返回JSON数据，浏览器把字符串里的内容当作script代码来执行，类似于eval函数。
<script type="text/javascript">
function fn(data) {
console.log(data);
console.log($);
}
</script>
<script type="text/javascript" src="http://matchweb.sports.qq.com/kbs/hotMatchList?callback=myCallback"></script>
5、在jquery中，jsonp的实现方式是：在动态添加的<script>标签里执行(经过ajax请求后)服务器返回的js脚本(valueCallback函数的执行)，js脚本执行完毕后，<script>标签和js脚本被移除。
6、以下是jQuery中ajax的配置与地址栏显示的对应关系，如地址栏默认为：url?callback=jQuery123&other。
$.ajax({
data:{},//规定要发送到服务器的数据。
dataType:"jsonp",//预期的服务器响应的数据类型。
jsonp:"keyCallback",//重写回调函数的字符串。用服务器给的keyCallback取代jQuery默认的callback。
jsonpCallback:"valueCallback",//规定回调函数的名称。用服务器给的valueCallback取代jQuery默认的jQuery123，本地需要定义valueCallback函数来利用服务器返回的"valueCallback(data)"
});
七、请求方式和ajax请求？
1、ajax发送请求
2、a、link标签的href发送请求
3、img、script、iframe的src属性发送请求
4、表单submit发送请求
AJAX请求 是与服务器交换数据并更新部分网页的技术。
HTTP请求 是与服务器交换数据并更新全部网页的技术。
八、form标签的属性
1、<form> 标签的 enctype 属性
（1）application/x-www-form-urlencoded 在发送前编码所有字符（默认）
（2）multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
（3）text/plain 空格转换为 "+" 加号，但不对特殊字符编码。
2、<form> 标签的 action 属性
（1）必需的 action 属性规定当提交表单时，向何处发送表单数据。
3、<form> 标签的 name 属性
（1）name 属性规定表单的名称。
4、<input> 标签的 type 属性
（1）为submit时，定义提交按钮。提交按钮会把表单数据发送到服务器。
5、FormData将仅使用具有name属性的输入字段。
九、cookie
1、cookie的作用
（1）http是一种无状态的协议，服务器不能通过它区分向它发出请求的不同客户；
（2）cookie可以在前后端进行用户的身份认证，标记用户。
（3）服务端的解决办法是(简)：服务端返给客户端响应头Set-Cookie，客户端接收到这个响应后，此后发送的每一个请求，浏览器都会自动带上Cookie请求头，
（4）服务端的解决办法是(繁)：向客户端种植cookie，并在服务端通过session去管理cookie。当需要记住用户时，比如说登录，在服务端会设置一个响应头Set-Cookie，返回给客户端，例如：Set-Cookie:SESSIONID=12345678；客户端接收到这个响应后，此后发送的每一个请求浏览器都会自动带上Cookie请求头，对应内容是Cookie:SESSIONID=12345678。在服务端内存中存有session，将客户端发送的请求中的cookie值与内存中的session进行对比，就可以识别这个客户端了。
（5）种cookie的用途，A便于后端判断前端是否已经登陆，B便于后端判断前端登陆是否超时。如果未登录，那么返给前端相应的状态码，前端跳转到登陆页；如果登录已超时，那么重置cookie并返给前端相应的状态码，前端跳转到登陆页。
2、Cookie的使用
（1）创建cookie：document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";
（2）读取cookie：var x = document.cookie;
（3）删除cookie：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
十、localStorage、sessionStorage
1、localStorage，永久可用
2、sessionStorage，页面会话期间可用
3、localStorage和sessionStorage的方法，以前者为例
（1）localStorage.setItem (key, value)保存数据，以键值对的方式在浏览器储存信息。
（2）localStorage.getItem (key) 获取数据，将键传入，即可获取到浏览器对应的value值。
（3）localStorage.removeItem (key)删除单个数据，根据键移除浏览器对应的信息。
十一、DOM元素的增删改查
1、增加：appendChild、insertBefore、setAttribute
2、删除：removeChild
3、改变：replaceChild
4、查找：getElementById、getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll
十二、算法知识
1、查找算法：
通过和文件中的关键字进行比较来实现的，都采用平均查找长度来衡量算法的优劣。那么能否有一种方法，不必进行与关键字的比较而达到查找的目的，这样平均查找长度就为0。哈希查找的基本思想是：通过对给定值作某种运算，直接求得(((关键字等于给定值的)记录)在文件中的)位置。
2、八种数据结构:
数组、栈、队列、链表、集合、字典、树、图（一组由边连接的顶点）！以数组作为数组元素的数组，叫做二维数组，又叫做矩阵。行数、列数相等的矩阵称为方阵。元素以主对角线为对称轴对应相等的方阵叫做对称矩阵。主对角线外都是零元素的方阵叫做对角矩阵。将矩阵的行列互换得到的新矩阵称为转置矩阵。存放图顶点间关系的矩阵叫做邻接矩阵。
3、树与二叉树：
由有限节点组成，具有层级关系的数据结构叫做树；每个节点最多有两个子节点的树叫做二叉树。
十三、显示屏尺寸
function displayScreen(inch,width,height){
//(width*x)的平方+(height*x)的平方=inch的平方,求出x即公比；
var usual=0;
if(width===4&&height===3){
usual=25
}else if(width===16&&height===9){
usual=337
}else if(width===21&&height===9){
usual=522
}else if(width===16&&height===10){
usual=356
}else{
console.log('没有"'+width+":"+height+'"的显示屏');
return
}
var radio=Math.sqrt(4*usual*inch*inch)/(2*usual)*2.54;
var line=(inch*2.54).toFixed(2);
var singleWidth=(radio*width).toFixed(2);
var singleHeight=(radio*height).toFixed(2);
console.log(inch+"寸"+width+":"+height+"的显示屏，其对角线长为"+line+"厘米；宽为"+singleWidth+"厘米；高为"+singleHeight+"厘米");
}
for(var i=20;i<51;i++){displayScreen(i,16,9);}
十四、编程绝句
我国清朝彭端淑曰：天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。吾本史学科班出身，为生计和兴趣计，经多次转行，最终以“必为”之心做了程序员。余自转行程序员以来，别妻、离子、抛清明、弃五一、丧端午、失中秋、沦国庆、陷元旦、缺周六、损周日。天明起床、半夜入睡，四季更替，周而复始，专心致志于公司、心无旁骛于陋室。希冀以勤补拙，技上层楼。个中辛苦，有诗为证：编程艰途如攻山， 拼上老命向上攀； 满身创伤终登顶， 无边群峰在眼前。
编程其一：目视夕阳缓缓落，心盼技术速速升。周遭高楼依次亮，谁知我在中关村？
编程其二：十年之前论古今，誓改人间换乾坤。如今只为生计计，犹落风尘做编程。
编程其三：当年悟空五行山，腾云驾雾难施展。而今吾身无负重，苦无神技助冲天。
编程其四：编程艰途如攻山，拼上性命向上攀。满身创伤终至顶，还有更高在眼前。
十五、滚动条破坏布局
（1）问题:当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏。
（2）原因:滚动条的宽度是计算到内容 content 里的。
（3）解决思路:增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变。
杂、细碎知识
1、重绘：尺寸和位置没有变化
2、指针：指针、地址、引用
3、高阶函数：操作其他函数的函数，比如map、forEach
4、重载：Java可以为一个函数定义两个定义，只要这两个定义的签名（参数的类型和数量）不同即可。JS没有签名，所以不能重载。
5、动态添加样式 (1)obj.style.width = '400px'; obj.style.height = '300px';(2)obj.style.cssText = "400px; height:300px;";
6、函数的调用方式 （1）直接调用;（2）对象调用;（3）new调用;（4）call、apply调用
7、主要浏览器的内核及其前缀 （1）IE trident -ms- （2）欧朋 presto -o- （3）谷歌 webkit -webkit- （4）火狐 gecko -moz-
8、后台返回的数据和前端代码都没变，前端根据后台数据渲染的图片有时出现，有时不出现。这是因为，渲染图片区域的宽高设为100%，此前该区域是否已被其它路由返回的数据撑开。
