一、前言

很久之前就想系统的学习nodejs技术了,但是由于很多事情,忙不太过来,今天晚上下定决心要入门这门技术,所以一口气看完了《Node.js开发指南》和《Node.js中文文档》,总算是真正入门了,接下来就总结一部分,剩下的只有明天再总结了。

二、Node.js简介

一句话简单说明一下node.js是什么东西。

Node.js 是一个让 JavaScript 运行在服务端的开发平台。

三、Node.js的安装

学习了Node.js,觉得如果在window下学习这门技术的话还太成熟,第三方的支持不太好,所以只介绍linux或者mac上面的安装。node.js在window上面的安装直接下载安装包,一直下一步就可以装好,环境变量也会自动配置好,npm(node package manage)在新版本也会相应的装上。

对于mac环境安装也比较简单,介绍两种安装方式。

- 阅读剩余部分 -

一、大二,main()

进入大二,依然保持着乐观积极的心态,不知道满足的学习着专业知识,虽然学校的氛围有点浮躁,但是静下心来,发现目标就在眼前,只要朝目标走,什么都是正确的!

二、智能化校园项目小组成员

这是我接手的第二个项目,在这个项目中,使用了全新的后台框架,也有更多的前端组件可以使用。在这个项目中,有两个学长带领我们开发(因为只有两个老开发学长...),由于有了第一个项目的经验,对模块开发的模式和SVN的使用比较熟悉啦~所以入手还算快,但是项目框架的原因,常常因为不清楚怎么实现的,会遇到一些莫名其妙的错误,后来我就将我们的后台代码逻辑生吞活剥啦...第一次尝试去看整个系统的代码...好蛋疼...有种很乱找不到线头的毛线团,后来找到学长的一个模块,通过打断点的方式,从前台到后台慢慢的去理解框架,最后有了大致的了解,不断的使用,对框架更加熟悉,开发起来也越来越顺手了。

- 阅读剩余部分 -

一、大一,依然激情

在高中的时候就是喜欢热闹的人儿,到了大学依然性格如初,每次上课都要坐前面3排(ps:高中的时候都做讲台旁边- -),每一次课都喜欢和老师互动,问老师问题,补充老师的讲解,不过后来发现在学校做前排的大多都是女孩子...

二、C语言程序设计

在高中填自愿的时候果断报了自己喜欢的“软件工程”专业,在大一的时候专业课还没开,开了一门《C语言程序设计-谭浩强版》,这也是在高三的时候自学的语言,很带劲,也是很喜欢的语言之一,C语言很自由,想干点什么就干点什么。那个时候是但老师教,是个很好的老师,可能是工程师的性格,性格不是那么的外向,但是调试起程序来就很专注了。大一也没什么课,所以课余时间就比较多,就经常折腾Linux、C语言和各种感兴趣的软件,记得重装系统的次数多得我都数不清啦...这可能也是后来对安装与卸载比较熟悉的原因吧...

- 阅读剩余部分 -

一、CSS3 动画的属性和描述

(1) 规定动画的名称、周期

/* animateTimer默认值为0,动画不会被执行。 */
div {
    animation: animateName animateTimer;
}

(2) 描述动画

/* from...to... <=> 0%...100% */
@keyframes animateName {
    from {...}
    to {...}
}

这里就不一一列举了,可以查看w3cschool css3教程介绍还是蛮详细的,但是缺少部分比较使用的事件讲解,这个就需要查阅一下博客了。

二、CSS3 动画的三个事件

(1)开始事件: animationStart

(2)结束事件: animationEnd

(3)重复运动事件: animationIteration

当然,css3动画的支持还不是很全面,之前是webkit内核的浏览器支持比较好,以下是特定内核的前缀。

var ANIMATION_EVENT_PREFIX = ['Moz', 'webkit', 'ms', 'O'];

我表示不是很好用,也许是我用的不对吧,最后还是采用定时器来解决一些问题的。其实CSS3动画还是挺酷的,下次阅读一下官方文档,看是怎么实现的。

三、动动手,找下感觉

其实之前做动画,是采用JQuery的一些动画API和自定义动画来做。后来也用了QWrap来做,可能是因为类似的框架主要针对PC端,所以在移动端的性能自然就不是那么理想,不过iphone的性能还是不错的,做出来的效果还不算很卡,Android 4.x还没测试过。

当然,你也可以采用一些流行的移动端的库,比如:zeptojs等等,很少做移动端,就不多说了,怕误导人。

接下来用一个实际的例子,熟悉一下CSS3动画的API和使用的感觉。

功能描述:主要是一个菜单,点击展示/隐藏列表内容,是一个比较经典的交互。

(1)HTML部分,简单的一个例子结构。

<div id="mininav">
    <div class="nav">
        <button id="JS-menu">菜单</button>
        <ul id="JS-items" data-animate="hide" class="items">
            <li class="item"><a href="http://www.so.com/">360搜索</a></li>
            <li class="item"><a href="http://www.so.com/">360搜索</a></li>
            <li class="item"><a href="http://www.so.com/">360搜索</a></li>
            <li class="item"><a href="http://www.so.com/">360搜索</a></li>
            <li class="item"><a href="http://www.so.com/">360搜索</a></li>
            <li class="item"><a href="http://www.so.com/">360搜索</a></li>
            <li class="item"><a href="http://www.so.com/">360搜索</a></li>
        </ul>
    </div>
</div>

(2)CSS部分,看到多,其实就是为了处理前缀那些,还是不复杂。

body, ul, li { margin: 0; padding: 0; }
#mininav .items { list-style: none; overflow: hidden; display: none; }
#mininav .item { width: 100%; height: 30px; line-height: 30px; background: #ddd; margin-top: 5px; }
#mininav .item a { display: block; width: 100%; height: 30px; }
#mininav .show { animation: show 1s; -moz-animation: show 1s; -webkit-animation: show 1s; -o-animation: show 1s; }
#mininav .hide { animation: hide 1s; -moz-animation: hide 1s; -webkit-animation: hide 1s; -o-animation: hide 1s; }
@keyframes show { from { height: 0; } to { height: 245px; } }
@-moz-keyframes show { from { height: 0; } to { height: 245px; } }
@-webkit-keyframes show { from { height: 0; } to { height: 245px; } }
@-o-keyframes show { from { height: 0; } to { height: 245px; } }
@keyframes hide { from { height: 245px; } to { height: 0; } }
@-moz-keyframes hide { from { height: 245px; } to { height: 0; } }
@-webkit-keyframes hide { from { height: 245px; } to { height: 0; } }
@-o-keyframes hide { from { height: 245px; } to { height: 0; } }

(3)JS部分,主要处理动态交互的效果,因为有按钮事件嘛。以下代码只是测试用,有些并未封装成库,如果实际中要用,可以采用jquery或者其他什么库,就没那么麻烦了。

核心代码:

var menu = document.getElementById('JS-menu'),
    nav = document.getElementById('JS-items');

/* 菜单的状态 */
var STATUS = {
    show: 'show',
    hide: 'hide'
};

/* 定时器索引 */
var timer = null;

addEvent(menu, 'click', function (e) {
    if(nav.getAttribute('data-animate') == STATUS.hide) {
        clearTimeout(timer); //防止连续不断的点击

        nav.style.display = 'block';
        removeClass(nav, STATUS.hide);
        addClass(nav, STATUS.show);
        nav.setAttribute('data-animate', STATUS.show);
    } else {
        timer = setTimeout(function () {
            nav.style.display = 'none';
        }, 1000);

        removeClass(nav, STATUS.show);
        addClass(nav, STATUS.hide);
        nav.setAttribute('data-animate', STATUS.hide);
    }
}, false);

上面主要就是点击的一个交替,使用定时器是因为自带的动画结束事件未使用成功,之后单独学习一下,总感觉哪儿不对。定时器的时间必须和动画时间一致,动画也有一些参数可以控制效果,可以查看相应API,我使用的默认效果。

以下是完整JS代码:

(function () {
    var menu = document.getElementById('JS-menu'),
        nav = document.getElementById('JS-items');

    function addEvent(obj, type, fun, isBubble) {
        if(obj.addEventListener) {
            obj.addEventListener(type, fun, isBubble);
        } else {
            obj.attachEvent('on' + type, fun);
        }
    }

    function hasClass(obj, clazz) {
        return obj.className.match(new RegExp('(\\s|^)' + clazz + '(\\s|$)'));
    }    
    
    //添加指定class,如果你直接className=papapa,值会被覆盖,所以需要累加
    function addClass(obj, clazz) {
        if(!hasClass(obj, clazz)) {
            obj.className += ' ' + clazz;
        }
    }

    //去除指定class,如果有兴趣可以做一个class交替操作
    function removeClass(obj, clazz) {
        if (hasClass(obj, clazz)) {  
            var reg = new RegExp('(\\s|^)' + clazz + '(\\s|$)');  
            obj.className = obj.className.replace(reg, '');
        }
    }

    /* 菜单的状态 */
    var STATUS = {
        show: 'show',
        hide: 'hide'
    };

    /* 定时器索引 */
    var timer = null;

    addEvent(menu, 'click', function (e) {
        if(nav.getAttribute('data-animate') == STATUS.hide) {
            clearTimeout(timer); //防止连续不断的点击,出现bug

            nav.style.display = 'block';
            removeClass(nav, STATUS.hide);
            addClass(nav, STATUS.show);
            nav.setAttribute('data-animate', STATUS.show);
        } else {
            timer = setTimeout(function () {
                nav.style.display = 'none';
            }, 1000);

            removeClass(nav, STATUS.show);
            addClass(nav, STATUS.hide);
            nav.setAttribute('data-animate', STATUS.hide);
        }
    }, false);
})();

效果示例:
css3-animation

睁不起了==睡觉了~呼噜~

一、字节

字节(Byte)是通过网络传输信息(或硬盘、内存中的存储信息)的单位。

1个英文字母(不区分大小写)占1个字节空间;1个中文汉字占2个字节的空间。

在计算机中的存储形式(使用二进制表示)

1111 1111 -> 1个字节

二、字符

字符是可使用多种不同字符方案或代码页来表示的抽象实体。

- 阅读剩余部分 -