当前位置:Gxlcms > html代码 > 前端架构搭建心得_html/css_WEB-ITnose

前端架构搭建心得_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:4人阅读

在这个公司待了半年多了,对公司的心情就不暴露了,不过有幸的是在最后的日子里面接手了一个让我尽全力去做的项目(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前端这个行列,幸运的是入门的时候没有给我亮起红灯。

人气教程排行