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

这篇文章给大家介绍JavaScript从前端到后端开发单页Web应用的过程，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。一、第一个单页应用https://github.com/zhangyue0503/html5js/blob/master/singlepagewebapplications/spa1.html二、温故JavaScriptA.高级变量提升和执行环境对象1.提升：JS引擎在进入作用域时，会对代码分两轮处理。第一轮，初始化变量；第二轮，执行代码。第一轮：声明并初始化函数参数；声明局部变量，包括将匿名函数赋给一个局部变更，但并不初始化它们；声明并初始化函数。2.每当函数被调用的时候，就会产生一个执行环境。所有函数中定义的变量和函数都是执行环境的一部分。JS把变量作为属性保存在一个对象上，这个对象称为执行环境对象。3.JS把声明和初始化的变量当作执行环境对象的属性。4.由于可以在执行环境中调用函数，会产生很多层的深度。在执行环境中调用函数，会创建一个新的嵌套在已存在的执行环境内的执行环境在调用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.必须记住，每次调用函数时都会创建一个唯一的执行环境对象。函数执行完后，执行对象就被丢弃，除非调用者引用了它。如果函数返回的是一个数字，就不能引用函数的执行环境对象，但是，如果函数返回的是一个更复杂的结构，像是函数对象或者数组，将返回值保存到一个变量上，就创建了一个对执行环境的引用。三、开发Shell1.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就是分形MVChttps://github.com/zhangyue0503/html5js/tree/master/singlepagewebapplications/4/spa五、构建Modelhttps://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.命名布尔变量：使用单词is5.命名字符串变量：str、id、date、html、msg、name、text、type6.命名整型变量：int、count、index、i,j,k、time7.命名数字变量：num、x,y,z、coord、ratio8.命名正则变量：regex9.命名数组变量：list10.命名映射变量：map11.命名对象变量：单名词、模块作用域的对象变量名具有两个或两个以上音节、jQuery对象有前缀$12.命名函数变量：遵循动词+名词的形式（fn、curry、destory/remove、empty、fetch、get、make、on、save、set、store、update）、模块作用域两个或两个以上音节13.命名未知类型的变量：包含dataC.变量声明和赋值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应用的过程就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。