前端架构搭建心得

前端架构搭建心得

在这个公司待了半年多了，对公司的心情就不暴露了，不过有幸的是在最后的日子里面接手了一个让我尽全力去做的项目（CQM系统）。 从第一家公司上班到现在，我也在网站这块挥霍了1年半的青春了，从后端到前端，从陌生到熟悉，渐渐的对网站的知识开始稳定的深入学习了。 我一直想自己做一个像样的东西，可是每次都没法下定决心，1是自己能力不够，2是时间上自己想偷懒，所以这次的CQM项目也算是对自己一个小小的检验吧。 ok，开始说正题，在公司我不属于项目部，由于其它原因我有机会负责这个项目的前端框架这块。 和自己想的一样，这是一个小小的OA项目，因为前端这块基本上我完全负责，所以里面的东西基本都是我自己的想法。 PS:由于有些内部资料，我不方便透露，见谅.

上面的图片是目录结构，接触过微软MVC的同学应该看出来了，没错，虽然我做前端，但是我学过C#，熟悉的就是微软的MVC，现在我用的是MVC4，当然，我用到的IDE认识微软MVC的同学也知道了吧。 首先，虽然做前端，但是我自己也需要一个简单的服务器来处理一些数据，MVC(后面的MVC皆为微软的MVC)是我一个不错的选择，因为只会这个嘛。。。

抛开其它的文件夹，主要看展开的两个. statics和views文件夹，第一个[statics]里面装的是一些静态文件，当然ashx是放错位置了，这东西修改后需要编译，不过这东西用的不多。第二个[views]里面是页面文件。

用于我这边没有和项目组一起，在单独做，所以完全是前后端分离，只用了一些数据测试的后台编程。 我做前端的时候大体思路是：模版布局、控件组合生成、目录结构布局。 怎么理解这句话呢，我下面用一个图来说明. 这两张图是statics文件夹的说明图，因为我内部有内嵌框架，所以就有了father和son这两个文件，因为第二层内部有可能还有一个内嵌框架，end这个文件也就出来了。 下面这张图是页面布局的一个草图

从上图中可以看到，整个前端页面有3层，当然，也可以做成1层，不过因为ifrmae的框架变化很大，所以我就用3层包裹了。PS：左侧导航属于第二层. 图片3中json文件夹是存储网站需要的json数据格式的，ashx文件夹中用于测试服务器数据，plugin文件夹里面放的是js的各种框架。 zoeDylan是前端的数据处理层，无需任何其它js框架，dgg是元素交互和元素处理层，用了jq框架。 综上所述，前端静态文件和页面数据块差不多就这样了，接下来是views文件夹.

其它文件夹就不说了，主要是shared共享文件夹. 同上，son是第二层的视图公用文件，end是第三层公用的视图文件，header是头部内容，frame是所有层都需要的，主要是一些文件引用。

到这里页面的文件就ok了，接下来是逻辑思路说明. 做这个项目的时候才开始很有激情，但是1个月过去了就感觉到了吃力，因为我发现自己的能力不够啊，但是代码都写了几万行了，总要有些用嘛。 整个前端的逻辑是：后台拼合视图模版，js处理数据和显示。

页面从请求到展示的逻辑就是这样了，红线是必须加载，绿线是可能加载，最后是frmae页面中呈现，｛请求一个页面地址-模版套用-输出｝会mvc的同学应该知道mvc页面是怎么处理的，这里我就不详细说了。

ok,页面加载完成了，那数据呢？ 我这里的数据是json与Ajax的交互完成的，页面处理的过程中会在模版指定的div或者直接运行js上添加一个json的数据请求地址，地址会返回一个json格式的数据，然后js就开始处理，生成最后呈现在页面上的内容。

这个是dgg.js文件，用于处理数据，认真的同学会发现这个文件会创建dgg和_father两个全局函数。没错所有页面都会有这两个全局函数，dgg是包含了所有公用的数据和元素处理函数，_father是包含了最顶层框架的函数,为什么要这样做呢? 1:dgg中继承zoeDylan.js是为了统一函数，应该公司需要嘛，我就这样做了， 2:_father是为了调用顶级页面的一些事件,比如说全屏弹窗、状态显示、消息推送等。 这里主要说一说dgg.element这个函数，因为页面的数据完成基本上都是这个函数在处理。 dgg.element是一个创建页面组件的处理程序，你传入一个json格式数据，然后会根据你指定的组件名称创建一个组件，然后返回一个jq函数的组件。 下面是dgg.element函数的一些截图 dgg.element开放的方法只有两个:dgg.element.create和dgg.element.template 前者是创建组件，后者是定义组件模版的. dgg.element的处理逻辑是:调用开发方法create-内部处理：jsonSet判断组件，提取模版tempLate中的模版样式---调用eleTemplate中对应的组件方法,用于处理组件事件---调用setAttr方法，用于处理公共元素属性---返回jq函数的组件 这里tempLate可以自定义在json的数据中，也可以用dgg.element.template配置模版和模版方法eleTemplate。下面举一个例子：

例子:生成一个组件

我要生成上面的组件，我传入的json格式就是

json中eName就是模版名称，获取json后调用dgg.element.create(json)，开始处理步骤

1:先是jsonSet处理数据,主要判断是否是多个组件

2：创建组件

3：组件事件编写,里面就是组件一系列的处理，包括组件的事件等

4：公用的组件属性处理

到这里这次笔记就结束了，由于楼主经验不足导致搭建过程中出现了N多问题，现在都还有一堆问题没解决，由于过年了放松下，年后还有加班加点做，这次的项目中自己学到的东西也不少，很容易就发现自己的不足和经验的欠缺，这次写这个笔记是对自己的第一次写前端架构的一个总结和记录，项目不怎么样，新人可以看看学点逻辑的东西，大神求指点，

我是WEB前端小菜鸟一枚，上学不学无术，入社会时不小心误入WEB前端这个行列，幸运的是入门的时候没有给我亮起红灯。