所有由大号热狗发布的文章

电影魔兽:炉石玩家如何增加代入感

电影《魔兽:崛起》正在火热上映,然而广大的炉石玩家应该记得炉石的全称是《炉石传说:魔兽英雄传》

这篇文章就是帮助找出炉石和电影的关联,以增加观影时得代入感。不涉及剧透,请放心阅读

主角们:

  1. 卡德加

    炉石角色:
    炉石英雄卡德加介绍(视频)
    电影角色:
    卡德加

  2. 麦迪文

    炉石角色:
    炉石英雄麦迪文介绍(视频)
    电影角色:
    麦迪文

  3. 古尔丹

    炉石角色:
    gul
    电影角色:
    古尔丹

只需要“听过”名字:

这部分只需要稍微提醒一下即可,到看电影时自然会心一笑

需要注意声音:

光看是不够的,要注意听

  1. 鱼人

    mur2

    mu

原文来自: //blog.regou.me/?p=893 ,转载请附带出处

我整理的DC宇宙长征

DC宇宙长征:(按故事时间顺序)

正义联盟

《哥谭市》(电视剧) 2014
《蝙蝠侠:侠影之谜》2005
《蝙蝠侠:黑暗骑士》2008
《蝙蝠侠:黑暗骑士崛起》2012
《闪电侠》(电视剧) 2014
《超人:钢铁之躯》2013
《蝙蝠侠大战超人》2016
《神奇女侠》2017
《乐高蝙蝠侠大电影:DC英雄集结》2013
《正义联盟》2017
《闪电侠》2018
《海王》2018
《蝙蝠侠》2018
《沙赞》2019
《正义联盟2》2019
《钢骨》2020
《绿灯侠》2011
《绿灯军团》2020

其它时间线:
《守望者》 2009
《自杀小队》2016

相关视频:
cw特备节目 DC.电影宇宙

按照DC蝙蝠侠系列的尿性,它们的片子不是那种合家欢的,甚至某些不适宜儿童观看
就连音乐里兜透露出一种黑暗沉重风,举其中一个例子:

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);
});//第二个可选参数为回调

源代码例子

WebStorm里配置Browserify自动编译

Browserify Logo
Browserify

Browserify是个好东西,相比requireJS seaJS 他配合Script的async属性去实现“模块化、异步、非阻塞”可以说是“Drop Dead Simple”,简单高效又直接。自从他添加了sourcemap功能后,chrome里调试起来简直如鱼得水,越发喜欢了。

但是它本身是一个Compiler,不是一个JS框架。每次修改模块都需要重新执行一次browserify命令,相当麻烦。

我这里来介绍下WebStorm里的配置,以让Browserify自动化。
继续阅读WebStorm里配置Browserify自动编译

就是现在,用Promise取代callback吧!

Callback-Hell
什么是callback hell?
答:(如上图)过多的,过深的callbacks导致代码丑陋,难以阅读和维护。

window.Promise兼容不好吧?
答:这篇文章就是教你如何想Promise就Promise想callback就callback,还有去兼容浏览器的Promise的polyfill

ES6里的Promise让JS变得更加优雅。那么现在我们怎么把原有的代码转变成Promise Style呢?

原有代码(Callback Style):

    var waitCon = function(time,callback){
        //这里可以做很多工作的代码,先用延迟来代替
        var result=1+1;
        setTimeout(function(){
            if(callback){
                callback(result);
            }
        },time);
    };

原有代码(Callback Style)-调用方法:

    waitCon(2000,function(res){
        console.log(res); //两秒后得出2这个结果
    });

改写成Promise Style:

    var waitCon = function(time){
        return new Promise(function(resolve,reject){
            var result=1+1;
            setTimeout(function(){
                resolve(result);
                //成功完成,传出结果。如果用reject则是完成失败,传出错误内容
            },time);
        });
    };

Promise Style的调用方法:

    waitCon(2000).then(function(result){
       //原本callback里的内容
       console.log(result);
    });//可读性很高:先执行XXX,然后XXX

还可以Promise链、多重Promise具体查看 http://www.html5rocks.com/zh/tutorials/es6/promises/
这里只谈最简单的异步callback升级换代。

这里送出一个callback+Promise的整合版,想用什么用什么,妈妈再也不用担心其他小朋友不会用婆迷丝了。

    var waitCon=function(time,callback){
        return new Promise(function(resolve,reject){
            var result=1+1;
            setTimeout(function(){
                if(typeof callback === "function"){callback(result);}//执行callback
                resolve(result);//成功完成,传出结果
            },time);
        });
    };

自己研究出来的快速餐点

20140105-134531.jpg

解决问题:
1.做菜时间过长,工序太复杂
2.电饭煲剩饭和锅巴不知如何处理
3.油烟难洗
4.锅碗太多难洗

自己发明的,很方便,而且感觉味道很不错。

食材:
以下两个人的份:
1个大土豆切成不去皮的块(皮上的土用刷碗的钢丝球刷掉);
1个大花菜切成6份;
1个西兰花切成4份;
一份火腿切片;一根胡萝卜切片;年糕少量、蘑菇少量、沙拉一瓶

制作过程:
把土豆,胡萝卜,蘑菇放在水里盖上锅盖(不用等到沸水),煮到烧开后小火10分钟。
然后把其他的所有的东西都扔进去,打开锅盖中火煮15分钟左右,最后撒点盐,结束

如何吃:
这个还要教?滤掉水,放碗里,涂上一大勺沙拉,搅拌下就可以吃了

优点:
1.只有两个锅碗要洗,而且由于无油,很好洗
2.真正的流程其实就是 切+扔 ,其他的时间都是自动完成的,你可以在等待过程中去干别的
3.营养丰富,好吃。

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

AngularJS+ JqueryMobile+ PhoneGap 打造APP

转载必须附带本文地址http://blog.regou.me/?p=790,谢谢

最近在做一个项目,一个B2B的移动APP。
我是这样选择的
前端UI框架:jQueryMobile
前端MVC和页面导航:AngularJS
封包器:PhoneGap Build
AngularJS和jQueryMobile的桥接器:jQueryMobile-Angular-Adapter(以下简称Adapter)
AngularJS JqueryMobile PhoneGap worktogether

两个著名框架融合在一起,还要让他们被封包了后还要运行OK可不容易,期间遇到了各种各样的问题,国内文档较少,于是Github、GoogleGroup、StakOverflow这些网站四处奔波提问+查资料
下面说下我遇到的问题和解决方法 继续阅读AngularJS+ JqueryMobile+ PhoneGap 打造APP