今日热点

网上流传着一张，拔赤的前端开发知识结构图，本文由达维营根据资料进一步进行了编辑整理（不断更新中），因资料太多，无法一一整理。

编辑日志：

1、2016.4.16 将该类文章全部整合（就是网上流传那张图片）

2、2016.4.28 添加前端工具合集，见附录

1、浏览器

IE6/7/8/9/10/11 (Trident)

Firefox (Gecko)

Chrome/Chromium (Blink)

Safari (WebKit)

Opera (Blink)

2、编程语言

JavaScript

Node.js

CoffeeScript

TypeScript

PHP/Python/Perl/Ruby/Bash Shell等服务端脚本语言

3、切页面

HTML/HTML5

CSS/CSS3

Sass/LESS/Stylus/postCSS

PhotoShop/Paint.net/Fireworks/GIMP/Sketch/illustrator

4、开发工具

（1）编辑器和IDE

VIM：是一个类似于Vi（Vi:Unix及Linux系统下标准的编辑器）的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。

Sublime Text2：是一个代码编辑器（Sublime Text 2是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器，Sublime Text是为程序员准备的最好的文本编辑器之一（尽管不是最最好的）。Sublime 囊括了众多特性并且拥有很棒的界面外观，在三大主流桌面操作系统上均能运行，即 Windows, Mac 还有 Linux 之上。

Notepad++：Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。

EditPlus：是一款由韩国 Sangil Kim （ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。

WebStorm ：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

IntelliJ IDEA（推荐）：IDEA 全称 IntelliJ IDEA，是java语言开发的集成环境，IntelliJ在业界被公认为最好的java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、各类版本工具(git、svn、github等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。它的旗舰版本还支持HTML，CSS，PHP，MySQL，Python等。免费版只支持Java等极少数语言。达维营

Emacs ：著名的集成开发环境和文本编辑器。Emacs被公认为是最受专业程序员喜爱的代码编辑器之一，另外一个vim。

EmacsWiki ：是Emacs编辑器的一个插件，它允许你从本地系统创建一个Wiki并输出为HTML页面。

Brackets ：Adobe Brackets是一款开源、简洁强大的HTML、CSS和JavaScript集成开发环境，支持增加外挂程式以提供额外的功能扩展，目前可用的外挂程式例如支持增加侦错、浏览器特定CSS前缀、JSDoc注解等。

Atom ：它由 Github 出品的一款各方面体验都很像 Sublime Text 的编辑器，目前免费。

Lime Text ：Lime Text 的后端采用 Go 实现，前端则使用了 ermbox，Qt (QML) 及 HTML/JavaScript。开发正根据完全明确可见的目标逐步进行中。你能够在它的 Github 页面中为项目贡献自己的力量。

Light Table ：是由Microsoft Visual Studio部门项目经理Chris Granger离职后开发的全新理念的IDE，支持多种语言。Light Table的理念也非常简单念：写程序需要的是真正的工作台，不只是编辑器和项目浏览器。

Codebox ：Codebox 是一个完整的且模块化的云端 IDE。它可以运行在任何类 Unix 设备上(Linux、Mac OS X)。它是 codebox.io 的开源组件。

TextMate：是Mac下的著名的文本编辑器软件，与BBedit一起并称苹果机上的emacs和vim。尤其适合程序员使用，可以定制许多贴心使用的功能。

Neovim ：VIM的fork项目。Vim 不支持异步并发，Neovim 支持。

Komodo IDE / Edit ：可以在 Windows、Mac OS X 和 Linux 上运行，并支持通用的开源语言 —— Python、Perl、PHP 和 Ruby。代码智能引擎非常可靠。

Eclipse ：是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括Java开发工具（Java Development Kit，JDK）。

Visual Studio/Visual Studio Code ：Microsoft Visual Studio（简称VS）是美国微软公司的开发工具包系列产品。VS是一个基本完整的开发工具集，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境(IDE)等等。所写的目标代码适用于微软支持的所有平台

NetBeans ：由Sun公司（2009年被甲骨文收购）在2000年创立，它是开放源运动以及开发人员和客户社区的家园，旨在构建世界级的Java IDE。NetBeans当前可以在Solaris、Windows、Linux和Macintosh OS X平台上进行开发，并在SPL(Sun公用许可)范围内使用。

Cloud9 IDE ：是一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示。

HBuilder ：一款国产的ID，我只想呵呵~

Nuclide ：是Facebook开发的开发React Native的开发工具,基于Github的Atom开发,以Atom插件的形式存在。

Aptana：是一个非常强大,开源,JavaScript-focused的AJAX开发IDE。它的特点包括： JavaScript,JavaScript函数,HTML,CSS语言的Code Assist功能。

CygWin:是一个在windows平台上运行的类UNIX模拟环境，是cygnus solutions公司开发的自由软件（该公司开发的著名工具还有eCos，不过现已被Redhat收购）

（2）调试工具

Firebug ：Firebug是firefox下的一个扩展,能够调试所有网站语言，如Html,Css等。

Firebug-lite：Firebug Lite是Firebug的一个子集，支持IE、Opera和Safari这三款主流浏览器。目前有些功能还不太完整，对CSS式样进行实时分析还不错，但Firefox版的Yslow功能却不可用。

Firecookie ： 是一款基于firebug的cookie调试工具,可以方便的查看firefox上各个站点的cookie信息。

YSlow：是Yahoo发布的一款基于FireFox的插件，可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。

IEDeveloperToolbar ：IE开发者工具

IETester ：是一个WebBrowser控件，包含有5.5到11等几个版本的IE浏览器，界面美观。

Fiddler ：是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。

Chrome Dev Tools Chrome开发者工具。

Dragonfly ：（Opera Dragonfly）是适用于 Opera 浏览器的跨设备、跨平台的调试环境 – 调试 JavaScript、检查和编辑 CSS 与 DOM，以及查看手机或计算机上的任何错误。

DebugBar ：DebugBar插件是一款功能很强大的IE插件，用户可以从各个不同的角度剖析Web页面内部，包括页面 详细代码、CSS样式表、所有链接、所有图片代码、脚本信息等等

Venkman ：作为基于Mozilla的浏览器（如Firefox）的扩展，Venkman JavaScript调试器提供了一个功能完整的JavaScript调试环境。

Web Inspector：Web检查器，是Safari浏览器提供的一组javascript工具。

Smushit：是一款免费在线图片压缩小工具，可最优化压缩你的图片文件大小，却不会影响图片的质量和视觉效果，比通过Photoshop软件来压缩图片好多了。

SuperPreview：是微软发布的网页开发调试工具，自带有很多元素查看工具，如箭头、移动、辅助线、对比……，在查看网页的IE6/IE7/IE8不同表现的同时，可以对比效果。

JsBeautifier：（在线版，可汉化）微型的美化器可以重新调整 bookmarklet 和丑陋的JavaScript的格式和缩进，也可以对使用流行的 Dean Edward 的 Packer 打包的脚本进行拆包，对通过javascriptobfuscator.com 混淆的脚本进行反混淆。具体可以参考：http://jsbeautifier.org/

Wireshark：（前称Ethereal）是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包，并尽可能显示出最为详细的网络封包资料。

TcpDump：可以将网络中传送的数据包完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。

（3）版本管理

工具：Git/SVN/Mercurial

代码托管： Github/GitLab/Bitbucket/Gitorious /GNU Savannah /Launchpad /SourceForge /TeamForge /Google Code

5、代码质量

（1）Coding style

JSLint ：是一个JavaScript验证工具（非开源），可以扫描JavaScript源代码来查找问题。

JSHint ：跟JSLint非常像，都是Javascript代码验证工具，这种工具可以检查你的代码并提供相关的代码改进意见。

jscs/ESLint

CSSLint ：CSS Lint 能线上分析并检测你的网站 CSS 样式表有无任何潜在问题，http://csslint.net/。

Markup Validation Service ：W3C提供免费的Markup Validation Service ,这是一个可以验证Html/XHtml文档的语法规范的公共服务。http://validator.w3.org/

HTML Validator ：代码规范性检测。

（2）单元测试

QUnit ：是一个强大的JavaScript单元测试框架，该框架是由jQuery团队的成员所开发，并且是jQuery的官方测试套件。http://qunitjs.com/

Jasmine :是一款 JavaScript 测试框架，它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法，让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说，它是一款不错的测试框架选择。http://jasmine.github.io/

Mocha ：测试框架，是一个简单、灵活有趣的 JavaScript 测试框架,用于Node.js和浏览器上的JavaScript应用测试。http://mochajs.org

Should ：断言库 should : https://github.com/tj/should.js

Chai ：是一套TDD(测试驱动开发)/BDD(行为驱动开发)的断言框架。http://chaijs.com/

Expect ：追求极简的 BDD 风格断言库。

Unit JS

better-assert：C-style TDD 断言库，

istanbul ：测试率覆盖工具

assert

（3）自动化测试

WebDriver ：webdriver自动化俗称Selenium 2.0测试Web应用程序工具。

Protractor

Karma Runner

Sahi

phantomjs

SourceLabs

BrowserStack

Testacular：又名Karma。Google 已开源 Testacular，一个基于Node.js的JavaScript 测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到 CI （Continuous integration）工具，也可和其他代码编辑器一起使用，可以在不同的桌面或移动设备浏览器上，或在持续集成的服务器上测试JavaScript代码。

Watir：全称是“Web Application Testing in Ruby”，发音类似“water”。它是一种基于网页模式的自动化功能测试工具。

6、前端库/框架

Web Atoms

Dhtmlx ：是一个JavaScript 库，提供了一套完整的Ajax驱动的UI 组件。使用 dhtmlxSuite 生成企业级 web 应用程序有干净的界面、 快速的性能和丰富的用户体验。

qooxdoo ：是一个全面和创新的AJAX。利用面向对象的JavaScript允许开发令人印象深刻的跨浏览器的应用。没有HTML，CSS知识，也不是必要的。

Brick

vue.js ：数据驱动的组件，为现代化的 Web 界面而生

（1）MVC框架

React :React.js（React）是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。Facebook开源了React，这是该公司用于构建反应式图形界面的JavaScript库，已经应用于构建Instagram网站及Facebook部分网站。最近出现了AngularJS、MeteorJS 和Polymer中实现的Model-Driven Views等框架，React也顺应了这种趋势。React基于在数据模型之上声明式指定用户界面的理念，用户界面会自动与底层数据保持同步。与前面提及的框架不同，出于灵活性考虑，React使用JavaScript来构建用户界面，没有选择HTML。

AngularJS ：诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

Batarang ：Angular chrome 插件 Batarang

Backbone.js ：是一个开源的、轻量级的MVC框架。它诞生于2010年，发展的非常迅速，很快就成长为一种替代笨重的、全功能MVC架构（比如ExtJS）的JavaScript框架。

Ember.js ：EmberJS要追述源头得回到2007年，它源于SproutCore MVC框架，SproutCore框架最初是由SproutIt公司开发，后来由Apple接手并演进和维护。直到2011年，Yehuda Katz（他是jQuery项目和Ruby on Rails项目的核心贡献者）发起了EmberJS项目。

Polymer：polymer是Google创造的一个web components规范的一个实现。而angularjs是一个MVVM的框架。本质上的区别在于一个是创造小而美的组件，一个是创造大而全的框架。

Knockout.js ：严格来说并不是MVC框架，而是MVVM(Model -View-ViewModel)框架

（2）DOM操作

jQuery ：JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。

Underscore ：是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题：“如果我面对一个空白的 HTML 页面，并希望立即开始工作，我需要什么？” 他弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分。Underscore 提供了100多个函数，包括常用的：map、filter、invoke — 当然还有更多专业的辅助函数，如：函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。

Mootools ：MooTools是一个简洁，模块化，面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js、css、html时候。它提供了一个比普通js更面向对象的documentAPI。

Prototype.js ：prototype.js 是Sam Stephenson写的一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，国内外有多个基于此类库实现的效果库，也做得很棒。prototype.js不仅是一个有很大实用价值的js库，而且有很高的学习价值。

Zepto

YUI Library(YUI2/YUI3)

YUI3/Dojo/ExtJS/KISSY

Django ：是由 Python 开发的一个免费的开源网站框架，可以用于快速搭建高性能，优雅的网站！

（3）模板引擎

A、Underscore.js

B、Handlebars.js ：是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。

C、mustache.js

（4）UI框架

Bootstrap

Semantic UI

Juice UI

（5）图表

A、three.js

B、D3.js

C、KineticJS

D、EaselJS

E、Processing.js

（5）JavaScript的取代品

在为了提高运行速度而意图取代JavaScript的语言或工具中，人气最高的为以下五个：

A、CoffeeScript

B、TypeScript

C、Dart

D、Haxe

E、JSX

（6）CSS预处理器

A、Less

B、Sass

C、Stylus

（7）JavaScript测试工具

最后，在测试JavaScript脚本代码时可以使用的工具中，人气最高的为以下四个：

A、QUnit

B、Jasmine

C、Mocha（支持Node.js）

D、JsTestDriver

Smarty

YUI Test ：对JavaScript 进行单元测试的工具

Zend

 

7、前端标准/规范

HTTP/1.1: RFCs 7230-7235

HTTP/2

ECMAScript3/5

ECMAScript6

W3C: DOM/BOM/XHTML/XML/JSON/JSONP/…

CommonJS Modules/AMD

HTML5/CSS3

Semantic Web:MicroData/RDFa

Web Accessibility:WCAG/Role Attribute/WAI-ARIA

 

 

POSH、XOXO、RSS/ATOM,RDF

YAML,JSON_RPC,Bayeux,

Microformat,WF2.0

8、性能

JSPerf

YSlow 35 rules

PageSpeed

HTTPWatch

DynaTrace’s Ajax

高性能JavaScript

 

WebPageTest

ShowSlov/YSlow/34Rule

Charles

9、编程知识储备

数据结构

OOP/AOP

原型链/作用域链

闭包

编程范型

设计模式

Javascript Tips

面向对象、切面编程

函数式编程

 

10、流程/部署

（1）压缩合并

YUI Compressor

Google Clousure Complier

UglifyJS

CleanCSS

JSMin

TPacker-minifier

（2）文档输出

JSDoc

Dox/Doxmate/Grunt-Doxmate

（3）项目构建工具

make/Ant

GYP

Grunt

Gulp

Yeoman

FIS

Mod

11、代码组织

（1）类库模块化

CommonJS/AMD

YUI3模块

webpack

（2）业务逻辑模块化

bower/component

（3）文件加载

LABjs

SeaJS/Require.js

（4）模块化预处理器

Browserify

12、安全

CSRF ：即 CSRF, CSRF（Cross-site request forgery 跨站请求伪造，也被称成为 “one click attack”或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本（ XSS），但它与 XSS 非常不同，并且攻击方式几 乎相左。 XSS 利用站点内的信任用户，而 CSRF 则通过伪装来自受信任用户的请求来 利用受信任的网站。与 XSS 攻击相比，CSRF 攻击往往不大流行（因此对其进行防范 的资源也相当稀少）和难以防范，所以被认为比 XSS 更具危险性。

XSS

CSP

Same-origin policy

ADsafe/Caja/Sandbox

13、移动Web

HTML5/CSS3

响应式网页设计

Zeptojs/iScroll

V5/Sencha Touch

PhoneGap

jQuery Mobile

W3C Mobile Web Initiative

W3C mobileOK Checker

Open Mobile Alliance

React Native

iPhone/iPad/IOS/Android

14、JavaScript生态

MongoDB/CouchDB

15、开放服务

YAP，BOSS，SearchMonkey,

AppEngine

GoogleAjax API，Flickr Services,Search API,

Google Map,51Map等 地图服务

16、前沿技术社区/会议

D2/WebRebuild

NodeParty/W3CTech/HTML5梦工厂

JSConf/沪JS(JSConf.cn)

QCon/Velocity/SDCC

JSConf/NodeConf

CSSConf

YDN/YUIConf

HybridApp

WHATWG

MDN

codepen

w3cplus

CNode

UED Teams

17、计算机知识储备

编译原理

计算机网络

操作系统

算法原理

软件工程/软件测试原理

Unicode

18、软技能

知识管理/总结分享

沟通技巧/团队协作

需求管理/PM

交互设计/可用性/可访问性知识

SEO

19、可视化

SVG/Canvas/VML

SVG: D3/Raphaël/Snap.svg/DataV

Canvas: CreateJS/KineticJS

WebGL/Three.JS

20、后端工程师

（1）编程语言

C/C++/Java/PHP/Ruby/Python/…

（2）网页服务器

Nginx

Apache

Lighttpd

LAMP：Linux+Apache+Mysql/MariaDB+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件，本身都是各自独立的程序，但是因为常被放在一起使用

（3）数据库

SQL

MySQL/PostgreSQL/Oracle/DB2

MongoDB/CouchDB

（4）数据缓存

Redis

Memcached

（5）文件缓存/代理

Varnish

Squid

（6）操作系统

Unix/Linux/OS X/Windows

（7）数据结构

转载请注明出处：达维营 史上较全的前端开发知识资料（不断更新中，欢迎补充）

参考资料：

https://github.com/JacksonTian/fks

http://html5ify.com/fks/fks_chart/

附：前端工具合集：

前端组织

虽混过外企俩家，但劳资英文这项的技能点还是灰色的…so，俺关注的站点主要以中文为主

名称	推荐指数	备注/说明
Git	★★★★★	劳资清楚这不是个纯粹的前端社区… 但作为全球最大的搞基社区，无数前端项目在这启航 没Git都不好意思面基有木有！
MDN	★★★★★	不解释，无数的资源再等着你探索
Awesomes.cn	★★★★☆	国人维护的前端资源库，深度对接到 Github
慕课	★★★★☆	大量的在线计算机课程。 虽然初、中级居多，但是不乏有巨作值得细细品尝
W3Cplus	★★★★☆	大漠(《图解CSS3》作者)在国内的影响力杠杠的 Sass专家级
百度Web前端研发部	★★★★	确实对得起“研发”这个称呼 FIS、UEditor等就是他们搞出来的
前端乱炖	★★★☆	前端社区太多，乱炖还算做的不错的
极客学院	★★★	和慕课类似，但是内容更杂、更丰富 PS：貌似比较新颖的教程都是收费的
Div.IO	★★★	主要内容是最新的前端库和前沿技术
腾讯全端AlloyTeam	★★★	腾讯Web前端团队

前端博客

值得长期占坑的前端个人博客，都是偶经常关注的

名称	推荐指数	备注/说明
如何跟上前端开发的最新前沿	★★★★★	RT
阮一峰	★★★★★	关注多年，拜读其ES6系列… 虽网传靠写书进鸟阿里，但博客内容确实够丰富
粉丝日志for张丹	★★★★★	大爱作者写的Node系列
张鑫旭	★★★★★	成名多年的、高产的前端大湿

博客搭建

名称	推荐指数	备注/说明
hexo	★★★★★	快速、简洁且高效的博客框架
jekyll	★★★★	将纯文本转化为静态网站和博客
Tumblr	★★★	轻博客的祖师爷
WordPress	★	这玩意古老到我都不想介绍鸟

使用hexo/jekyll + GitPage，前端搭建静态博客那是相当easy。用Markdown写文章做记录，再push到Git上，分分钟高大上有木有

CSS

名称	推荐指数	备注/说明
LoadersCSS	★★★★☆	用CSS技术实现loading动画； 补一句，想熟悉、理解keyframes、animation、transform、transition的童鞋可以直接去读其源码(只有千把行代码)，读完就算出师鸟:)
WeUI	★★★★☆	一套同微信原生视觉体验一致的基础样式库 为微信Web开发量身设计，令用户的使用感知更加统一
HINT.css	★★★★	一款非常小巧的提示框效果
Hover.css	★★★★	很多鼠标Hover态的效果，可以给产品学习一下:)
csscss	★★★★	用于检查css代码冗余
purecss	★★★☆	小巧的响应式CSS库，Yahoo!出品

浏览端JS

名称	推荐指数	备注/说明
Echarts	★★★★★	好用，最关键的是支持的图表展示非常之多，强烈推荐
Swiper	★★★★★	强大的Slider库 其实这类效果库非常多，但文档能那么专业的就很少鸟
fullPage	★★★★☆	非常好用的全屏滑动库，看demo就明白
PhotoSwipe	★★★★☆	偶常用的js库 官网上有这么一句很关键、重要”no dependencies”
Vuejs	★★★★☆	比较喜欢其作者… 所以劳资正在看源码学习学习
emojify.js	★★★★	能够将emoji关键词转换为emoji图片的JS插件 可以快速的为你的网站提供emoji表情支持
Highcharts	★★★★	Highcharts中文网，又是一个图表库 确实功能强大，但是觉得不好看… PS：官网就做的不好看，脏脏的赶脚
videojs	★★★☆	当下视频需求都用上<video>鸟 样式和交互统一的问题交给videojs搞定:)
clipboard	★★★☆	仅2kb大小，搞定剪贴板功能，屌不屌~ 但是，Safari不支持…
impress.js	★★☆	用来写PPT不错，偶也曾为其写过一篇impress.js初体验
Cropper	★★☆	国人开发的图片裁剪库

Swiper/PhotoSwipe/fullPage有这仨库，微信里常见的H5页完全不是问题哒

NodeJS

作为一名大前端甚至是多端，Node绝逼是必备的一块

社区活跃、部署方便都是令我对Node爱不释手的主要原因

推荐Package

这里介绍些有特色且前端有必要知道的包

名称	推荐指数	备注/说明
anywhere	★★★★★	随时随地将你的当前目录变成一个静态文件服务器的根目录
supervisor	★★★★★	监控Node代码，自动重启。 A supervisor program for running nodejs programs
nodemon	★★★★★	监控Node代码，自动重启。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
pm2	★★★★★	是一个带有负载均衡功能的Node应用的进程管理器
async	★★★★☆	一个流程控制工具包，提供直接而强大的异步功能
lodash	★★★★☆	JS工具库Underscore.js的一个fork发展而来
socket.io	★★★★☆	预计Node的实时框架 聊天室、页游等对实时性有高要求的较适用
Mongoose	★★★★☆	让NodeJS更容易操作Mongodb数据库； 附上一篇Mongoose学习参考文档
koa	★★★★☆	玩Node都知道express，但使用koa的就少很多，门槛比Ex稍高 通过generator避免繁琐的回调函数嵌套，强烈推崇官方的文章教程
Shipit	★★★★☆	一个强大的自动化部署工具。 shipit很多地方非常类似gulp，他们的核心都是任务系统。
node-inspector	★★★★☆	Node调试工具，使用起来跟Chrome的JS调试器很相似
winston	★★★★☆	Node服务最流行的日志库之一
thenify-all	★★★★	把异步的方法变成Promise的 Promisifies all the selected functions in an object
PhantomJS	★★★★	一般用来做抓取截图和无界面测试 也可以用来操作DOM和网络监测，很好玩的库Quick Start
Mocha	★★★★	Node里最常用的测试框架； 它支持多种node的assert libs； 同时支持异步和同步的测试，同时支持多种方式导出结果； 也支持直接在browser上跑JS代码测试。
everyauth	★★★★	OAuth的集成解决方案
shelljs	★★★☆	写Node时难免需要用shell去操作些神马 shelljs是基于Node的shell工具，Api及其简单
hashids	★★★☆	看名称就懂，给userid加解密用的
colors	★★☆	花俏的小工具 让打印console.log时有更好的展示样式

supervisor和nodemon这俩都是监控Node代码，使得每次修改代码后会，开发Node程序必备

以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈:)

Node学习指南

名称	推荐指数	备注/说明
node.js中文资料导航	★★★★★	Node的中文资料导航，start1300+
从零开始nodejs系列文章	★★★★★	基本上每一篇都看过，强烈推荐
Node.js 包教不包会	★★★★★	值得阅读，看完绝不用买书鸟
七天学会NodeJS	★★★★★	劳资还没看，不过看目录还不错:)

Build 项目构建

Gulp+Webpack的使用套路参考:learning-gulp

Gulp资料收集：use-gulp

推荐篇与Webpack相关的文章《CSS Modules》

Webpack用起来吼吼：webpack-howto

名称	推荐指数	备注/说明
Webpack	★★★★★	项目构建工具，由于过于复杂和太强大，所以劳资还没去深入研究。精选阅读中有篇资料就是介绍Webpack和React的工作机制。
Gulp	★★★★★	Gulp是基于Node实现Web前端自动化开发的工具。 学习资料附上GulpBook
Bower	★★★★☆	前端项目的包管理其实是件复杂的事 谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本…卧槽 Bower就是搞定这件事儿的，亲爹是Twitter 推荐篇Bower的中文文章：《bower解决js的依赖管理》
Grunt	★★★★☆	和Gulp类似，都是项目构建的常见选择 对比这俩的文章可谓不少，推荐篇《Gulp vs Grunt》英盲又想看文档，可以去Grunt中文网
Gitlab CI	★★★★	一套基于Gitlab的持续集成服务

Gulp推荐包

Gulp最基础的库就不列在下表格中鸟，其中包括：

• gulp-concat作用是连接/合并文件
• gulp-cssshrinkCSS文件压缩
• gulp-uglifyJS文件压缩

名称	推荐指数	备注/说明
gulp-webpack	★★★★★	webpack与gulp配合，开启前端Build新纪元 webpack plugin for gulp
gulp-rev	★★★★☆	高大上第一步，静态文件名称变成HASH名称
gulp-rev-collector	★★★★☆	配合gulp-rev使用，自动用HASH替换模板内静态文件名
run-sequence	★★★★	Gulp任务机制为并行，RS使得有依赖的任务可串行执行 使用gulp-rev时得用RS配合 要不并行的生成配置和处理.html文件不能同事生效
gulp-util	★★★★	内含一套方法库，功能太多 个人感觉更喜欢功能单一的包，不太喜欢这种大杂烩
gulp-connect	★★★★	有reload功能的Run Webserver工具 我一般用来livereload，即保存之后自动刷新页面
gulp-load-plugins	★★★★	可加载package.json内与Gulp相关的插件 省去鸟一行一行require的功夫咯
gulp-clean	★★★☆	移除文件或文件夹的包
gulp-replace	★★★☆	其功能看名字就知道，用做字符串替换的
gulp-autoprefixer	★★★☆	叼炸天的自动处理浏览器前缀的包 文档地址：usage
gulp-rename	★★★	把文件重命名 结构设计的好不太会用到这个
gulp-flatten	★★★	删除或替换文件的相对路径； 一般我这用来移动img或者其他静态文件到新目录 同上：结构设计的好不太会用到这个

精选阅读

以下内容不包括NodeJS和面试相关的，俺已经单独准备好鸟

名称	推荐指数	备注/说明
stream-handbook	★★★★★	如果学习Nodejs，那么流一定是需要掌握的概念
ReactNative 中文版	★★★★☆	翻译自官方的中文文档
Mac设置指南	★★★★☆	Mac使用必看 尤其适合 偏执狂/强迫症 患者:)
MongoDB极简实践入门	★★★★☆	入门推荐的套路，非常浅显易懂
ReactWebpackCookBook	★★★★☆	此书会引导读者是进入React和Webpack的世界。 俩都是非常前沿的技术，同时使用会更有趣。
ReactNative学习指南	★★★★	新玩意层出不穷… 对于能持续学习的童鞋，这是个美好的时代
HTML/CSS 编码规范	★★★☆	编写灵活、稳定、高质量的HTML和CSS代码的规范
GulpBook	★★★☆	Gulp是基于Node实现Web前端自动化开发的工具
Markdown资料	★★★☆	简单看些语法入门，快速用起来

前端面试

名称	推荐指数	备注/说明
在LinkedIn做面试官的故事	★★★★★	非面试题，介绍LinkedIn的面试过程 文章有很多中肯的建议和想法，推荐阅读
大漠：写给前端面试者	★★★★★	这篇文章不涉及任何的面试题 大漠与大家聊聊面试者与被面者之间的感受…
前端面试题	★★★★☆	Git上非常火的前端面试题，start17k+

工具/软件

Web

名称	推荐指数	备注/说明
CanIuse	★★★★★	前端必备；查看浏览器对各种新特性的兼容情况
百度脑图	★★★★★	非常方便的思维导图工具
ProcessOn	★★★★☆	和百度脑图的功能类似，脑图工具。
VimAwesome	★★★★☆	Vim插件集合，Vim党必备
Tower	★★★★☆	小而美的多人协同工具。 不光只有Web版，还有iPhone、iPad、Android、微信版。
smallpdf	★★★★	提供各种格式和pdf互相转换
Cmd Markdown	★★★★	好用的Web版Markdown编辑器
StackEdit	★★★★	又是一款Web版Markdown编辑器
墨刀	★★★★	一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。
htm2pdf	★★★★	HTML to PDF
Speaker Deck	★★★★	在线的演讲稿展示平台

APP

以下列表中的APP都是不区分系统平台的

名称	推荐指数	备注/说明
印象笔记	★★★★★	免费账号完全够用，跨平台跨终端的记录软件
多看阅读	★★★★	kindle确实好，但是懒得随身带着 多看还算不错，书较多且偶尔有特价比较爽

Android

名称	推荐指数	备注/说明
小米桌面	★★★★☆	多好看、多漂亮谈不上，关键是没有广告

iPhone

名称	推荐指数	备注/说明
Monkey	★★★★	Monkey是iPhone上一个GitHub第三方客户端。 展示 GitHub 上的开发者的排名，以及仓库的排名

Mac

对于美好事务的追求无论何时都不算晚，前年公司给配了台Mac用做测试开发机，于是开始在Mac下办公。Windows？回不去鸟…

名称	推荐指数	备注/说明
Homebrew	★★★★★	没它程序猿没法好好干活…Homebrew使OS X更完美。 使用gem来安装gems、用brew来搞定那些依赖包
iTerm2	★★★★☆	Mac终端功能少又不好看，iTerm2可以解救你~
BrowseShot	★★★★☆	我正在使用的网页截图工具，强烈推荐
WebStorm	★★★★☆	功能超强的前端IDE，不多介绍，谁用谁知道
Atom	★★★★	2015年7月之前，在桌面环境下我最喜欢的编辑器是Sublime。 但之后就是Atom，俺也专门为它写了篇使用纪要
马克鳗	★★★★	MarkMan，非常强大好用的标注、测量工具。 日常工作免费版就完全可以满足，强烈推荐
Wireshark	★★★☆	说实话，Mac下木有Fiddler挺不习惯，不过在有更强大的替代品
SourceTree	★★★☆	一款好用的的Git客户端工具，重点是支持中文:)
focus booster	★★★	因为比较在意时间管理，所以这软件是俺工作时间的必备之物
Mou	★★	小清新的Markdown编辑器

Linux

名称	推荐指数	备注/说明
oh-my-zsh	★★★★★	终端党必用的好工具，强烈推荐
tree	★★★★	linux以树状图逐级列出目录的内容
oneapm	★★★★	强大的运维工具，提供多种监控客户端； 有采集、分析、展示等一套功能； PS：我这用了服务器监控(免费哦)
httpie	★★★☆	一个CLI中的HTTP客户端 用法简单、易读

Chrome浏览器插件

名称	推荐指数	备注/说明
JSONView	★★★★★	麻麻再也不用担心偶调试接口啦
wappalyzer	★★★★☆	分析网站使用的技术 它可以检测网页的web服务器、JS框架等等
二维码生成器	★★★★☆	RT
User-Agent Switcher	★★★★	模拟各种终端的UA，达到调试目的
GitPlug	★★★☆	在Git项目页中嵌入有关的图表信息
Infinity	★★☆	针对Chrome的插件，新标签页会让你耳目一新

Git

名称	推荐指数	备注/说明
Git教程-廖雪峰	★★★★☆	俺有看过不少Git的文章，确实这个系列是最通俗易懂的
GitAwards	★★★★	Git工具，可以查看Git排名
Git速查	★★★★	分类清晰的速查表
Git简明指南	★★★☆	入门Git的简明指南，木有高深内容:)
git学习资料整理	★★★	内容包括很多git的相关资料，star1200+

Redis

MongoDB

名称	推荐指数	备注/说明
Mongoose	★★★★☆	让NodeJS更容易操作Mongodb数据库。 附上一篇Mongoose学习参考文档

杂七杂八

放些开发中较有用的杂物在这儿

名称	推荐指数	备注/说明
QQ群规	★★★★☆	突然某天，有个QQ群让我加群 原本我是拒绝的，但当我看完这篇QQ群规后… 劳资真的被感动到了，太牛逼、够专业！ 最后，我默默加群鸟:)
.gitignore文件	★★★★☆	介绍不同语言项目的gitignore模板
Codebabes	★★★	学编程的网站。 重点是每通过一个测试，尼玛对应的妞会脱一件衣服… PS:要FQ哦~
ReadmeSample	☆	项目高大上的第一步就是包装，所以来看看README的书写套路吧 PS：劳资怎么这么无聊…

前端炫技-_炫酷狂拽叼炸天站点_

名称	推荐指数	备注/说明
windows93	★★★★☆	模拟Win93桌面，思路、体验和整体效果比较有意思
GeekTyper	★★★★☆	好玩又具有Geek精神的网站，虽然创建的目的是个恶作剧 PS：网站需要FQ
Mapbox	★★★★	非常叼的开源项目，有方便的JSAPI(还有SDK)。 不过免费版只能浅尝，流量有限。 PS：网站需要FQ
SuperScrollorama	★★★☆	好玩好看的动画库，链接是SuperScrollorama的展示页
parallax.js	★★★	一个视差引擎的官网，在电脑和手机上都有很好的体验
墨刀	★★	一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。

本文标题的命名方式参考了芋头所写的《如何面试一名前端开发工程师？》。「考评」是「面试」的子集，是一个很重要的环节，如果谁打算做「前端工程师面试合集」的话，记得把我这篇文章收录进去哈，蛤蛤蛤蛤～

「如何考评」这个词看起来「diǎo * 2」的。虽然标题看起来很有逼格，但对于我这种面试（他人）经验用一个手就能数出来的菜鸟来说，谈这个话题还为时过早。（我感到有看官貌似心里不满了：「那你说个 bird 啊！浪费老子时间和流量！我支付宝账号＊＊＊，打多少你看着办吧！」先别急嘛～）其实，本文的目的不在于讲具体如何去考评一个前端工程师的应聘者，而是想说一件事，我最近冒出的一个 idea——是一件应该没人去做的事情，是一个也许会震动业界的项目。

面试之痛

一周有五天工作日，其过法在这周之前都是在写代码和喝咖啡（顺便休息一下）的来回切换中度过的；然而，本周加入了新的元素——面试。工作日的一半以上都有面试，每次在与应聘者见面之前我都会做一些准备：

1. 浏览简历并提取出可参考的信息记录到 Evernote 上；
2. 提炼出简历给我的第一印象；
3. 从「工头」（前端团队的 leader、初试面试官）那里了解并记录电面结果；
4. 综合以上信息准备面试时的考评内容。

其中，考评内容以表格的形式展现，方便在进行面试时及时将对应的结果填进去。

面试准备

这个流程整体看起来还不错，但细化到每一步时就会发现一些问题——痛点。

简历中的技能

在应聘者所投递的简历文件以及有些个人网站的在线「简历」页面中必有的一项是自己所掌握的技术、技能，这是体现职业价值的关键。

因为职业的特殊性，招人单位常常会在招聘信息中这样描述：

• 精通 HTML、CSS、JavaScript
• 熟悉 W3C 标准
• 了解 Backbone、Angular、React、Vue 等
• 有 jQuery UI、Bootstrap 等使用经验
• 能够使用 Sass、LESS 等
• 至少了解一种服务端语言，如 Java、PHP

满眼的英文单词看得我头晕目眩，没办法，市场需求如此。既然这样，作为敲门砖的简历中如果没出现这些牛逼哄哄的单词，恐怕 HR 连鸟都不会鸟你一眼。这就给应聘者一个错觉，以为会得越多越好；同时也使得整个前端圈子都很浮躁，大部分人都在追着新的轮子后屁股跑，结果就是「熊瞎子掰苞米」。

当然，不是说会的多不好，作为一个流弊的人，知识广度是必须的；也不是说去了解学习新技术有什么不对，一个合格的职业人，不会去盲目跟风。无论是企业想要的，还是职业道路越走越宽的，都是沉稳的，先在专业深度上达到一个境界再去拓展广度的人——写好「T」的竖，再去画横。

这时，在简历中体现专业深度，也就是技术、技能的熟练度，就显得十分重要了。一般为以下几种表现形式：

• 文字描述，如「熟练」「精通」；
• 数值化，如显示以「100」为封顶的数字；
• 等级化，如几颗星。

这样又会造成一个问题，一些应聘者的简历中充满了「精通＊＊＊」——请收下我的膝盖！

为了狂拽炫酷屌炸天和更加形象地传达出「我很牛逼」这个信息，我也会想在自己的网站上加入「技能熟练度」这个 feature，那么问题来了——如何客观地对自己的技术、技能熟练度评分，进而增加可信度？

面试题的设计

从简历中获取的信息是片面的，并且很可能掺了一些水分，所以才需要经验丰富的人通过交流来了解应聘者的实际情况，像珠宝鉴定师一样去甄别其是否为赝品，将其定级。

要去考核应聘者，需要根据招聘需求和简历中的信息设计面试题。如果简历中明确说明「无任何移动端开发经验」，面试官还去考查其相关问题的掌握情况的话不就是「脱裤子放屁」了么？这不仅浪费彼此时间，还会被应聘者鄙视。

为了避免上面所提到的尴尬情形，这就要求简历中的技能描述可信度高，省去面试官去检验其可信度的步骤，而现状是不可能的！实际情况是，不像会计等职业需要证件才能上岗，写代码的都是「无证从业」。记得前段时间 HR 跑到我们开发这边，好像是问有没有职业相关的证件，我心里在想：「你是在说全国计算机等级考试么？」

既然不可避免，不得不额外设计一些基础、原理方面的面试题去验证。自己去想实在是麻烦耗时，「懒惰」的我们会从网上找一些来作为参考。GitHub 上有很多类型的项目容易被 star，其中之一就是面试题——不仅面试官会用，应聘者也需要用。

然而这种方式还有很多不便，如：量少、不能搜索、不能根据需要创建集合、没有分值等等。

寻找良方

作为应聘者，没有一个合适的方式来评估我的专业度、熟练度，痛！作为面试官，没有一个帮助我快速有效地选取组织面试题的解决方案，痛！一般而言，「痛点」就是需求，我的需求一定不只是我一个人的需求，有需求就有市场。

不是银弹的子弹

作为一个总是瞎想的双鱼，脑中突然冒出了一个想法——我本人，甚至是整个业界（即前端圈子）需要一套考核标准、一个评价体系、一个海量题库；作为一名喜欢折腾的码农，想法一出现就立刻在 GitHub 上建了一个仓库——世上从来不缺有想法的人，缺的是将其付诸行动的人。

从我第一次做面试官那天脑中出现雏形起，经过这几天面试经验的增加，以及公司内其他面试官所遇到的情况看来，我所想象中的项目是有价值的！

关于项目的名字，简称叫「FES」（发音 /ˈfɛs/），全名为「Front-end Knowledge & Skill Evaluating System」，中文名是「前端知识与技能考核评价体系/系统」（我说这是 Google 机翻你信么……）。不过，这只是暂定的名字。它不仅是一套标准、一个体系，还是一个系统、一个服务。

你咋不上天呢

既然有了这么棒的想法，既然有了最初的行动，就应该有计划地进行下去！

「FES」是一个非常庞大的，仅凭我一人之力无法完成的项目。它是一套标准，制定标准需要一个由一群业内权威人士组成的「标准化组织」；它是一个评价体系，完善的打分机制会对应聘者做出客观可信的能力评估；它是一个系统、一个服务，能够让面试官从海量题库中抽选试题打印出一份「面试考查表」。

上面只提到了「FES」的基本应用，它还具备更高级更有价值的玩儿法，这里就先不说了。并且，这些都是后话，还在天上飘着呢，再不来点儿接地气的，别人该说我是「理想主义者」了——变着法儿地说我只会说不会做么？

行！那就说点儿实际的，披露一下大概的计划：

1. 先靠自己，像其他面试题集一样收集一些信息放到 GitHub 上；
2. 开发网站的雏形，满足基本需求；
3. 寻找具备同样志向和想法的志愿者及贡献者；
4. 升级网站向理想更近一步；
5. 推广网站，提高影响力，使其成为业界标杆。

美国时间1月13日起，美国微软公司将仅对最新版本IE浏览器提供安全更新等技术支持。由于网络攻击的升级增加了修复工作的负担，在同时存在多个版本的情况下，停止支持旧版本可使研发成本得到控制。

　　据悉，微软日本公司截止到日本时间13日傍晚仍受理通过电话等方式的技术咨询。今后将敦促用户使用最新版本。

IE浏览器被建议在微软Windows操作系统下使用。微软目前支持Vista、Win7、Win8.1、Win10四种操作系统。此前，尽管Win8.和Win10下仅支持IE11浏览器，但Vista可支持IE7-9浏览器，Win7可支持IE8-11浏览器。今后，Vista系统下仅支持IE9，Win7下仅支持IE11浏览器。

日本独立行政法人“情报处理推进机构”提醒广大用户“继续使用支持期限已过的IE可能会导致信息泄露。”在网络浏览软件中，IE浏览器在日本国内利用率较高。

相关阅读微软中国用户可免费升至Win10 IE浏览器将退休

时隔7年后，微软WinHEC（Windows硬件工程产业创新峰会）在深圳重启。特里·梅尔森说，盗版用户升级到Win10后，不会成为微软反盗版执法对象，因为微软的反盗版活动并不针对终端消费者。

引用苏宁前端架构师的一个总结作为开篇

编程技术及生态发展的三个阶段

• 最初的时候人们忙着补全各种API，代表着他们拥有的东西还很匮乏，需要在语言跟基础设施上继续完善
• 然后就开始各种模式，标志他们做的东西逐渐变大变复杂，需要更好的组织了
• 然后就是各类分层MVC，MVP，MVVM之类，可视化开发，自动化测试，团队协同系统等等，说明重视生产效率了，也就是所谓工程化

处在2015年这个时间段来看，前端生态已经进入了第三阶段。看上去好像已经走的挺远了，实则不然。如果再用人类历史上的三次工业革命来类比，前端发展其实不过刚刚迈入了蒸汽机时代，开始逐步用工具来替代过往相当一部分的人肉作业，但是离电气时代的自动化流水线作业还有很长一段路要走。回顾一下2015年前端的生态发展，我大致整理了几个我觉得比较有历史意义的事件。

按时间顺序：

1. 年初React Native的发布，引领React正式走上历史舞台。
2. 3月angular2.0第一个预览版发布
3. 5月 http/2.0标准正式发布，同月 iojs 与 nodejs合并。
4. 6月 ES6 和 WebAssembly 落地
5. 7月 迄今为止React生态圈影响最大的Flux实现redux发布1.0版本
6. 8月 Facebook公开了在React上应用GraphQL的relay框架的技术预览版
7. 9月 React Native for Andriod 发布
8. 11月伊始，es标准委员会宣布将历时3年研究的Object.observe从草案中移除，尽管它原本已经是stage2，几乎已经是ES7的事实标准。双十一刚一结束，阿里手淘团队发布了名为 无线电商动态化解决方案 的 Weex，也有人给了它一个更具象的名字，vue native。
9. 12月，赶在2015的尾巴，aurelia和angular2先后发布beta版。

css方面，postcss & cssnext先后高调走到台前。

观念的变化

由于近几年前端的野蛮生长以及前端应用的多元化和复杂化，整个技术形态已经跟几年前纯做页面的时代完全迥异了。主要观念的变化总结来看在于一点，现在的前端开发面向的是web app而不是web page。今天的前端开发模式跟传统的GUI软件(如C++、.NET开发的windows客户端)已经很接近了，而且由于现在前端领域为了解决日益复杂的web业务需求及体量，越来越多的借鉴了传统客户端的开发经验，导致两者变得越来越趋同。再加上前端一些独特的特性(免安装、增量安装等)，工程上的复杂度有过之而无不及。前端如今已经脱离了茹毛饮血、刀耕火种的原始社会，开始步入了工业时代。

框架 & 类库的变化

今年最火的框架/类库毫无疑问当属React了。React从2014年年中开始广泛受到开发者关注，但是真正开始在社区独领风骚还得归功于2015年初React Native的发布。React Native的发布使得js统一三端(前端、后端、移动端)开发成为可能(现在这个时间点看可能还是过于理想，但是整体方向还是对的)，这一针强心剂吸引了大量开发者的眼球。笔者对此最大的感受就是，我在社区发表一篇react的入门教程级别的软文便可获得广泛关注及转发，相应的写angular源码剖析的准干货大部分情况则是门可罗雀。

我们挑几个主流的框架来讲讲这一层的变化。

React & Redux

React基本简介可以参考这篇文章React简介，这里不再赘述。这里挑几个核心特征简单来讲：

1. virtual dom
   这个可以说是F家工程师超强工程能力的最佳体现了(Relay也算一个)，从本质来看它是通过用js object来模拟了一个dom tree，然后将这层virtual dom插在react组件跟真实dom之间，配合强劲的dom diff算法实现它一直标榜的高性能。
2. jsx
   同样为了配合react中的组件化开发模式，F家发明了一套新的语法jsx。乍看之下它像是html in js，这也是初接触的开发者最难以接受的，典型的违背前端推崇多年的表现与业务分离的原则啊。其实这里要换个角度来看jsx，它并不是html in js，准确来说它是一个用来构建react组件树的AST。这样来想你就能理解react中这一看似怪异的设计了。
3. immutable object
   不可变对象是函数式编程中的重要概念，react的介入使得这一理念在前端社区中流行起来。从目前各种类库的实现来看，不可变对象在大型应用中拥有传统可变对象不具备的优势。尤其在这个内存不值钱的年代。从目前immutable object的良好走势来看，将来有可能被es纳入规范之中。目前可以通过facebook的immutable.js来实现。

Redux则是目前react配套的Flux模式的各种实现(其实现在两者的关系越来越模糊了)中最火的一个，在此基础上它引入了函数式编程、单一数据源、不可变数据、中间件等概念。一定程度来讲，redux是今年react生态甚至整个前端生态中影响最大的一个框架，它给整个前端技术栈引入了很多新成员，尽管这些概念可能在其他领域已经有了广泛的应用。虽然它们是否会在大规模的应用实践中被广大开发者认可还需要再检验，但至少给我们带来了一些新的思路。其中的单一数据源、不可变数据、中间件等思路目前来看还是非常有价值的，尤其是单一数据源跟不可变数据，很有可能在将来成为大型应用架构中的标配(目前来看至少在应用中构建Store层在当前的前端架构中是势在必行的)。单一数据源就好比在前端构建了一个集中式数据库，所有的数据存取操作对象都是它，不单如此它里面还实现了触发器，当有insert/update操作时它会对相应组件作rerender动作，这个在各组件之间有数据同步需求的场景下就非常有用了。

至于我对函数式编程的看法，后面单独阐述。

在我看来，react的优势并不在组件化，组件化的实现方案多种多样。react的优势在于virtual dom及一个几乎构成闭环的强大生态，这归功于F家工程师强大的工程能力跟架构能力。virtual dom将应用表现层从浏览器这个基于dom的上下文中抽离出来，通过原生js对象模型的方式使得react具备在任何环境支撑上层表现的能力。上层的渲染引擎可以是canvas、native、服务端甚至是桌面端，只要相应的端提供基于react组件的渲染能力，即可达到一套代码、或者只要很少的改动就能移植到任一终端环境的效果，这个就非常夸张了。react从0.14版本之后便将react-dom抽出来变成一个独立的库，可见react的野心并不局限于浏览器，相反从这点来看，react反而是受到了dom的掣肘。

Angular2 & Vue.js

ng2跟ng1相比是一个完全革命性版本而不是升级版，它是一个为了迎合未来的标准及理念来设计的全新框架，而这些新的理念又无法通过改进ng1.x的方式来实施，所以angular团队做了这么一个看似激进的决策，可以理解成重构已经无法满足需求只能重写了。ng2也采用纯组件化的开发思路，任何单元对于它来说都是组件。同时，ng2里面也引入了一些全新的概念(对于前端而言)来提升框架的性能及设计，例如基于worker的数据检测机制能大幅度提升渲染性能(对应实现是zone.js)，基于响应式编程的新的编程模型能更大的改善编码体验(对应实现RxJS)。赶在2015年的尾巴，ng2正式发布beta版，对于angular的这次自我革命是否能成功，还有待后续检验。另外原angular团队中出来的一个成员开发了一个类ng2的框架aurelia，有相当的开发者认为它更配称为ng2，值得关注。

由于阿里在背后的技术实践及支持，Vue.js今年也开始得到越来越多的关注。vue相对于angular1.x的优势在于轻量、易用、更优异的性能及面向组件化的设计，目前发展态势也非常好，是移动端开发的一个重要技术选型之一。

标准 & 语言的变化

现在回顾起来，2015年真的是很有意义的一年：这一年是Web的25岁生日，也是js的20岁生日。同时又是ES6标准落地的一年。ES6是迄今为止ECMAScript标准最大的变革(如果不算上胎死腹中的ES4的话)，带来了一系列令开发者兴奋的新特性。从目前es的进化速度来看，es后面应该会变成一个个的feature发布而不是像以前那样大版本号的方式，所以现在官方也在推荐 ES+年份 这种叫法而不是 ES +版本。

ES2015(ES6) & ES2016(ES7) & TypeScript

6月中ES2015规范正式发布，从ES2015带来的这些革命性的新语法来看，JS从此具备了用于开发大型应用的语言的基本要素：原生的mudule支持、原生的class关键字、更简洁的api及语法糖，更稳定的数据类型。而这些new features中，有几个我认为是会影响整个前端发展进程的：

1. Module & Module Loader

   ES2015中加入的原生模块机制支持可谓是意义最重大的feature了，且不说目前市面上五花八门的module/loader库，各种不同实现机制互不兼容也就罢了(其实这也是非常大的问题)，关键是那些模块定义/装载 语法都丑到爆炸，但是这也是无奈之举，在没有语言级别的支持下，js只能做到这一步，正所谓巧妇难为无米之炊。ES2016中的Module机制借鉴自CommonJS，同时又提供了更优雅的关键字及语法(当然也存在一些问题)。遗憾的是同样有重大价值的Module Loader在2014年底从ES2015草案中移除了，我猜测可能是对于浏览器而言Module Loader的支持遭遇了一些技术上的难点，从而暂时性的舍弃了这一feature。但是一个原生支持的模块加载器是非常有意义的，相信它不久后还是会回归到ES规范中(目前由WHATWG组织在单独维护)。

2. Class

   准确来说class关键字只是一个js里构造函数的语法糖而已，跟直接function写法无本质区别。只不过有了Class的原生支持后，js的面向对象机制有了更多的可能性，比如衍生的extends关键字(虽然也只是语法糖)。

3. Promise & Reflect API

   Promise的诞生其实已经有几十年了，它被纳入ES规范最大意义在于，它将市面上各种异步实现库的最佳实践都标准化了。至于Reflect API，它让js历史上第一次具备了元编程能力，这一特性足以让开发者们脑洞大开。

关于ES2016的最重磅的消息莫过于11月初es标准委员会宣布将Object.observe从ES2016草案中移除了，尽管它已经是stage2几乎已经是事实标准。官方给出的解释是，这3年的时间前端世界变化实在太大，社区已经有了一些更优秀简洁的实现了(polymer的observe-js)，而且React带来的immutable object在社区的流行使得基于可变数据的Object.observe的处境变的尴尬，O.o再继续下去的意义不大了。

除此之外，ES2016的相关草案也已经确定了一大部分其他new features。这里提两个我比较感兴趣的new feature：

1. async/await

   写过C#的同学应该对这两个关键字很熟悉了，async/await是为了更优雅的异步编程做的一个关键字级别的封装，术语叫协程。ES2016中 async/await 实际是对Promise的上层封装，几乎同步的写法写异步比Promise更优雅更简单，非常值得期待。

2. decorator

   字面意思是装饰器，其实等同于Java里面的注解。注解机制对于大型应用的开发的作用想必不用我过多赘述了。用过的同学都说好。

目前ES2015/ES2016都有了比较优秀的转译器支持(没错我说的是babel)，但是也不是all features supported，尝新的过程中需要注意。

至于Typescript，你可以将它理解成加入了静态类型的js的超集。不过我对于这种转译型语言一直不感冒(包括快死掉的CoffeeScript)，有兴趣同学自己去了解下吧。。

WebAssembly

WebAssembly选择了跟ES2015在同一天发布，其项目领头人是大名鼎鼎的js之父Brendan Eich。WebAssembly旨在解决js作为解释性语言的先天性能缺陷，试图通过在浏览器底层加入编译机制从而提高js性能。这个事情跟当时V8做的类似(有兴趣的同学可以去了解下JIT)，V8也因此一跃成为世界上跑的最快的js引擎。但是由于js是弱类型的动态语言，V8很快就触碰到了性能优化的天花板，因为很多场景下还是免不了recompile的过程。WebAssembly提供工具将各种语言转换成特定的字节码，浏览器直接面向字节码编译程序。其实在此之前,firefox已经搞过asm.js做类似的事情，只不过WebAssembly的方案更激进。有人认为WebAssembly可能是2016年最大的黑马，如果wa能发展起来，若干年后我们看js编写的应用会像现在看汇编语言写出的大型程序的感觉。WebAssembly项目目前由苹果、谷歌、微软、Mozila四大浏览器厂商共同推进，还是非常值得期待的(写不下去了我决定回去翻开我那本落灰的编译原理。。)。

Web Components

webcomponents规范起草于2013年，w3c标准委员会意图提供一种浏览器级别的组件化解决方案，通过浏览器的原生支持定义一种标准化的组件开发方式。webcomponents提出之际引发了整个前端圈的躁动，大家似乎在跨框架的组件化方案上看到了曙光。但是前端这圈子发展实在太特么快了，在当前这个时间点，webcomponents也遭遇到了跟Object.observe相似的尴尬处境。我们先来看看webcomponents的几个核心特性：

1. Shadow DOM
2. Custom Element
3. Template Element
4. HTML Imports

其中1、4现在都能很容易的通过自动化的工程手段解决了(shadow dom对应的是scoped css)，而自定义标签这种事情不论是React还是Angular这类组件框架都能轻松解决，那么我用你webcomponents的理由呢？

另外webcomponents将目标对准的是HTML体系下的组件化，这一点跟React比就相对狭隘了(但是这并不表明React把战线拉的那么长就不会有问题)。

不过原生支持的跨框架的组件还是有存在的意义的，比如基础组件库，只是在当前来看web components发展还是有点营养不良。期待2016年能有实质上的突破吧。

架构的变化

2015年出现的新的技术及思路，影响最大的就是技术选型及架构了。我们可以从下面几点来看看它对前端架构上都有哪些影响。

组件化

React的风靡使得组件化的开发模式越来越被广大开发者关注。首先要肯定的是，组件化是一个非常值得去做的事情，它在工程上会大大提升项目的可维护性及拓展性，同时会带来一些代码可复用的附加效果。但这里要强调的一点是，组件化的指导策略一定是分治(分而治之)而不是复用，分治的目的是为了使得组件之间解耦跟正交，从而提高可维护性及多人协同开发效率。如果以复用为指导原则那么组件最后一定会发展到一个配置繁杂代码臃肿的状态。如果以组件的形态划分，可以分为两个类型：基础控件和业务组件。基础控件不应包含业务逻辑不然达不到拿来即用的效果，因此它也会表现出可复用的价值，但是根本还是为了提高业务组件的可维护性。至于业务组件，可复用的价值就很低了。

1. 组件化指的是什么

   组件化这个词，在UI这一层通常指“标签化”，也就是把大块的业务界面，拆分成若干小块，然后进行组装。

   狭义的组件化一般是指标签化，也就是以自定义标签（自定义属性）为核心的机制。这也是我们通常认识的组件。

   广义的组件化包括对数据逻辑层业务梳理，形成不同层级的能力封装。它不一定是一个自定义语义标签：它可以是一个包含逻辑(js)、样式(css)、模版(html)的功能完备的结构单元，也就是我们常“口口相传”的模块(从术语准确性的角度来看模块这个描述并不合适，应该称之为组件)；它也可以是一个单纯的js，比如http组件这种纯逻辑单元。严格从概念上来讲，css跟html是不具备单独/组合成一个组件的，它们不具备描述逻辑的能力(非图灵完备)。从这个层面来看，全组件化是没有任何问题及疑义的。

2. 是否需要全组件化

   我们通常说的组件指的是狭义上的组件，而且往往我们理解的全组件化也是建立在狭义的组件基础上的，

   代表框架是React。React＋Flux体系下，它提倡尽可能将页面作细粒度的组件拆分，组件的数据全部由父级组件通过props传递而来。这本身是一件非常有价值的事情，能有效的确保应用状态的稳定及可预测性，但是应用一旦复杂庞大起来，组件树变得“枝繁叶茂”导致叶子节点层级过深，当出现数据问题时，我们必须一层层的回溯来定位bug。而且组件树过于庞大也会增加组件之间的通讯负担。从狭义的组件来看，我对全组件化是存怀疑态度的，工程上的成本太高是最大的问题，而且大部分开发者很难拿捏合适的组件粒度，容易出现过细／过粗的拆分。很多场景其实并不适合实现成狭义上的组件，它以零散的模板的方式存在更合适。

   但是如果从广义的组件来看，全组件的意义是很大的，我们需要通过拆分页面逻辑区块的方式实现程序的解耦，从而提升应用的可维护性。

综合来看，我觉得工程上更具可行的全组件化方案应该是：细粒度的基础组件库 + 粗粒度的模板/组件。

工程化

工程化是近年前端提到最多的问题之一，而且个人认为是当前前端发展阶段最有价值的问题，也是前端开发通往工业化时代的必经之路。这里不赘述，有兴趣的同学看我前阵子整理的一篇文章前端工程化知识点回顾

应用架构层 MVVM & Flux

MVVM想必大部分前端都耳熟能详了，代表框架是angular、vue、avalon。angular在1.2版本之后加入了controllerAs语法，使得controller可以变成一个真正意义上的VM，angular整个架构也才真正能称之为严格的MVVM(之前只能说是带有双向绑定的MVC/MVP)。

Flux是facebook随React一并推出的新的(准确来说其实是改进的，并非原创)架构模型，核心概念是单向数据流。Flux实质上就是一个演进版的中介者模式，不同的是它同时包装了action、store、dispatcher、view等概念。关于Flux对应用分层、数据在不同层之间只能单向流转的方式我是很赞成的。应用的分层在业务稍复杂的应用中都是很有必要的，它更利于应用的伸缩及拓展，副作用是会带来一定的复杂度(在我看来这点复杂度根本就可以忽略不计)。

今年被黑的最多的前端主流框架莫过于angular了。老实讲前端圈真的挺善变的，去年各种大会都在分享angular黑jquery，今年就变成了都在分享react黑angular了。黑的点大致有三：

1. angular的部分实现太low
2. 太多Java身上带来的臭毛病(并没有在黑Java)
3. mvvm自身的缺陷

第一点第二点我并无异议。angular的脏值检测机制相对于其他mvvm框架的双向绑定实现方式确实不太优雅，同样有硬伤的还有失败的模块语法及过多过于复杂的概念。但是对于第三点，我有不同的看法。

大多数人黑mvvm会以Facebook那张经典的flux vs mvc的图为论据，对于双向绑定造成的数据流紊乱及应用状态的不确定导致问题定位困难的观点我是认同的，这一点我也有切身体会，但是单纯的这一点就足以否定mvvm么？就说flux比mvvm高明？

MVVM在富表格型(自造的词)应用开发效率上是高于Flux的，典型的就是一些后台管控平台。而且最重要的是，MVVM跟Flux并不互斥，我们在MVVM中照样可以引入Flux中的一些机制从而确保应用状态的稳定。很多时候我们对于框架／架构的孰优孰劣的争论是没意义的，抛开业务场景谈解决方案都是耍流氓。

业务数据层 Relay & falcor

这一层对大部分前端来说可能是比较新的概念，其实我们可以这样理解：在一个完整的应用中，业务数据层指的就是数据来源，在angular体系中可以等同于ngResource模块(准确来说应该是$http)。

Relay是f家推出的在react上应用GraphQL的框架，它的大致思路是：前端通过在应用中定义一系列的schema来声明需要的接口数据结构，后端配合GraphQL引擎返回相应的数据。整个事情对于前端来说意义简直是跨时代的，工业化典范！不仅能极大提升前后端协同的开发效率，还能增加前端对于应用完整的掌控力。但是目前来看问题就是实施过于复杂，而且还得后端服务支持，工程成本太高，这一点上Meteor显然做的更好。

falcor则是Netflix出品的一个数据拉取库，核心理念是单一数据源，跟Redux的单store概念一致。用法跟Realy类似，也需要前端定义数据schema。
另外还有一个新的W3C标准api：fetch，它的级别等同于XMLHttpRequest，旨在提供比ajax更优雅的资源获取方式，目前几个主流浏览器支持的都还不错，也有官方维护的polyfill，几乎可以确定是未来的主流数据请求api。

业务数据层是前端应用中比较新的概念，它的多元化主要会影响到应用的架构设计，这里不细讲后面再来说。

新的编程范式

函数式编程(FP)

函数式编程(functional programming)是近年比较火爆的一个编程范式，FP基于lambda演算，与以图灵机为基础的指令式编程(Java、C++)有着明显的差异。lambda演算更关注输入输出，更符合自然行为场景，所以看上去更适合事件驱动的web体系，这点我也认同。但问题是，太多开发者看到redux那么火爆就急着学redux用js去玩函数式，我觉得这个有待商榷。js作为一个以基于函数(scheme，父亲)跟基于对象(Self，母亲)的编程语言为蓝本设计然后语法又靠近Java(隔壁老王)的“混血”语言，你非得用它去写函数式，是不是过于一厢情愿？尤其是在现在浏览器还不支持尾调用优化的情况下，你让那激增的调用栈可如何是好如果你确实钟情于函数式，可以去玩玩那些更functional的语言(Haskell、Clojure等)，而不是从js入手。最近看到一个老外关于js的函数式编程的看法，最后一句总结很精辟：Never forget that javascript hate you.

函数式响应型编程(FRP)

函数式响应型编程(functional reactive programming)不是一个新概念，但也不过是近两年才引入到前端领域的，代表类库就是ng2在用的rxjs。FRP关注的是事件及对应的数据流，你可以把它看作是一个基于事件总线(event bus)的观察者模式，它主要适用于以GUI为核心的交互软件中。但FRP最大的困难之处在于，如果你想使用这样的编程范式，那么你的整个系统必须以reactive为中心来规划。目前微软维护的ReactiveX项目已经有各种语言的实现版本，有兴趣的同学可以去了解下。

工具链的变化

去年最主流的前端构建工具还是grunt&gulp，2015年随着react的崛起和web标准的快速推进，一切又有了新的变化。

webpack & browserify & jspm

webpack跟browserify本质上都是module bundler，差异点在于webpack提供更强大的loader机制让其更变得更加灵活。当然，webpack的流行自然还是离不开背后的react跟facebook(可见有个强大的干爹多么重要)。但是从现在HTTP/2标准的应用及实施进展来看，webpack/browserify这种基于bundle的打包工具也面临着被历史车轮碾过的危机，相对的基于module loader的jspm反而更具前景(虽然现在使用前两者的开发者都多于jspm)。

PostCSS & cssnext

PostCSS作为新一代的css处理器大有取Sass/Less而代之的趋势，Bootstrap v5也有着基于PostCSS去开发的计划。但从本质来讲它又不算一个处理器，它更像是一个插件平台，能通过配置各种插件从而实现预处理器跟后处理器的效果。
cssnext官方口号是“使用来自未来的语法开发css，就在今天！”，但是cssnext又不是css4，它是一个能让开发者现在就享受最新的css语法(包括自定义属性、css变量等)的转换工具。这一块笔者还没有过具体实践，暂不多言。

写在最后

从前端的发展现状来看，未来理想的前端技术架构应该是每一层都是可组装的，框架这种重型组合的适用场景会越来越局限。原因在于各部件不可拆卸会增加架构的升级代价同时会限制应用的灵活性。举个例子，我有一套面向pc端的后台管控平台的架构，view层采用angular开发，哪天我要迁移到移动端来，angular性能不行啊，我换成vue就好了。哪天觉得ajax的写法太挫，把http层替换成fetch就好了。又有一天后端的GranphQL平台搭好了，我把ngResource换成relay就OK了。

这种理想的方式当然是完全正确的方向，但是目前来看它对 开发者/架构师 的要求还是太高，工业级别上一套带有约束性的框架还是有相当的需求的(特别是当团队开发者的水平良莠不齐时。当然我觉得更正确的方式是流程上有一套完整的自动化方案用于确保团队提交的代码质量，只是目前基于动态分析的代码质量检测工具还没有出现，而且估计很长一段时间内都不会有)。虽然美好但是组合的方式也不是没有问题，各种五花八门的搭配容易造成社区的分化跟内耗，一定程度上不利于整个生态圈的发展。

近年前端生态的野蛮发展影响最大的应该就是新产品的技术选型了，乱花迷人眼，我们很难设计出一套适应大部分场景、而且短时间内不会被淘汰的架构。前端的变化太快通常会导致一些技术决策的反复，今天的最佳实践很可能明天就被视为反模式。难道最合适的态度是各种保留各种观望，以不变应万变？在这一点上即使如我这般在技术上一向激进的人都有点畏手畏脚了。那句话怎么说的来着？从来没有哪个圈子像今天的前端一样混乱又欣欣向荣了。有人说2015年或许是大前端时代的元年，目前看来，如果不是2015，那么它也一定会是2016年。

最后引用计子winter的一句话作为结语吧：

前端一直是一个变化很快的职能，它太年轻，年轻意味着可能性和机会，也意味着不成熟和痛苦。我经常担心的事情就是，很可能走到最后，我们会发现，我们做了很多，却还是一无所获。所幸至今回顾，每年还是总有点不同，也算给行业贡献了些经验值吧。

微软之前公布的新版浏览器Spartan浏览器，现已正式更名为：Edge浏览器。Microsoft Edge浏览器在最新的Windows 10预览版上已经支持，交互界面更加简洁，还将兼容现有Chrome与Firefox两大浏览器的扩展程序。用户安装的插件将与Chrome与Firefox类似，显示在工具栏上。

新的Edge浏览器支持同步书签、密码、历史记录和标签，实现类似于Firefox Sync的功能。

软件特色

　　Microsoft Edge浏览器的一项功能是，用户可以在网页上撰写或输入注释，并与他人分享；
内置微软Contana，可以很方便地跟用户展开互动。
此外，Microsoft Edge还增加了对Firefox浏览器以及Chrome浏览器插件的支持。
Microsoft Edge浏览器的交互界面有点像谷歌Chorme浏览器，比较简洁。

功能体验

    Microsoft Edge的发布正式结束了微软IE浏览器的历史，这也是微软Windows新篇章的重要组成部分。

Edge测试版预装在新的Windows 10预览版中，该预览版同样在此次大会上发布。

Edge浏览器是微软全方位战略的缩影。根据微软新战略，主要产品将相互关联和整合。但是，Edge浏览器本身却体现了极简主义风格。Edge界面简洁，功能按钮虽少，但非常实用。

为了方便用户使用Surface、惠普Spectre等变形设备，Edge还内置了大量的Windows 10相关功能。

在发布会上，我们在一台PC上试用了Edge浏览器。Edge的功能按钮主要集中在浏览器右上角。体验Edge所有基本功能无需多长时间。

Edge可以把页面加入一个阅读列表，用星形图标可收藏页面，或者让用户启动页面涂鸦功能。由于处于测试阶段，Edge还内置反馈功能。

阅读模式看起来非常美观。如果你喜爱简洁的阅读界面，Edge便为你提供阅读模式图标。在阅读模式下，Edge提供适合阅读的页面布局，而且没有任何广告。用户还可以调整背景和字体。

涂鸦功能可以让用户用手指或手写笔直接在页面上涂鸦。你还可以使用钢笔或萤光笔，而且可以挑选色彩。

无论你如何使用这项功能，你都可以把已添加注释的页面保存到OneNote。当然，你也可以把这些页面保存到阅读列表或收藏夹。在演示PC中，Edge用起来非常流畅。

Edge浏览器还内置个人语言助理Cortana。Edge提供多项Cortana设置，方便用户根据自己的习惯使用Cortana。如果你在图书馆或者课堂，你可以关闭Cortana。作为Cortana的后端服务，Bing既支持语音输入，也支持键盘输入。

Edge浏览器依赖于Windows 10系统，因此它无法单独运行。Edge浏览器不支持早期版本的Windows。至于是否将推出Mac版Edge，微软尚未明确表态。但是，Edge非常依赖Windows 10，推出Mac版Edge的可能性不大。

Windows 7、Windows 8和Windows 8.1用户可免费升级Windows 10。微软相信，Edge浏览器将吸引大量用户升级新系统。但短期内，IE将与Edge共存。

Aurelia 是下一代的 JavaScript 客户端框架，利用一些简单便利的措施来加强你的创造力。

特性：

前瞻性：采用 ES6 和 ES7 编写，集成很多 Web 组件，无外部依赖

先进的架构

双路数据绑定

可扩展 HTML

路由和 UI 组件

MV* 模式

支持多种语言：ES 6&7、TypeScript、CoffeeScript 等

可测试

Aurelia-framework v0.18.0 发布，此版本更新到最新的 TemplatingEngine (edf2b5f8)。

下载：https://github.com/aurelia/framework/archive/0.18.0.zip。

推荐语浏览量最高的1000个H5作品中，43%是心灵鸡汤，27%是测试题，15%是社交互动游戏，还有5%是品牌宣传，他们的高浏览量是怎么做到的，以下内容值得关注。来源：H5研究院（微信号：h5school）

关于H5的发展，分享几个最近看到的惊人数据和新闻：

1、截至2015，有80%的App将全部或部分基于HTML5。这意味着大部分App的内容都将是以网页的形式呈现，典型的例子包括微信、Facebook、Twitter等。（数据来源：国际科技媒体 ReadWriteWeb，2015）

2、浏览量最高的1000个H5作品中，43%是心灵鸡汤，最高17,358,480 uv；27%是测试题，最高49,940,339 uv；15%是社交互动游戏，最高2,892,047 uv；5%是大型品牌宣传，最高551,195 uv。（数据来源：在线h5工具平台ih5.cn，2015.9）

3、谷歌浏览器于9月1日起不再自动播放Flash。亚马逊宣布旗下网络（包括Amazon.com门户在内）的所有广告将不再使用Flash。在可预见的未来，Flash广告将被HTML5广告所替代。

4、朋友圈广告上线（http:// ad.weixin.qq.com），据传起投20万， CPM 40元。详情外链的H5页面可以用微信提供的模板，也可以自行定制。

注：本文提到的H5特指基于HTML5技术的动态交互页面。

以上的信息反映了H5在内容营销的应用潜力。出于好奇，笔者又调研了国内外的几个社交平台。目前支持H5分享的平台：国内的微信、微博，国外有Facebook、Twitter、LinkedIn，当然每个平台分享的形式略有差异，以下是笔者对同一个内容分享后的对比：

可以看到，各大主流社交平台对H5分享的支持都是比较友好的，只不过每个平台的分享接口都需要单独的定制。当然这也在暗示HTML5的推广渠道其实可以更加多元化，并且其在内容营销中有着极大的应用潜力。

然而最近笔者观察到一些现象：一方面，企业对H5的需求一直在增加；另一方面，定制化H5的价格居高不下。从事Marketing的朋友，一边觉得H5反胃，一边又忙着找靠谱便宜的供应商。

事实上随着技术的成熟和各种H5工具的涌现，H5制作已经渐渐走向标准化，成本问题也随着一些工具的出现有了极大的改善。或许H5技术的发展已经超出你的想象，很多问题已经有了不错的解决方案。

以下仅从大家比较关注的H5制作和推广两方面给出一些行业调研结果和具体建议，其实那些百万千万级PV的H5也有一定的规律可循，希望能对大家有所帮助：

一、如何找到靠谱不贵的H5供应商？

我们调研了国内几类供应商和各大品牌主，希望能给大家在选择H5供应商方面提供参考。从成本、资源平台到适用场景，可参考一二：

1.整合营销型

这类公司一般只做全案型的服务，很少会单独做H5开发，当然如果你的品牌名气够大并且预算够多也是可以的，量级30万+，包含策划、设计、开发、推广，也可能会有一些附加服务。

典型案例：W 《NewBalance系列》《大众点评系列》；时趣互动《潘婷系列》

适用条件：预算、时间充足，30万+、周期一个月以上

资源渠道：金投赏、艾菲奖、金鼠标，麦迪逊邦、成功营销、Social Talent Circle、SocialBeta等

2.强技术型

这样的公司在国内并不多见，笔者比较认可的就W、未来应用、NPLUS、LXU这几家，其中W和LXU比较多元，其内容营销形式不限于H5，而W也在之前透露不再接纯H5开发的业务，目前已专于全案型。当然，除了以上几家，如果大家觉得更好的也可以推荐给我们。

典型案例：LXU 《京东系列》《玩转进化论》；未来应用《神造七天》

适用条件：预算10万+，开发周期半个月到1个月

资源渠道：就那么几家，需要可以跟笔者联系，but，供不应求，排队！

3.各种小团队

一年前H5的火爆伴随而来的是百花齐放的H5定制化公司，有的是看到H5的“钱景”投身红海，有的是营销圈内人看到机会而创业。同样分为两类：集策划、设计、开发一身的互动营销初创公司，以及以设计、技术见长的技术型小团队。

这些公司往往水平不一，虽不乏优秀者，但各种滥竽充数，选择这类供应商的时候建议细心考察。这里分享几点经验：

一定要看对方的历史作品，从作品加载速度、流畅度、交互丰富度（是否用到复杂Canvas动画、CSS3D、微信高级接口等）这些方面评估，至少要有3个以上比较好的作品，做过H5游戏并交互流畅为佳。

对接人最好是产品经理，不能是那种一点不懂技术的所谓项目经理，一个是沟通非常麻烦，基本是个传话筒，没有什么卵用，另一个是会影响整个H5开发的进度。

可能的话去一趟项目团队工作的场所，能做好项目的公司从办公室氛围就能看出来，而且还能防止那种外包N次的情况，花一天看看还是值得的。

适用条件：预算2万~5万，开发周期1~3周

资源渠道：Social Talent Circle、数英网、H5说等

4、专业工具平台

托微信的福，H5的庞大市场需求推动了技术的阶跃式发展，一年前需要花几万大洋外包给一个技术团队做的事，现在依靠一个不懂代码的设计师和一个工具就能搞定。

专业在线工具的出现，对很多技术型的H5小团队而言是一个非常大的冲击，原因主要在于工具效率的提升以及相应人力成本的下降。同样复杂度H5的技术实现，一个设计师用工具大概在两天左右，最多一周内能完成，而技术外包往往需要两周左右，甚至更长。

算一笔账，高级设计师人工大概是500~1500 RMB/天，两天的工时加上各种临时需求，大概成本是1500~5000，这是用工具开发的成本；如果找技术外包：按低配计算，前端（500/天），后端（500/天），设计（500/天），按10天开发周期算，加上各种服务器和测试，成本在2万以上。

所以如果不是要找全案策划，对效果的要求也没到W、LXU那种复杂程度，建议用工具实现H5，无论从效率还是资金成本看来都是最优的。

事实上，一些工具在H5技术实现上已经超过了大部分技术开发团队，类似ih5.cn这样的工具已经能实现像3D动效、时间轴动画、H5弹幕、多屏现场投票、微信登录、数据查询这样的高级H5效果和数据应用。

除此之外，工具的好处是复用性，相信很多人都曾想象把别人家的H5改一改自己用，这种情景就是工具能解决的问题。ih5.cn有一个比较有趣的功能是复制案例，你可以复制别人的H5并更改素材自行定制！当然前提是作者愿意公开分享作品使用权。

这种高效的H5制作模式，笔者觉得具备极大的颠覆性，当然对品牌而言也是好事，不用再花一堆钱生产本来就有的东西。

据英国《金融时报》报道，俄罗斯研究人员表示，他们在全球最大制造商生产的个人电脑硬盘中，发现了多种设计精密的黑客工具。总部驻莫斯科的网络安全公司卡巴斯基实验室（Kaspersky Labs）表示，该公司已在30个国家所用电脑中发现了这种间谍软件。这些国家包括伊朗、巴基斯坦、俄罗斯和中国，长期以来它们一直是美国情报机构的工作重点。

这些卡巴斯基的研究人员并未指控美国国家安全局（NSA）是这种新恶意软件的源头。不过，他们间接暗示这些黑客工具是美国设计的。

这家俄罗斯企业表示，部分监控工具深深隐藏在东芝（Toshiba）、西部数据（WD）、希捷（Seagate）和IBM等企业生产的电脑硬盘中。

如果美国在开发这种新型黑客工具中的角色得到确认，这将继2013年爱德华.斯诺登（Edward Snowden）关于NSA的破坏性爆料之后，进一步玷污美国高科技企业的声誉。

卡巴斯基在周一公布了有关这种间谍软件的技术细节。该公司表示，植入这批恶意软件的组织“在技术上的复杂性和精通程度超过了任何已知组织”。

卡巴斯基始终避免在措辞中直接提及美国国家安全局。该公司表示，这种间谍软件是由它称为“方程组”（The Equantion Group）的组织开发的，并表示该组织已运营了20年。

不过，卡巴斯基表示“方程组”与Stuxnet病毒的设计者有着“密切的联系”。Stuxnet是美国与以色列合作开发的电脑病毒，曾攻击过伊朗的核设施。

根据卡巴斯基的说法，其中一款监控工具被植入了电脑“固件”之中。所谓固件，是指在通电时会向电脑硬件的其他部分发送消息的代码。卡巴斯基的研究人员称，这种植入方式上的进步是“一种令人震惊的技术成就”，因为这种方式植入的病毒极难被侦测和提取出来。

卡巴斯基实验室全球研究与分析团队（Global Research and Analysis Team）主任科斯廷.拉尤（Costin Raiu）表示：“简单来说，大多数硬盘都有写入硬件固件区的功能，却没有从中读出数据的功能。这意味着我们实际上和瞎子一样，没法侦测出已经被这种恶意软件感染的硬盘。”

该报告表示，“方程组”会利用这种技术带来的能力，有选择性地监听电脑数据。受到监听的目标包括银行、政府、核能研究人员、军事设施及伊斯兰激进分子。

卡巴斯基的报告还讨论了“方程组”的另一种企图，即标注没有连接互联网的“物理隔离”网络（伊朗的核设施就是这种情况）。该报告描述了一种“基于USB连接的特殊指令和控制机制，令攻击者能从物理隔离网络中上传和下载数据”。

西部数据、希捷和镁光（Micron）表示，他们对这种间谍软件一无所知。东芝（Toshiba）和三星（Samsung）拒绝置评。IBM没有回复记者的置评请求。

稿源：英国《金融时报》

商界导读：市场竞争的终极竞争就是品牌的竞争。21世纪留给我们最后的机会就是OBM模式。十年内，OEM在中国就会消失。因为中国的领导人不希望中国大量发展这种低增长型的产业。

 

一、 商业模式：通俗讲就是挣大钱的方法。

1、人，不是你有能力你就挣多少钱，而是你有什么样的模式就能挣多少钱。企业家就是战略家，战略家就是选择家。“选择比努力更重要”

2、企业家就是管未来的事情，职业经理人就是管当下的事情。

二、 全世界最好的模式就是“妈咪-小姐模式”：

妈咪不需要给小姐发工资，小姐的工资是客人给的。小姐收500元，妈咪抽走100元。如果有100个小姐，妈咪就挣1万元。

三、 企业目前的三种模式：

1、OEM模式：永远利润最低。

2、ODM模式=OEM 出设计，但没有自己的品牌

3、OBM模式：品牌运营模式

四、 OBM模式：

是以品牌为中心，以赢利模式和产品价值创新模式为基本点。

市场竞争的终极竞争就是品牌的竞争。21世纪留给我们最后的机会就是OBM模式。十年内，OEM在中国就会消失。因为中国的领导人不希望中国大量发展这种低增长型的产业。

对环境的破坏太大，不利于提高中国的国际形象。会让这些产业转移到其他第三世界国家。如果你做的就是OEM，想办法把这个企业卖掉，再开一个企业。

第二步骤 市场调研

一、 观点：

1、全世界所有做好的企业都是关注竞争对手的。企业家第一思想应该是战争思想：情报最重要!有情报就可以胜利，没情报就会失败。

2、我们的目标不能是“超出客户期望”。因为顾客是没有办法满足的。顾客永不满足，这就是人性。今天做十分，明天他就要十二分。不能把所有的服务，所有的绝招一次用完。做企业是万里长跑。进步要持续进步，你不管怎么做，顾客永远抱怨。你不要进步速度太快，否则顾客对你的要求就更高了。

3、顾客是对比的。没有对比你就没有价值。顾客的忠诚来自他对比后无其他选择。营销的本质就是永远比竞争对手好一点点。并不需要好一百步。否则你会很痛苦，因为你不能持续提供客户新的满足感。

4、合作背后的本质问题是互补。产业链是互补的才能合作!同一产业链上只有对手没有合作!合作永远建立在能力互补的基础上。能力不互补，只有竞争，要竞争就要有情报。

5、商业模式是竞争对手的利器。而没有竞争就不会有好的商业模式。中国企业成功在满足顾客需求，失败在忽略了竞争对手。

6、复制好的企业，跟随、模仿，复制的成功率44%，主动创新只有11%。集中所有竞争对手的优点于一身，把自己变成强者。如美的：成本学格兰仕;服务学海尔;品质学格力。

二、 市场调研措施：

1、成立情报部：每月提供一份最新的竞争对手调研报告。

理由：固步自封，闭门造车是不可能进步的。商业的出发点是竞争，而市场是个“零和游戏”：市场的容量是有一定规模的。如果一家占据了全部容量，其他所有家就是零了。所以，打败竞争对手很重要。只有前三名或前五名才能存活下来。

2、哪些渠道可以调研竞争对手：

(1)对手网站(2)媒体的报导 (3)对手的员工(特别是辞职的)(4)当成顾客去对手处体验(5)对手的顾客 (6)对手的上、下游供应商(7)行业协会(8)市场调研公司 (9)律师事务所 (10)对手熟人或亲属(11)厂家博览会或展会(可以最快的速度了解所有竞争对手的情况)

3、调研内容：

(1)客户资源(2)产品系列 (3) 绩效管理手段 (4)定价(5)销售渠道(6)核心技术 (7) 营销战略战术(8)财务数据(9)品牌价值(10)核心人才资源(核心团队)

4、反调研管理：

你做的越好，对手就会越来越关注你，调研你。

第三步骤 客户定位与管理

一、 观点：

1、改变你的思维模式：“我有多少能力干多少事!是没受过教育的农夫思想”。正确的观念是：“我干这个事情能挣更多的钱，我就做”。你的价值观的体系要以客户为导向!不要从自己出发，要从客户出发!

2、中国未来十年中产阶级的容量会越来越大!未来的中高端市场会有无数的品牌产生。

二、 客户定位：

1、做任何行业，都要选择有溢价能力的行业。

顾客如股票，追高不追低，只有能够溢价的行业，才能创造奇迹。

2、一切以利润为导向，锁定中商端顾客,腹部减肥。

任何一个企业持续成功一定是切中端或中商端或高端。除非是你成为制造大王。拥有极为庞大的OEM体系。但是，有更好的选择为什么要选择更差的?在市场上，20%的顾客创造了80%的营业额。

3、不要看生意好不好，要看利润好不好!你是利润大还是营业额大?

1、高端客户对价格不敏感，对价值很敏感。低端顾客对价格超敏感，对价值不敏感。如果你的公司95%是低端顾客，你能力再好也要倒闭。

2、宇宙间是有能量的。高端客户转介绍也是高端客户，低端客户转介绍也是低端客户。你跟什么样的人一起就会吸引什么人的能量!你就会变成什么样的人!

3、你的生意为什么累?因为你公司80%的低端客户太多了!切低端切久了，品牌形象是很难改变的。这就是切低端付出的代价。

4、不同的客户才会有不同的利润。挣老板的钱才最容易。对于高端客户，只要提升一点，价格就可以溢价。

5、全世界的企业都在升级，从低端走向高端。抢占至高点20%的顾客利润。

四、 客户如何管理?

1、客户只有被区别对待才会有不同的利润。如果公司缺少了对顾客区别对待的措施，就会失去高端客户。

2、操作：把客户分为四个级别，

(1)铂金客户：留下。

(2)钻石客户：留下。

(3)黄金客户：提升。

(4)木头客户：砍掉。

提升黄金客户，留下钻石和铂金客户。

3、人只愿去这样的地方消费：熟悉的地方;受尊重的地方;办了VIP给打折的地方。

第四步骤 产品价值整体创新

一、 什么是产品?

1、功能只是产品的1/5.如果到了品牌战略的地步，功能可能只占1/10了。

2、服务也是产品，是衍生产品。顾客已把服务看作产品的一部分了。

3、包装

4、产品卖点

5、产品的名字

6、产品的文化：文化会成为最高的产品，成为产品的核心战略。

观点：

1、最辛苦的人永远是最穷的人。我们天天在工厂生产的东西是最不值钱的。

例：星巴克既无好服务，又无好装修，也不比别的咖啡好喝，价格也不便宜，它卖的是品牌文化，卖的是它的核心价值观：“小资生活”

二、 产品的功能：

1、很多传统企业家钻到功能里去了。你认为功能很重要，你就会注重研发、生产。你就会很生气：“我的竞争对手产品比我差，却卖得比我好。”

2、功能满足基本需要就可以了。21世纪的企业家，必须从产品思维转向精神需求思维。

3、时代在变。顾客的需求在变。价值观在变。一个时代很难去理解另一个时代的人。任何人都无法改变这些，你只有遵从才会成功。

4、俞老师买衣服：根本不是产品质量，而是独特性，是它的视觉冲击力。

三、 包装：

1、对于中小企业，应该把研究功能、质量的研发部砍掉，把所有的资金放在产品的外包装、市场开发上。开始不要研发，复制就可以。有钱了再开研发部。

例：三星无研发部。服装业最成功的ZARA，一年600亿销售，也不搞研发。

2、包装要放在战略高度：如果你没有钱做品牌，就先做包装。

“当你看到这个产品产生视觉效果的时候，你就产生购买欲望。”

“产品的包装价值永远超过它的功能价值。”

3、功能、质量和服务是买了以后才知道，而包装是直接产生杀伤力的购买行为。

4、“一个人成功要看有多少人喜欢你!喜欢的人越多，成功的速度就越快!”一个人要受别人喜欢就要包装。个人成功靠包装，产品成功也靠包装。包装是产品价值链除了品牌外最重要的核心。是重点当中的重点。

四、 名字：

1、好的名字是成功的一半。好的名字能在第一时间抢占客户的心智资源，降低传播成本。

2、成功的公司大多是两个字的。品牌超过4个字传播成本就太高。

例：美特斯邦威成功有50%是靠它的名字。洋气，别人一听就以为是美国的牌子。

成龙原名陈港生;刘德华原名刘福荣;俞凌雄原名：俞林云

五、服务：

1、21世纪是一个产品过剩，服务不足的时代。所以服务在同质化时代是最大差异化。如果产品很难做战略，很难做文化，很难溢价，很难创造精神享受，那就只能在服务上下功夫。靠服务的精神享受溢价，让客户产生持续购买力。

六、 产品的卖点：

1、卖点是给顾客更高价格的理由。没有理由，顾客只能选择低价。

例：蒙牛：“每天一杯奶，强壮中国人”健康就是它的卖点。

2、初级阶段：通常把产品的卖点做做成广告语。一旦有了文化，一定要把品牌的核心价值观做成广告语。

第五步骤 定价

一、“薄利多销”是错误的观念。

因为顾客根本不知道你产品的成本。你卖多便宜顾客都认为你挣钱，得不到顾客的承认。尤其是你越把成本告诉顾客，顾客越说你是假的，绝对不会相信你。这叫：气死人。老板的思想观念直接导致结果是正确的还是错误的。

二、在商场上有两个傻瓜。 一个叫定价过低，一个叫降价自杀。

1、无数人都是以价格确定商品价值的。如果你定价过低，就是自信过低，是对自己的品质不认可的表现。

2、降价会让顾客失去对你公司信心，认为不行了才会降价。如果真的卖不动，把旧产品换个商标，推出新产品降价。顾客追高不追低，不要让老产品降价。

三、定价方法：

第一：高开低走定价法：

(1)如果一开始定低价，以后就很难涨了。建议高定价，但推广期打折优惠，让顾客觉得占便宜，以后涨价顾客也可以接受。记住：“顾客不是买便宜，顾客是占便宜”。

(2)定价是利润最大的杠杆。真正性得定价的企业家是真正优秀的企业家。

例：定价10元-成本8元=利润2元。

定价11元-成本8元=利润3元。此公式可见：定价只涨了10%，但利润增加了50%.

任何一个企业成本基本都是固定的。涨价涨一点点，后面杠杆的力量是非常巨大的。

(3)有道德的企业家想把最便宜的东西卖给顾客，你一定会先倒闭的。因为，你一请不起好的人才;二建立不起好的服务;三你没钱搞研发。

“薄利的企业没有人才、服务跟技术，所以企业要有竞争力，必须要有钱。”企业家不挣钱就是犯罪，先把企业的责任承担起来，再承担社会责任。

(4)消费心理学：高价=高值;低价=低值。

一个不懂心理学的人是做不好管理和营销的。

(5)饥饿心理学：顾客认为稀有的产品就是高值的产品，高贵的产品，而高贵就是高价。所以企业要适当制造饥渴。顾客追高不追低，你越涨价他就越买。你越降价他就越不买。顾客根本不了解产品的内在，只会以价格看产品的价值。

(6)你千万不要期望顾客同情你。顾客永远不会同情弱者，他只会支持强者。我越强，顾客越支持我!我越弱，顾客越离开我!

第二：目标客户定价法：

(1)目标想卖给什么样的人就定什么样的价：老头老太：低价;高端：高价。

(2)新的营销理论：一切从顾客角度定价，考虑顾客能够承受的最大价位。而非传统的以产品为中心的：“成本 利润”定价。

(3)只有以顾客为中心的营销才是真正成功的营销。

例：LV定价：“不要告诉我成本是多少。只告诉我顾客能够承受的最高购买价格。”

第三：差异化定价法：

你能够找到产品和产品之间的差异的时候，你就可以定不同的价，找到利润的更大源泉。

例：根据包装的材质不同，大小不同可定价不同;理发店可根据技师水平不同定不同价。

第四、小数点定价法：

99.8比100元定价更合适。顾客的心理承受能力就增强了：没超过100元。汇聚定价：12800，9800同此例。

第五：价值定价法：

用你的产品 、服务、产品的综合价值定价。对企业持续增长有利。

四、 调价时期：

1、新产品调价。

2、老产品改良。

第六步骤 赢利模式

一、免费模式：开始给顾客免费体验，降低顾客进入门槛。或始终有一些免费的项目，使顾客有舒适、愉悦的心理感受。

(1)顾客不买产品，不是因为他们不想买，而是他们不够了解你、信任你，因为你的门槛太高了。先让他免费进入，了解，认同，才能购买、成交。

(2)开始免费，后来收费!让人一步，一步，一步走进去，再也走不出来。

二、复制模式：文化层次低的企业复制的只是产品的功能，高层次的企业还复制产品的战略和营销模式。

例：ZARA既无工厂，又无设计师，一年600亿营业额，成功在复制。

1、复制一线品牌的方式：

(1)面料(2)设计 (3)销售模式(如LV制造产品短缺的饥饿销售法) (4)选择店面的方式及大小(5)选址地址(就开在LV边上)

2、复制中端产品：

(1)工具化制造：一线手工制造太贵。采用中端便宜的工业化制造。

(2)中端产品的价格。

终上，ZRAR不是简单的复制，它是一线品牌与中端品牌复制的杂交品。

3、中小企业就是靠复制的。

大企业才去搞研发。消灭研发，最好把生产也消灭掉。这两者的利润永远是最低的。例：美特斯邦威把生产、设计全去掉了。买设计。

中小企业要把所有的资源聚焦在品牌营销上，集中所有资源打歼灭战，做最有杀伤力的事情，产生最大回报。例：蒙牛起步时设备租赁，营业额做大了，还是租赁设备。牛根生说：要把所有的资金聚焦在品牌营销上。

三、第三方支付模式：

1、即由顾客以外的第三方单位来支付顾客的运营费用，而顾客是免费的。

2、例：观众看电视剧免费，广告商赞助电视剧，属第三方支付。

3、例：谷歌、百度：所有上网、搜索都是免费的，谁来支付这个钱呢?企业、广告商。

4、例：家乐福超市价格最低，超市并不挣钱，它是战略是用低价扩大人流量。家乐福的利润来自由超市带动的周边商铺、房屋出租的利润。

观点：没钱就是脑瓜不够灵活。如何借力使力，用他人的钱做自己的事情，才是高手。

四、直销模式：

1、 方式：电话、网络、杂志、报纸、会议营销、人海战略(安利、雅芳等)、电视直销

2、 未来的10年，70%的中端全部会被直销所消灭。未来的20年，80%-90%的中端全部会被消灭。

3、 安利公司：人海战略，“妈咪-小姐”模式。经理就是妈咪，业务员就是小姐。“小姐”没有工资。但是这种企业的管理难度非常高，你必须有忽悠和洗脑能力。

4、 会议营销：所有的行业都可以用。只要你敢用，保管业绩猛涨。一次性以最快的速度成交最多顾客。有三、四个人签单，就有一种带动性，其他人就会跟上。现场的磁场来推动你，你不得不报名。

5、 网络：杀伤力最强。网络会取消中端。什么东西都可以在网上卖。它是未来的趋势。 (电话销售极难管理，建议不采用)

6、 另一个趋势：很多超市、专卖店、商场正在往写字楼搬。甚至会搬到小区里。因为交通、物流的成本太大。

7、 凡客衬衫成功的原因是因为衬衫可以标准化，其他服装很难标准化。无法标准化的产品如在网络销售可在线下建体验中心。

五、渠道模式：

1、企业有三个无形资产：人、品牌、渠道。

2、渠道就是现金流，就是利润。你可以不向银行贷款，但你不要忘了向渠道融资。因为它有无限的融资功能。

例：农夫山泉的品牌营销战略绝对是娃哈哈的几倍，但是娃哈哈干得好的是渠道。它与供应商形成了长期的战略合作伙伴。你可以做品牌做得非常好，可以占领顾客的心智，但是中间商就是不卖你。

3、渠道招商方法：

(1)先做样板市场

(2)广告造势

(3)参加广交会

(4)邀请优质客户

(5)举办招商大会

(6)制造大品牌形象

4、借渠道方法：

借另外一个公司的渠道合作，代销自己公司的产品。越是客户端共同的渠道，越容易整合。又叫绑大款模式。

第七步骤 品牌战略

观点：

1、企业的终极竞争是品牌的竞争。世界上没有100年的工厂，只有100年的品牌。

2、不成熟的市场容易做品牌，成熟了就没有机会了。做品牌是越乱越有机会，越成熟越没有机会。

3、品牌跟质量?W?的一般就可以行销，如果等到做的很好再去行销，已经来不及了。

一、品牌的商标战略：

1、单一品牌商标：根据客户端的不同类，产品细分成很多商标。竞争到终极，必须聚焦才能生存。明知是一个公司出产，也感觉是不同的公司。你不买这个也买那个，一网全部打尽。竞争到最后，越聚焦越成功，建议采用此战略。

例：全球最成功的案例宝洁公司：潘婷、海飞丝、玉兰油、沙宣、飘柔。

例：百丽：十来个品牌的鞋全部都是百丽的。

反例：保时捷品牌的衣服，没人爱买。怎么穿都感觉很硬。