当web前端架构方案遇上《金瓶梅》?!

原创
2017/09/25 15:00
阅读数 880

图片描述

首先声明,我不是标题党,你可以说我是老司机,但是这次绝对不会把你带沟里去,关于技术类的文章千篇一律,估计早就看烦了,不妨细细品味这篇文章,带你认识一个不一样的web前端世界,文章主要结合金瓶梅中的人物属性和web前端架构的模块划分关系,分享一个关于我对web前端架构的一点点别致的看法,如果能耐心的看完,对你构建复杂的web应用一定有所收获,当然,有讲的不好的地方,也希望各路大神多多指点,废话不多说,上正文。

大家知道《金瓶梅》中几个重要角色:武大郎潘金莲西门庆武松王婆。在故事情节中,各种角色扮演起到不同的作用,互相关联,将故事情节紧密联系在一起,这样的情节构造堪称经典,已然成为经典,而在构建复杂的web前端应用时候,也需要一些模块互相作用,构造一个完整的系统。

潘金莲(插件):我觉得这个比喻再合适不过了,如果这里你只看到公用性,那你就想简单了,潘金莲除了公用性,还有美,没错,插件不仅要有公用性,还要美。这里的美是指代码的简洁,轻量,高维护,对于一个复杂的项目来说,往往会对插件有些特殊的要求,在使用插件的时候,你必须对插件有较深入的了解,确保你能驾驭她,当然在必要的时候,你可以自己造轮子。

武大郎(入口函数):任何一个复杂的项目,都有一个入口,而这个入口必须是很简单的。也就是我们C里面的main函数。入口函数必定是存在一些全局的配置,模板渲染,事件初始化等。入口函数是独一无二的,就像武大郎的身高,在整个《金瓶梅》中,你绝对找不到第二个,所以入口只需要一个,我们不需要在入口上去实现过多的方法,入口的作用是梳理业务逻辑。

武松(方法类):在一个复杂的项目中,一个类是不能完成我们的业务的,当然这里的武松不是只一个类,而是泛指其他类,在我们梳理好业务逻辑之后,将项目的类提取出来,将其划分在方法类之中,当然,划分的越准确,我们的项目业务就越清晰,这里是考察技术的核心点,武松的强大,大家都知道,徒手劈老虎,如果你提取的方法类太弱,连武大郎都打不过,那《潘金莲》这个项目估计就废了,因为如果武松杀不死这对奸夫淫妇,故事就没有一个好的结局。

西门庆(视图):为什么要把西门庆比作是视图呢?没为什么,就因为书中说西门庆长的帅,视图是给客户看的,所以一定要有一定的观赏性,当然在《金瓶梅》这个项目中,视图过多的使用了插件,而在实际项目中,这种情况是很少的。我们在做一个前端项目的时候,视图是必不可少的,因为很多业务是在与视图的交互中产生的,这里的视图能共用就尽量共用,西门庆也不止一个老婆,就是这个理儿。

王婆(配置):西门庆之所以能和潘金莲勾搭在一起,全靠王婆的功劳,如果没有王婆,当然西门庆就要靠自己去和潘金莲交际,这样不免会加大被发现的风险,所以最好将配置文件单独提取出来,方便项目的维护和修改,这里的配置文件是泛指所有的公用配置。

有了主类,插件,方法类,视图,配置 这几个主要的架构,我们的web前端项目也就轻松多了。别以为文章就完了。学以致用才是最关键的,来看看实际的应用,这些心得出自我的一个开源项目,下面是项目截图,网址:www.h5ds.com

图片描述

项目入口: 我给项目定义了一个入口 h5ds.js

插件库: 插件放在unit文件夹下面。我针对该项目封装了40多个插件,基本上都是自己造的轮子,为什么要造轮子?很简单,我只想让项目更轻,更快,网上很多轮子未必是最适合我的项目的,如果一个拖拉机非要安装个法拉利的轮子,那跑也不起来,更别说性能了,最好的,不一定是最合适的!对于框架和插件来说,都是一样。

方法类:我的方法类定义在core文件夹里面,对于类的设计,如下图所示。App类是主类,>包含Page类,Page类包含Layer类,他们只有包含关系,并没有继承关系。 手机H5,web页面,小程序等 继承App类; 手机页面,PC页面,弹窗,浮动层 继承 Page类; 文本,图片,视频,幻灯片,SVG等 继承 Layer类; 图片描述

视图:视图我放在tpls文件夹里面的,这里面包含了所有的界面,从上面的软件截图也可以看出来,视图是很美观的,略带一点点骚。

配置: 关于一些全局的配置文件,我放在了 conf文件夹里面。这里包含了全部的配置项,这样会让我的项目维护起来非常方便,不用全项目里面去找一些常用配置项。

有了这些关键的模块,接下来就是在项目中将其关联起来。一个复杂的前端应用就这样轻松完成了,是不是感觉很有帮助呢?如果该项目对你有帮助,别忘了在开源社区给我点个star。非常感谢!

by: 馒头

展开阅读全文
打赏
1
1 收藏
分享
加载中
馒头博主
我就知道,这样的文章,老司机们都喜欢~
2017/09/26 13:47
回复
举报
s
2017/09/26 13:28
回复
举报
更多评论
打赏
2 评论
1 收藏
1
分享
返回顶部
顶部