JavaScript从前端到后端开发单页Web应用的过程

这篇文章给大家介绍JavaScript从前端到后端开发单页Web应用的过程，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

一、第一个单页应用

https://github.com/zhangyue0503/html5js/blob/master/singlepagewebapplications/spa1.html

二、温故JavaScript

A.高级变量提升和执行环境对象

1.提升：JS引擎在进入作用域时，会对代码分两轮处理。第一轮，初始化变量；第二轮，执行代码。

第一轮：声明并初始化函数参数；声明局部变量，包括将匿名函数赋给一个局部变更，但并不初始化它们；声明并初始化函数。

2.每当函数被调用的时候，就会产生一个执行环境。所有函数中定义的变量和函数都是执行环境的一部分。JS把变量作为属性保存在一个对象上，这个对象称为执行环境对象。

3.JS把声明和初始化的变量当作执行环境对象的属性。

4.由于可以在执行环境中调用函数，会产生很多层的深度。在执行环境中调用函数，会创建一个新的嵌套在已存在的执行环境内的执行环境

• 在<script>标签内的所有东西都在全局执行环境中

• 调用first_function，会在全局执行环境中创建一个新的执行环境

• 在first_function中调用second_function，会在first_function中创建一个执行环境。second_function有权限访问在first_function的执行环境以及全局执行环境

• 在全局中调用second_function，没有权限访问first_function中的执行环境

B.作用域链

1.JS引擎首先在局部执行环境对象上查找。如果没有定义，则跳出作用域链，到创建它的执行环境中去，并且在该执行环境对象中查找变量的定义，依此类推，走到找到定义或者到达全局作用域为止。

C.JavaScript对象和原型链

1.JS对象是基于原型（prototype-based）的，我们创建的对象，看起来像我们想要的所有这种类型的对象那样，然后告诉JS引擎，我们想要更多像这样的对象。

2.使用Object.create来创建JS对象时，能增添一种更像是基于原型的感觉，它把原型作为参数并返回一个对象，使用这种方式，可以在原型对象上定义共同的属性和方法，然后使用它来创建多个共享相同属性的对象。

3.原型链描述了JS引擎如何从对象查找到原型以及原型的原型，来定位对象的属性值。如果JS引擎在对象的原型上找不到该属性，它就查找原型的原型，依此类推。当JS到达能用的（generic）Object的原型，原型链就结束了。如果JS在原型链上的所有地方都找不到请求的属性，则返回undefined。

4.原型上的属性就像是从原型创建的对象上的静态变量

D.函数——更深入的窥探

1.函数是JS中的第一类（first-class）对象。它们可以保存在变量中，可以有属性甚至可以作为参数传给调用函数。它们用于控制变量作用域以及提供私有变量和方法。

2.闭包是阻止垃圾回收器将变量从内存中移除的方法，使得在创建变量的执行环境的外面能够访问到该变量

3.必须记住，每次调用函数时都会创建一个唯一的执行环境对象。函数执行完后，执行对象就被丢弃，除非调用者引用 了它。如果函数返回的是一个数字，就不能引用函数的执行环境对象，但是，如果函数返回的是一个更复杂的结构，像是函数对象或者数组，将返回值保存到一个变量上，就创建了一个对执行环境的引用。

三、开发Shell

1.Shell是单页应用的主控制器（master controller）

• 渲染和管理功能容器

• 管理应用状态

• 协调功能模块

2.使用URI来驱动页面状态的解决方案，自然就锚接口模式（anchor interface pattern）

3.锚接口工具：https://github.com/mmikowski/urianchor

使用独立的（independent）和关联的（dependent）键值对的概念来编码

http://……spa.html#!profile=on:uid,suzie|status,green，表示

{

profile:’on’,

_profile={

    uid:’suzie’,

    status:’green'

}

}

4.#!，表示可以被搜索引擎索引

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/3/spa

四、添加功能模块

1.把功能模块当作第三方模块来开发

团队更加高效，开发人员可以根据模块来划分职责

应用常常表现良好，模块只管理它们所负责的应用部分

代码维护和重用变得更加容易，因为模块被很好地隔离了

2.分形MVC（FMVC）：分形是一种模式，它在所有层级上显示为自相似性（self-similarity）。在多个层级上采用重复的MVC就是分形MVC

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/4/spa

五、构建Model

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/5/spa

六、完成Model和Data模块

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/6/spa

七、Web服务器

1.传统Web服务器，比如Apache，是比较弱的消息服务器，它们会为每个连接创建和分配一个进程（或者线程），并且只要链接保持着，进程就必须“活着”。它的理念是在响应请求时，尽可能快地把数据推出去，然后尽可能地关闭连接。

2.Node.js是一个非常出色的消息服务器。由于事件模型（event model），它不会为每个链接创建一个进程。当打开或关闭连接的时候，会进行记录，在打开和关闭连接期间会做些维护工作。因此在一般的硬件上能够处理几万甚至几十万的并发连接。

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/7/spa

八、服务器数据库

https://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/8/spa

九、单页应用发布准备

附录A、JavaScript编码标准

A.代码布局和注释

1.使用一致的缩进和行长

• 每级代码缩进两个空格

• 使用空格缩进而不是制表符，因为制表符的位置还没有标准

• 每行限制为78个字符

2.按段落组织代码

• 按逻辑段落组织代码，段落之间要空行

• 每一行最多只包含一条语句或赋值语句，但是允许每行同时声明多个变量

• 运算符和变量之间要有空格，这样就能更容易地识别变量

• 每个逗号之后要有空格

• 在段落内，相似的运算符要对齐

• 缩进注释，缩进量和所解释的代码相同

• 每条语句的最后要有分号

• 在一个控制结构中的所有语句要用大括号括起来

3.换行要一致

• 在运算符的前面换行，因为人们检查 左列的所有运算符是很容易的

• 把后续的语句缩进一个层次

• 在逗号分隔符的后面换行

• 方括号或者括号单独占一行

4.使用K&R风格的括号

• 如果可能，就使用单行

• 把左括号、左花括号或者左方括号放在开始行的末尾

• 在分隔符（括号、花括号或者方括号）的里面把代码缩进一个层级 

• 右括号、右花括号或者右方括号单独占一行

5.使用空格来区别函数和关键字

• 函数名后面没有空格

• 关键字后面空一格

• 当格式化for语句的时候，在每个分号的后面空一格

6.引号要一致

7.注释解释代码策略

8.给API和TODO添加文档

• 解释后有重要的函数

• 如果彬了代码，要解释为什么

B.变量名

1.使用常见字符

• 变量名使用a-z、A-Z、0-9、下划线和$符号

• 变量名不要以数字开头

2.传达变量作用域

• 当变量作用域是整个模块时使用驼峰式

• 当变量作用域不是整个模块时使用下划线

• 确保所有模块作用域内的变量至少有两个音节

3.要意识到变量类型是很重要的

4.命名布尔变量：使用单词is

5.命名字符串变量：str、id、date、html、msg、name、text、type

6.命名整型变量：int、count、index、i,j,k、time

7.命名数字变量：num、x,y,z、coord、ratio

8.命名正则变量：regex

9.命名数组变量：list

10.命名映射变量：map

11.命名对象变量：单名词、模块作用域的对象变量名具有两个或两个以上音节、jQuery对象有前缀$

12.命名函数变量：遵循动词+名词的形式（fn、curry、destory/remove、empty、fetch、get、make、on、save、set、store、update）、模块作用域两个或两个以上音节

13.命名未知类型的变量：包含data

C.变量声明和赋值

1.创建新对象、映射或数组时，使用{}或[]，不要用new Object()或new Array()

2.使用工具方法复制对象和数组

3.一开始就在函数作用域内，使用单个var关键字，显式地声明所有的变量

4.不要使用块：JS没有块作用域

5.把所有函数赋给变量

6.当函数需要三个以上的参数时，使用具名参数（named arguments），因为位置参数的含义容易忘记且不能进行自我说明

7.每条变量赋值语句点用一行

D.函数

1.使用工厂模式构造对象

2.避免伪类对象构造器：即不要使用new关键字来构造伪类，如果忘记new关键字，就会破坏全局名字空间，如果要使用请首字母大写

3.所有的函数在使用之前都要先声明

4.当函数被立即调用的时候，用括号将它包起来

E.名字空间

1.使用单一的全局函数，把其他所有变量的作用域限制在该函数里面，就可以极大减少全局变量污染

F.文件名和布局

1.名字空间：

• 使用jQuery来操作DOM

• 在构建自己的插件之前，先研究一下有没有第三方代码库

• 避免在HTML中嵌入JS

• 在上线前，对JS和CSS进行压缩（minify）、混淆和gzip压缩

2.JS文件：

• 在HTML中，先引入第三方JS文件

• 接着引入 我们自己的JS文件

• 所有JS文件的后缀都为.js

• 把所有的静态JS文件保存在叫做js的目录下

• 根据名字空间来命名JS文件

• 使用模板来创建所有的JS模板文件

3.JS文件与CSS文件与类名之间保持平行结构

• 为会生成HTML的每个JS文件创建一个CSS文件

• 所有CSS文件的后缀都为.css

• 把所有的CSS文件保存在叫做css的目录下

• 给CSS选择器加上模块名前缀

• 状态指示器使用<名字空间>-x<描述符>和其他共享的类名

G.语法

1.标签：语句的标签（label）是可选的，只有while、for和switch需要，应总使用大写，而且是单名词

2.语句：

• continue除非使用了标签，应该尽量避免使用

• do语句结尾要分号

• if的else应该另起一行

• return不要加括号，表达式和return关键字要在一行避免自动分号

• while语句要尽量避免使用，容易产生死循环

• with应该避免使用

3.其他语法

• 避免逗号运算符

• 避免赋值表达式

• 总是使用===和!==

• 避免混乱的加号和减号

• 不要使用eval：不要使用eval，不要使用Function构造器，不要向setTimeout和setInterval传递字符串

附录B.测试单页应用

• jasmine-query：可以“监视”jQuery事件

• mocha：流行的，和nodeunit类似，但测试报告要更好

• nodeunit：流行的，简单却强大的工具

• patr：使用promise进行异步测试

• vows：流行的异步BDD框架

• zombie：流行的、基于Webkit引擎的无头浏览器，可以测试完整的应用

关于JavaScript从前端到后端开发单页Web应用的过程就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。