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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
jQuery 擁有可操作 HTML 元素和屬性的強大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
提示：DOM = Document Object Model（文檔對象模型）
DOM 定義訪問 HTML 和 XML 文檔的標準：
“W3C 文檔對象模型獨立于平臺和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式?！?br />
獲得內容 - 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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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 成為理想的數據交換語言。 易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。
只需要記?。?br />
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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn