标签 知识 下的文章

PHP 使用foreach赋值的正确姿势

过去在使用foreach时明显都是拿来输出,所以说并没有什么感觉,这次需要写一个date函数:

    function getDateArray($dateArr, $key) {
        foreach ($dateArr as &$value) {
            $value[$key] = date('Y-m-d H:i:s', $value[$key]);
//            echo $value[$key];
        }
        
        return $dateArr;
    }

如果我们使用$dateArr as $value,我们会发现在foreach外,其实$dateArr还是这点值,于是乎,可以确定,foreach只是把值传给了value,而不是引用,加上&让他传引用,完事=w=

Javascript告诉你,什么叫同步,什么叫异步

最近终于忍不住在公司里都在讲同步异步的时候自己跟个文盲一样听不懂了!然后怒查:软件编程中,什么是同步?什么是异步?,一天后……恩又忘了。

但自从这次做了项目被坑了两次之后,终于记住什么叫异步了QvQ,在上面那篇文章的一串字中先节选出我觉得最好理解的部分:

同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。

放在javascript里,故事是这样的:
首先呢,我铛铛铛的运行ajax,然后指望着ajax complete之后能传出值给后续一系列语句进行判断,然后万万没想到啊!他没等执行完,就蹬蹬蹬跑去执行后面的句子了= =!!

解决也不算难,使用callback回调,或者说后来小新告诉我$.ajax里有一个async,详情:http://api.jquery.com/jquery.ajax/,可以控制同步异步。

我默默的就去用callback啦~T^T发誓不再被坑。

PHP PDO详解攻略

在这里,有一篇名为php-使用-pdo-存取資料庫一存取步驟與常用功能介紹,感觉比大陆那些大网站们写的好多啦(* ̄︶ ̄)y y,1=^_^)y很好懂呢。

官方手册系列传送门

基本上去年在学PHP的时候也写过一篇,PHP 数据库抽象层PDO的使用

以上基本上是所有的参考文章,我们把PDO分为这样几步吧,这次我也是这么按照步骤做下来的:

  • 连接数据库
  • 编写SQL语句
  • 准备
  • 绑定相关值
  • 执行
  • (如果是查询)获取

- 阅读剩余部分 -

CSS 再来说说置于底部的footer

早在去年我们就研究过了关于footer如何写的话题:CSS 对底部应该做的处理

在这次做Microblog的时候,由于背景是通过body实现的,如果html,body设定了100%,背景就不能完全覆盖了,为此纠结了好久,不过最后还是solved了,但我觉得想到的固定footer,可以变化参照物来实现,既然body/container都不行,那参照物变成html嘛,于是给了html一个position,footer使用absolute定位到底部,get.

当然,最后的标准实现还是同那篇文章,不同的地方在于:

body {
    background: url(../img/background.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: "Helvetica Neue", Helvetica, Arial, 'Microsoft Yahei', sans-serif;
}

我们这里通过background-attachment来固定背景=w=这样就不会受到body height始终100%的限制啦~

jQuery 遍历获得的json数组

我们抛给PHP一串数组,然后用json_encode()返回成json格式:

<?php
    $arr = Array(Array('id' => '1000', 'content'=>'Hello World', 'time' => '2015-2-27 14:23:20'), Array('id' => '1001', 'content'=>'今天天气不错', 'time' => '2015-2-27 18:20:21'));
    echo json_encode($arr);

?>

得到:

[{"id":"1000","content":"Hello World","time":"2015-2-27 14:23:20"},{"id":"1001","content":"\u4eca\u5929\u5929\u6c14\u4e0d\u9519","time":"2015-2-27 18:20:21"}]

于是乎,很蠢的我就不知道怎么遍历这货,其实也不难:

var array = $.parseJSON(data);
var i, message;
$.each(array, function(i, message) {
//    self.addNew(message.id, message.content, message.time, false);
});

只要使用each就好啦~。

jQuery+PHP 大话ajax免刷新提交表单与切换页面

昨天折腾了一个晚上,今天在抽空折腾的东西,不记下来未免太浪费了,于是我决定花晚上把它写下来。

Ajax是目前最流行的优化用户体验的方法,但在过去,他往往代表着牺牲SEO以及抛弃浏览器后退前进功能,但是现在,已经不是这样了。

现在的Ajax完全可以做到兼备,所以你可以看到,基本上,在你提交表单之后再也不用跳转之后才告诉你你的输入是否正确,甚至在搜索时,一边输入字符,一边进行检索。

这些都是Ajax所带来的便利,但是鉴于我还没有前后端整站写过(只有使用前后框架[PHP MVC]以及前端的经历),所以对整个流程还不能说熟悉。这次,我们从后端写到前端,一点点来解刨Ajax的套路。

- 阅读剩余部分 -

CSS 使用after伪类清除浮动

今天早上去上班的时候还在纠结,设定before和after,可是他们的位置位于元素的哪里呢?兄弟元素?子元素?在firebug里看不到他们俩的位置,在FF自带的审查元素里倒是能看到,其实是位于该元素的子元素。

于是,以前,我们说过用一个div来清除浮动,现在我们可以把它省掉了——给父元素设定after。

如下:

element:after {
     clear: both;
     content: "";
     display: block;
}

jQuery 如何判断文字是否溢出

今天又碰到了这种需求,是因为我们要做个点击获得全文(之类的)功能,设置了overflow:hidden,如果完整的显示了,那么我们就不需要显示全部内容的按钮,否则就要加上。

当时就在想,这玩样儿恐怕不太好办吧?overflow是CSS自动判断的,我完全没有经受,怎么判断确实是个问题。

还好谷歌还是能够找到答案的:jquery如何判断div是否文本溢出
里面提到了一个很好的方法:

$(selector).map(function() {
    if (this.offsetWidth < this.scrollWidth) {
        // do whatever you want
    }
});

这里的offsetWidthscrollWidth是DOM对象所具有的属性,而不是jQuery对象,所以要先转成DOM对象:jQuery与DOM对象的互相转换

关于这两个,以下扩展阅读:
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth
https://developer.mozilla.org/zh-CN/docs/Web/API/element/scrollWidth

Javascript 上帝说,我的对象想要默认值

找了下貌似这一篇没写,于是乎坑出了可能是一个月前的代码mark。

我们来看以下两段

        window.Option = {};

        Option.defaultProps = function(obj, defaults) {
            function isObject(obj) {
                return Object.prototype.toString.call(obj) === '[object Object]';
            }

            if (!isObject(obj)) {
                return defaults;
            }

            for (var key in defaults) {
                if (!defaults.hasOwnProperty(key)) {
                    continue;
                }

                var objValues = obj[key];
                var defaultValue = defaults[key];

                if (isObject(objValues)) {
                    obj[key] = Option.defaultProps(objValues, defaultValue);
                } else if (objValues === undefined) {
                    obj[key] = defaultValue;
                }
            }
            return obj;
        };

        function People() {};

        People.defaults = {
            name: 'Hi',
            job: 'Student',
            age: 19,
            friends: ['No One']
        };

        people1 = Option.defaultProps({
            name: 'Sky',
            age: 20
        }, People.defaults);

        people1.prototype = People.prototype;

        People.prototype = {
            constructor: People
        };

        People.prototype.sayName = function() {
            console.log(this.name);
        };

        People.prototype.sayName.call(people1);

        console.log(Object.getPrototypeOf(people1) == People.prototype);


        people2 = new People();

        console.log(people2.prototype);

这一种类型似乎略繁琐,但他确实实现了默认值,当然,相比之下实在是不够优秀,有各种问题,包括constructor之类的。这里我们之所以不直接定义函数,而是先用对象,再里面再加一个方法,是因为javascript没有命名空间(namespace)的概念,万一重名了=A=~

        function Person(name, age, job, friends) {
            this.name = name || "hi";
            this.age = age || 19;
            this.job = job || "Student";
            this.friends = friends || "No one";
        }

相比之下,我们来看这样一段= =唔,很明显他更加常用。