|
本帖最后由 yyyy 于 2015-10-18 19:23 编辑
js文件地址:http://pan.baidu.com/s/1bnCzDxl
分享只为求同类型解决方案, 或者思路 或者其他解决方案,本人js水平不高,顺便求代码优化
目的:
解决前端不同页面之间的广播需求,或者说是事件派发和接受的需求
api:
// 创建实例
// 页面的model,传入这个我才好做文件位置的判断
// 别名,暂时没什么特殊意义,会返回给订阅者
// 有了别名,订阅者在需要知道谁发送的是不就好判断了吗
// 虽然有url,但是给予一个约定的字符串这么都比url好处理吧
var example = new audio( model, alias );
/**
* 订阅广播.
* @params( Function ): fn 绑定的回调函数
* @params( String ): channel 订阅的频道名称,非必填, 默认all
* @params( String ): fileUrl 文件路径 或者 事件的命名空间,默认空
* @return( Example ): this
*/
example.sub( fn, channel, fileUrl ) // 订阅广播
example.onceSub( fn, channel, fileUrl )// 仅一次
/**
* 发布广播.
* @params( All ): data 广播的数据
* @params( String ): channel 订阅的频道名称,非必填, 默认all
* @params( String ): fileUrl 文件路径 或者 事件的命名空间,默认空
* @return( Example ): this
*/
example.pub( data, channel, fileUrl )
/**
* 取消订阅.
* @params( String ): channel 订阅的频道名称,非必填, 默认all
* @params( String ): fileUrl 文件路径 或者 事件的命名空间,默认空
* @params( function ): 原来绑定的函数,不传就是当前事件下面的全部绑定
* @return( Example ): this
*/
example.unSub( channel, fileUrl, fn )
/**
* 订阅的回调函数.
* @params( Event ): event jQuery事件
* @params( audioEvent ): audioEvent 我自定义的事件
*/
audioEvent字段列表
{
channel // 事件名称
data // 发送的数据
url // 发送广播文件的路径
alias // 发送广播文件的别名
}
.w文件中使用
接受方:
// 引入我写的js ,比较粗糙,求见谅
var audio = require("./audio");
var Model = function(){
this.callParent();
// 创建一个广播,或者说是事件处理工具。this 必须,当前页面的model
this.audio = new audio( this );
};
// 其实不用再onload里面也没事,只是绑定一般都固定的,只需一次
// 所以写在这里
Model.prototype.modelLoad = function(event){
// 订阅广播
var handle = function( event, audioEvent ){
debugger
};
this.audio.sub( handle );
};
发送方:
// 引入我写的js ,比较粗糙,求见谅
var audio = require("./audio");
var Model = function(){
this.callParent();
// 创建一个广播,或者说是事件处理工具。this 必须,当前页面的model
this.audio = new audio( this );
};
Model.prototype.button1Click = function(event){
// 任意地方都可以发送广播
this.audio.pub( "asdasdasdasdasdas" );
};
诞生背景:
其实做app的话,或者单页模板有些常用的页面的互动其实很频繁
比如如果我们的页面设计到用户信息的修改,用户在把自己的资料编辑好并且保存的时候,我们需要让其他页面把用户信息更新掉
或者是一些社会化功能的交互,比如我的文章提供让用户收藏的功能,但是收藏的功能有三个页面涉及到
案例:
【首页】 列表需要 显示文章收藏的状态,
【明细页】 提供了一个取消收藏和收藏的按钮,
【我的收藏】也提供了一个取消收藏和收藏的按钮
页面打开的路径:
首页 - 明细页(状态变更)
状态变更 - 【首页】列表文章状态更新
首页 - 我的收藏(状态变更)
状态变更 - 【首页】列表文章状态更新
首页 - 我的收藏 - 明细页(状态变更)
状态变更 - 【我的收藏】列表文章状态更新
可以看到【明细页】的 状态牵扯 到 【首页】 和 【我的收藏】。 而且【我的收藏】也牵扯到 【首页】,
这样互相有关联的页面,尤其是收藏这种社会化功能操作会非常频繁,
如果每次更新都从后台读取数据,即效率不高,而且数据更新可能是整片的更新,而且可能会引起页面变化
如果不想每次都从后台拉去数据,那就只能前台进行页面与页面直接的交互了,而这种互动就需要事件的支持
以某一方绑定某一个事件,另外一方触发这个事件并且推送数据来做个及时的更新
原来的做法是在一个js里面创建一个事件列表,让每个页面把自己需要用到的事件添加进去,然后需要的时候触发一下这些事件
一开始解决了很多麻烦,但是后面有新的需求,那个临时做的就不适用了,
新需求:
1. 自己的派发的事件,自己不要
2. 需要提供一个统一的事件调用,在调用的函数内部分发各个事件,这样就不会太零散,容易管理
3. 某些事件只需要调用一次,或者允许解除事件
4. 类似于频道一样,让同一类型的,但是不同功能的,聚在一起管理
这几个新需求来的时候,临时做的js就完全抓瞎了,就被重做了,因为就是一个对象加数组,完成适应不了新需求,只能重做了
后来做这个js初期有点想复杂了,后来考虑了很多东西,最后发现我们做的单页模板,也就是页面的主体是不会发生变化的,这样就有点想法了
然后重新翻看jQuery的事件(本来想用wex5的事件,但我还没有掌握的缘故就放弃了)
里面有个自定义事件,还有个命名空间,还有触发事件的方法,这想法就清晰了
思路:
1. 创建一个根节点(用来存后面生成的节点)
2. 每打开一个页面创建一个节点,这个节点就是是用来给当前打开的页面添加事件用的
3. 绑定事件,解除事件, 仅执行一次事件和触发事件就使用 on/off/once/triggerHandler 来做
4. 提供一个默认的all事件,如果未指定事件名称(保存触发和绑定和解除)就默认全部是all这样就提供了一个统一的入口
5. 功能分组就用事件名称来分,
6. 我们还可以使用命名空间来做特定条件的事件接受,比如可以指定把url作为命名空间,这样不就可以连 “目标都” 都可以指定了
后续会增加的功能:
1. 页面加载、离开、重载(非浏览器的重载 , .w文件可以做到页面不刷新重新载入的功能的)事件的通知,类似于系统事件的通知
2. 提供类似于事件委托,即使页面未加载也可以,未来也可以通知到页面进行处理
3. 可以更改回调函数的上下文,允许在绑定的时候传递一些数据,供回调函数进行处理
4. 允许推送和订阅函数的交互(就是提供一个回调函数来进行数据传递)
|
|