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) {
}; //定位为构建基础的HTML
NavBar.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的一种代码结构方式——插件式的更多相关文章
- 「JavaScript」四种跨域方式详解
超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...
- JavaScript的几种循环使用方式及性能解析
循环的类型 一:for var arr = [1, 2, 3, 4, 5, 6]; for (var i = 0, len = arr.length; i < len; i++) { conso ...
- 谈谈JavaScript的2种主要继承方式
今天给自己巩固一下js的继承知识,基础不好,有不对的地方,请尽量拍砖,越重越好. js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式. 1.原型 ...
- JavaScript中三种字符串连接方式及其性能比较
参考地址: https://www.cnblogs.com/programs/p/5554742.html 工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方 ...
- java 22 - 10 多线程之两种代码实现方式的比较与区别
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!
原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...
- VS Code - Debugger for Chrome调试JavaScript的两种方式
VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...
- 《Three.js 入门指南》3.1.2 - 一份整齐的代码结构以及使用ORBIT CONTROLS插件(轨道控制)实现模型控制
3.1.2 正式代码结构 & ORBIT CONTROLS插件(轨道控制) 说明 本节内容属于插入节,<Three.js入门指南>这本书中,只是简单的介绍了一些概念,是一本基础的入 ...
随机推荐
- 使用 Windows10 自定义交互消息通知
消息通知是最常用的应用功能之一了,但是由于平台的差异,IOS Android 以及 Windows 都有其特殊性,Android开发者在国内常常都是使用三方的一些推送服务,或者是使用自建的服务器为应用 ...
- jQuery easyui 之 expend row
http://www.jeasyui.com/tutorial/datagrid/datagrid21.php
- 自定义控件的自定义的属性attrs.xml下的declare-styleable中format详解
最近在摸索自定义控件,查找到一些自定义属性的一些资料,解决转载记载下来:看了此详解才方便理解! 我们在做项目的时候,由于android自带的属性不能满足需求,android提供了自定义属性的方法,其中 ...
- 2013年Linux周刊读者投票出炉 Ubuntu、Android榜上有名
摘要:一年一度的Linux周刊读者投票结果已经登于2013第12期.这是Linux爱好者们自己的“奥斯卡”: Linux周刊的小编们列出一系列Linux相关的“最佳项目”进行面向读者的投票.竞选项目包 ...
- perl备忘
List Operators: sort reverse grep map my @castways = sort qw( first second third); # qw 给单词自动加上双引号 g ...
- SupportV7包中 SwipeRefreshLayout 修改下拉控件的距离
//修改下拉距离 ViewTreeObserver vto = mCategoryResults.mSwipeRefreshLayout.getViewTreeObserver(); vto.addO ...
- ADO.NET 3.5高级编程:应用LINQ&Entity Framework
http://item.jd.com/10080604.html 第1部分 ADO.NET3.5概览第1章 使用ADO.NET3.5提供的新方法访问数据1.1 语言集成查询LINO1.1.1 LIQ ...
- zepto - slice
var ss = ['1', '2', '3', '4', '5', '6']; console.log(ss.slice(2,4));
- [Python] Search navigation in Pycharm
From: http://blog.csdn.net/u013088062/article/details/50323393 From: http://blog.csdn.net/u013088062 ...
- LoopBack – 开源的,可扩展的 Node.js 框架
LoopBack 是建立在 Express 基础上的开源 Node.js 框架,专门为 Mobile,Web 和其他设备做了优化.LoopBack 能够连接到多个数据源,使用 Node.js 编写业务 ...