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

WBOY
Freigeben: 2016-06-24 11:49:18
Original
1180 Leute haben es durchsucht

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage