Javascript的一种代码结构方式——插件式
上几周一直在做公司的webos的前端代码的重构,之中对javascript的代码进行了重构(之前的代码耦合严重、拓展、修改起来比较困难),这里总结一下当中使用的一种代码结构——插件式(听起来怎么像独孤九剑一样.....)。
代码结构
这直接上代码结构图(Javascript部分)
ps:箭头的指向A->B,表示A调用B
由上面可以看到四种类型的东西:
控制类:提供一个全局的命名空间、保存上下文信息、组件、组件提供的全局方法,负责调用组件初始化。
代码示例如下(不完整):
var webos= {context :{},components : [], //所有组件 methods : {}, //组件提供的方法//webos入口load : function(webosContext) {webos._init();webos._uiRender() ;webos._dataRender();webos._eventRender();},//初始化_init : function(){$(webos.components).each(function(index, component){component.init(webos.context) ;});},//ui渲染_uiRender : function(){},//数据加载_dataRender : function(){},//绑定事件_eventRender : function(){},//注册全局方法addGlobalMethod : function(methodName, method){},//调用全局方法execGlobalMethod : function(methodName, params){},//注册组件registerComponent : function(component) {webos.components.push(component);} };
工具类:提供工具方法,不属于组件和基础类的方法将会放在这里。
webos.utils = {... }
基本类:最基础的类,供给组件使用,原则上一个能称为对象的东西都应该写成一个类。
例,下面组件的接口实现类:
var IComponent = function() {this.init = function(context){};this.uiRender = function(context){};this.dataRender = function(context){};this.eventRender = function(context){};this.reload = function(){}; }
组件:例如导航栏、工具栏、任务栏、桌面组件,都是以一个组件形式存在。
在组件里面,组件的创建、初始化、数据渲染、事件绑定都自己解决(有点像自治区)。
//导航栏组件 ;(function(webos){var NavBar = function() { };//继承Component基类NavBar.prototype = new IComponent();NavBar.prototype.init = function(context) {};//定位为构建基础的HTMLNavBar.prototype.uiRender = function(context){};//加载数据NavBar.prototype.dataRender = function(context){};NavBar.prototype.eventRender = function(context){};....//注册组件webos.registerComponent(new NavBar()); })(webos);
组件之间怎么联系呢?
组件与组件之间进行沟通的手段只有一个——就是将自己给其他组件使用的方法提供给控制器(调用控制器的addGlobalMethod),控制器保存你的方法,当其他组件使用你的方法时候,就向控制器要(调用控制器的execGlobalMethod )。
为啥这种结构叫插件式呢?
看过控制类和组件的代码就知道,控制类只负责帮助调用已经注册到控制类里的组件的初始化方法、组件完成关于自己的所有事。所以当我们需要做一个新的组件时候,只需完成自身的创建、渲染、事件绑定,然后注册到控制类里,控制类就会帮你初始化,组件间互不干涉,这就是插件式(好吧,这是我的理解,并没有这种官方的定义)!!!
优点?
1、组件的维护、拓展非常简单,因为都是独立开来
2、添加新组件对已存在的组件几乎没有影响(当然你写的组件也不要影响他其他组件、例如样式、HTML)
缺点!
1、这种结构有应用场景要求,更偏向富web应用使用
Javascript的一种代码结构方式——插件式相关推荐
- C\S结构的插件式开发思想以及向B\S结构的架构延伸(二)
忙碌的好多天过去了,自从上一贴发出后,不少同仁都对插件式开发提出了自己的看法以及分享一些插件式开发比较典型的例子,感谢李锋.肖明等 同仁的分享,也感谢所有顶贴的同志,今天来分享一下插件式开发著名的产品 ...
- 【基础篇】JavaScript的4种代码调试输出方式
前言 JavaScript 不提供任何内建的打印或显示函数.那么我们在日常开发的时候,需要调试输出和打印的结果的时候该怎么办法呢,这里给大家推荐4种显示方案: 使用 window.alert() 写入 ...
- javascript测试三种字符串替换方式效率
//第一种 直接正则表达式替换一次 function replaceTrim1(source){ return source.replace(/^\s|\s$/g,""); } ...
- JavaScript es6 五种常见继承方式
前言 参考: 原型和原型链 原型继承和 Class 继承 B站讲解 原型链 实例对象的隐式原型__proto__指向函数对象的显式原型prototype,原型的最终指向是Object的null 当我们 ...
- java的三种代码注释方式
1.注释的作用 注释是对程序语言的说明,有助于开发者之间的交流,方便理解和维护程序.注释不是编程语句,不会被编译器执行.一些代码量少较少的程序,我们加不加注释对我们的理解和修改代码没有太大影响:如果是 ...
- android换肤动画,Android换肤(二) — 插件式换肤
###前言 上节我们讲到了`Android-skin-support`库的应用内换肤,大家感兴趣的可以参看文章: [Android换肤(一) - 应用内换肤](http://www.demodashi ...
- angular移除事件绑定事件绑定_002-js的三种事件绑定方式
不说太多虚的,这次要聊的,是JavaScript的三种事件绑定方式. 方法1:直接在HTML中指定,称为"内嵌"会不会更合适一点? (1)直接在HTML的属性里写代码 示例代码: ...
- 【译】关于 Go 代码结构的思考
关于 Go 代码结构的思考 原文地址:https://changelog.com/posts/on-go-application-structure 原文作者:Jon Calhoun 译者:lsj13 ...
- 什么是CHIP LAN片式网络变压器?片式网络变压器分哪几种?目前应用较多的是哪种片式结构?
Hqst盈盛导读:目前,面对全球网络设备产品的需求大幅提升,网络变压器作为网端设备产品的必要元器件,市场需求旺盛.传统网络变压器也临近新一次的变革,那我们今天来了解一下新型 片式的网络变压器 什么是C ...
- 插件式编程SBP框架极简教程(基于SpringBoot)
插件式编程SBP框架极简教程(基于SpringBoot 一.前言 二.背景 三.项目简介 四 .看效果 4.1 测试主程序接口 4.2 测试A插件程序接口 4.3 测试B插件程序接口 五 .展望 一. ...
最新文章
- 如何用Asp判断你的网站的虚拟物理路径
- 微软私有云分享(R2)1-自定义脚本
- Sqlserver 2012 导入 DBF文件
- 排序算法的python实现
- kafka 运行一段时间报错Too many open files
- java merge json出错删除相同的json
- python把汉字转换为二进制数_在Python中,如何将8位二进制数转换为ASCII字符?
- python 一次输入10个数_python 如何一次输入3个整数
- php websocket 是否在线_看完让你彻底理解WebSocket原理,附实战代码(包含前端和后端)...
- python元祖迭代_如何在Python中迭代元组的堆栈
- erp采购总监个人总结_erp采购总监总结.docx
- httpd svn 编译安装_CentOS 6 编译安装Subversion-1.8.10+Apache2.4
- 有助提高效率的Web前端开发框架有哪些?
- c语言中整形常量表达形式,C语言中整型常量的表示方法.doc
- msxml3.dll 错误 '80072efd' A connection with the server could not be established
- 最全面计算机英语核心单词分享
- 2022-2028年全球与中国蜗牛美容产品行业竞争格局与投资战略研究
- 如何更换及自制QQ皮肤?
- 使用第三方软件管理苹果设备
- 如何用python请求接口