你的位置:首页 > 软件开发 > ASP.net > web前端架构

web前端架构

发布时间:2015-12-25 21:00:26
每天上班,看着被无数码哥擦过一遍又一遍的代码,整个人都不好了。"爸,妈,请原谅我的不辞而别,地球有灾难了,我必须站出来了!" 在前端开发过程中,怎样才能写出耦合度低,好维护的代码呢?我认为一个好的架构是必不可少的。当然,这也需要开发人员严 ...

  每天上班,看着被无数码哥擦过一遍又一遍的代码,整个人都不好了。"爸,妈,请原谅我的不辞而别,地球有灾难了,我必须站出来了!"

      在前端开发过程中,怎样才能写出耦合度低,好维护的代码呢?我认为一个好的架构是必不可少的。当然,这也需要开发人员严格遵守该架构进行开发,不能钻架构的空子,如果实在担心某些屌丝不着调,非得跟你玩李埂楞,那架构中的异常抛出机制是必不可少的,不照规矩走,就给你抛各种异常,让你走歪路,完不成任务,无限加班,不能早点回家抱老婆......

      如今的前端,玲琅满目。新技术层出不穷,我们要在万恶的深渊中另辟新径。

      我们不妨回到现实生活中,因为我们除了是一名码农,还是一个玩手机的宅男。说起手机,硬菜来了,每个人都有一部手机,可以将其当做我们的前端模块,在这个模块的内部,我可以干各种事,玩游戏,看视频,听音乐等等,不会跟你的手机有任何关联,也就是解耦了。那么问题来了,是模块总是要通信的呀,该怎么通信呢?上图:

 

web前端架构

  A手机想要和其他手机通信,是必须经过运营商的,所以我们的前端模块之间需要进行通信,也需要一个类似于运营商的东西,而该东西就是整个架构的核心,那就是事件管理者(EventManager)。通过事件管理者,当A模块需要调用B模块里面的render方法时,A模块将会通过事件管理者通知B模块执行它的render方法。反之,当B模块需要调用A模块的get方法时,也通过事件管理者,通知A模块执行它的get方法。这样A模块中不会存在B模块的字样,B模块中也不存在A模块的字样,它们中只会存在EventManager,一个为二者建立通信的通道。

      这其实就是设计模式中的观察者模式,也称之为发布订阅模式。上面提到的事件已经不单是浏览器自带的那些事件(click,move等),它是有一定含义的自定义事件,可以起任何名称,比如:'dataChange'(数据改变事件),'render'(数据渲染事件),'clear'(页面清空事件)。模块内部,我们分层进行开发,采用mvc或者mvvm的开发方式。mvc只是一种设计思想,可以将model,view,controller分三个js文件开发,也可以在一个js文件中实现3种层次,另外controller过于臃肿的情况下,我们对其可以进行二次乃至三次分层,例如可以分成业务层,服务层等。我想说的是,mvc只是一种思想,它没有规定你必须几个文件,怎么书写,怎么具体分层,我们完全可以在符合思想的情况下为所欲为。结构如图:

web前端架构

  

      

上例子:

1、模块A:

 1 T.ModuleA = { 2   init:function(){ 3  4     // 事件监听,监听清空事件 5     T.EventManager.addEvent('clear', this.clear, this); 6   }, 7  8   clear:function(id){ 9     document.getElementById(id).innerHTML = '';10   }11 }

原标题:web前端架构

关键词:Web前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录