首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >单页Web应用:JavaScript从前端到后端

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

作者头像
硬核项目经理
发布2019-08-06 15:26:42
1.2K0
发布2019-08-06 15:26:42
举报

一、第一个单页应用

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引擎的无头浏览器,可以测试完整的应用
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-07-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 码农老张 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档