three.js 的简单实例
三大主件: 渲染器、场景、相机
思想核心: 相机获取到场景内显示的内容, 然后再通过渲染器渲染到画布上面
渲染器: 实例化渲染器的同时生成的一个 Canvas 画布, 之后将这个画布添加到了 DOM 当中
场景: 场景只是一个容器, 显示的内容需要进行添加, 添加一个内容称作一个网格, 每个网格基本上包括几何体和材质, 网格也称之为模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>three</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body onload="init()">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/dat.gui.min.js"></script>
<script>
//声明一些全局变量
var renderer, camera, scene, geometry, material, mesh, stats, rotate = true;
//初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer(); //实例化渲染器
renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
document.body.appendChild(renderer.domElement); //添加到dom
}
//初始化场景
function initScene() {
scene = new THREE.Scene(); //实例化场景
}
//初始化相机
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机
camera.position.set(0, 0, 15); //初始化的坐标
}
//创建模型
function initMesh() {
geometry = new THREE.BoxGeometry(2, 2, 2); //创建几何体
material = new THREE.MeshNormalMaterial(); //创建材质
mesh = new THREE.Mesh(geometry, material); //创建网格
scene.add(mesh); //将网格添加到场景
}
//运行动画
function animate() {
requestAnimationFrame(animate); //循环调用函数
//判断是否可以旋转
if(rotate) {
mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
}
stats.update(); //更新性能检测框
renderer.render(scene, camera); //渲染界面
}
//性能检测框
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//创建调试框
function initGui() {
//控制参数初始值
controls = {
positionX: 0,
positionY: 0,
positionZ: 0,
rotate: true
};
gui = new dat.GUI(); //实例化对象
gui.add(controls, "positionX", -10, 10).onChange(updatePosition);
gui.add(controls, "positionY", -5, 5).onChange(updatePosition);
gui.add(controls, "positionZ", -10, 10).onChange(updatePosition);
function updatePosition() {
mesh.position.set(controls.positionX, controls.positionY, controls.positionZ);
}
gui.add(controls, "rotate").name("旋转").onChange(function(e) {
rotate = e;
});
}
//初始化函数，页面加载完成是调用
function init() {
initRenderer();
initScene();
initCamera();
initMesh();
initStats();
initGui();
animate();
}
</script>
</body>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
1.获得内容 - text()、html() 以及 val()
text() - 返回所选元素的文本内容
html() - 返回所选元素的内容（包括 HTML 标记）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1">圣诞快乐，<b>新年快乐</b></p> //给p元素里边的文本一部分加上b标签 <button id="b1">显示文本</button> <button id="b2">显示html</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#b1").click(function(){ alert( $("#p1").text() ); //获取文本 }); $("#b2").click(function(){ alert( $("#p1").html() ); //获取html内容 结果会包含b标签 }); }); </script>
val() - 返回表单字段的value值
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip" value="nihao"> <button id="but">显示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#ip").val()); 结果返回表单元素的value值（nihao） }); }); </script>
2.获取属性 - attr()
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com"></a> <button id="but">显示元素属性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#aa").attr("href")); }); }); </script>
1设置内容和回调函数 - text()、html() 以及 val()
text() - 设置所选元素的文本内容
html() - 设置所选元素的内容（包括 HTML 标记）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1"></p> <button id="b1">显示文本</button> <button id="b2">显示html</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#b1").click(function(){ $("#p1").text("圣诞快乐，<b>新年快乐</b>") ; //设置文本 }); $("#b2").click(function(){ $("#p1").html("圣诞快乐，<b>新年快乐</b>") ; //设置html内容 结果会包含b标签 }); }); </script>
text()、html()回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1">新年快乐</p> <button id="b1">显示文本</button> <button id="b2">显示html</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#b1").click(function(){ $("#p1").text(function(){ return "happy new year"; //调用函数，返回一个新的文本 } ) ; }); $("#b2").click(function(){ $("#p1").text(function(){ return "happy <b>new</b> year"; //调用函数，返回一个新的文本 } ); }); }); </script>
val() - 设置表单字段的value值和回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip"> <button id="but">显示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ $("#ip").val("happy"); }); }); </script>
val（）的回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip"> <button id="but">显示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ $("#ip").val(function(){ return "happay"; }); }); }); </script>
2.设置属性 attr（）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com">11111</a> <button id="but">显示元素属性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#aa").attr( { "href":"http://news.baidu.com/" } )); //attr()里边，要加{}号 }); }); </script>
attr（）的回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com"></a> <button id="but">显示元素属性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#aa").attr({ "href":function(){return "http://news.baidu.com/" } } )); //attr()里边，要加{}号 });}); </script>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
提示：DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>
val()方法例子：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value:"+$("#test").val());
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>
</html>
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("url"));
});
});
</script>
</head>
<body>
<p><a url="img/001.jpg" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
局部变量
局部变量：在函数内部声明的变量，只在函数内部起作用。函数的参数也是局部性的，只在函数内部起作用，对于其他的函数或脚本代码是不可用的。
函数可以访问函数内部定义的变量，如：
<p>函数可以访问函数内部定义的变量:</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var a = 4;
document.getElementById("demo").innerHTML = a a;
}
</script>
全局变量
在web页面中全局变量属于 window 对象，全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。
函数也可以访问函数外部定义的变量，如：
<p>函数可以访问定义在函数外的变量：</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var a = 4;
function myFunction() {
document.getElementById("demo").innerHTML = a a;
}
</script>
全局和局部变量即便名称相同，它们也是两个不同的变量。修改其中一个，不会影响另一个的值。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
问题描述：
做抽屉式菜单时候，在 ie 7 下发现 li 元素之间会留白，如下图：
原以为是样式的问题，后来看到有博文写到“行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔”。
解决办法：
li 标签之间的空白，可以通过设置 li 标签的 font-size 为 0，可以解决：
li{
padding:0;
margin:0;
height: 30px;
line-height: 30px;
font-size: 0; / 设置 font-size 为 0 即可 /
}
修改后的效果如图：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
引起这种空白间隔的原因：
浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码
换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决方案：
方法一： 既然是因为< li>换行导致的，那就可以将< li>代码全部写在一排，如下
<div class="wrap">
<h3>li标签空白测试</h3>
<ul>
<li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>
</ul>
</div>
1
2
3
4
5
6
7
再刷新页面看就没有空白了，就是这么神奇~
方法二： 我们为了代码美观以及方便修改，很多时候我们不可能将< li>全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将
内的字符尺寸直接设为0，将下面样式放入样式表，问题解决。
.wrap ul{font-size:0px;}
1
但随着而来的就是
中的其他文字就不见了，因为其尺寸被设为0px了，我们只好将他们重新设定字符尺寸。
方法三： 本来以为方法二能够完全解决问题，但经测试，将li父级标签字符设置为0在Safari浏览器依然出现间隔空白；既然设置字符大小为0不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是li内的字符间隔也被设置了，我们需要将li内的字符间隔设为默认。
.wrap ul{letter-spacing: -5px;}
1
之后记得设置li内字符间隔
.wrap ul li{letter-spacing: normal;}
1
2
详细看这篇文章 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
后台返回json数据给前台和前台解析json数据（总结）
一般来说web开发中，前台采用json数据提交给后台，后台处理数据以后返回json数据给前台，前台解析json，显示数据。
总而言之，前后台直接交换的数据格式最常用的非json数据无疑了。
这里就总结一些json数据的前后台处理方式。
1.JSON数据
JSON(JavaScript Object Notation, JS 对象简谱)
是一种轻量级的数据交换格式，比xml更轻巧（由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用的带宽）。
json是javascript原生格式，就是说在javascript中处理json数据，需要引用其他API或工具包。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
只需要记住！
Json是一种文本字符串！被存储在responseText属性中，而读取json数据可以使用javascript的eval函数来解析json。
2.json规则：
在 JS 语言中，一切都是对象，对象是一个无序的 “键/值” 对集合。
因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：
• 对象表示为键值对.
• 数据由逗号分隔.
• 花括号{}保存对象.
• 方括号[]保存数组.
键/值对组合中的键名写在前面并用双引号 “” 包裹，使用冒号 : 分隔，然后紧接着值：
{"firstName": "Json"}
1
这很容易理解，等价于这条 JavaScript 语句：
{firstName : "Json"}
1
对象在 JS 中是使用花括号包裹 {} 起来的内容，数据结构为 {key1：value1, key2：value2, …} 的键值对结构。
在面向对象的语言中，key 为对象的属性，value 为对应的值。
键名可以使用整数和字符串来表示，值的类型可以是任意类型。
数组在 JS 中是方括号 [] 包裹起来的内容，数据结构为 [“java”, “javascript”, “vb”, …] 的索引结构。
在 JS 中，数组是一种比较特殊的数据类型，它也可以像对象那样使用键值对，但还是索引使用得多。同样，键名可以使用整数和字符串来表示，值的类型可以是任意类型。
3.JSON 与 JS 对象的关系：
很多人搞不清楚 JSON 和 Js 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解：
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
如：
var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串
1
2
4.后台返回json数据
一般来说，使用JsonObject来将Java类型数据转换成Json类型，首先要下载该库相关的jar包，下载地址如下：
json-jar包下载
JsonObject的使用：
后台controller部分代码:
JSONObject object = new JSONObject(); //创建Json对象
object.put("username", "张三"); //设置Json对象的属性
object.put("password", "123456");
System.out.println(object.toString()); //调用toString方法将json对象转换成json字符串
//把json数据返回给浏览器：
PrintWriter out = cu.getWriterOut(response);
out.print(object.toString());
//或者
response.getWriter().write(jsonObject.toString());
1
2
3
4
5
6
7
8
9
10
11
5.在JavaScript代码中接收Json数据：
假设result为浏览器得到的json数据，可以使用以下js代码可以将json对象转换为字符串。
比如：
通过$.get从后台获取了一段json串{“id”:“1”,“name”:“ww”}，然后要拿到这里面的id和name值：
注意！注意！注意！
如果你直接这么写！
$.get(url,
function(data) {
alert("ID:" + data.id + "\nName:" + data.name);
});
1
2
3
4
直接这样写的话，界面会alert提示undefined，因为没能正确解析返回的字符串。
图示：
解决方案：
1、 需要用eval()函数
将返回的串转化成可用的strig串，eval(data)，但是因为原串里面是以{}开始和结束的，会被认为是可执行方法，因此需要加上()包围起来,最终形成：
var jsonobj= eval('(' + data + ')'); // 把JSON字符串解析为javascript对象
1
然后再
alert("ID:" + jsonobj.id + "\nName:" + jsonobj.name);
1
各种正常的按key取值，就能正常显示了。
2、获取的时候就直接表示返回的是json格式，用.getJSON代替 .getJSON代替.getJSON代替.get，其他代码不变，也能正常获取。
也可以直接获取json对象的属性，如下：console.log(result.username);
前端js代码:
$.ajax({
url: url,
type: "POST",
data: parameters,
dataType:"json",
async: false,
success: function(result){
var newData = JSON.stringify(result); //将json对象转换为字符串
newData = eval("("+newData+")"); /解析json
var annualDays = newData.annualDays;
var entryDate = newData.entryDate;
$("input[name='extendDataFormInfo.value(fd_shengyu_nianjia)']").val(annualDays);
$("input[name='extendDataFormInfo.value(fd_ruzhi_date)']").val(entryDate);
}});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ps: 注意注释中的代码，如果少了这一句，那么直接alert(result);得到的结果会是
所以在这里stringfy()的作用是用于从一个对象解析出字符串
加上了var newData = JSON.stringify(result);这句，然后你再alert(newData);
得到的就会是你想要的结果，如下:
另外：
如果返回的json数据格式不是很规范的解决办法：
判断后台返回的数据格式是否字符串，是则转，不是则不转？
var $obj = (typeof data.content == 'string') ? JSON.parse(data.content):data.content
1
总结：
前台发送请求，并且设置数据为json格式‘
$.ajax({
url:"selectByid.",
datatype:'json',
data:{id:id}, // 发送数据
1
2
3
4
数据回调函数
success:function(data){
alert(data);
var json = eval("("+data+")");//将json类型字符串转换为json对象
alert("hjf"+json.name);
1
2
3
4
给对应的input赋值：
$("#id").val(json.id),
$("#name").val(json.name),
$("#age").val(json.age);
1
2
3
后台代码：返回json数据
response.getWriter().print(str); //将数据返回前台ajax
1
6.前端ajax接不到json解决？
在前台：
async:false, //加上这个属性就好了
1
7.返回的json字符串中有转义符解决？
比如：
"result":"{\"id\":\"60\",\"qid\":\"1\",\"bazi\":\"baiz\",\"shenxiao\":\"\",\"xingzuo\":\"\",\"wuge\":\"\",\"jianyi\":\"\",}"
1
这样我们我们使用JSON.parse(result) ，直接转化为json的话是会报错的。
解决方法：
我们先把转义符用正则表达式去掉，
var string = result.replace("/\","");
var getDataArray = JSON.parse(string)
1
2
这样就OK了，不过要注意有时候也是需要指定返回数据类型的
dataType:“json”
8.使用其他的json依赖包方式：
引入阿里巴巴的json依赖包：
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.9</version>
</dependency>
1
2
3
4
5
模拟后台：
String params="{\"channelCode\":\"bbb\",\"accountNo\":\"121300000932\",\"message\":\"字符信息解密成功\",\"status\":\"1\"}";
JSONObject pa=JSONObject.parseObject(params);
System.out.println(pa.getString("message"));
1
2
3
结果：
或者：
引入net.sf.json-lib依赖包：
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
1
2
3
4
5
6
后台：
String params="{\"channelCode\":\"ccy\",\"accountNo\":\"121300000932\",\"message\":\"字符信息解密成功\",\"status\":\"1\"}";
JSONObject pa=JSONObject.fromObject(params);
String accountNo=pa.getString("accountNo");
System.out.println(accountNo);
1
2
3
4
结果：
9.后台对象转换json数据返回给前台
List集合转换成json代码：
List list = new ArrayList();
list.add( "first" );
list.add( "second" );
JSONArray jsonArray2 = JSONArray.fromObject( list );
1
2
3
4
Map集合转换成json代码：
Map map = new HashMap();
map.put("name", "json");
map.put("bool", Boolean.TRUE);
map.put("int", new Integer(1));
map.put("arr", new String[] { "a", "b" });
map.put("func", "function(i){ return this.arr[i]; }");
JSONObject json = JSONObject.fromObject(map);
1
2
3
4
5
6
7
或者在项目中加入引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：
下载地址。
1.commons-lang.jar
2.commons-beanutils.jar
3.commons-collections.jar
4.commons-logging.jar
5.ezmorph.jar
6.json-lib-2.2.2-jdk15.jar
1
2
3
4
5
6
用法同上
JSONObject jsonObject = JSONObject.fromObject(message);
getResponse().getWriter().write(jsonObject.toString());
1
2
当把数据转为json后，用如上的方法发送到客户端。前端就可以取得json数据了。（可以参考最下面的实例）
10.后台返回数据给前台，json中文乱码解决方法
在实际运用场景中，当前台发起请求后，我们需要从后台返回数据给前台，这时，如果返回的数据中包含中文，则经常会出现在后台查询出来都是好好，但是传输回去就莫名的乱码了，而且即使在 web.xml 中进行编码过滤了，但还是乱码。
解决办法：
只需要在 spring-mvc.xml 配置文件中配置一次就好，省去了我们重复写的麻烦，配置内容如下：
<!--自定义消息转换器的编码,解决后台传输json回前台时，中文乱码问题-->
<mvc:annotation-driven >
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter" >
<property name = "supportedMediaTypes">
<list>
<value>application/json;charset=utf-8</value>
<value>text/html;charset=utf-8</value>
<!-- application 可以在任意 form 表单里面 enctype 属性默认找到 -->
<value>application/x-www-form-urlencoded</value>
</list>
</property>
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" ></bean>
</mvc:message-converters>
</mvc:annotation-driven>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
加上这段配置，保存重新运行，再次访问，会发现，原先的中文乱码都已经正常显示了。
方法二：在后台的方法映射添加：
@RequestMapping(value="/getphone",produces = “text/plain;charset=utf-8”)
11.Spring MVC返回json数据的方式
原型：函数中的属性prototype，她的名字就叫原型。可以通过也只能通过prototype添加可继承的属性和方法
原型对象：函数中prototype中的proto 和对象中的proto
先记住原型（prototype）和原型对象（proto）
下面用代码解释原型、原型对象、 原型链
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
</head>
<body>
<script type="text/javascript">
//创建一个对象和一个函数
var obj = {}
console.log(obj.proto)//obj有原型对象
function objFun (){}
console.log(objFun.prototype) //objFun 原型
console.log(objFun.prototype.proto) //原型中有原型对象
console.log('*华丽的分割线***')
// 以objFun为构造函数 (为了把构造函数和普通函数做区分，通常把构造函数名首字母大写)
// 添加属性和方法
objFun.prototype.name='saozhu'
objFun.prototype.say = function(){
console.log(this.name+'-骚猪')
}
// 创建实例对象1
var obj1=new objFun()
console.log(obj1)//打印对象 空对象
console.log(obj1.name) //骚猪 证明obj1继承了objFun函数的属性
console.log('*华丽的分割线***')
// 此时此刻 可以理解原型链了:
console.log(obj1.proto=== objFun.prototype)
//true
// 原型链是有实例对象的proto(原型对象)指向构造函数函数的原型（prototype)
console.log(objFun.prototype.proto==window.Object.prototype)
// true
// 然后构造函数的原型的原型对象(prototype.proto)指向window.Object.protype(对象的原型)
console.log(window.Object.prototype.proto===null)
// 这样的指向关系形成的链式关系就是原型链
//链式查询,查询对象中的属性和方法,会根据这样的原型链查找,直到找到响应的属性和方法.找到window.Object.prototype.proto还没有值,就返回undeifne
</script>
</body>
</html>
开篇
之前对js中的原型链和原型对象有所了解，每当别人问我什么是原型链和原型对象时，我总是用很官方（其实自己不懂）的解释去描述。有一句话说的好：如果你不能把一个很复杂的东西用最简单的话语描述出来，那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。
我们经常会这么写
function Person () {
this.name = 'John';
}
var person = new Person();
Person.prototype.say = function() {
console.log('Hello,' + this.name);
};
person.say();//Hello,John
1
2
3
4
5
6
7
8
上述代码非常简单，Person原型对象定义了公共的say方法，虽然此举在构造实例之后出现，但因为原型方法在调用之前已经声明，因此之后的每个实例将都拥有该方法。从这个简单的例子里，我们可以得出：
原型对象的用途是为每个实例对象存储共享的方法和属性，它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象，因此有别于实例方法或属性，原型对象仅有一份。
所以就会有如下等式成立：
person.say == new Person().say
1
可能我们也会这么写
function Person () {
this.name = 'John';
}
var person = new Person();
Person.prototype = {
say: function() {
console.log('Hello,' + this.name);
}
};
person.say();//person.say is not a function
1
2
3
4
5
6
7
8
9
10
很不幸，person.say方法没有找到，所以报错了。其实这样写的初衷是好的：因为如果想在原型对象上添加更多的属性和方法，我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前，这样就会造成一个问题：
当var person = new Person()时，Person.prototype为：Person {} (当然了，内部还有constructor属性),即Person.prototype指向一个空的对象{}。而对于实例person而言，其内部有一个原型链指针proto,该指针指向了Person.prototype指向的对象，即{}。接下来重置了Person的原型对象，使其指向了另外一个对象,即
Object {say: function}
1
这时person.proto的指向还是没有变，它指向的{}对象里面是没有say方法的，因为此报错。
从这个现象我们可以得出：
在js中，对象在调用一个方法时会首先在自身里寻找是否有该方法，若没有，则去原型链上去寻找，依次层层递进，这里的原型链就是实例对象的proto属性。
若想让上述例子成功运行，最简单有效的方法就是交换构造对象和重置原型对象的顺序，即：
function Person () {
this.name = 'John';
}
Person.prototype = {
say: function() {
console.log('Hello,' + this.name);
}
};
var person = new Person();
person.say();//person.say is not a function
1
2
3
4
5
6
7
8
9
10
一张图让你秒懂原型链
其实，只需要明白原型对象的结构即可：
Function.prototype = {
constructor : Function,
proto : parent prototype,
some prototype properties: ...
};
1
2
3
4
5
总结：
函数的原型对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针proto，该指针指向上一层的原型对象，而上一层的原型对象的结构依然类似，这样利用proto一直指向Object的原型对象上，而Object的原型对象用Object.prototype.proto = null表示原型链的最顶端，如此变形成了javascript的原型链继承，同时也解释了为什么所有的javascript对象都具有Object的基本方法。
Blog同步
JavaScript 队列
题目：
在计算机科学中 队列（queue）是一个抽象的数据结构，队列中的数据条目都是有秩序的。新的条目会被加到 队列 的末尾，旧的条目会从 队列 的头部被移出。
写一个函数 queue ，用一个数组arr和一个数字item作为参数。数字item添加到数组的结尾，然后移出数组的第一个元素，最后队列函数应该返回被删除的元素。
queue([], 1) 应该返回 1
queue([2], 1) 应该返回 2
queue([5,6,7,8,9], 1) 应该返回 5
在 queue(testArr, 10) 之后, testArr[4] 的值应该是 10
通关答案：
function queue(arr, item) {
/下面这两句是关键/
arr.push(item);
return arr.shift();// Change this line
}
console.log(queue([], 1));
console.log(queue([2], 1));
console.log(queue([5,6,7,8,9], 1));
// Test Setup
var testArr = [1,2,3,4,5];
// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(queue(testArr, 10)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com