Tuesday, February 17, 2015

MVVM和其他JS的学习笔记

MVC和MVVM





  • AngularJS与MVVM



  • 简单说来,view负责UI逻辑,viewModel负责表现逻辑和状态,model负责业务逻辑和数据。

    看图便知

    回调函数



    JS的callback一直弄不太清楚,选几个帖子看看吧。

    JavaScript - 回调函数

    知乎 - 回调函数(callback)是什么?


     回调函数并非是一种特殊类型的对象,其实就是普通的函数,但是被作为其他函数的参数传递,在某个时刻才会被选择性地使用。

     由于回调函数会在什么时候被执行,可能是不确定,甚至也可能永远不会被执行。而且在上面的这种情况下,这个回调函数甚至要在未来的某个时候才会执行,这就有了一个“异步”的感觉,也就是说代码不是从上到下依次执行,前面的代码执行完毕后面的才会执行。


    JSON to js object



    有两个eval()和JSON.parse()。

    [code language="javascript"]

    JSON.parse(text[, reviver]);

    [/code]

    js跳转页面方法



    js跳转页面方法

    我在用的是这个,

    [code language="javascript"]

    self.location='abc.html';

    [/code]

    感觉比较常用的是window.location.href()

    js的string里消除space或者hyphen



    remove hyphen

    比如消除hyphen(-), 用replace比较好。

    [code language="javascript"]
    var str="185-51-6 71";
    var newStr1 = str.replace(/-/g, ""); //hyphen
    var newStr2 = str.replace(/\s+/g, ''); //space
    [/code]

    "\s" is the regex for "whitespace", and "g" is the "global" flag, meaning match ALL \s (whitespaces)

    至于加号"+",这个会使转换更快。原因看这里difference between /\s/g and /\s+/g


     In the first regex, each space character is being replaced, character by character, with the empty string.

    In the second regex, each contiguous string of space characters is being replaced with the empty string because of the +.


    [code language="javascript"]
    var str = ' A B C D EF ';
    var a = new Date().getTime();
    console.log(str.replace(/\s/g, '#')); // ##A#B##C###D#EF#
    var b = new Date().getTime();
    console.log(str.replace(/\s+/g, '#')); // #A#B#C#D#EF#
    var c = new Date().getTime();
    console.log(b-a); // 8ms
    console.log(c-b); // 2ms
    [/code]

    Regex



    以上又引出了正则表达式,regex几天不看必忘。

    在这里简单复习下,




  • w3shool-JavaScript RegExp 对象



  • 用时再看吧。

    JS时间戳



    获取当前时间,

    [code language="javascript"]
    var a = new Date().getTime();
    [/code]

    好像没有直接从时间戳转到某个格式的日期时间,只能分别get到年,月这种。倒也无妨,自己写个function也可以。对于时间戳转换,w3school讲的比较清楚。
    read more ››

    Monday, February 16, 2015

    JS的事件监听

    事件监听

    setTimeout

    addEventListener vs onclick

    我想做一个点击某个按钮,变量开始每秒加一的事件。

    好多东西要学。
    read more ››

    Sunday, February 15, 2015

    毕业无望TAT

    又宅一下午图书馆,Project的要求好难啊。。求毕业!

    看到之前写的新学期任务清单,就差132B和毕设了。。好难好烦躁。

    每天宅着图书馆不知道能不能憋出来。132B的milestone3还没开始做。今晚开始做吧!

    AngularJS也好难。

    关于google chart,它的API比较强大。本来以为设置点击事件无望,看到google group有人提及一个方法,果然有效!


    • 问题描述:我想用getSelection()来获取点击的元素,不同于普通的geoChart,而是dashboard里的。结果单单用



    [code language="javascript"]geoChart.getSelection()[/code]

    不行,debug不出。


    • 解答 。因为在dashboard里,




     When using dashboards, you wrap the actual charts (the map, the table) in google.visualization.ChartWrapper instances.


    所以需要写成

    [code language="javascript"]geoChart.getChart().getSelection()[/code]

    。

    Problem solved。我可以用它进行拓展了。

    接下来要把geochart的动态图实现了,搞了一天没弄成TAT。没有成就感!

    以后还需要学习AngularJS的$route。
    read more ››

    Saturday, February 14, 2015

    HTML5中的local storage

    最近做project发现一个非常神奇的东西 - local storage。


    HTML5 的local storage 是通过浏览器在本地存储的数据。


    这里讲解的比较清楚。

    [code language="javascript"]

    window.localStorage.name='yingyan'; // option1

    window.localStorage['name'] = 'yingyan'; //option2

    [/code]

    因为local storage有5M容量,而且没有保质期。基本能满足我们的大多数需求啦!

    这个Markdown网站DILLINGER  和快速学习mvc网站TodoMVC都用了local storage。

    用到了自己的project上真真省事不少。

    local storage搭配angularjs简直神器!

    顺带吐槽geo chart 对城市名的识别真是相当慢。还好有神队友帮我把城市名改成了经纬度,瞬间能刷出地址。不过看到地图上密密麻麻的点点,顿时食欲全无啊。
    read more ››

    Tuesday, February 10, 2015

    搞了一下午angularjs的date

    Date格式真是很讨厌的存在。

    在json里string要转成git。

    比如

    [code language="javascript"]

    string a = "2010-06-25T08:00:00.000Z";

    var milliseconds = Date.parse(a);

    var result =  new Date(milliseconds);

    [/code]

    这时result才是真正的date格式。

    搞了一下午,虽然进展太慢,好歹看出点成果。。
    read more ››

    Saturday, February 7, 2015

    驾照

    昨天驾照终于pass!



    感谢



    第六次路考,终于在完全新路线+中途看到车祸堵车的情况下拿到了驾照。

    在此谢谢那个帅帅的华人考官,扣了5分,有一个是转向灯忘记复原。

    也谢谢liyang可爱的小车车助我一臂之力,超级好开。

    挂的经历



    之前每次挂都是critical error,每次都被考官提醒才知道不安全。虽然郁闷,不过长了不少经验教训。


    • 第一次路考,速度过低(40迈的地方我开到25迈)挂了。


    • 第二次路考,STOP SIGN停留过久(我跑神了),挂了。


    • 第三次路考,下坡忘记减速,挂了。


    • 第四次路考,变道没有看到盲点有车,挂了。


    • 第五次路考,右转入道在STOP SIGN处急着转弯没有看车,挂了。




    消费



    此次考驾照,共计消费


    37+37(笔试)+6+6(2,3次补考)+7+7(5,6次补考)+210(教练练车)=310刀


    还是比国内便宜一些。

    长舒一口气,终于不用练车,不用考笔试,不用在湾区考驾照了!
    read more ››

    Friday, February 6, 2015

    很烦!

    没有心思做作业。

    一天24个小时,我睡过去8小时,你睡过去8小时,

    还有几个小时你在吃饭出去玩,留给我几个小时?

    太自私了。
    read more ››