单页Web应用:JavaScript从前端到后端

一、第一个单页应用

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引擎的无头浏览器,可以测试完整的应用

原文发布于微信公众号 - 硬核项目经理(fullstackpm)

原文发表时间:2017-07-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券