‘壹’ 基于组件开发与基于模式开发的区别与联系是什么
区别是：
组件：最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。
模块：最初的目的是将同一类型的代码整合在一起，所以模块的功能相对复杂，但都同属于一个业务。不同模块之间也会存在依赖关系，但大部分都是业务性的互相跳转，从地位上来说它们都是平级的。
因为从代码组织层面上来区分，组件化开发是纵向分层，模块化开发是横向分块，所以模块化并没有要求一定组件化。也就是说你可以只做模块化开发，而不做组件化开发。
那这样的结果是什么样的呢？就是说你的代码完全不考虑代码重用，只是把相同业务的代码做内聚整合，不同模块之间还是存在大量的重复代码。
这样的成果也算是做到了模块化，只不过我们一般不会这样而已。
联系是：
和组件模块近似的一对概念是库和框架。库的概念偏近于代码的堆集，是分层的概念，所以对应组件化。
框架是结构化的代码，所以应用于模块化。框架是骨，模块化是肉。 比如，ReactiveCocoa是库，只是提供了响应式编码能力，而基于此的MVVM具体实现成果才叫框架，因为框架本身就有架构思想在里面。
‘贰’ 模块化和组件化的区别
组件和模块的定位不同。组件一般用于前端,模块化在后台运用的比较多。例如vue中的组件,主要是为了拆分vue实例的代码量,让我们可以以不同的组件来划分不同的功能模块,将来我们需要什么样的功能,就直接调用对应的组件即可。
‘叁’ 零基础学web前端，应该先学啥
随着互联网的迅速发展，前端开发工程师成为市场上非常抢手的人才。很多对于IT完全零基础的同学都想学习前端。前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！
那么前端开发到底需要学什么？应该怎么学？接下来小编带你从零基础学习前端。
一、前端开发入门
如果你想要学好web前端最好加入一个好的学习环境，可以来这个Q群，首先是132，中间是667，最后是127，这样大家学习的话就比较方便，还能够共同交流和分享资料
在入门阶段，你首先要学会最基本的技能：根据UI的设计稿，实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技能。
在这个阶段你需要学习：
1、HTML+CSS基础
掌握HTML的标签使用、排版技巧、CSS的布局定位、样式美化、浏览器兼容性。
2、JavaScript基础
掌握JS的基本语法、条件、语句、循环等，学会常用算法，增强逻辑性。
3、常用的前端工具
比如Webstrom、Sublime、Dreamweaver等。掌握其快捷键设置等技巧，可快速提高开发调试效率。
这个阶段的学习难度相对不高，学完这些之后，我们已经能完成静态页面的制作。当然，这只是入门，如果你想用这些技能找工作的话还是比较困难的。
二、前端初级开发
在接下来的这一个阶段，我们的目标是达到前端开发行业的基本要求，让自己有底气出去找一份月薪8000以上的工作！
这个阶段我们要重点掌握这两方面的能力：
1、利用jQuery、Bootstrap等框架开发复杂的交互功能与效果；
2、利用HTML5、CSS3、Canvas进行移动端开发。
针对第一方面的能力，你需要学习：
1、JavaScript基本特效
能够实现图片轮播、拖拽、放大镜等常见网页特效。
2、jQuery基础
掌握jQuery常用API的使用方法，并且能够熟悉jQuery的插件开发机制。
3、Bootstrap响应式
掌握原生响应式实现机制，能够使用Bootstrap中的栅格式布局和响应式布局进行复杂页面的布局开发。
4、AJAX基础
充分理解AJAX原理，掌握JS原生和jQuery方式的AJAX使用。
5、UI流行框架
掌握jQueryUI的使用，快速高效实现页面的效果呈现。
学会了这些技能，你就能够独立制作电商类、企业类网站，实现常见JS动态效果，并且能够基于jQuery、Bootstrap等框架实现炫酷的效果和复杂的功能啦！
针对第二个方面的移动端开发，你需要学习：
1、HTML5、CSS3新特性
掌握HTML5、CSS3在移动端的使用技巧。
2、Canvas基础
掌握Canvas的基本画图API，做到能实现Canvas在报表和广告展示效果方面的应用，并且能够实现炫酷的展示效果。
3、移动Web框架
能够基于jQuery Mobile/Zepto等框架进行移动端JS功能开发。
掌握这两大方面的技能，你就能达到市场上对前端工程师的基本要求了。根据市场反馈数据看，薪资普遍在8000-13000元/月，赶快加油学习吧！
三、前端进阶开发
小编就知道你是一个有理想、有抱负的人，不会满足于做一个初级的前端开发工程师。在接下来的这个阶段，我们将走上前端的进阶之路，将自己的能力再往上提高一个等级。同样，薪资也会往上升一个等级！
但是，如果你是一个前端菜鸟，接下来可能会出现一些你没有用过或者没有听过的知识点。不要着急，你可以先收藏下来，在慢慢理解。
言归正传，在这个阶段，我们要重点掌握以下两个方面的能力：
1、在实现功能的同时，考虑代码的优雅性，注重代码的性能和重用性；
2、深入理解前端框架实现原理，并且能够开发和重构通用的前端组件。
在这个阶段你需要学习以下知识：
1、面向对象开发思维
2、JavaScript面向对象
3、JavaScript闭包、作用域链、原型链等高级特性
4、常用的设计模式
5、使用原生JavaScript的原理实现框架封装
6、jQuery框架封装原理
7、jQuery插件的实现原理
掌握jQuery插件的实现原理，深刻理解插件的两种扩展方式的实现机制。
8. 组件化和模块化开发：SeaJS、RequireJS
如果你熟练掌握以上技能，就能够具备解决复杂问题和技术难点的能力，并且能够独立设计开发复杂的功能模块。如果你达到这个水平，恭喜你已经能满足前端行业的中级需求，根据市场反馈数据看，薪资普遍在 13000-20000元/月！
四、前端开发高级
写到这里，连小编自己也激动了，因为在接下来的这个阶段，我们的目标是：进军全栈开发工程师！全栈开发工程师就是那种既精前端，又通后台，遇到问题能快速定位问题、解决问题的一类大牛！据职友集数据统计，北京全栈开发工程师月薪在20K-50K之间的占比高达60%，而且人才非常缺乏！
要晋级为全栈开发工程师，我们在这个阶段得做这些事情：
1、能从前端的全局角度认识流行框架的原理与实现模式；
2、深刻理解移动App的开发模式和技术选型；
3、熟悉Node.js的全栈式解决方案；
4、了解主流的后台技术和前后端协作方式，能从全局角度理解项目的整个生命周期。
相应的，你需要学习以下这些内容：
1、Web开发工作流框架：Yeoman/Grunt/Gulp/Bower等
掌握流行的前端工作流工具，可以让前端开发更方便更高效！
2、MVC/MVVM框架：AngularJS等
掌握前端MVC/MVVM框架实现机制，通过AngularJS的实践深刻理解MVC的开发模式，理解双向数据绑定等相关概念。
3、HTML5响应式框架
4、UI流行框架：jQueryUI、EasyUI、ExtJS等
掌握常见UI框架的封装原理，通过源码分析，深入理解组件化开发思想。
5、VUE.js
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
6、Ionic、Angular
掌握移动端混合开发模式，通过Ionic、Angular的结合，理解使用HTML5、CSS3、JS实现App开发的整体流程和实现机制。
7、React Native
掌握移动端ReactNative的开发模式。
8、HTML5 Plus
9、Node.js全栈式开发
掌握Node.js全栈式解决方案，实现JS在服务器端的高效开发。
如果你能熟练掌握以上四个阶段的知识技能，你就可以满足前端与移动开发行业的高级需求啦！
‘肆’ 前端工程师怎样提高开发效率
前端工程师其实是一个工作很杂的职位，除了要负责切图、写html/css/js外，还要处理一系列的浏览器兼容性问题、优化网页性能等，所以提高前端工程师的开发效率是势在必行的，也是前端共工程化的体现。那么如何提高便可以按照前端工程师涉及的工作点来进行划分。下面我就介绍下平时我在工作中使用的一些提高开发效率的方法。
当然除了以上5点，对于前端来说需要提高开发效率的地方还有很多，可谓任重而道远。希望以上几点能够给初识前端的同学带来启发并能够亲自实践。
‘伍’ 如何理解前端模块化
前端模块化
在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀
这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（mole）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码
模块
既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可
import java.util.ArrayList;
遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。
一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了
规范形成的过程是痛苦的，前端的先驱在刀耕火种、茹毛饮血的阶段开始，发展到现在初具规模，简单了解一下这段不凡的历程
函数封装
我们在讲函数的时候提到，函数一个功能就是实现特定逻辑的一组语句打包，而且JavaScript的作用域就是基于函数的，所以把函数作为模块化的第一步是很自然的事情，在一个文件里面编写几个相关函数就是最开始的模块了
function fn1(){
statement
}
function fn2(){
statement
}
这样在需要的以后夹在函数所在文件，调用函数就可以了
这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。
对象
为了解决上面问题，对象的写法应运而生，可以把所有的模块成员封装在一个对象中
var myMole = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
这样我们在希望调用模块的时候引用对应文件，然后
myMole.fn2();
这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系
看似不错的解决方案，但是也有缺陷，外部可以随意修改内部成员
myModel.var1 = 100;
这样就会产生意外的安全问题
立即执行函数
可以通过立即执行函数，来达到隐藏细节的目的
var myMole = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
这样在模块外部无法修改我们没有暴露出来的变量、函数
上述做法就是我们模块化的基础，目前，通行的JavaScript模块规范主要有两种：CommonJS和AMD
CommonJS
我们先从CommonJS谈起，因为在网页端没有模块化编程只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以虽然JavaScript在web端发展这么多年，第一个流行的模块化规范却由服务器端的JavaScript应用带来，CommonJS规范是由NodeJS发扬光大，这标志着JavaScript模块化编程正式登上舞台。
定义模块
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
模块输出：
模块只有一个出口，mole.exports对象，我们需要把模块希望输出的内容放入该对象
加载模块：
加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的mole.exports对象
‘陆’ 什么叫组件化开发
张克军 提出的“组件化就是函数式界面开发”这一说法我是难以接受的，函数式界面开发就让它好好地叫“函数式组件化”吧，不然我们会在所谓的“传统UI框架”和“函数式界面开发”之间出现一个Gap，岂不是又要造个词给填上，多累……
我前面说会有一个Gap，这个Gap很可能就是我们现在想用“组件化”这个定义去表达的一些点，我想在此做一些个人的见解
我将之理解为以下几要素：
组件是对逻辑的封装，不限于图形元素。即我们可以把if做成组件、把一个倒计时做成组件、把一段动画做成组件、把路由做成组件、把数据架构做成组件，而这些并不能称为控件
组件具备单个可移植性，即“随加载随用”，不需要为其准备复杂的基础条件（如引入样式、引入框架等）。然而这一点现有那些所谓组件库做得并不好，技术上也不大现实
组件是声明式定义的，而非命令式。这个不想多说，很大程度上是自己主观的一个想法
而上面最重要的就是第一点，所以要问我什么是“组件化开发”，我的说法是：
把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式
这与传统开发框架的最大区别就是统一了图形元素与非图形元素，除此之外我再想不出其它真正体现区别的点了
在这个概念下，包括router、ajax、mole loader、timer、animation、interval等，都是组件，共享统一的生命周期管理和对外接口，且都是声明式地进行组合
我的一位同事告诉我去年的深JS上，有位淘宝的朋友的话题叫做“前端组件服务化”，这里面提的那些个概念，是很符合我对“组件化”的认识的，他要是不给再强安个“服务化”的噱头就好了- -
不过话说回来，在这个要求之下，组件其实不是那么好进行抽象设计的，随便说几个例子，有难的也有简单的：
非图形元素的各种需求如何统一接口，如timer和ajax
组件可以横向组件，但是纵向复用如何解决，如希望任何图形元素都可以实现被鼠标拖拽的效果，则鼠标拖拽应该也是个组件，这个组件与其它组件的关系是什么
有些组件对其可被组合的组件是有要求的，比如HTML里就不大好意思把一个<p>放进一个<span>里，这一点如何在组件上表达（实现不难，表达比较难）
一些我们原本想当然认为纯的小函数的东西，是不是也能当组件玩，比如underscore.pick要不要也是个组件
‘柒’ 怎样提高前端工程师开发效率，都在这里
前端工程师其实是一个工作很杂的职位，除了要负责切图、写html/css/js外，还要解决一系列的浏览器兼容性、网页性能优化等问题，所以提高前端工程师的开发效率是势在必行的，也是前端工程化的体现。
对于开发效率，我个人理解是
开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率
那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分。下面我就介绍下7个提高前端开发效率的方法。
1.切图
切图是一个前端最基础的技能，一般我们使用Photoshop或者FireWorks基本都能搞定设计师交付给我们的设计图，但是要提高切图效率的话就得使用一些诀窍了，比如利用PS里的动作来实现“一键切图”功能，这里除了切图外还介绍了其他的实用方法和工具。
2.编码
对于编写代码部分我们首先要找到一款合适自己的IDE工具，建议不要使用Notepad++或者Dreamweaver，这些工具已经不符合前端潮流了，无法让自己优雅地敲代码。这里我主要推荐Sublime Text、Atom或者Webstrom，因为它们除了人性化的界面和支持大多数语法的高亮外，还可以安装各种各样的插件来拓展你的IDE工具，下面我主要介绍几款Sublime Text提高开发效率的插件：
其中Element是用于快速编写html/CSS的，比如输入 ul>li 后按下tab键便可以生成一个ul标签里面包含一个li标签
JSFormat用于格式化JS；CSScomb用于对样式属性进行一键排序；HTML-CSS-JS Prettify可以一键规范我们的HTML/CSS/JS，甚至JSON格式；SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用于调用本地调色板功能。这些工具都非常实用，一定程度上可以提高我们的编码效率。
3.自动化
说到提高开发效率，这里不得不提一些前端的自动化工具，毕竟前端自动化是目前及未来的趋势，能够很大程度上缩减前端不必要的工作量，使我们能够专注前端本身。
这里我们可以使用NPM来管理我们的项目包文件；利用webpack来打包压缩我们的代码；利用Node.js来实现构建本地服务器；利用Karma、Jasmine来测试我们的前端代码。
用好前端自动化工具可以帮助我们处理很多琐碎的事情，比如一键压缩代码、图片，一键合并JS，检测文件更新等。
4.模块化
随着web2.0时代的到来，Ajax技术得到广泛应用，前端代码日益膨胀，而前端模块化能够方便我们对项目代码的维护，进行按需加载，从长远角度来看对我们提高项目的开发效率同样大有益处。
在ES6出来之前应该说前端代码本身不具备实现模块的功能，我们必须要使用一些模块化加载器来实现，比如RequireJS、SeaJs等。而随着ES6的普及，目前像RequireJS、SeaJs这样的工具已经没有存在的必要了。所以在基于ES6的开发环境下我建议使用ES6的模块化功能来实现我们的前端模块化。
5.组件化
前端组件化的概念也是由来已久，我们可以通过将我们的代码划分成不同组件来实现功能公用，一个同样的功能我们可能不用再次编写相同的代码，同时也可以提高前端代码的可维护性和清晰度。以下是目前流行的前端框架Vue的单文件组件的概念图：
我们可以将公用的组件抽离，将大组件拆分成小组件的形式实现前端组件化，组件与组件之间可以存在父子关系，也可以存在兄弟关系。在Vue的单文件组件中，一个组件包含了其HTML、CSS、JS的代码片段。
6.前后端分离
前后端分离的项目对提升前端开发效率非常有帮助，因为前端不再需要后台配置路由、搭建服务器环境、编写模板等，这样一来前端的生产力就会得到很大程度的解放，但是前后端分离的项目有利也有弊，如下图所示：
最终我们需要根据项目需求衡量利弊来决定是否使用前后端分离的模式。
7.规范与模式
团队协作离不开编码规范和开发模式的帮助。遵循编码规范文档可以帮助我们在团队开发时提高合作开发的效率。一个团队遵循一套编码规范可以使每个人的代码写出一个人的风格，这样团队间相互审查、测试、完善功能时会非常高效。下方是一些开源的前端编码规范文档：
网页链接
首页-TGuide
网页链接
网页链接
除了编码规范我们在开发时经常会沿袭了一些已经存在的模式来解决问题，比如当用JS编写弹框时我们往往会用到单例模式，用CSS编写动画时直接套用动画的常用属性等，我们不再需要从头开始思考某一个功能的实现，这就是模式带来的意义。
结语
当然除了以上7点，对于前端来说需要提高开发效率的地方还有很多，可谓任重而道远。只有将前端无序、繁杂的操作组织起来，利用工具简化、规范前端流程，才能实现项目构建、开发、维护的一体化。希望本文能够给初识前端的同学带来启发并付诸实践。
‘捌’ 电商前端架构设计
什么是前端架构
说到架构，很容易拉出一系列的概念知识点，像系统架构、软件架构、框架等等，这些不是今天探讨的重点，大家可以下去网络来理解。架构的本质是什么？其实也是一种管理。通常我们所说的管理，都是指对于任务和人员的管理，而架构管的是机器和代码。比如说，机器的部署属于运维的物理架构，SOA属于服务架构，那么，前端的架构指什么呢？
长期以来，前端所处的位置是比较偏应用层，很薄的一层，而架构又要求深度和广度，所以之前在前端里面做架构，好比在小水塘里游泳，稍微扑腾两下就到处碰壁。但最近这几年来，随着一些列新的技术和概念的出现，前端的范围被大大拓展了，所以这一层逐渐变得大有可为。
单纯从语言的角度来说，html、js、css是最简单最容易上手的开发语言，不考虑模块化、工具、压缩优化，任何人都可以快速上手，完成一两个功能简单的页面。在规模很小的项目中，前端技术要素彼此不会直接产生影响，因此无需架构相关的思考。由于前端语言这种灵活松散的特点，使得前端项目规模在达到一定规模后，工程问题凸显，成为发展瓶颈，原来孤立的技术要素开始彼此产生影响，各种技术要素彼此之间开始出现关联，要用模块化开发，就必须对应某个模块化框架，用这个框架就必须对应某个构建工具，要用这个工具，就必须对应某个包管理工具……这个时候，需要有人从比较高的角度去梳理、寻找适合自己团队的集成解决方案。而这一系列解决问题的工具和手段就是所谓的前端架构。
架构不等于框架这一点很好理解，相信大家都能够很深入的说明这里的差别，框架是架构的重要组成部分，架构决定框架的选型，框架决定架构的技术路线。架构围绕框架进行一系列的流程工具建设，从而形成完善自动的开发体系。
+框架不等于类库，这里就是很多人困惑的点，你用的什么框架？jquery、underscore、linq、seajs、requirejs等等，每个人都能够列举一大堆。但这个是不准确的，一套编码框架是有一系列的元素组成：开发模式，我们如何来实现代码的职责分离。以前整个前端是mvc中v这一层，而现在前端内部也进行了mvc的逻辑细分，Javascript的MVC框架现在很多，有的强化m、有的强化c。每一个框架其实都有其特点的，并且有越来越多的创新改造，比如现在最流行的是mvvm。有angular、react等等。我们是为了引入mvvc才把他们纳入到我们的开发体系，而不是因为他是一个好用的类库。
通讯，模块化、组件化是前端在推进开发模式过程中的一个过程产物，为了有效的进行组件隔离和独立，现在有各种各样的通信模型出来，不过由于实现简单，代码少，他往往是合入到某个类库里面，但本质也是一个类库。比较成熟的比如：消息总线、事件模拟、缓存中转、flux模型等等。
模板，我们用什么样的方式来集中的处理数据往html的转换过程，这里就不用多展开，这种类库现在太多了，光我们公司就有很多套，大家在代码行、缓存管理、预编译、运算性能、强大的语法等等各个维度不段追求各种极致。
基础类库最后才是传统类库，相信现在已经没有同学会在项目中去约束团队中的dom操作、常用函数、方法、异步化等等各种很基础东西，这个时候我们一般就是引入jq、zepto、underscor这些封装好的东西就行了。核心就是为了改善编码生产力。
对于框架的选型要从两面看，一是看该框架的本领，二是看你们团队的能耐。从经验上给几个点建议：
这里也可以顺便展开聊一下现在前端产品的形态分类：
从这些分类里面，我们这些年派生出了所谓全端和全栈的概念。但本质上怎么走还是要由所在产品的形态来决定。
内容型Web站点 侧重渲染方面的优化，前端逻辑比重小
操作型B/S系统 以数据和逻辑为中心，界面较规整
hybrid内置型，要处理缓存和一些本地接口，包括PC客户端和移动端。现在的本地应用，基于很多考虑，都变成了混合应用，也就是说，开发这个应用的技术，既包含原生的代码，也包含了嵌入的HTML5代码
Web游戏，前端的逻辑非常重，在代码结构上要求非常高的可管理性和更复杂的设计模式。
桌面应用型，现在有一些PC端的混合应用开发技术，比如node-webkit和hex，前者的典型应用是XDK，后者的典型应用是有道词典，此外，豌豆荚的PC客户端也是采用类似技术的，也有一些产品是用的qt-webkit。这类技术可以方便做跨平台，极大减少开发工作量。
大工程应该尽量避开谷歌产品，他的很多技术开源项目都是玩票性质的，GWT、Closure、Darty就是前车之鉴。曾今提出过很多的新技术，到现在还是独家的，变出太大。包括现在angular，喜欢做断崖式升级，做做运营后台系统问题不大，如果是线上系统的话，每次升级就是一次人月神话中的典型焦油坑。
关注应用场景，像刚才说到的boss后台是一种；另外我的平台是否有沉重的历史包袱，需要兼容ie6，还是可以轻装上阵；产品对于seo是什么样的态度？是否需要考虑自适应？或者我的团队足够大，能够各搞一套？；产品特征是强内容还是强交互或者是游戏性。这些都是选择不同框架的主要出发点。
没有最好，只有最适合自己的，基本上，针对每个平台，我们都可以列出一些主流框架，但不意味着你们都能驾驭得住。小马过马，老牛没过膝，松鼠淹个半死，就是这么回事。但无论我们选择什么框架或决定自己动手造轮子，都勿忘初心，技术必须让我们工作生活更为轻松愉快——我们只选择我们能驾驭住的框架，我们不能保证它在一年后是否会过时落后。
而且按照我个人这么多年的经验来看，任何框架都会过时，往往不是因为他不够好，而是因为一定有更好的出来。我们再选择一个框架或者一个类库的时候就要想好，未来我如何抛弃他。至少不能成为我们引入新的框架的绊脚石。现实的工作中很多的团队往往会陷入到年复一年的用今年的新框架去重构去年老框架代码的历史循环中去。对于引入框架如何尽量延长他的生命力，我个人的意见是选择框架时去追求概念，而不是潮流，当我的架构可以接受新的设计概念的时候才去考虑引入新的框架。用设计理念的选择代替框架的选择。之所以这么说是因为我观察到我们部门的后端架构的开发理念跟我进公司的时候是差不多的。更多你可以参考成都网站建设
架构的组成
组件框架
‘玖’ 在前端中什么是组件化 什么是模块化
模块化更一种开发规范，比如cmd amd 是为了更好的解藕，比如一个网站，按照不同的模块来开发，比如你有个评论区，a 项目有，b 项目有，如果仅是单纯的模块开发，这个js 文件你就可以单独来回引用，
更比如 ，一个页面 分好多个功能， 这时候你要是都写在一个js 中 会越来越大，
而你把他分成不同的模块，
比如评论是一块
分页又是一块，
已经上线，或你不做了，后期别人拉手，或你接手别人的项目， 这时候来个需求让你把分页去掉，或修改 你可以清楚的找到对应模块文件 进行修改 或去掉
模块是自定义的，
组件，更想当于一个通用的东西，有的分功能组件，有的分业务组件
大图切换，这种就是单纯的一个效果展示，只要调用就ok
一个分页，也是只单纯的调用，
组件更是一个多处都可以使用 ，不需要再单独开发的
‘拾’ 常见的前端集成部署方案有哪些各自的优缺点是什么
前端行业经历了这么长时间的发展，技术元素非常丰富，这里列举出一般web团队需要用到的技术元素：
开发规范：包括开发、部署的目录规范，编码规范等。不要小瞧规范的威力，可以极大的提升开发效率，真正优秀的规范不会让使用者感到约束，而是能帮助他们快速定位问题，提升效率。
模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。
组件化开发：在模块化基础上，以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等，甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装，解决一些常见的组件渲染、交互问题。
组件仓库：有了组件化，我们希望将一些非常通用的组件放到一个公共的地方供团队共享，方便新项目复用，这个时候我们就需要引入一个组件仓库的东西，现在流行的组件库有bower、component等。团队发展到一定规模后，组件库的需求会变得非常强烈。
性能优化：这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富，就不在这里展开了，感兴趣的同学可以阅读我的这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是性能优化一定是一个工程问题和统计问题，不能用工程手段保证的性能优化是不靠谱的，优化时只考虑一个页面的首次加载，不考虑全局在宏观统计上的优化提升也是片面的。
项目部署：部署按照现行业界的分工标准，虽然不是前端的工作范畴，但它对性能优化有直接的影响，包括静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间。
开发流程：完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本，工作这些年见过很多独立的系统（cms系统、静态资源推送系统）将开发流程割裂开，对前端开发的效率有严重的阻碍。
开发工具：这里说的工具不是指IDE，而是工程工具，包括构建与优化工具、开发-调试-部署等流程工具，以及组件库获取、提交等相关工具，甚至运营、文档、配置发布等平台工具。前端开发需要工具支持，这个问题的根本原因来自前端领域语言特性（未来我会单独写一篇文章介绍前端领域语言缺陷问题）。前端开发所使用的语言（js、css、html）以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。由于这些工具通常都是独立的系统，要想把它们串联起来，才有了yeoman这样的封装。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响，因此能否串联其他技术要素，使得前端开发形成一个连贯可持续优化的开发体系，工具的设计至关重要。