web前端和后端的不同点是什么呢

前端开发主要做的是用户所能看到的前端展示界面；后端开发主要做的是逻辑功能等模块。其实主要区别体现在以下两个方面：知识结构与实现和工作职责。

对于如何学习WEB前端或后端，或者在学习过程中遇见问题自己无法解决，可以到我的学习交流裙，里面有最新的学习路线和教程，可以跟着学，有什么不懂的地方可以随时在里面问。

1、知识结构

（1）展示的方式不同

前端指的是用户可见的界面，网站前端页面也就是网页的页面开发，比如网页上的特效、布局、、视频，音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并配合后端做网页的数据显示和交互等可视方面的工作内容。

后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多的多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。

（2）所用的技术、技能与工具不同

前端开发，就是要创造上面提到的网站面向用户的部分背后的代码，并通过建立框架，构建沉浸性的用户体验。为了实现这个目标，开发需要熟练运用下列语言、框架、工具库：

后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建或更新Web应用。但在写代码之前，他们需要与客户沟通，了解其实际需求并转化为技术目标，制定最有效且精简的方案来进行实现。

（3）所用技术不同

前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Nodejs、Webpack，AngularJs，ReactJs，VueJs等技术。

后端开发以java为例主要用到的是包括但不限于StrutsspringspringmvcHibernate>

2、工作职责

前端工程师主要的工作职责分为三大部分，分别是传统的Web前端开发，移动端开发和大数据呈现端开发。Web前端开发主要针对的是PC端开发任务；

移动端开发则包括Android开发、iOS开发和各种小程序开发，在移动互联网迅速发展的带动下，移动端的开发任务量是比较大的，随着5G标准的落地，未来移动端的开发任务将得到进一步的拓展；大数据呈现则主要是基于已有的平台完成最终分析结果的呈现，呈现方式通常也有多种选择，比如大屏展示等。

后端工程师的主要职责也集中在三大部分，分别是平台设计、接口设计和功能实现。平台设计主要是搭建后端的支撑服务容器；接口设计主要针对于不同行业进行相应的功能接口设计，通常一个平台有多套接口，就像卫星导航平台设有民用和军用两套接口一样；功能实现则是完成具体的业务逻辑实现。

扩展资料：

前端和后端的应用范围

1、PC(PersonalComputer)即个人电脑。

目前电脑端仍是前端一个主要的领域，主要分为面向大众的各类网站，如新闻媒体、社交、电商、论坛等和面向管理员的各种CMS(内容管理系统)和其它的后台管理系统。

2、WebApp是指使用Web开发技术，实现的有较好用户体验的Web应用程序。

它是运行在手机和桌面端浏览中，随着移动端网络速度的提升，WebApp为我们提供了很大的便利。此外近两年Google提出了一种新的WebApp形态，即PWA(渐进增强WebAPP)。

3、WeChat(微信)这个平台，拥有大量的用户群体，因此它也是我们前端开发另一个重要的领域。微信的公众号与订阅号为市场营销和自媒体从业者，打造了一个新的天地。

4、HybridApp(混合应用)是指介于WebApp、原生App(主要是Android或iOS)之间的App，它兼具原生App良好用户交互体验的优势和WebApp跨平台开发的优势。

5、Game（游戏），HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后，就开始一发不可收拾。不过现在游戏开发变得越来越复杂，需要制作各种炫丽炫丽的效果，还要制作各炫丽于2D或者3D的场景。

6、Desktop桌面应用软件，就是我们日常生活中电脑中安装的各类软件。早期要开发桌面应用程序，就需要有专门的语言UI(界面)库支持，如C中的Qt库、MFC库，Java的Swing、Python的PyQT等，否则语言是没办法进行快速界面开发。

7、ServerNodejs一发布，立刻在前端工程师中引起了轩然大波，前端工程师们几乎立刻对这一项技术表露出了相当大的热情和期待。看到Nodejs这个名字，初学者可能会误以为这是一个Java应用，事实上，Nodejs采用C语言编写而成，是一个Java的运行环境。

如何快速开发一款火爆的小游戏？“火爆”是一个偏运营的词，在小游戏上线120天《微信开发者》公众号有一篇推文，其中有几个数字或许可以用来描述“火爆”这个词。截止微信小游戏正式允许第三方开发者发布已有22天，对外发布的小游戏达300多款，注册用户总规模过亿的游戏有数款，安卓月流水过千万的也有数款。

该文还提到与火爆相关的两个姿势。一是社交匹配度，在小游戏这样一个去中心化的大背景下，让游戏内容和微信社交相结合是一个很重要的点，同时开发者也需要在利用社交互动提升用户体验和群聊分享造成用户骚扰之间选择一个平衡点，过犹不及。第二是 *** 作简便度，说的是游戏易上手 *** 作简单。这是我们根据游戏成为爆款后观察得出的结论，并不是说具备这两个特性就一定能开发出一款火爆的游戏，并且新的爆款游戏也不一定符合这些特点，仅供参考。

如何快速开发一款火爆的小游戏？“火爆”是一个偏运营的词，在小游戏上线120天《微信开发者》公众号有一篇推文，其中有几个数字或许可以用来描述“火爆”这个词。截止微信小游戏正式允许第三方开发者发布已有22天，对外发布的小游戏达300多款，注册用户总规模过亿的游戏有数款，安卓月流水过千万的也有数款。

该文还提到与火爆相关的两个姿势。一是社交匹配度，在小游戏这样一个去中心化的大背景下，让游戏内容和微信社交相结合是一个很重要的点，同时开发者也需要在利用社交互动提升用户体验和群聊分享造成用户骚扰之间选择一个平衡点，过犹不及。第二是 *** 作简便度，说的是游戏易上手 *** 作简单。这是我们根据游戏成为爆款后观察得出的结论，并不是说具备这两个特性就一定能开发出一款火爆的游戏，并且新的爆款游戏也不一定符合这些特点，仅供参考。

今天介绍的内容更倾向于技术方面，所以“火爆”就从标题里面去掉了，并且也不会介绍具体的游戏逻辑如何开发，而是更偏向于如何利用好微信的开放能力开发一款小游戏。

什么是“小游戏”？小游戏是什么？

首先为大家介绍一下小游戏是什么。从普通用户的视角看，小游戏是小程序的一个子类目，可在微信内被便捷的获取和传播，即点即玩，具备出色的用户体验。小游戏是小程序，普通用户分不清也无需分清。

小游戏Runtime

如果放大小游戏的Runtime可以看到很多的细节，这是一个典型的分层架构：

最上层蓝色部分，是游戏代码，分为游戏逻辑，游戏引擎、weapp-adapter三部分。大部分游戏开发会用到一些引擎的工具、工作流，以及利用引擎封装的高层API去实现游戏逻辑。其次是weapp-adapter，因为小游戏的底层一方面不是webview，可以简单看成是webview经过精简、优化过后的平台；另一方面核心能力的实现上却参考了webview。所以这里如果有一个适配器，把小游戏的底层API——wxAPI适配到一个接近webview的接口，对上层引擎、已存在的游戏接入微信小游戏平台则会更加容易，这个就是weapp-adapter的作用。其中只有游戏逻辑是必要的。

可以看到，在架构上小游戏和小程序是有差别的，小游戏没有页面概念的，wxss/wxml不再存在。其次，底层实现也不是webview，小游戏和webview的关系只能说是渲染相关的核心能力可以通过weapp-adapter的简单适配保持接口一致，但同时很多webview上存在的功能并没有对等的实现，比如小游戏就没有DOM/BOM的概念，也没有全局的document/window对象。

小游戏的入口为gamejs文件，语言为Javascript，但有一些限制，比如禁止执行动态代码，因此eval、newFunction等能力是不支持的。配置为gamejson，可以配置横竖屏、接口超时等参数。js里面可以组合wxAPI的能力来实现游戏逻辑，非代码类的资源应该尽量放到cdn，减少整个代码包打包后的大小，以加快用户首次进入时的速度，微信对首包的大小目前限制为4MB。

WebviewAdapter

下面来说一下WebviewAdapter，它的初衷是为了让游戏开发者更好地熟悉我们的平台，所以我们的平台在能力上会尽可能地与webview做一些适配，其实这个适配也是很简单的一层。比如说我们在浏览器里面使用image对象创建一个，而在小游戏里是通过wxcreateimage来创建的，在代码中需要做一个简单的适配。

以此类推，常见的Canvas、document对象都是在Adapter中通过一个简单的适配实现的，大家可以研究链接中的代码。之后官方不会继续维护这个Adapter，我们会更专注于底层能力的建设。

小游戏能力概览

下图是小游戏能力的概览，小游戏能力的迭代比较快，部分能力还没有来得及罗列出来。比如最近刚发布的游戏圈、健康系统防沉迷相关的一些接口。

我们先看一下基础能力，在渲染这部分WebGL10和Canvas2D都是支持的，这里的Canvas更接近于浏览器里面的标准。同时，这里提到的可控帧率的概念，如果小游戏在后台运行的话，可以尽量将帧率降低。

在多媒体部分，小游戏还不能像小程序一样实现实时的音频视频流，这是我们在后续要进一步支持的。网络IO的部分与小程序也是类似的，我们也提供了一些UI的组件，比如说拉起键盘，模态对话框等。

小游戏的社交开放能力现在已经对外了。其中最重要的一个能力是在开放域将微信的好友关系开放出去，给开发者使用，考虑到对用户隐私的保护会有一些设计上的限制。

因为小游戏去中心化的特点，分享这一部分也是非常重要的，开发者要考虑如何将这个能力利用起来。在代码方面，因为首包限制是4MB，但部分小游戏的代码量可能比较大。我们最近也在规划一个分包的能力，允许异步加载代码并执行，但这个代码是一定要经过我们审核的。

如何开发一款小游戏？

那么如何开发一款小游戏？因为我本人也只是开发过一些简单的游戏，并不是专业进行游戏开发，所以接下来我会更多地介绍一下如何利用微信的能力来开发小游戏。

选择小游戏引擎

微信跟引擎商也有比较密切的合作，一般现在的游戏引擎都会支持发布到多个平台，对微信小游戏这个新平台而言，已经有一部分引擎做了适配，比如CocosCreator、EgretEngine以及LayAirEngine。适配的主要工作，类似之前提到的weapp-adapter，把wxAPI的能力，和引擎衔接起来。

比如引擎一般会把小游戏平台和webview平台对标，适配过程就是把wxAPI对应到webview的能力，同时把只存在于webview能力的依赖去除，比如不再依赖BOM、DOM。已适配的引擎都有相应的文章介绍如何把游戏发布到微信小游戏平台。

设备/环境适配

小游戏会有API提供获取屏幕的宽高、设备像素比等能力。小游戏开发完成后，在开发者工具也可以发起真机测试的请求，微信提供了不同设备的测试集群，帮助开发者提前去发现问题。基础库提供的wxAPI本身是一个不断迭代更新的过程，对于使用了新能力的小游戏，需要做低版本兼容。

微信登录

小游戏的登录过程，跟小程序是类似的。需要用户自己去定义登录状态。appsecret/session_key代表的是小游戏开发者和微信平台之间的一种信任约定，比如支付、上报托管数据，平台方需要验证access_token(只有appsecret才能换得到)，和用户相关的还要验证session_key的签名，才能保证请求来自于小游戏开发者/用户，而不是恶意的第三方和随意捏造的用户。

access_token是一种应用态的access_token，和用户无关，需要保证全局维护一份，应该有一个中控的模块去保证access_token有效，同时在有效期内直接使用本地cache的access_token，而不是每次使用都去生成新的access_token，否则可能遇到调用频率限制的错误而影响服务。切记appsecret/session_key不要放到前端代码中去，否则可能会被坏人利用损坏小游戏开发者/用户的权益。

缓存

缓存类型包括数据缓存和文件缓存两类。数据缓存即key-value存储，适合结构化类型的小数据存储，上限为10MB。文件缓存提供了一个完整的文件系统API，包括目录/文件的增删改读，适合针对经常使用的网络资源做本地缓存，上限是50MB。

和浏览器不同的是，微信只提供了基本的存储管理能力，并不对存储什么，和存储满时删除什么做一些 *** 作。开发者自行灵活定义缓存以及淘汰策略，比如对经常访问的资源存储到文件系统以及在文件存储满时，清理一些最近不常访问的文件。

开放数据域

开放数据域是一个封闭、独立的JavaScript作用域，和执行游戏逻辑的环境——称为“主域”隔离。其目的是在保证用户隐私的前提下开放用户数据给第三方，提升小游戏的整体用户体验。以下为物理视图，主域的入口为gamejs，开放数据域则是一个独立的目录，其入口文件为indexjs。

主域和开放数据域的通信受到严格的管制，基本原则是只进不“出”。

只进：允许外部的数据进入开放数据域，即主域可以随时postMessage到开放域，以及开放域引用主域准备好的本地资源

不“出”：不允许开放数据域的数据被上传到第三方服务器去。因为开放数据域里面，indexjs是可以直接访问到用户敏感数据的，比如同玩好友数据。当然最终开放数据域需要indexjs在综合各种数据后把数据以图形图像的方式渲染到sharedCanvas上，在主语sharedCanvas允许draw到主域的上屏Canvas上，最终用户会在显示屏上看到gamejs画出来的好友排行榜、群排行榜或好友超越等社交互动信息。

在开发数据域中的数据，开发者没法把数据拿出去和游戏数据做关联，所以如果需要在开放域下展示的游戏数据，比如分数，开发者需要将该数据通过上报接口把游戏数据托管到平台。这样就可以在开发数据域里面就取到相关数据，其应用场景有好友排行、群排行榜、超越好友提示等。

分享

包括自定义分享和系统菜单分享，可以分享到群聊、单聊。也可以把分享上下文与特定的群关联，实现一些群PK、群排行榜的场景。分享是一把双刃剑，需要谨慎使用，一方面避免过度骚扰用户/群聊，另一方面增强社交互动提供好的游戏体验，需要找到一个合适的平衡点。

支付

小游戏在安卓下支持虚拟支付，它的方式目前只有一种：即货币托管的方式。主要分为2个流程：

1充值：RMB->游戏币，这里开发者只需要拉起支付的流程，平台负责把用户RMB兑换成对应的游戏币，存储到用户对应的游戏帐号上

2使用游戏币购买道具：开发者可以扣除对应的游戏币，给用户发放游戏内道具，扣除游戏币的过程需要有一定的事务机制，去保证在网络异常的情况下交易正常。扣除游戏币的接口支持根据订单id去重，意味着网络超时等情况下，开发者可用同样的订单id去重试扣除，直至返回明确的响应。

以下为简单时序图，部分角色针对开发者无需关心的部分做了相应简化处理：

性能

小游戏常见的性能问题，一般是内存造成的。如果内存占用太多会被微信客户端主动关闭，因此开发者在用户游戏过程中要及时释放不再使用的内存（js代码去除引用，或主动调用对应资源的释放接口，如果有的话），特别是Canvas和Image类大型对象，同时可以主动调用wxtriggerGC触发底层回收对应资源。

对于和游戏逻辑相对独立的工作，可以考虑在worker中去实现，小游戏提供了独立的worker线程执行js逻辑的能力。

版本更新机制

小游戏启动的过程分为冷启动和热启动。冷启动是指内存中无该小游戏的运行实例的情况下，启动小游戏的过程；热启动是指小游戏的运行实例在内存中还存在，只是暂时切换到了后台，这时用户再次触发小游戏回到前台的过程。

小游戏会在冷启动时检查小游戏的版本，如有新版本，在下载回本地后，下一次冷启动即可使用最新版。当然，我们也提供了API可以供开发者决策在有版本可用时，是否需要强制更新。

运维

特别提醒，小游戏有完善的后端监控，可以通过“运维中心”开启，比如脚本错误监控。脚本错误主要由运行过程中未捕获的异常触发，需要重点关注。该类异常，可能会导致用户小游戏前端的js逻辑暂停执行。

同时，平台也提供了完善的数据分析服务，可以通过“小游戏数据助手”进行数据分析。

本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用"愉快"来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然，如果我说的有不科学的地方还希望各路前辈多多指教。下面分条目列出各种规范要求，这些要求都是针对同事编码毛病提出来的，好些行业约定的其它规范可能不会再提及。1 保证代码压缩后不出错对于大型的JavaScript项目，一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理，比如可以利用Google Closure Compiler Service对代码进行压缩，新版jQuery已改用这一工具对代码进行压缩，这一般会去掉开发时写的注释，除去所有空格和换行，甚至可以把原来较长的变量名替换成短且无意义的变量名，这样做的目的是加快文件的下载速度，同时也减小网站访问带来的额外数据流量，另外在代码保护上也起到了一点点作用，至少压缩后的代码即使被还原还是没那么容易一下读懂的。要想代码能正确通过压缩，一般要求语句都要以分号正常结束，大括号也要严格结束等，具体还要看压缩工具的要求。所以如果一开始没有按标准来做，等压缩出错后再回去找错误那是浪费时间。2 保证代码能通过特定IDE的自动格式化功能一般较为完善的开发工具（比如Aptana Studio）都有代码"自动格式"化功能，这一功能帮助实现统一换行、缩进、空格等代码编排，你可以设置自己喜欢的格式标准，比如左大括号{是否另起一行。达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。你同事需要阅读你的代码，可能是因为你写的是通用方法，他在其它模块开发过程中也要使用到，阅读你的代码能最深入了解方法调用和实现的细节，这是简单API文档不能达到的效果。3 使用标准的文档注释这一要求算是最基本的，这有利于在方法调用处看到方法的具体传参提示，也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读，你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台，就像facebookcom应用，那么你的文档是给天下所有开发者看的。另外编写完整注释，也更方便团队成员阅读你的代码，通过你的参数描述，团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护，这样即使再大的项目，过了很长时间后，回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。4 使用规范有意义的变量名使用规范有意义的变量名可以提高代码的可读性，作为大项目开发成员，自己写的代码不仅仅要让别人容易看懂。开发大项目，其实每个人写的代码量可能都比较大，规范命名，日后自己看回自己的代码也显的清晰易懂，比如日后系统升级或新增功能，修改起代码来也轻松多了。如果到头发现自己当初写的代码现在看不太懂了，那还真是天大的笑话了。当然，使用有意义的变量名也尽量使用标准的命名，比如像这里：var me = this也许没有var self = this好，因为self是Python中的关键字，在Python中self就是通常语言this的用法。再看下面一个例子，加s显然比没有加来的科学些，这样可以知道这个变量名存的是复数，可能是数组等： var li = documentgetElementsByTagName('li') var lis = documentgetElementsByTagName('li') 5 不使用生偏语法JavaScript作为一门动态脚本语言，灵活性既是优点也是缺点，众所周知，动态语言不同层次开发人员对实现同样一个功能写出来的代码在规范或语法上会存在较大的差别。不管怎么样，规范编码少搞怪，不把简单问题复杂化，不违反代码易读性原则才是大家应该做的。比如这语句：typeof(b) == 'string' && alert(b)应该改为：if (typeof(b) == 'string') alert(b)，像前面那种用法，利用了&&运算符解析机制：如果检测到&&前语句返回false就不再检测后面语句，在代码优化方面也有提到把最可能出现的情况首先判断，像这种写法如果条件少还好，如果条件较多而且语句也长，那代码可读性就相当差。又比如：+function(a){var p = a;}( 'a')应该改为：(function(a){var p = a;})( 'a')，其实function前面的+号与包含function的()括号作用是一样的，都是起运算优先作用，后者是常见且容易看明白的防止变量污染的做法，比如好些流行JavaScript框架就是采用后面这种方式。再说个降低代码可读性的例子，如：function getPostionTxt(type){return type == 2 "野外" : (type == 3 "商城" : (type == 4 "副本" : null));}应该改成：function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"};if (typeData[type]) return typeData[type]; else return null;}。如果type是从0开始不间断的整数，那么直接使用数组还更简单，这种结果看起来就清晰多了，看到前面那种多层三元表达式嵌套头不晕吗。6 不在语句非赋值地方出生中文语句中不应该出现中文我想一般人都知道，虽然这样做不影响程序运行，但是显然有背行业标准要求，当然我们也不是在使用"易语言"做开发。关于这一个问题，我本来不想把它拿出来说的，但我确实遇到有人这样做的，也不知道是不是因为他的英语实在太烂了，至少还可以用拼音吧，另外寻求翻译工具帮忙也不错的选择。我举例如下，像以下写法出现在教学中倒还可以理解：thisuser['名字'] = '张三' 或者 thisuser名字 = '张三'7 明确定义函数固定数量的参数固定数量参数的函数内部不使用arguments去获取参数，因为这样，你定义的方法如果包含较多的脚本，就不能一眼看到这个方法接受些什么参数以及参数的个数是多少。比如像下面： var $ = function(){return documentgetElementById(arguments[0]);}应该改成：var $ = function(elemID){return documentgetElementById(elemID);} 8 不必热衷动态事件绑定虽然知道事件可以动态绑定，比如使用addEventListener或者使用jQuery的bind方法，也知道采用动态事件绑定可以让XHTML更干净，但是一般情况下我还是建议直接把事件写在DOM节点上，我认为这样可以使代码变得更容易维护，因为这样做，我们在查看源代码的时候就可以容易地知道什么Element绑定了什么方法，简单说这样更容易知道一个按钮或链接点击时调了什么方法脚本。9 降低代码与XHTML的耦合性不要过于依赖DOM的一些内容特征来调用不同的脚本代码，而应该定义不同功能的方法，然后在DOM上调用，这样不管DOM是按钮还是链接，方法的调用都是一样的，比如像下面的实现显然会存在问题： function myBtnClick(obj) { if (/确定/test(objinnerHTML)) alert('OK'); else if (/取消/test(objinnerHTML)) alert('Cancel'); else alert('Other'); } <a herf="javascript:;" onclick="myBtnClick(this)">确定</a><a herf="javascript:;" onclick="myBtnClick(this)">取消</a> 上面例子其实在一个函数内处理了两件事情，应该分成两个函数，像上面的写法，如果把链接换成按钮，比如改成这样：<input type="button" onclick="myBtnClick(this)" value="确定" />，那么myBtnClick函数内部的objinnerHTML就出问题了，因为此时应该objvalue才对，另外如果把按钮名称由中文改为英文也会出问题，所以这种做法问题太多了。10 一个函数应该返回统一的数据类型因为JavaScrip是弱类型的，在编写函数的时候有些人对于返回类型的处理显得比较随便，我觉得应该像强类型语言那样返回，看看下面的两个例子： function getUserName(userID) { if (data[userID]) return data[userID]; else return false; } 应该改为： function getUserName(userID) { if (data[userID]) return data[userID]; else return ""; } 这个方法如果在C#中定义，我们知道它准备返回的数据类型应该是字符串，所以如果没有找到这个数据我们就应该返回空的字符串，而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用，因为返回的空字符串在逻辑判断上可被认作"非"，即与false一样，除非我们使用全等于"==="或typeof进行判断。11 规范定义JSON对象，补全双引号使用标准肯定是有好处的，那么为什么还是有人不使用标准呢？我想这可能是懒或习惯问题。也许还会有人跟我说，少写引号可以减轻文件体积，我认为这有道理但不是重点。对于服务器返回的JSON数据，使用标准结构可以利用Firefox浏览器的JSONView插件方便查看（像查看XML那样树形显示），另外你如果使用jQuery做开发，最新版本jQuery14+是对JSON格式有更高要求的，具体的可以自己查阅jQuery更新文档。比如：{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。12 不在文件中留下未来确定不再使用的代码片段当代码调整或重构后，之前编写的不再使用的代码应该及时删除，如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积，这对团队其它成员甚至自己都起到一定干扰作用，怕将来自己看回代码都搞不懂这方法是干什么的，是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。13 不重复定义其他团队成员已经实现的方法对于大型项目，一般会有部分开发成员实现一些通用方法，而另外一些开发成员则要去熟悉这些通用方法，然后在自己编写模块遇到有调用的需要就直接调用，而不是像有些开发者喜欢"单干"，根本不会阅读这些通用方法文档，在自己代码中又写了一遍实现，这不仅产生多余的代码量，当然也是会影响团队开发效率的，这是没有团队合作精神的表现，是重复造轮子的悲剧。比如在通用类文件Commonjs有定义function $(elemID){return documentgetElementById(elemID)}那么就不应该在Mailjs中再次出现这一功能函数的重复定义，对于一些复杂的方法更应该如此。14 调用合适的方法当有几个方法都可以实现同类功能的时候，我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$getJSON，而不是使用$get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$post也应该采用指定返回数据类型（设置dataType参数）的做法。如果使用$getJSON，在代码中我们一眼能看出本次请求服务器返回的是JSON。温馨提示：jQuery14后，如果服务器有设置数据输出的ContentType，比如ASPNET C#设置 ResponseContentType = "application/json"，那么$get将与$getJSON的使用没有什么区别。15 使用合适的控件存储合适的数据曾发现有人利用DIV来保存JSON数据，以待页面下载后将来使用，像这样：<div id="json">{ "name":"Tom"}</div>，显然这个DIV不是用来界面显示的，如果非要这样做，达到使用HTML文件进行数据缓存的作用，至少改成用隐藏域来存这数据更合理，比如改成：<input type="hidden" value=" { "name":"Tom"}" />。其实也可以利用window对象来保存一些数据，像上面的例子，我们可以在AJAX请求页直接包含这样的脚本块：<script>windowuserData = { "name":"Tom"};</script>，当在AJAX请求回调函数中执行完$( "#MyDiv ")html(data)后，在window上就马上有了这一变量。如果采用第一种方法，将不可避免eval(documentgetElementById("UserData")innerHTML)。如果在window对象存放大量数据的话，这些数据不用时要及时手动清理它们，它们是要等浏览器刷新或重启后才会消失的，这就会增加内存开销。16 永远不要忽略代码优化工作代码最优化是每个程序员应该努力达到的目标，也应该成为程序员永远的追求。写代码的时候，不应该急着把功能实现出来，要想一下如何写代码，代码的执行效率才是较好的。举个例子：假设有定义getElementById的快捷方法functoin $(elemID){return documentgetElementById(elemID)}，那么有人可能会写出这样的代码$("MyDiv")parentNoderemoveChild($("MyDiv"))，其实这里执行了两次getElementById DOM查找，如果改成这样将更好：var myDiv = $("MyDiv"); myDivparentNoderemoveChild(myDiv)。还好getElementById的DOM查找算比较快，如果换成getElementsByTagName则更应该注重优化了。jQuery开发团队也有提醒大家要注意这方面的问题。当然，代码优化技巧也是需要个人不断积累的。曾有朋友跟我说他写网站后台代码从来不用考虑优化的，因为他们网站用的是至强四核服务器，我觉得这是很可笑的。17 会分析策划文档，能用面向对象方法进行接口定义和代码组织这一能力对于每一个程序员来说都是非常重要的，这也是决定一个程序员水平高低的一个重要因素。能够把需求细化并抽象出不同的类，然后有条理地编写代码，使代码结构清晰，可读性高，代码易于维护，不至于太过程化而且杂乱无章，这样才算是一个优秀的程序员。

H5游戏是H5很重要的一种场景类型，也可以说H5这个词蹦到大众眼前就是因为《围住神经猫》这个H5游戏爆火刷屏。

从2014到2020年，我们也看到了很多好玩的H5小游戏，不过这些H5小游戏都能看到其他app上的影子，主要还是因为H5游戏主要用来营销宣传，目前能制作平台也比较多，但专业度不同，这里较低的灵活性和简易的游戏创建就不多介绍了。

白鹭引擎-Egret开放平台

简介：Egret是一套完整的HTML5游戏开发解决方案。Egret中包含多个工具以及项目。EgretEngine是一个基于TypeScript语言开发的HTML5游戏引擎，该项目在BSD许可证下发布。

国内做游戏开发领头羊，专注在游戏开发的领域，也可以制作出web端的小游戏，整体界面很像flash，如果你有制作flash的基础，制作应该比较轻松，适合专业的游戏制作人员。

意派Epub360-专业的H5页面制作工具

意派Epub360属于专业级别的H5制作网站，能实现交互动画效果；较高级的交互设定，比如手势触发、摇一摇、拖拽交互、碰撞检测、重力感应、关联控制等；同时支持用户信息获取，包括昵称头像、拍照、录音等功能，结合投票、评论、助力、信息列表组件，轻松实现社交互动类H5设计

由于可实现的功能较多，自然 *** 作起来比较复杂，不过也可以直接套用模板进行修改。

可加入系统自带的各类特效。参数精确地控制交互，加入交互逻辑，很适合有较多H5制作经验的老司机。

补充一些：

关于编辑器专业能力

专业交互功能

支持专业级动画控制、交互设定、社交应用与数据应用，保障企业的商业需求顺利实现。

*** 作简易、流畅

采用由简到难递进式产品设计模式，效果组件化，减少用户上手难度，稳定的 *** 作环境助力企业持续创意输出。

提供企业/媒体培训和定制服务

我们为企业/媒体单位提供H5工具培训及定制服务，定制服务包含扫码签到、大屏互动、H5游戏等多种场景，是上海解放日报、招商银行、广西日报等多家单位长期合作伙伴。

提供优质模板库

提供丰富的模板库，500优质的企业H5模板，各种邀请函、招聘、节日海报、H5小游戏应有尽有。

提供私有化部署服务

上海意派科技的私有化部署系统功能架构覆盖功能层、服务层、系统支撑层三个层级。

功能层：

H5内容管理、H5编辑器、H5发布管理、H5访问统计、H5数据收集、素材资源管理、表单管理、数据库定义、个人账号信息管理。

服务层：

用户管理、素材资源管理、H5作品管理、作品播放、表单管理、数据库管理、访问统计、微信jssdk、微信授权、H5互动数据处理、数据库服务、语音、处理、消息列队。

系统支撑层：

Django应用服务器、MySQL数据库存储、MongoDB、Redis内存数据库、Memcache缓存、OSS文件存储、OpenSearch、Celery列队

对比一些简易化的模板平台，意派Epub360H5平台可以使用更专业的组件，创造更多创意的可能，更大的创作自由空间以及更多的营销数据效果。

html5应用 并不仅仅是html5本身，其实还有css3 ，canvas，javascript ， 需要把这些都合成起来才能做好一个html5应用 ，目前很多Native 中会嵌入html5页面所做的页面，因为html5的更新更会更容易。
如果希望做一个html5应用，其实可以看一些webapp的前端框架，百度搜索一下webapp 前端框架就能看到，里面有很多效果其实已经接近原生应用。
同时也可以看看 “html5中国产业联盟” ，“phonegap”，等等 他们会把所做的html5应用转换成原生应用！可以调用手机的硬件！也就是说，只要开发一次，那么就能生成android ，ios，windows phone应用，节省很多开发成本，而这只是应用方面。
在游戏方面，Egret和 cocos2d-x 都很棒，它们都能生成不同系统的手机游戏！
有人可能会说原生的应用效率更高，但是只要在baidu搜索一下就会发现，评论的时间大部分都不是最近，而且很多开发者做html5应用时并不用心，或者说是不了解，就拿一个比较简单的事件来说，点击事件，大部分人会使用click事件，这个没有错，但是它的效率低，当手指在屏幕上抬起时会有一定的延迟，所以给人的感觉会慢一点，但是稍微有点经验的会使用touch事件 ，当手指碰触到手机屏幕时就会触发事件，而touch 在不同的手机中兼容不一样，而另外一些真正做过的就会考虑到 “点击降级”，或者是touch包，理论上是当手指点击手机屏幕时，先使用不同 *** 作系统的touch事件，如果不兼容就使用mousedown 事件，如果在不兼容，为了安全最后在使用click事件，这样就能给用户一个很好的点击效果。

前端开发主要做的是用户所能看到的前端展示界面；后端开发主要做的是逻辑功能等模块。其实主要区别体现在以下两个方面：知识结构与实现和工作职责。

对于如何学习WEB前端或后端，或者在学习过程中遇见问题自己无法解决，可以到我的学习交流裙，里面有最新的学习路线和教程，可以跟着学，有什么不懂的地方可以随时在里面问。

1、知识结构

（1）展示的方式不同

前端指的是用户可见的界面，网站前端页面也就是网页的页面开发，比如网页上的特效、布局、、视频，音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并配合后端做网页的数据显示和交互等可视方面的工作内容。

后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多的多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。

（2）所用的技术、技能与工具不同

前端开发，就是要创造上面提到的网站面向用户的部分背后的代码，并通过建立框架，构建沉浸性的用户体验。为了实现这个目标，开发需要熟练运用下列语言、框架、工具库：

后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建或更新 Web应用。但在写代码之前，他们需要与客户沟通，了解其实际需求并转化为技术目标，制定最有效且精简的方案来进行实现。

（3）所用技术不同

前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Nodejs 、Webpack，AngularJs，ReactJs，VueJs等技术。

后端开发 以java为例 主要用到的 是包括但不限于Struts spring springmvc Hibernate >

2、工作职责

前端工程师主要的工作职责分为三大部分，分别是传统的Web前端开发，移动端开发和大数据呈现端开发。Web前端开发主要针对的是PC端开发任务；

移动端开发则包括Android开发、iOS开发和各种小程序开发，在移动互联网迅速发展的带动下，移动端的开发任务量是比较大的，随着5G标准的落地，未来移动端的开发任务将得到进一步的拓展；大数据呈现则主要是基于已有的平台完成最终分析结果的呈现，呈现方式通常也有多种选择，比如大屏展示等。

后端工程师的主要职责也集中在三大部分，分别是平台设计、接口设计和功能实现。平台设计主要是搭建后端的支撑服务容器；接口设计主要针对于不同行业进行相应的功能接口设计，通常一个平台有多套接口，就像卫星导航平台设有民用和军用两套接口一样；功能实现则是完成具体的业务逻辑实现。

扩展资料：

前端和后端的应用范围

1、PC (Personal Computer) 即个人电脑。

目前电脑端仍是前端一个主要的领域，主要分为面向大众的各类网站，如新闻媒体、社交、电商、论坛等和面向管理员的各种 CMS (内容管理系统)和其它的后台管理系统。

2、Web App 是指使用 Web 开发技术，实现的有较好用户体验的 Web 应用程序。

它是运行在手机和桌面端浏览中，随着移动端网络速度的提升，Web App 为我们提供了很大的便利。此外近两年 Google 提出了一种新的 Web App 形态，即 PWA(渐进增强 Web APP) 。

3、WeChat (微信) 这个平台，拥有大量的用户群体，因此它也是我们前端开发另一个重要的领域。微信的公众号与订阅号为市场营销和自媒体从业者，打造了一个新的天地。

4、Hybrid App (混合应用) 是指介于 Web App、原生 App (主要是 Android 或 iOS )之间的 App，它兼具原生 App 良好用户交互体验的优势和 Web App 跨平台开发的优势。

5、Game（游戏），HTML5 游戏从 2014 年 Egret 引擎开发的神经猫引爆朋友圈之后，就开始一发不可收拾。不过现在游戏开发变得越来越复杂，需要制作各种炫丽炫丽的效果，还要制作各炫丽于 2D 或者 3D 的场景。

6、Desktop桌面应用软件，就是我们日常生活中电脑中安装的各类软件。早期要开发桌面应用程序，就需要有专门的语言 UI (界面) 库支持，如 C++ 中的 Qt 库、MFC 库，Java 的 Swing、Python 的 PyQT 等，否则语言是没办法进行快速界面开发。

7、Server Nodejs 一发布，立刻在前端工程师中引起了轩然大波，前端工程师们几乎立刻对这一项技术表露出了相当大的热情和期待。看到 Nodejs 这个名字，初学者可能会误以为这是一个 Java 应用，事实上，Nodejs 采用 C++ 语言编写而成，是一个 Java 的运行环境。

---