本文目录一览：
- 1、如何评价淘宝 UED 的 Midway Framework 前后端分离
- 2、如何防止Velocity对HTML内容转义
- 3、网络安全主要做什么？
- 4、20个真实的web开发项目集合，一起来看看!(二)
- 5、如何成为前端工程师？
如何评价淘宝 UED 的 Midway Framework 前后端分离
【贺师俊的回答(17票)】:
泻药。
1. 这系列文章写得很好。
【注意，熟悉我的同志应该知道，我极少给出“很好”的评价。】
2. 这系列文章以及其背后的实践重新树立了淘宝系前端工程水准的领先地位。
【在此之前的一段时间内，至少从外部来看，淘宝已经落后于狼系和企鹅系了。】
3. 这系列文章及其背后的实践也证明了nodejs对于前端来说不仅在工具链而且在架构层面的意义。
【注意，这系列文章中的思路其实并不新鲜，但是在淘宝这样规模而且业已非常成熟的产品中实施这样的转变，我认为是具有标志意义的。】
4. 具体细节上仍有许多改善空间，如此系列的第4篇《前后端分离的思考与实践（四）》在防御XSS时还是存在一些传统问题。这方面在参加杭JS的时候，我跟淘宝的herman同学有过沟通，具体就不在本问题展开了。因为这是局部问题，对整体架构影响不大。
5. 注意，以上评价的都是架构，或者说是思路。实施效果是不是好，我相信他们自己的说法。但Midway框架本身因为没有看到具体文档和代码，而且其开发的目的首要是满足淘宝的需求，因此其本身或其具体组件是否在普遍意义上适用和优秀，无法作出判断。
【徐飞的回答(19票)】:
早上看到贺老出马，也忍不住写了一篇来谈一下苏宁这样的公司对这方面的考虑。
近两年来，我一直在思考如何改进前端体系的开发模式，这里面最基础的一点就是前后端的分离。谈到前后端分离，也有一个误区，认为仅仅是以浏览器作分界，把这两部分的代码分离出来。但其实是，做这件事情的本意，是要解决开发模式的问题，也就是要分离前后端开发人员的职责。
针对不同类型的Web产品，这个分离方式是有所不同的。对于Web应用，因为它跟服务端的交互基本就是AJAX或者WebSocket接口，所以这个分离是天然的，整个前端基本都是静态HTML模板，JavaScript模块，以及CSS和相关静态资源，但是对于网购产品这样的形态，它的做法就不一样。
## 展示占主要部分的产品
网购产品的展示需求很重要，图片等资源载入非常多，但相对的操作却很少，基本只有搜索商品，加购物车，结算这样的环节。传统这样的产品，多半是这么个工作流程：
交互出高保真图，前端去切图，生成静态HTML加展示效果，然后，注意，他不是自己接着往下做，而是交给另外一群开发人员，把它转换成服务端模板，比如freemarker或者velocity之类，或者是smarty，为什么要这么做呢？因为这类产品讲究一个首屏优化，是首屏而不是首页，这就意味着对于首屏来说，经过的环节应当尽可能少，比如说，就不能先载入客户端模板，再AJAX一个数据，然后去渲染一下。这么做的性能肯定是不如服务端把HTML生成好，然后一次请求加载的。
这个过程肯定是有一些问题的，比如说，如果开发人员B在套模板的过程中，发现原先的静态HTML部分有问题，应该怎么办？大家知道，一个对HTML和CSS都很熟悉，同时又可以写业务逻辑的前端开发人员是很稀缺的，所以，多数情况下，这两边的技能是不同的，如果是简单的页面问题，这个开发人员可能自己也就解决了，如果他解决不了，怎么办？
如果B自己不改，把他已经搞成服务端模板的代码返回给前端人员A，A也没法下手，因为已经是服务端模板，A手里没有环境，改了之后不知道对不对，不能预览。那么，B把问题告诉A，A修改他的原始版本，然后再拿给B又怎样呢？这时候B又麻烦了，他要对比两次修改的部分，把自己前一阵的修改合并进去。
所以，不管怎么搞，这里面都很折腾。
Midway这个产品，他想要解决什么问题呢？既然说前端人员没法预览模板的原因是，后端在使用服务端模板，那么，我能不能找一种两边都可用的模板，你能在服务端渲染，我也能在客户端预览？服务端跟浏览器端同时都能运行的语言是什么？只有JavaScript。
所以，大家就往nodejs里面去发掘了，一个普通的JavaScript模板库，它在浏览器端也可以渲染，在nodejs端也可以输出成HTML，这时候，那些原来负责整合模板和逻辑的人员改用nodejs，是不是就解决这问题了？
想象一下这个场景多么美好：前端来决定某个模板是服务端渲染还是客户端渲染，当首屏的时候，就在nodejs里面生成HTML，不是首屏的时候，就AJAX过来在浏览器端渲染展示。
从技术方案上看，这么做很好了，工程上又带来另外一些问题，那就是对熟练JavaScript开发人员的需求量大增。对阿里这样的公司来说，前端有大几百人，别的公司只能仰望，所以他当然可以放手一搞，但对我们苏宁这样，前端人数不大的，就麻烦了。如果我们也引入这样的方案，就面临把很大一部分Java开发人员转化成JavaScript开发人员这么一个问题，这个事情短期内肯定是无法解决的，所以反过来会增加前端这边的压力。所以暂时还用不了阿里这样的方案，只能努力先提高人员水平再看情况。
服务端引入nodejs还有别的优势，比如说请求合并等等，这个也可以用其他方式变通解决，比如加一个专门的跟现有后端同构的Web服务器，在那边干这些事。
## 展示和业务逻辑较均衡的产品
对于另外一些场景，也有类似的问题，比如支付产品，展示相对没那么重，但是又算不上Web应用，它面临另外一种情况的前后端分离。这种场景下，前端的出静态HTML和DOM操作类的JavaScript，业务开发人员负责写后端，还有另外一部分业务逻辑的JS。
这里的问题是什么呢？是jQuery式代码造成的协作问题。比如说：
$(".okBtn").click(function() { $.ajax(url, data) .success(function(result) { $("someArea").html(_.template("tpl", result)); });});
因为前端人员的稀缺，所以他不可能帮你把业务逻辑写出来，所以说，这里面$.ajax往里的部分，要业务人员自己写。然后，数据得到之后，又要去处理界面部分。
很多场景下，处理界面远不是这么搞个模板放上去就完事的，所以业务开发人员感到很烦闷，为了这么一点小问题，反复去找前端的人来搞，很麻烦，自己搞又特别花时间，所以都很苦闷。
这同样是一种前后端的分离，只是这个分界线不在浏览器，而在于：是否写业务逻辑。对付这种场景，解决办法就是加强JavaScript代码的规划。现在流行那么多在前端做MV*的框架，不考虑Angular这类太重量级的，来看看Backbone这样的，它到底解决了什么问题？
很多人说，Backbone虽然小，但根本不解决问题。这句话有一定道理，但前提条件是你自己的JavaScript代码分层已经做得很好了。如果做得不好，它就可以协助你解决分层的问题。
刚才那段代码，它的问题在哪里呢，在于职责不清晰。一个函数只能做一件事，这是共识，但由于回调等方式，所以不经意就破坏了函数的单一性、完整性。我们试试来拆开它。
对于一个后端开发人员来说，他为什么常常害怕写前端代码？是因为JavaScript语言吗？其实不是，我们用来写业务逻辑的时候，只会使用JavaScript一个很小的子集，对于这个子集来说，它并不存在多大的学习困难，最麻烦的地方在于DOM、BOM等东西，对于一个后端开发人员来说，如果要求他在掌握服务端代码编写的同时，还要去学这些，那真是有些不容易，所以，我们来给他省点事。
现在我们的出发点是，把这段代码拆给两个不同的人写，一个人操作DOM，另外一个人只写逻辑，绝对不操作DOM。前面这个代码拆给前端维护，后面这个拆给业务开发人员。
最老圡的方式：
a.js
$(".okBtn").click(function() { b1(data);});function a1(result) { $("someArea").html(_.template("tpl", result));}
b.js
function b1(data) { $.ajax(url, data) .success(a1);}
现在大家是不是相安无事了？
如果这么做的话，AB双方要做很多约定，也就是说，这个过程仍然是一个螺旋链。比如说，A先写点击事件的绑定，然后想起来这里要调用一个请求，就去找B写b1方法。B在写b1的时候，又想到他要调用一个界面展示方法a1，然后又来找A写，来回也挺折腾。
况且，有这么一天，A在另外一个地方也想调用b1了，但是由于b1的回调已经写死了，比较蠢的办法就是在a1里面再判断，这是什么东西点击造成的，然后分别调用不同的回调。如果情况复杂，那这个代码写出来真是没法看。
如下：
a.js
var type = 0;$(".okBtn").click(function() { type = 1; b1(data);});$(".okBtn1").click(function() { type = 2; b1(data);});function a1(result) { if (type1) { $("someArea").html(_.template("tpl", result)); } else if (type2) { // ... } type = 0;}
b.js
function b1(data) { $.ajax(url, data) .success(a1);}
稍微好一些的办法是，在b1中，直接返回这个请求的promise，这样可以由调用方决定到底该干什么。
如下：
a.js
$(".okBtn").click(function() { b1(data).success(function(result) { $("someArea").html(_.template("tpl", result)); });});$(".okBtn1").click(function() { b1(data).success(function(result) { // ... });});
b.js
function b1(data) { return $.ajax(url, data);}
如果要对返回数据作统一处理，也可以很容易地在b1中，用promise重新封装了返回出来，只不过这样在a.js里面，直接调用的就不是success，而是then了。
注意到这样的代码还有问题，比如说大量的全局函数，不模块化，容易冲突。此外，没有一个地方可以缓存一些共享数据，比如说这么一个场景：
界面上两个块M和N，其中，M初始载入并加载数据，N在初始的时候不载入，而是在某个按钮点击的时候载入，而M和N中各有一个列表，数据来源于同一个服务端请求。
现在就有个问题，当N载入的时候，它的数据怎么来？比较老土的方式，肯定是载入N的时候，同时也再去请求一下数据，然后渲染到N上。
从一个角度看，如果说不重新请求，N的这个数据应当从哪里来？从另外一个角度看，如果重新请求了，发现数据跟之前的产生了变更，是否要同步给M，怎么同步给它？
我们看看类似Backbone这样的框架，它能提供怎样的机制呢？或者如果我们不用它，怎么自己把这个分层封装得更好一些？
首先，是建立一个数据模型，在它上面添加数据的缓存：
define("model", [], function() { var Model = { data: null, queryData : function(param, fromCache) { var defer = q.defer(); if (fromCache || this.data) { defer.resolve(this.data); } else { var self = this; this.ajax(url, param).success(function(result){ self.data = result; defer.resolve(result); }); } return defer.promise; } }; return Model;});
这么一来，我们在模型上作了数据的缓存，如果调用的时候加fromCache参数，就从缓存读取，否则就请求新的。为了在两种情况下，调用方接口能保持一致，把整个函数封装成promise，以便接着调用。这里的模型定义成单例了，假定是全局唯一的，可以根据需要调整成可实例化的。
这个时候，视图层就要封装DOM和事件的关联关系：
define("view", ["model"], function(Model) { function View(element) { this.element = element; this.element.selector(".okBtn").click(function() { var self = this; var fromCache = true; Model.queryData({}, false).then(function(result) { self.renderData(result); }); }); } View.prototype = { renderData: function(data) { this.element.selector("someArea").html(_.template("tpl", result)); } };});
这个时候，多个视图实例的情况下，数据也能够较好地利用。
这样，前端写这个View，后端写Model，可以作这么个分工。
这个只是很简陋的方式，在复杂场景下还有很多不足，在这里先不展开了。更复杂的场景也就是类似Web应用那种方式，稍后专门写一篇来展开。
## 小结
我们再来回顾前后端分离所要解决的问题，是分离前端和业务开发人员的职责，这个方案怎么定，是应当随着团队状况来确定的。比如阿里前端厉害，人多势众，他的前端就要往后推，去占领中间层。我们苏宁这样的公司，前端比较薄弱，只能在很多场景下，让出中间层，否则战线铺太广只能处处被动。
同一个中途岛，在不同的形势下，占还是不占，是很考验前端架构师的一个问题。
对阿里的这种实践，我们会持续围观，寻找并创造合适的出手时机。
【rank的回答(4票)】:
简单说下自己的看法。
前端不再继续「单纯」在 kissy 上下功夫，而可以考虑向后的延伸架构是一种前端的进步，这种前端架构将重定义阿里的前端工程师工作，很多互联网公司比阿里先行一步。
这个思路与与最早阿里很多前端没有碰后端（例如模板）有很大的关系，用 NodeJS 作中间层能解决现面临的问题，是一种不限于解决当前问题的长远解决方案。
具体是否能解决和解决得好，在于细节，不在新，而在过渡。如，如何过渡目前 NodeJS 与原来的数据交互，如何灰度过渡，工作量等。
平台化与接口化思路（后端数据接口以 Services 存在）让 amazon 收益非浅，现在后端平台化接口化在大公司趋势明显。
平台化需要更多更快的应用层开发选型，NodeJS 是不错的一种。NodeJS 虽然还是有些问题，但从信息面与我们自己的应用经验来看，已有慢慢成为后端 WebApplication 的一种很好的选型方案的趋势。
总的来说，是个趋势。
【Hex的回答(1票)】:
我认为这就是所谓的大前端开发模式。模式确实是好模式，但是真正实践起来，和后端工程师的沟通和协调也会遇到很多问题。
我做过的几个项目都是采用这种大前端的开发模式，前端基于Transformers框架+CodeIgniter组成大前端，这样确实可以很好的隔离前后端，项目可维护性大大提高。
【邓欣欣的回答(1票)】:
上周去杭州玩了下，和之前的阿里同事做了些技术交流，发现这一年，阿里的前端在流程改进上下了很大功夫； 题主所说的中途岛应该是 UDC 团队做的，应该说思路不是很新鲜，国外有 ebay 向 nodejs 的转型案例，国内之前也有百度音乐移动端的案例;
但对阿里前端来说，意义确是很重大，解决了合作流程中的一个很大问题：之前阿里的前端是只写静态 demo，写完给开发套模板，开发不太懂 html，漏写个标签，然后找前端调试，一来一去很折腾，是个必须干但又是个没啥技术含量的事； 中途岛可以很好的解决这类蛋疼事，但是请不要认为前端就因此会后端了，无非是之前浏览器用 ajax 请求接口，现在咱用 node http去请求呗，框架做得牛逼点，统一适配出前端的ajax 接口也不是不可能呀~~，想想嘛，为啥要用 node 呢？ 牛逼直接写 java 啊。。哈哈哈~
其他的 F2E 团队也做些很不错的流程改进工具，同样不是很新鲜，但对阿里前端都是比较有意义的工具：
def： 项目构建与发布工具，与阿里的 gitlab， scm 整合，各种 脚手架，build，combo，发布，一条命令搞定，确实很方便；
dip：数据接口平台，定义业务线前后端数据格式的一个内部公共平台，基于 json-schema，好像也可以给你提供 mock 接口；
uitest：前端持续集成平台；之前这东西我是边做边吐槽的，似乎刚上线，类似 jenkis 这些，提交或者发布代码时，先帮你跑一次测试用例；目前通用测试库比较少。
Trace：好像是叫这个名字吧，监控平台，这个比较早就有了，用来监控各个业务线页面的运行状况并搜集各种用户数据，如分辨率，UA
我看来 def 和 dip 对阿里前端的作用会更大些，uitest 估计作用一般，阿里前端是不注重代码质量的，测试用例也仅在几个重要的直接影响交易的业务线会写。
【许文敏的回答(0票)】:
确实不错，从职责上来区分前后端分离才是王道，nodejs将成为前端工程师的基础技能
【猎人豆豆的回答(0票)】:
不要把简单的问题搞复杂，对于淘宝这样规模的公司，有些牵一发而动全身的改动，最好是在权衡风险和收益后再决定，我们是技术的使用者，而不要被技术牵着鼻子走.
【罗正烨的回答(2票)】:
前面前端的大牛们都说了，我换个角度聊聊。
这么讲吧，阿里的前端为什么比其它公司走的远，是因为他们有很多前端，还有很多不用写大量业务逻辑的前端大牛。大牛的作用，就是折腾。阿里的前端工程师水平在自身领域实践上已经跟得上后端。
但这个架构所谓的分离，其实是把很多原来前端不需要做的事揽到了自己的手上，增加前端架构师的KPI，让前端做了更多的事，周报好写。因为nodejs和前端都是js，所以学习成本并不算高，但是对一个技术人员的要求是比原来更高了。
但是，他们团队有很多HC，有很多钱。。所以像我这种一个产品线只有一二个前端的，要是这么玩儿，招人跟不上不说，然后还可以把自己累死。
所以技术选型和架构这种事，还是要根据自己团队的能力和招人啊。
如何防止Velocity对HTML内容转义
volecity哪怕是1.7也不会自动转义html. 之所以出现转义的现象是因为我的项目为了防止xss攻击，将html元素转义了。
网络安全主要做什么？
网络安全主要包括以下几方面：
1、系统安全
运行系统安全即保证信息处理和传输系统的安全。它侧重于保证系统正常运行。避免因为系统的损坏而对系统存储、处理和传输的消息造成破坏和损失。避免由于电磁泄露，产生信息泄露，干扰他人或受他人干扰。
2、网络的安全
网络上系统信息的安全。包括用户口令鉴别，用户存取权限控制，数据存取权限、方式控制，安全审计，计算机病毒防治，数据加密等。
3、信息传播安全
网络上信息传播安全，即信息传播后果的安全，包括信息过滤等。它侧重于防止和控制由非法、有害的信息进行传播所产生的后果，避免公用网络上大云自由传输的信息失控。
4、信息内容安全
网络上信息内容的安全。它侧重于保护信息的保密性、真实性和完整性。避免攻击者利用系统的安全漏洞进行窃听、冒充、诈骗等有损于合法用户的行为。其本质是保护用户的利益和隐私。
20个真实的web开发项目集合，一起来看看!(二)
项目六：Java工具库自主研发项目
所含知识点：DOM库，事件库，AJAX库，原型和继承库，MVVM核心库，基于SPA的路由库。
项目七：jQuery经典交互特效开发
所含知识点：时间轴特效，tab页面切换效果，网页定位导航特效，滑动门特效，焦点图轮播特效，导航条菜单效果，瀑布流特效，弹出层效果，倒计时效果，抽奖效果。
项目八：PHP+MySQL后端基础项目
所含知识点：PHP，MySQL，HTTP(s)协议详解，Ajax进阶、跨域与Defered，Apache与Nginx 环境搭建与配置，接口的定义，Mock数据，Restful，前后端联调，前端安全(XSS,CSRF,JSON注入)。
项目九：前端工程化与模块化应用项目
所含知识点：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模块化。
项目十：PC端全栈开发项目
所含知识点：大首页、列表页与详情页展示与交互特效、搜索、登录与注册、购物车、jQueryUI 与 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平台系统前端。
以上就是环球青藤小编关于20个真实的web开发项目集合的相关内容分享，希望对各位小伙伴们有所帮助，想要了解更多相关知识，请关注本平台哦!
如何成为前端工程师？
一、技术的必须的
作为一名最基础的前端工程师你必须掌握HTML、CSS和JavaScript。三者必须同时精通，类似我字样对前端知识一知半解的，一遇到问题就停下工作就四处搜索解决方案的，首先就算不上一个合格的前端人员。像我这样的如果当了前端工程师那工期肯定是不能保证的。合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下（包括搜索引擎），能够完成大多数任务。
以下知识点是作为一个前端工程师必须了解和熟悉的：
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
盒模型——外边距、内边距和边框之间的关系，IE 8中的盒模型有什么不同。
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
上述这些知识点都应该是你“想都不用想”就知道的东西。除了上述的前端知识，也还需学会至少一门后端编程语言，让你自己学会如何与后端进行更好的交互。
很多前端工程师对一些库非常的熟悉，jQuery，Bootstrap等，但是对于库的熟悉并不能提现你的优秀，整整优秀的是那些理解库背后的机制，特别是能够徒手写出一个自己的库的人。
真正合格的前端工程师是能实现具体的功能要求，而优秀的前端工程师需要解决的问题是寻找一个最优的解决方案。
二、沟通很重要
优秀的前端工程师需要具备良好的沟通能力，因为你的工作与很多人的工作息息相关。在任何情况下，前端工程师至少都要满足下列四类客户的需求。
产品经理——这些是负责策划应用程序的一群人。他们能够想象出怎样通过应用程序来满足用户需求，以及怎样通过他们设计的模式赚到钱（但愿如此）。一般来说，这些人追求的是丰富的功能。
UI设计师——这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。他们热衷于流畅靓丽但并不容易实现的用户界面。
项目经理——这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间——应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。
最终用户——当然是应用程序的主要消费者。尽管我们不会经常与最终用户打交道，但他们的反馈意见至关重要；没人想用的应用程序毫无价值。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。
不要在没有作出评估之前就随便接受某项任务。你必须始终记住，一定先搞清楚别人到底想让你干什么，不能简单地接受“这个功能有问题”之类的大概其的说法。而且，你还要确切地知道这个功能或设计的真正意图何在。“加一个按钮”之类的任务并不总意味着你最后会加一个按钮。还可能意味着你会找产品经理，问一问这个按钮有什么用处，然后再找UI设计师一块探讨按钮是不是最佳的交互手段。要成为优秀的前端工程师，这种沟通至关重要。
那么，前端工程师应该最关注哪些人的意见呢？答案是所有这四类人。优秀的前端工程师必须知道如何平衡这四类人的需求和预期，然后在此基础上拿出最佳解决方案。由于前端工程师处于与这四类人沟通的交汇点上，因此其沟通能力的重要性不言而喻。如果一个非常酷的新功能因为会影响前端性能，必须删繁就简，你怎么跟产品经理解释？再比如，假设某个设计如果不改回原方案可能会给应用程序造成负面影响，你怎么才能说服UI设计师？作为前端工程师，你必须了解每一类人的想法从何而来，必须能拿出所有各方都能接受的解决方案。从某种意义上说，优秀的前端工程师就像是一位大使，需要时刻抱着外交官的心态来应对每一天的工作。
专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。
三、提升无止境
优秀的前端工程师应该具备快速学习能力。推动Web发展的技术并不是静止不动的，这些技术几乎每天都在变化，如果没有快速学习能力，你就跟不上Web发展的步伐。你必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而你的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。
四、前端开发知识架构
前端工程师
SVG/Canvas/VML
D3/Raphaël/DataV
知识管理/总结分享
沟通技巧/团队协作
需求管理/PM
交互设计/可用性/可访问性知识
编译原理
计算机网络
操作系统
算法原理
软件工程/软件测试原理
D2/WebRebuild
NodeParty/W3CTech/HTML5梦工厂
JSConf/沪JS(JSConf.cn)
QCon/Velocity/SDCC
JSConf/NodeConf
YDN/YUIConf
MongoDB/CouchDB
HTML5/CSS3
响应式设计
Zeptojs/iScroll
V5/Sencha Touch
PhoneGap
jQuery Mobile
CSRF/XSS
ADsafe/Caja/Sandbox
类库模块化
业务逻辑模块化
文件加载
CommonJS/AMD
YUI3模块
LABjs
SeaJS/Require.js
压缩合并
文档输出
项目构建工具
YUI Compressor
Google Clousure Complier
CleanCSS/UglifyJS
JSDoc
Dox/Doxmate
make/Ant
GYP
Grunt
Yeoman
数据结构
OOP/AOP
原型链/作用域链
闭包
函数式编程
设计模式
Javascript Tips
JSPerf
YSlow 35 rules
PageSpeed
HTTPWatch
DynaTrace’s Ajax
高性能JavaScript
HTTP1.1
ECMAScript3/5
W3C/DOM/BOM/XHTML/XML/JSON/JSONP
CommonJS/AMD
HTML5/CSS3
jQuery/Underscore/Mootools/Prototype.js
YUI3/Dojo/ExtJS
Backbone/KnockoutJS/Emberjs
Coding style
单元测试
自动化测试
JSLint/JSHint
CSSLint
Markup Validation Service
QUnit/Jasmine
Mocha/Should/Chai
WebDriver
IDE
调试工具
版本管理
VIM/Sublime Text2
Notepad++/EditPlus
WebStorm
Firebug/Firecookie
YSlow
IEDeveloperToolbar/IETester
Fiddler
Git/SVN
Github/Bitbucket/Google Code
HTML/HTML5
CSS/CSS3
PhotoShop/Paint.net
JavaScript/Node.js
JavaScript语言精粹
IE6/7/8/9
Firefox
Chrome/Safari/Opera
浏览器
编程语言
切页面
开发工具
代码质量
前端库/框架
前端标准/规范
性能
编程知识储备
部署流程
代码组织
安全
移动Web
JavaScript生态
前沿技术社区/会议
计算机知识储备
软技能
可视化
后端工程师
Unix/Linux/OS X/Windows
SQL
MySQL/MongoDB/Oracle
C/C++/Java/PHP/Ruby/Python/…
编程语言
数据库
操作系统
数据结构
参考链接：
JacksonTian/fks · GitHub