独书先生 Menu

Node.js学习笔记(2)–Nodejs console (控制台)总结简单示例

方法 描述
log 打印日志,支持格式符号%d,%s,%j,%
info 打印提示信息
error 打印错误信息
warn 打印警告信息
dir 打印对象的方法和属性。
time 计时器,和timeEnd成对使用,计算时间区间。
timeEnd 计时器,和time成对使用,计算时间区间。
trace 跟踪函数的执行过程,一般放在函数内部使用。
assert 断言。语法:console.assert(表达式,错误信息)

Continue reading…

Node.js学习笔记(1)–简单的Nodejs示例,同步异步方法调用

var http = require('http');
var exec = require('child_process').exec;

//定义请求触发时的执行代码
function onRequest(request,response){
    console.log('Accept a request!');
/*    response.write('You send a request!');
    response.end();*/
    async(response);
}

//示例化一个服务器
var server = http.createServer(onRequest);

//设置监听端口
server.listen(8080);

console.log('Server is starting...');

//同步方法
function sync() {
    var time = new Date().getTime();
    while(new Date().getTime()<time + 10000);
}
//异步方法
function async(res) {
    exec('find /',{timeout:1000,maxBuffer:2048},function (err,stdout,stderr) {
        console.log('execute');
        res.writeHead(200,{'Content-Type':'text/plain','charset':'utf-8'});
        res.write(stdout);
        res.write('Find complete');
        res.end();
    });
}

AngularJS : 过滤器orderBy用法

API定义:通过expression来排序指定的array 。 字符串按字母顺序排序,数字按大小排序。注意:如果你发现数字没被正确排序,请确认它们保存的是数字而不是字符串。

实现:在表格中,点击表头可使下边的数据按顺序排列,多次点击切换正倒排序

AngularJS_orderBy

AngularJS_orderBy

代码:

HTML:

<!--过滤器orderBy的用法-->
<table>
    <tr>
        <th><a href="javascript:void(0)" ng-click="orderField='name';reverse=!reverse;">姓名</a></th>
        <th><a href="javascript:void(0)" ng-click="orderField='phone';reverse=!reverse;">电话</a></th>
    </tr>

    <!--使用ng-repeat指令渲染所有的朋友数据-->
    <tr ng-repeat="friend in friends|orderBy:orderField:reverse">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
    </tr>
</table>

 

JS:

//声明filterCpntroller
cart.controller('filterController',function ($scope) {

    //声明一个数组用于演示过滤器filter的用法
    $scope.friends = [
        {name:'John',phone:'333-2332'},
        {name:'Alex',phone:'255-2332'},
        {name:'Elaine',phone:'333-4556'},
        {name:'Sam',phone:'111-2332'},
        {name:'Peter',phone:'333-0987'},
        {name:'Adam',phone:'5442-2467'},

    ];

    //排序字段定义:可能选项是'name','phone'
    $scope.orderField = 'name';

    //正序或倒序
    $scope.reverse = true;
});

AngularJS : ng-model数据绑定之全选

实现:

全选需求,点击全选checkbox下面的复选框全部被选中

数据绑定全选

数据绑定全选

分析:

全选部分使用双向数据绑定ng-model, 下面每个复选框使用单向数据绑定(view->model)ng-checked

代码:

<table>
    <tr>
        <td>全选 <input type="checkbox" ng-model="allChecked"></td>
        <td>姓名</td>
    </tr>
    <tr>
        <td><input type="checkbox" ng-checked="allChecked"></td>
        <td>张三</td>
    </tr>
    <tr>
        <td><input type="checkbox" ng-checked="allChecked"></td>
        <td>李四</td>
    </tr>
    <tr>
        <td><input type="checkbox" ng-checked="allChecked"></td>
        <td>王五</td>
    </tr>
</table>

 

 

BootStrap: 跨设备网格系统区别

Bootstrap 网格系统如何跨多个设备工作
超小设备手机(<768px) 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px) 大型设备台式电脑(≥1200px)
网格行为 一直堆叠 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
Bootstrap 响应式实用工具

需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换,Div和Table

超小屏幕
手机 (<768px)
小屏幕
平板 (≥768px)
中等屏幕
桌面 (≥992px)
大屏幕
桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
注意点:
  1. .visible-xs-*即为:.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。
  2. 为所有xs,sm,md,lg同时设定.visible和.hidden,当屏幕处于超小时,.visible可见,.hidden不可见,其他的sm,md,lg的hidden可见,即:当处于特定屏幕大小时.visible才起作用,否则就是.hidden起作用

Bootstrap: role属性含义

1、role是HTML5的标签属性,可以用于标识一个普通的标签,使之语义化,方便浏览器对其具体功能进行识别。简单的说,role是为了给一些特定的浏览工具,比如盲文浏览工具识别
2、下面有其他案例:
Eg1:<div role="button"></div>,把div元素转换为button按钮功能使用;
Eg2:<div role="navigation"></div>,把div元素转换为navigation导航功能使用;
Eg3:<div role="checkbox" aria-checked="checked"></div>,把div元素转换为checkbox复选框功能使用;
Eg4:<a role="button" class="btn btn-default" href="#" >链接</a>,把a链接元素转换为button按钮功能使用。

Source By:http://blog.csdn.net/d295968572/article/details/56670548,感谢。

Brackets 最常用快捷键

分类:Web

Tab 自动补全
Ctrl+Shift+/ 先选中区域,注释选中部分
Ctrl+/ 不用选中,注释光标所在的一行
Ctrl+d 复制当前一行到下一行
Ctrl+shift+d 删除一行
Ctrl+Enter 下一行另起新的空白一行(Webstrom为:Shift+Enter)
Ctrl+Shift+L 代码代码格式化
Ctrl+Shift+上下 上下移动一整行代码

ctrl+x 剪切一行
ctrl+l 选中一行
ctrl+b 选中某一文本,连续按Ctrl+b 可继续选中后面和选中相同的文本,更改文本可同时更改这些相同的文本

必备插件

Brackets plus

Brackets plus

CSS:header 当前文章层级样式

分类:Web

HTML:
 

<header>
    <a href="#" class="index" id="index">Index</a>
    <a href="#" class="news">Class</a>
    <i class="news-right"></i>
    <a href="#" class="art">Article</a>
    <i class="art-right"></i>
</header>

 
CSS:

/*header*/
header{
background:#587CA9;
height:50px;
overflow: hidden;}

header a{display:inline-block;
height:48px;
line-height:48px;
color:#fff;
text-align:center;}

header .index{width:200px;
background:#32528D;
font-size: 20px;}

header .news{width:100px;
background: -webkit-linear-gradient(left,#577BA8,#32528D);}

header .art{width:70px;
background: -webkit-linear-gradient(left,#577BA8,#32528D);}

header .news-right,header .art-right{
position:absolute;
top:2px;
display: inline-block;
width:0;
height:0;
border:24px solid transparent;
border-left:18px solid #32528D;}

header .news-right{left:304px;}

header .art-right{left:378px;}

CSS:i 与i 标签之间有间隙

问题:需要两个i标签并排显示,中间无间隙,但是在margin:0;padding:0设置好了的情况下,仍然有间隙

HTML:

<i class="first"></i>
<i class="second"></i>

原因分析:把i (或者span之类的) 写在不同行就会出现间隔,

解决方法:应把两个i写在同一行

HTML:

<i class="first"></i><i class="second"></i>

i_无间隔 i_无间隔

参考:http://blog.csdn.net/clarkt/article/details/46363909

 

CSS:li标签实现对称效果

布局:ul中4个li标签,以中间为轴对称

分析:浮动,50%,box-sizing,padding

注意:要实现分块区域对称,li不能加margin,会被挤下来,应加上padding后设置a元素背景白色,即与大背景分离

css 对称分布效果 css 对称分布效果

 
CSS:

 .nav_two li{float:left;
    width:50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    --box-sizing: border-box;
    box-sizing: border-box;opadding:8px;}

.nav_two li a{display:block;
    background:#fff;
    height:65px;
    width:100%;
    -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.3);}