分类目录归档:PVE心得

工作方面

knockout在不同ViewModel之间的通讯

构建复杂应用,view-model之间的通讯是非常重要的一个环节,此过程的方便与否,组件之间的严格隔离与否,直接影响健壮性和开发禅道心情。

本文会:

  1. 介绍knockout.js自带的事件收发;
  2. 一个简单扩展实现 ViewModel之间 数据同步(或者叫数据捆绑);

 一:Knockout的事件收发

抽象的理解:建立一个公开的无线电塔,任何viewmodel可以在某个频道广播信息,其他正在收听的viewmodel,只要频道对的上,那么就能收听到对应信息

var radioTower = new ko.subscribable(); //创建一个无线电塔

收听者用法:

 //三个参数依次为收到的信息callback、目标viewModel(可选)、频道名称(可选)
radioTower.subscribe(callback, target, channel);
//收听者的俩个例子
radioTower.subscribe(function(newValue) { this.latestTopic(newValue);}, vm, "mytopic");
radioTower.subscribe(function(newData) {
    console.log("收到新数据:",newData);
}, null, "changeLength");

发送者的用法:

//两个参数依次为想发送的数据、频道名称
radioTower.notifySubscribers(data, channel);
//真实的例子
//接收者
radioTower.subscribe(function(newValue) {
    this.latestTopic(newValue);
}, vm, "mytopic");
//发送者
radioTower.notifySubscribers("MayDay MayDay!", "changeLength");

二:一个小扩展来更方便的实现数据同步

扩展代码:

;(function(ko){
    var radioTower = new ko.subscribable();

    ko.subscribable.fn.pub = function(topic) {
        this.subscribe(function(newValue) {
            radioTower.notifySubscribers(newValue, topic);
        });
        return this; //support chaining
    };
    ko.subscribable.fn.sub = function(topic,call,vm) {
        var target = vm || null;
        var cb = call || this; //如果没有call,那么直接捆绑原始数据
        radioTower.subscribe(cb, target, topic);

        return this;  //support chaining
    };
})(ko);

用法:

viewModel-A中:
//监听数组,当数组变化时在“ulist”频道里发送list这个数据
this.list = ko.observableArray([]).pub("ulist");
viewModel-B中:
this.list2 = ko.observableArray([]);
this.list2.sub("ulist"); //收听"ulist",当viewModel-A中的list改变时,它也会跟着变

//如果不想直接绑定,比如这里实现viewModel-A中的ulist的长度 和 viewModel-B中的length同步:
self.length = ko.observable(0);
self.length.sub("ulist",function(val){
    self.length(val.length);
});//第二个可选参数为回调

源代码例子

New rising star?Try this angularjs webapp framework!

http://ionicframework.com

The ui looks fantastic ,and the framework have many angularJS custom directives to make the ui fully functional.
It’s on alpha,only support latest version of android and ios,for now.
Worth a try.

看起来非常不错,它提供完美复现iOS7的css样式,和全套angularjs的js API 。
虽然还没有到正式版。

要注意的是,Android4.2以下官方不保证支持,虽然应该是支持的

My Angular Mobile App Boilerplate: AngularNavPlusHammer

我建立的这个GitHub项目为一个整合包,意在快速带你进入Angular Mobile App的生产开发中

    功能:

  1. 暂且采用BootStrap3.0 UI(其实这个项目核心和UI无关);
  2. 可追溯的后退按钮;
  3. 支持20种触摸手势,并可以以“ng-click”类似的HTML directive进行使用;
  4. 在route里、在控制器里均可自由控制页面过度动画(Page Transition Effects)

    这个项目由三大件组合而成:

  1. https://github.com/regou/angular-mobile-nav (由ajoslin版Fork出来,修改了几个我无法忍受的bug)
  2. https://github.com/randallb/angular-hammer (各种触摸手势都靠他了)
  3. 我的一些御用Module

Demo:

http://tools.regou.me/angular-nav-plus-hammer/

项目地址:

https://github.com/regou/angular-nav-plus-hammer

HTML5视频的多平台兼容方案 JW Player

JW Player通过配置可以在不支持HTML5浏览器的情况下,自动的将HTML5视频转化为Flash视频
同时也支持m3m8、flv等流媒体播放。具体参见 http://www.longtailvideo.com/players/

DEMO预览点这里

配置起来很简单,先在引JS

<script src='jwplayer.js'></script>

再在想放视频的地方放下如下代码就行了,上面面那个demo是我希望优先用html5播放,再其次用Flash播放

<video id='mediaplayer' ></video>
<script type="text/javascript">
    jwplayer('mediaplayer').setup({
        'id': 'playerID',
        'width':1280,
        'height':720,
        levels: [
            {file: 'Using2-stepverification.mp4',type: 'video/mp4' },//mp4文件提供给Flash
            {file: 'Using2-stepverification.webm', type: 'video/webm' },//webm文件提供给HTML5
        ],
        'modes': [
            {type: 'html5'},//优先级1,以下类推
            {type: 'flash', src: 'player.swf'},
            {type: 'download'}
        ]
    });
</script>

善用HTML5″data”自定义属性

制作一些和后台交互非常多的网站的时候,经常需要后台语言输出一些数据到html里,最方便的莫过于在html标签里放进某个属性,来保存这个标签所需要的部分信息,以便调用。比如

<li indexNum="01" lang="cn">围城</li>
<li indexNum="02" lang="en">冰与火之歌</li>

例子中,这两本书为了保存书的序号和语言,使用了两个非法的Attribute:“indexNum”和“lang”。
如果在validator.w3.org中进行合法性检测会显示“Attribute indexNum not allowed on element li at this point.”

推荐用HTML5的新属性data,以上的语句就可以变为

<li data-indexNum="01" data-lang="cn">围城</li>
<li data-indexNum="02" data-lang="en">冰与火之歌</li>

想访问的话,可以用传统的访问属性的方法,也可以用Jquery的.data()方法:

$("li:first").data("indexNum")=="01" //true
$("li:first").data()  //这里将获得一个JSON格式的对象,可以进行对象内的属性修改

具体还是参考官方文档吧:http://api.jquery.com/data/

推荐用JSON来写对象工厂方法

推荐用JSON来写工厂方法(Factory Method),本人特别喜欢使用JSON的格式,主要原因是条理清晰,整体感强。
推荐用JSON写工厂方法,很好理解,新建对象,然后返回就行了。可读性非常强,推荐下
下面这个例子是用工厂的方法定义两个”角色”对象

var wordspace=document.getElementById("spotlight");
var Character={
    crate:function(name,lv,exsist){ //传了3个值
        var newobj={
            name:name,
            lv:lv,
            exsist:exsist||false,
            spotlight:function(){
                wordspace.innerHTML+='Name: '+this.name+' Level: '+this.lv+' Exsist: '+this.exsist;
            },
            destroy:function(){
                wordspace.innerHTML+='Name: '+this.name+' is Gone!!';
                return null;
            }
        };
        return newobj;
    }
};
var Character1=Character.crate('Vurtne', '23'); //创件角色对象,可读性比常规工厂方法强
var Character2=Character.crate('DrakeDog', '85', true);
Character1.spotlight();
console.log(Character1);
//断开引用,好让环境自动释放内存
Character1=Character1.destroy();
console.log(Character1);

参考资料