SPA-2~单页应用需要了解的相关知识点

SPA主要知识点

1.SPA模型

13.jpg

1.jQuery event function return false

通常在jQuery事件处理程序中返回false
1.告诉jQuery阻止正在操作的对象的默认行为，像点击链接或者选择文字，可以在事件处理程序中调用event.preventDefault()来获得相同的效果。
2.告诉jQuery停止该事件触发父DOM元素上的相同事件（冒泡），可以在事件处理程序中调用event.stopPropagation()来获得相同效果。

2.shell

shell是单页的主控制器，在我们的架构中是必需的。
主要负责：
1.渲染和管理功能容器
2.管理应用状态
3.协调功能模块

3.布局：

33333.jpg

<!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，账户设置和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>
      /*将导航(nav)和content容器放在主容器里面*/
      <div class="spa-shell-main">
        <div class="spa-shell-main-nav"></div>
        <div class="spa-shell-main-content"></div>
      </div>
      /*创建footer容器*/
      <div class="spa-shell-foot"></div>
      /*将chat容器固定在外部容器的右下角*/
      <div class="spa-shell-chat"></div>
      /*创建modal容器，漂浮在其它内容的上面*/
      <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.表明这些类都是由Shell模块(spa/js/spa.shell.js)控制的
2.这能防止和第三方脚本以及我们的其它模块产生名字空间的冲突
3.在调试和查看HTML文档的时候，我们能立即明白哪些元素是由Shell模块生成和控制的。

4.URI

之后会通过这个属性进行应用的状态管理。

5.jquery.urianchor

uri操作插件,以及相关验证的使用说明

6.hasOwnProperty

获取object非prototype的属性

7.

KEYVAL:for(...){
...
}
//http://stackoverflow.com/questions/30154212/what-is-keyval-and-what-its-intended-for

主要是for循环的一个标识，可以配合continue和break操作相应的for循环

8.delete

The delete operator removes a property from an object.

9.自执行匿名函数-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.
－－－即保持变量的私有，防止污染全局环境。

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.
－－－自执行匿名函数其实是一个表达式

(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()

实例化对象，一般使用new操作符，但是这容易被误认为基于类的开发。而用Object.create更符合基于原型开发的感觉。

//工厂模式和Object.create()实例化对象
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');

假设是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);

//这里有一个问题，一旦自执行匿名函数停止执行，在它里面定义的变量都没有了，所以它们是不能更改的
// 即
prison.jail_term='Sentence commuted';
//this still outputs 'Mike Mikowski -20 year term'
console.log(prison.prisoner);

// 但是我们可以把属性变成方法，即通过闭包来保存和设置变量,把变量的值保存在内存中
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.闭包closure

一般函数执行完毕就会释放内存，闭包就是阻止垃圾回收器将变量从内存中移除的方法，使得在创建变量的执行环境的外面能够访问到该变量。闭包最主要的是保存函数的执行环境.函数每次调用都会创建一个唯一的执行环境，函数执行完后，执行环境就会被丢弃，除非有调用者引用了它（闭包）

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