首先声明，我不是标题党，你可以说我是老司机，但是这次绝对不会把你带沟里去，关于技术类的文章千篇一律，估计早就看烦了，不妨细细品味这篇文章，带你认识一个不一样的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: 馒头
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
