Showing posts with label project. Show all posts
Showing posts with label project. Show all posts

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 ››