【分享】自制JS端的 app内部广播工具

yyyy

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. 允许推送和订阅函数的交互（就是提供一个回调函数来进行数据传递）

yyyy

没人啊，自己顶！d=====(￣▽￣*)b自己下

biyaooo

ecoolper

谢谢楼主分享

爱我的老鼠

谢谢！！！

ilovethislinux

加油！