当前分为以下四个阶段

开发过程当中注意：前端安全XSS CSRF攻击等 后期文章中将讲述如何处理

尽管web应用复杂程序与日俱增，用户对其前端界面也提出更高的要求，但时至今日仍然没有多少前端开发者会从软件工程的解度去思考前端开发，来助力团队的开发效率，以下我们使用以上说明的四个阶段来完成基本的前端项目开发流程及技术选型

第一阶段:库/框架选型

使用react框架实现，基本上现在没有人完全从0开始做网站了。React框架，解放了不少生产力，合理的技术选型可以为项目节省许多工程量这点毋庸置疑。

React特点

1 声明式设计—React采用声明范式，可以轻松描述应用

2高效—React通过对DOM的模拟，最大限度地减少与DOM的交互

3灵活—React可以与已知的库或框架很好的配合

4 JSX —JSX是javascript语法的扩展，React开发不一定使用JSX，但我们建议使用它

5组件—通过React构建组件，使用代码更加容易得到复用，能够很好的应用在大项目的开发中。

6单向响应的数据流—React实现单向响应的数据，从而减少重复代码，这也是它为什么比传统的数据绑定更简单

React单向数据流：在React中，数据的流向是单向的—从父节点传递到子节点。因为组件是简单而且易于把握的，他们只需要从父节点获取props渲染即可，如果顶层组件的某个prop改变了，React会递归的向在便利整个组件树，重新渲染所以使用这个属性的组件

第二阶段：简单构建优化

由于我们当前技术选择为react解决了开发效率问题 ，但是必须要兼顾运行性能。前端工程进行到第二阶段我们将选一种构建工具，对代码进行压缩、校验，之后再以页面为单位进行简单的资源合并。

构建工具

node ：5.0.0+

npm： 3.0.0

webpack :^2.3.2

react ：^15.5.4

react-dom ：^15.5.4

react-router:^2+暂时不使用3.0+因为3.0以上版本路由写法完全不同

至于其它插件将在项目中体现

第三阶段JS/CSS模块化

JS模块化—JS模块化方案很多如AMD/CommonJS/ES6 Module

我们当前使用webpack按需加载react

reqiure.ensure

基本使用

require.ensure(dependencies,callback,chunkName)

例如

const Index=(nextState,cb)=>{

require.ensure([],require=>{

cb(null,require(‘../pages/index/Index’).default)

},’Index’)

}

在路由中使用getComponent

CSS模块化：使用less。具体说明将在第四阶段组件化中详细说明

第四阶段：组件化开发与资源管理

1组件化开发

组件分开发是非常重要的工程优手段。也是react开发必备技能。前端光有JS/CSS的模块化还是不够的。对于UI组件同样迫切的需求

前端组件化开发理念：

如上图所示这就是前端组件开发理念，下面我们来总结一下

1、页面上的每个独立的可视。可交互区域视为作一个组件;

2、每个组件对应一个工程目录，组件所需的各种资源(JS、Image、CSS)都在这个目录下就近维护;

3、由于组件具有独立性，因此组件与组件之间可以，自由组合;

4、页面只不过是组件的容器，负责组合组件形成功能完整的界面;

5、当不需要某个组件或者想要替换组件时，可以整个目录删除/替换

注：每二项中就近维护原则是工程化的体现。每个开发者都清楚知道，自己所开发维护的功能模块。因为代码必须存在于对应的组件目录，当前目录包函 CSS、JS、HTML、Image

结合前端提到模块化开发。我们将划分为几种开发概念

根据上述描述我们将构造一个项目的基本流程

项目初期前端静态页面只包函CSS、HTML

目录名称：frontEnd

less文件结构对应生成css文件

按照上述描将形成如下文件结构

接下将是前端使用react组件化重点