Tag: JavaScript

  • 学习了JavaScript中的reduce

    之前一直没有认认真真地学习JavaScript(https://en.wikipedia.org/wiki/ECMAScript),因为一直只是将它作为在Web中进行编程,进行动态效果呈现的一个辅助脚本(我用jQuery比较多,还用过一段时间的Dart)。

    这两天因为脚扭了在家里休息了几天,随手拿起《Eloquent JavaScript》就看几段,就顺手学习了一下JavaScript中的reduce。

    完整的说明在这里

    按照定义,reduce对一个数组中的每个元素进行一个类似于“累加”的操作,将其规整到一个单一值。 它的完整语法如下:

    arr.reduce(callback[, initialValue])

    而其中的callback函数,又可以最多有四个参数:

    • previousValue
    • currentValue
    • index
    • array

    我们先看一个对数组中所有元素求和的例子:

    var total = [0, 1, 2, 3].reduce(
        function(sum, current) {
            return sum+current;
        });
    // total == 6

    这是一个非常直观的例子。 计算机程序求和总是用一个循环的方式。所以,“和”会保存在一个变量中,然后顺序一个元素一个元素的相加。

    注意,由于我们没有给出initialValue,所以在第一次运行时,sum(作为previousValue)就会取数组的第一个数值0,而此时的currentValue就会是数组的第二个元素1。在这个程序中,这么做当然是没有问题的。 我们可以将这个程序等价地写作:

    var total = [0, 1, 2, 3].reduce(
        function(sum, current) {
            return sum+current;
        }, 0);
    // total == 6

    此时我们显式地给予初始值为0(求和当然是如此),得到的结果是一致的。

    第二个例子是将多维数组“压扁”成一维数组。这也可以用reduce来完成。

    var arr=[[1,2,3],[4,5],[6,1]];
    var x=arr.reduce(
      function(flat, current)
      {
        return flat.concat(current);
      }, [])
    );

    这里必须给定initialValue。

    本文收录于[go4pro.org]

  • 【jQuery】示例5:一个简单的投票系统

    今天抽空完成了jQuery的示例5:一个简单的投票系统

    本例没有什么特殊的地方。只有一点。投票系统至少需要两个参数:一个是投票项目的id,一个是投票的方向(支持还是反对),所以我这样构造一个a元素:

    
    <a class="up" echo="" href="'#'" id="'<?php">'>
    <?php echo $row['up']?>
    </a>

    我用class来确定投票方向,而用id来确定投票项目。

    最后,我用jQuery中的replaceWith来替代掉被点击的a元素的内容为:

    $(this).replaceWith(<strong>+count+</strong>);

    大功告成!

  • 【jQuery】示例9:检查用户名是否存在

    今天完成了jQuery的示例9:检查用户名是否存在。之所以做这个例子,一是因为要保证完整性,另一个是在CSDN的PHP板块有很多人问到这个。

    演示地址:http://www.rsywx.net/jquery/demos/test09.html

    代码都很简单,不再列出。有兴趣的可以直接下载后分析。

    特别提出一点:在代码中,我在jQuery中调用JSON函数处理返回值的时候,由于返回值很简单(true或者false的布尔值),所以直接对返回的data进行了判断,实践证明是可行的。

  • 【jQuery】示例8:手风琴式的控制

    遵照由简到繁的原则,我继续完成“手风琴式的控制”,示例见此处

    在jQuery中实现手风琴式的控制十分简单:

    <script src="../ui/ui.core.js"></script>
    <script src="../ui/ui.accordion.js"></script>
    <script type="text/javascript">
                $(document).ready(
                function()
                {
                    $(#accordion).accordion();
                }
                );
    </script>

    两个额外的js文件可以从jQuery网站下载,也可以直接远程引用。 html的代码采用ul/li组合写成: “`lang=html

    • Section 1Line 1.
      Line 1.
      Line 1.
      Line 1.
    • Section 2Line 2.
      Line 2.
      Line 2.

      
      
      实在是很简单,而且很干净,彻底分离了html和js代码。
  • 【jQuery】示例6:可以伸展的面板

    是的,这个是示例6,而不是计划中的示例5(投票系统)。因为在jQuery中,进行可以伸展的面板的处理非常简单,只要一个toggle()函数就可以。 核心代码如下:

    var i=0;
    $(document).ready(
        function()
        {
            $(div).filter(#clickme).click(
                function()
                {
                    i++;
                    $(div).filter(#content).toggle();
                    if(i%2==0)
                    {
                        $(this).text(Click here to expand.);
                    }
                    else
                    {
                        $(this).text(Click here to collapse.);
                    }
                }
            );
        }
    );

    我用了一个变量i来判断要操作的div是处在显示还是隐藏状态,并相应的修改提示文字。通过查看jQuery的源代码,可以知道这也是jQuery中toggle使用的方法。

    示例见此处

  • 【jQuery】示例4:三层的关联下拉框

    有了两层关联下拉框的经验,实现三层的关联下拉框确实很容易。

    当然,为了被前令狐同学再次BS我的算法BT,我首先改写了clearOptions函数:

    function clearOptions(selectID)
    {
        var sel=document.getElementById(selectID);
        var len=sel.length;
        var i;
        for(i=1;i<len;i++)
            sel.remove(1); // I keep on removing the 1st item in the select!
    }

    说明一下,我这样编程是有一定的道理的。虽然说,更“好”的代码应该似乎是每次都删除最后一个(类似:remove(sel.length))。但是,由于每次删除后,sel.length都会发生变化,所以在每次删除最后一个的时候,sel.length都会被重新取值,这个对于jQuery来说开销还是很大的,特别是如果select下的option比较多的时候。所以,我还是选择每次删除第一个的做法。这样,remove(1)中的参数是个常量,只需要取值一次从而大大的缩减了运行时间。

    同时我将addOptionfillLevel等多次调用的代码段抽出作为独立的函数。在fillLevel函数中,还特意混合了jQuery和标准javascript。

    这样一来,jQuery的ready函数写法就更清晰明了了。同时,为了温故知新,我还加入了在第二个例子中实现的“Loading”提示。目前的问题时,在填充level1的时候,不会出现这个提示,而只有在填充level2和level3的时候才出现这个提示。暂时不管这个小小的问题了。

    完整的示范在此处

    代码不再贴出,有兴趣的可以在页面自行下载研究。

  • 【jQuery】示例3:两层的关联下拉框

    今天终于完成了jQuery的一个确实有用的示例:两层的关联下拉框(2 Level Cascading Dropdown list)。示例见此处

    开始,我以为很简单。但是经过实战,还是有一些些小的技巧需要注意。

    JSON的返回值是一个问题。在这个示例中,由于我并不关注返回值的问题(这个问题将在示例4中进一步研究),所以我只是简单返回一个字符串的数组。

    (more…)

  • 一本讲JavaScript的书

    很讨厌的一种情况是:明明以为自己已经写好了代码,但是到不同的浏览器里一看,发现不是那么回事。FF和IE下的功能、显示都不尽相同。JavaScript就是最臭名昭著的例子之一。

    前两天买的一本JavaScript教材就是完全按照IE开发的,在FF下并不能完全实施。而且有些方法(如focus)根本就是IE独家所有,在FF下根本就没有这个函数。

    一本书,写出来当然不容易。但是也不应该草率到这个地步。我不反对作者用IE来开发,但是至少应该在FF下测试一下,然后在书里写清楚这个函数是IE专用,如果是FF——假如作者还比较厚道的话——应该这么写。

    自我安慰一把:我之所以不写书,就是因为现在写书的人太多,质量太烂。我自惜羽毛呢。