SPA主要知識(shí)點(diǎn)
1.SPA模型
1.jQuery event function return false
通常在jQuery事件處理程序中返回false
1.告訴jQuery阻止正在操作的對(duì)象的默認(rèn)行為撮奏，像點(diǎn)擊鏈接或者選擇文字琐驴，可以在事件處理程序中調(diào)用event.preventDefault()來(lái)獲得相同的效果沐悦。
2.告訴jQuery停止該事件觸發(fā)父DOM元素上的相同事件（冒泡），可以在事件處理程序中調(diào)用event.stopPropagation()來(lái)獲得相同效果鹏氧。
2.shell
shell是單頁(yè)的主控制器墓毒，在我們的架構(gòu)中是必需的恕沫。
主要負(fù)責(zé)：
1.渲染和管理功能容器
2.管理應(yīng)用狀態(tài)
3.協(xié)調(diào)功能模塊
3.布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SPA chapter 1 section 1.2.2</title>
</head>
<body>
<div id="spa">
/*嵌入logo胆萧，賬戶(hù)設(shè)置和head容器中的搜索框*/
<div class="spa-shell-head">
<div class="spa-shell-head-logo"></div>
<div class="spa-shell-head-acct"></div>
<div class="spa-shell-head-search"></div>
</div>
/*將導(dǎo)航(nav)和content容器放在主容器里面*/
<div class="spa-shell-main">
<div class="spa-shell-main-nav"></div>
<div class="spa-shell-main-content"></div>
</div>
/*創(chuàng)建footer容器*/
<div class="spa-shell-foot"></div>
/*將chat容器固定在外部容器的右下角*/
<div class="spa-shell-chat"></div>
/*創(chuàng)建modal容器，漂浮在其它內(nèi)容的上面*/
<div class="spa-shell-modal"></div>
</div>
</body>
</html>
.spa-shell-head,.spa-shell-head-logo,.spa-shell-head-acct,
.spa-shell-head-search,.spa-shell-main,.spa-shell-main-nav,
.spa-shell-main-content,.spa-shell-foot,.spa-shell-chat,
.spa-shell-modal{
position: absolute;
}
.spa-shell-head{
top: 0;
left: 0;
right: 0;
height: 40px;
}
.spa-shell-head-logo{
top: 4px;
left: 4px;
height: 32px;
width: 128px;
background-color: orange;
}
.spa-shell-head-acct{
top:4px;
right: 0;
width: 64px;
height: 32px;
background-color: green;
}
.spa-shell-head-search{
top: 4px;
right: 64px;
width: 248px;
height: 32px;
background:blue;
}
.spa-shell-main{
top:40px;
left: 0;
bottom: 40px;
right: 0;
}
.spa-shell-main-content,
.spa-shell-main-nav{
top:0;
bottom: 0;
}
.spa-shell-main-nav{
width: 250px;
background:#eee;
}
.spa-x-closed .spa-shell-main-nav{
width: 0;
}
.spa-shell-main-content{
left: 250px;
right: 0;
background:#ddd;
}
.spa-shell-closed .spa-shell-main-content{
left:0;
}
.spa-shell-foot{
bottom: 0;
right: 0;
left: 0;
height: 40px;
}
.spa-shell-chat{
bottom: 0;
right: 0;
width: 300px;
height: 15px;
cursor:pointer;
background: red;
z-index: 1;
border-radius: 5px 0 0 0;
}
.spa-shell-chat:hover{
background-color: #a00;
}
.spa-shell-modal{
margin-top: -200px;
margin-left: -200px;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
background:#fff;
border-radius:3px;
z-index: 2;
}
所有選擇器的前綴都是spa-shell- 這樣有很多好處
1.表明這些類(lèi)都是由Shell模塊(spa/js/spa.shell.js)控制的
2.這能防止和第三方腳本以及我們的其它模塊產(chǎn)生名字空間的沖突
3.在調(diào)試和查看HTML文檔的時(shí)候膳叨，我們能立即明白哪些元素是由Shell模塊生成和控制的洽洁。
4.URI
之后會(huì)通過(guò)這個(gè)屬性進(jìn)行應(yīng)用的狀態(tài)管理。
5.jquery.urianchor
uri操作插件,以及相關(guān)驗(yàn)證的使用說(shuō)明
6.hasOwnProperty
獲取object非prototype的屬性
7.
KEYVAL:for(...){
...
}
//http://stackoverflow.com/questions/30154212/what-is-keyval-and-what-its-intended-for
主要是for循環(huán)的一個(gè)標(biāo)識(shí)菲嘴，可以配合continue和break操作相應(yīng)的for循環(huán)
8.delete
The delete operator removes a property from an object.
9.自執(zhí)行匿名函數(shù)-Immediately-invoked function expression
advantage
An immediately-invoked function expression (or IIFE, pronounced "iffy"[1]) is a JavaScript design pattern which produces a lexical scope using JavaScript's function scoping. Immediately-invoked function expressions can be used to avoid variable hoisting from within blocks, protect against polluting the global environment and simultaneously allow public access to methods while retaining privacy for variables defined within the function. This pattern has been referred to as a self-executing anonymous function,[2] but Ben Alman introduced the term IIFE as a more semantically accurate term for the pattern, shortly after its discussion arose on comp.lang.javascript.
－－－即保持變量的私有诡挂，防止污染全局環(huán)境碎浇。
usage
Immediately-invoked function expressions may be written in a number of different ways. A common convention is to enclose the function expression (and optionally its invocation operator—Douglas Crockford's style) in parentheses to explicitly tell the parser to expect an expression, since in JavaScript parentheses can't contain statements. Otherwise, in most situations, when the parser encounters the function keyword, it treats it as a function declaration (statement), and not as a function expression.
－－－自執(zhí)行匿名函數(shù)其實(shí)是一個(gè)表達(dá)式
(function () { … })();
(function () { … }());
!function () { … }();
~function () { … }();
-function () { … }();
+function () { … }();
//In contexts where an expression is expected, wrapping in parentheses is not necessary:
var f = function () { … }();
true && function () { … }();
0, function () { … }();
10.Object.create()
實(shí)例化對(duì)象，一般使用new操作符璃俗，但是這容易被誤認(rèn)為基于類(lèi)的開(kāi)發(fā)。而用Object.create更符合基于原型開(kāi)發(fā)的感覺(jué)悉默。
//工廠(chǎng)模式和Object.create()實(shí)例化對(duì)象
var proto={
sentence:4,
probation:2
};
var makePrisoner=function(name,id){
var prisoner=Object.create(proto);
prisoner.name=name;
prisoner.id=id;
return prisoner;
};
var firstPrisoner=makePrisoner('Joe','12A');
var secondPrisoner=makePrisoner('Sam','2BC');
假設(shè)是ie6城豁，7，8
//Cross-browser method to support Object.create()
var objectCreate=function(arg){
if(!arg){return {};}
function obj(){};
obj.prototype=arg;
return new obj;
}
11.模塊模式為什么使用閉包
var prison=(function(){
var prisoner_name='Mike Mikowski',
jail_term='20 year term';
return {
prisoner:prisoner_name+'-'+jail_term,
sentence:jail_term
};
})();
//this is undefined ,no prisoner_name for you
console.log(prison.prisoner_name);
//this outputs 'Mike Mikowski -20 year term'
console.log(prison.prisoner);
//這里有一個(gè)問(wèn)題抄课，一旦自執(zhí)行匿名函數(shù)停止執(zhí)行唱星，在它里面定義的變量都沒(méi)有了，所以它們是不能更改的
// 即
prison.jail_term='Sentence commuted';
//this still outputs 'Mike Mikowski -20 year term'
console.log(prison.prisoner);
// 但是我們可以把屬性變成方法跟磨，即通過(guò)閉包來(lái)保存和設(shè)置變量,把變量的值保存在內(nèi)存中
var prison=(function(){
var prisoner_name='Mike Mikowski',
jail_term='20 year term';
return {
prisoner:function(){
return prisoner_name + '-'+jail_term;
},
setJailTerm:function(){
jail_term=term;
}
}
})()
//this outputs 'Mike Mikowski -20 year term'
console.log(prison.prisoner);
prison.setJailTerm('Sentence commuted');
//this now outputs 'Mike Mikowski - Sentence commuted'
console.log(prison.prisoner());
12.閉包c(diǎn)losure
一般函數(shù)執(zhí)行完畢就會(huì)釋放內(nèi)存间聊，閉包就是阻止垃圾回收器將變量從內(nèi)存中移除的方法，使得在創(chuàng)建變量的執(zhí)行環(huán)境的外面能夠訪(fǎng)問(wèn)到該變量抵拘。閉包最主要的是保存函數(shù)的執(zhí)行環(huán)境.函數(shù)每次調(diào)用都會(huì)創(chuàng)建一個(gè)唯一的執(zhí)行環(huán)境哎榴，函數(shù)執(zhí)行完后，執(zhí)行環(huán)境就會(huì)被丟棄僵蛛，除非有調(diào)用者引用了它（閉包）
Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions 'remember' the environment in which they were created.
var makePrison=function(prisoner){
return function(){
return prisoner;
}
};
var joshPrison=makePrison('Josh Powell');
var mikePrison=makePrison('Mike Mikowski');
console.log(joshPrison);//outputs Josh Powell
console.log(mikePrison);//outputs Mike Mikowski
