本文目录
怎么判定web前端架构师的能力高低
判断web前端架构师的能力，可以参考如下几个方面 ： 开发规范：开发规范设计非常重要，设计良好的开发规范应该以实用性为前提，可以提升开发效率，降低维护成本。常见的规范主要是针对模块化开发定义的，想象一下，下面的规范示意图是不是能对开发和维护有极大的帮助： 开发模型：主要是模块化开发。前端由于编程语言的问题，没有原生的模块化支持，所以架构师在做架构设计之前，要先提供模块开发体系。模块化开发体系设计挺复杂的，完整的模块化体系要统一js、css和模板的模块化处理，此外，js、css模板中的资源（图片等）引用也是要考虑的问题。此外，模块化框架肩负着资源的加载控制，要面对性能优化，所以，好的架构师给出的模块化方案应该是能把性能优化做到框架中，性能是一个工程问题！ 构建工具：还是由于前端开发语言的问题，前端还需要构建工具配合，才能完成开发规范、开发模型的落地实现。这部分也许有人认为是非必须的，但是我可以给出完整论证证明标准前端项目必须经过构建，这里就不展开了。总之，前端架构师在给出规范、模型之后，还要给出配套的工具来保证它们的实现。web前端架构师至少要提供以上3项之后才能开展正式的架构设计，我觉得这部分是衡量一个架构师设计能力的重要指标之一。基础搞定了，架构设计的开展才能顺利。没有标准的模块化支持，架构设计很难做。此外，由于web前端的产品模式与传统软件有很大差异，所以我觉得真正的前端架构师还应该能考虑以下问题： 项目部署：前端项目部署应该由前端架构师来决定，这里涉及到网络性能优化和开发规范对接的问题，所以前端架构师要理解工程部署的过程，并把开发和部署打通，否则开发受限于部署，架构设计会遇到阻碍。 组件化与组件生态：由于前端面向的是界面设计，所以在模块化之上还有组件化开发模型需要架构师提供。此外，项目中一些可复用的模块或组件应该有一定的复用渠道，这部分我称之为生态。架构师应该提供这样的渠道来解决多个团队或项目之间的代码复用问题。 前端统计：前端统计包括性能统计、访问统计、用户行为统计、错误统计、安全监控等，虽然有些统计属于产品指标，但在大数据时代，前端研发的方向应该有一定的数据做指导，前端架构师必须关心统计数据，并能提供统计方案、统计平台是一种衡量指标。 前端安全：这部分也应该有架构师负责的部分。主要是在开发、统计的过程中对前端安全做保障，比如xss修复、页面脚本注入监控等 系统测试：很多人总是尝试用API测试方法论中的单元测试来测试前端项目，其实是片面的。前端测试属于GUI测试范畴，前端项目中使用的框架、类库一般由外部提供，已经由API测试做了质量保证，而项目中的测试应该主要集中在GUI测试上，这部分目前没有好的解决方案做支撑，所以也没有什么好的衡量办法。以上就是我觉得衡量前端架构师的基本要求，现在已经不在是“写一个jquery就是架构师”的时代了，前端本应该是一个系统化、工程化的理论体系，涉及到很多方面，前端工程师的工程化意识应该加强。 或许现在很多企业和团队尚未重视前端工程，或许前端工程在很多人眼里还只是“构建工具”的代名词，又或许未来前端领域的变革使得一切工程问题从根本上得到解决。不管怎样，我只是希望当下能认真的记录自己在前端工程领域的所见所想，与正在经历前端工程化改进，并被此过程困扰的同学交流心得。
怎么对vue中$emit进行单元测试
网页链接可以参考官方文档。
其实前端一般如果涉及到页面改动的话，就建议直接运行在页面进行观察测试。而
$emit显然都已经涉及到父子组件的问题，所以我建议可以不用写单元测试，直接在页面出发调用就行了。
为什么需要前端构建
JavaScript和CSS的依赖问题我们经常出现的另一个问题，就是JavaScript和CSS的依赖问题，说的通俗点就是JavaScript和CSS的在页面中的顺序问题！我们经常发现CSS没起作用，JavaScript的某个变量和方法找不到，有很多情况都是因为引入JavaScript或者CSS的顺序不对，虽然我们可以使用一些RequireJS之类的模块管理，但是依然在很多情况下需要引入不同的文件，尤其是CSS没有一个好的模块化管理的组件。那么我们就需要有一个统一的地方来管理JavaScript和CSS的顺序问题，而构建工具可以大大减少此类问题。性能优化我们都知道浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤其是在我们现在很多使用前端MVC, MVVM框架的时候，我们为了前端代码更清晰，结构更合理，我们就由很多JS文件，无疑又拖慢了网页的速度。为了解决这个问题，因此我们需要做两件事文件合并浏览器需要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件，假如浏览器并发数是5，你有20个JS文件，而每5个需要2S, 那么你光下载JS文件都需要8S，那么网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量。文件压缩我们知道文件越大，下载越慢，而针对JavaScript和CSS, 里面的空格，换行这些都是为了让我们读代码时更容易阅读，但是对机器来说，这些对它没有影响，所以为了减少文件大小，一般的情况我们都会用工具去掉空格和换行，有时候我们还会用比较短的变量名(记住这个要让工具最后压缩时做，而源代码一定要保证命名可读性) 来减少文件大小。而所有的前端构建工具都具有文件合并和压缩的功能。效率提升Vendor前缀在CSS3使用越来越多的时候，我们都知道一些CSS的特性，不同的浏览器CSS有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀单元测试JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段，所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常重要的代码分析我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，可以很好的帮我们检查一些常见的问题。HTML引用JavaScript或者CSS文件比如我们需要使用Bower之类来引用前端JavaScript和CSS的第三方库，那么如果版本升级，添加移除等都用手工来修改HTML的话，第一比较耗时，第二比较容易疏漏，尤其是在我们需要切换Debug和production版本时将会有很多额外的工作，那么使用前端构建工具可以很好的解决这些问题。
现在比较好用的前端开发工具有哪些啊
作为一个前端开发工程师，使用一款自己上手且功能强大的开发工具是非常重要的，但是面对这么多开发工具，到底哪个比较好呢？下面我个人推荐几款自己感觉还不错的前端开发工具，希望作为大家的参考。
1、hbuilder
作为一个编程的菜鸟，对于英语真的是有心无力，尤其是一些国外的开发工具都是英文界面，我就非常的不喜欢。hbuilder是国产的一款前端开发工具而且是免费的，对于英语不好的前端工程师是一个不错的消息。hbuilder的官方大致是这么解释为什么要开发hbuilder的：HTML最开始其实不是一个编程语言，确实用不着什么ide。但是发展到现在，7w多个语法，js越来越庞大，真开发一个达到原生水准的App，不是用以前的文本器能搞定的。
目前竟然没有一个开发工具能把7w多HTML5语法提示齐全，这不科学，在原生开发里这是不可想象的，xcode之于iOS，eclipse之于Android，vs之于winphone，在语法提示、转到定义、重构、调试等方面都非常高效。作为同时熟悉原生和HTML5开发的我们，我们在开发HTML5时明显感受到效率低下。于是有了hubuilder。确实是hubuilder支持左右的前端语法代码提示，这个是我最喜欢的它的一个原因，而且还有强大的其他语言支持和开发webapp等功能，强大到没朋友。缺点也是有一些的，就是其有些稳定，有时可能会有些卡顿的现象，希望官方修复。
2、sublime text
sublime text是一个轻量级的器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。该软件的优点的轻量级但是功能强大，缺点是对于项目的管理等不是很方便，代码提示不如hubuilder强大。
3、dreamwave
这是一款很经典的前端开发工具了，以前人们使用的是它的可视化开发工具，但是现在它只能是作为一个代码器来使用的，当然一些可视化的功能现在也是用的上，如要插入Flash视频等还是使用可视化简单一些，毕竟不是所有人都能纯手写哪些意义不大的代码，优点是人们熟悉稳定，支持一些可视化的插入操作，缺点是代码提示不好，不能进行快速的开发只能是作为学习使用。
总结：以上只是前端开发工具中个人比较熟悉的，除此之外还有很多优秀的前端开发工具如webstorm等，大家可根据自己的喜好选择自己习惯的工具进行开发。
如何在前端开发中应用tdd和单元测试
驱动函数就是要用来调用被测函数的，当被测函数不能直接运行时，就需要一个驱动其运行的函数，比如说main函数，或者别的可以将这个函数运行起来以便于你来测试的函数。与其对应的还有一个桩函数的概念，顾名思义就是相对底层的东西了，测试上层的函数的时候，由于被测函数需要调用到相对底层的一些函数，当底层函数比较复杂时，就可以考虑自己做一个简单的被调用函数来替换原来的底层函数，前提是不会太大的影响你要测试的代码。这个就是桩。
前端工程师都有用哪些比较靠谱的小工具
1. node.js + npm， 这个是前端工具的一个平台，没有他们就没有以下的工具，建立开发环境，下载开发工具，运行开发工具的利器
2. bower, 库依赖管理器，类似于npm，但针对浏览器JavaScript的依赖管理，减少寻找库，下载库和升级库的烦恼
3.grunt，流程自动化管理工具，将你非编程的开发步骤减到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5无尽地狱，发布和开发各种无压力。以下大部分开发工具，都有grunt的相对应的插件，也就是说他们都能利用grunt进行自动化运行
5. 本人用less比较多，因为基本无缝兼容历史遗留系统中的css，（而Sass语法比较特殊，还没有专门用过，应该开发新系统的css比较好），一套css预编译语言，可以把less语法转成css语法，lessc是less语言编译器，配合grunt less，编写大型css文档毫无压力。
6.Phantomjs，没有界面的浏览器，用js脚本控制其操作网页。测试，抓图，网页流程自动化利器。配合casperjs的语法简化功能真强库后，控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓图功能和ImageMagick图片比较功能，在利用live-reload即时刷新功能，可以让你开发css的时候，快速对n多个页面进行观察，看其前后变化。不过缺点也比较明显，就是速度慢。但比起手动对比来看，还是非常快的。值得css开发时拥有。
8. phantomCSS，这个和grunt photobox类似，都用于css开发的，差别是photobox是全局观察差别，而这个是单元组件观察差别，它方便你就抓页面中某一块元素然后进行前后比较，更加注重细节上的差异，这个比较合适组件开发时候使用。
9. jshint，帮助你快速定位JavaScript的语法错误和潜在的跨浏览器兼容性问题。在部署你JS前，用jshint检查一下是没错的 。
10.UglifyJS，压缩JavaScript代码，使你的JS代码可以更加快速的加载。有grunt的插件
11. browserify允许你在浏览器里面使用CMD标准模块，但本人认为它的另外一个优势是合并代码，开发时候可以把代码模块化，分成很多很多小文件，然后有调理的放到相对应文件夹下，然后最后合成单一文件。本人曾经利用browserify开发greasemonkey代码，大大简化了greasemonkey的开发难度和增强了greasemonkey代码的质量。browserify有grunt插件，这样又减少的开发步骤。
12. Karma， google开发的一个单元测试运行器，这个自己本身不是一个单元测试框架，而是配合测试单元框架的一个工具。由于前端浏览器众多，就算你有live-reload这样自动化工具，但是还是要手动打开各种浏览器，手动把你的单元测试在各个浏览器都运行一遍。这个工具目的是目的就是让电脑能自动化打开各种浏览器，然后把单元测试在各个浏览器中自动运行一遍，让这个步骤也能自动化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin实际上背后使用的是clean-css工具，这个工具就是用来压缩精简css的，让css文件大小更小。
