现在的前端需要用的东西越来越多了。每间公司采用的技术不一样，每个人都有自己的一套开发流程以及开发架构。
现在前端的岗位职责我们可以看出，前端工作可以分为两种：一种是偏静态，即HTML、CSS开发，一种是偏交互，即JavaScript、前台逻辑和前后端交互。这两种工作对人的要求是相差很大的，偏静态的可以不涉及太多编程和逻辑，对视觉体验非常敏感、而后者对JavaScript要求较高、要有一定的编程能力、熟悉前后端协作模式、熟悉HTML和CSS、有一定的前端架构能力。
前后端分离
尽管现在前端框架以及架构又或者技术包罗万有，作为一个前端，你可能需要懂Angulars；Nodejs;React;Backbone；Vue等等等一堆东西。想象一下这个场景多么美好：前端来决定某个模板是服务端渲染还是客户端渲染，当首屏的时候，就在nodejs里面生成HTML，不是首屏的时候，就AJAX过来在浏览器端渲染展示。
现阶段我在公司开发的就是采用Angular架构的一个架构，关键词叫：SPA(Single Page Application)也就是所谓的单页应用；切换页面或者场景的时候并不会跳转页面，只是去改变链接上的hash值，这个锚点由route监听到，从而就由前端实现了对URL的掌控，采用的前后端的分离，已经基本分的很清楚了，后台只管数据输出和业务逻辑处理，前端负责交互逻辑和界面展示，其他方面就需要前后端在接口的方面约定好，以避免不必要的麻烦。
项目目录结构
|--porjcet
|--PC端
|---js
|--common
|--Ng-route.js
|--util.js
|--API.js
|--controller
|--xxx.js
|--lib
|--require.js
|--jquery.min.js
|--module
|--header.js
|--footer.js
|---css
|--xx.css
|---html
|--模块目录（根据项目需要划分模块）
|--个人页 xxx.html
|--主页home.html
|--列表页list.html
|--index.html
|--heaer.html
|--container.html
|--footer.html
|--touch移动端
|---js
|---css
|---html
目录说明
模块划分目的在于促进复用，并行开发，以提升开发效率。现在把项目划分为4个目录
分别是:HTML;CSS;JS;IMG; 通过地址栏的URL做到按需加载；再在加载的同时进行模块化划分；把每个模块都加载到index里面的container； index.html只是一个容器，它是转载各模块的容器；
JS目录：
common目录：放置公用的文件；
|--Ng-route ： 配置页面的唯一ID入口；根据当前地址栏的url进行配置相对应的模块ID进行按需加载HTML;CSS;JS
|--util ：全局方法；公用属性；一些公用方法、自己封装的插件都可以放到里面调用；
|--API：顾名思义就是后端配的API数据文档
controller目录：放置处理对应页面数据以及逻辑功能的js文件
lib目录：放置插件库；Jquery；sea或者require 的公用插件库
module目录：需要进行对外提供接口依赖的文件；必须要对外提供接口:exports；到了需要依赖的目录文件就可以直接进行依赖
CSS目录：
把每个模块的CSS都放里面；可做目录区分
HTML目录：
对应每一个目录或者模块下的HTML文件；便于修改、查找；
这样配置项目有几个好处：
1. 极大的简化前端开发，减轻前端开发的压力；页面加载模式方法都是用AJAX去调用生成；
2. 实现了很好的前后端开发分离，前端开发工程师甚至不需要知道后端返回的数据格式，只需要知道请求地址即可执行开发；
3. 具有良好的可用性，即便是在客户端脚本出错的的情况下，系统基本功能都能够正常运行；
主要逻辑图：
各种架构模式都有自己的特点，身为一个前端工程师这些都是需要了解的，
然而，更重要的是，结合项目实际，灵活运用随机应变。
各种库丰富多彩，它们也是为了解决那个阶段的问题而出现的。
网友评论