独书先生 Menu

Node.js学习笔记(4)–Nodejs核心库之Buffer/FileSystem/Stream/Path简单示例总结

1.Buffer(缓冲区)

//Buffer简单示例
//1.创建指定容量的buffer
var buf1 = new Buffer(10);
console.log(buf1);  //Result: <Buffer 88 41 66 ed a0 02 00 00 00 00>

//2.根据数组创建buffer
var buf2 = new Buffer([1,2,3,4,5]);
console.log(buf2);  //Result: <Buffer 01 02 03 04 05>

//3.根据字符串创建buffer
var buf3 = new Buffer('string','utf8');
console.log(buf3); //Result:<Buffer 73 74 72 69 6e 67>
buf3 = new Buffer('string','hex'); //16进制
console.log(buf3); //Result:<Buffer >
//Node.js buffer支持的编码utf8/ascii/utf16le/ucs2/base64/binary/hex

//判断编码是否被支持
console.log(Buffer.isEncoding('ascii')); //Result: true

//判断对象是否是buffer的示例
console.log(Buffer.isBuffer(buf3)); //Resule: true

//获取buffer的字节长度,与编码有关
console.log(Buffer.byteLength('string','hex')); //Resule:3

//连接bufffer,可选参数为最大长度
console.log(Buffer.concat([buf1,buf2,buf3])); //Result:<Buffer f0 a4 99 15 75 01 00 00 d0 a6 01 02 03 04 05>

//将字符串写入buffer
buf1.write('string',0,6,'utf8');
console.log(buf1); //Result:<Buffer 73 74 72 69 6e 67 01 00 00 00>

//将buffer打印出来
console.log(buf1.toString('utf8',0,6)); //Result: string

//将buffer转换为json对象
console.log(buf1.toJSON()); //Result: { type: 'Buffer',
                            //data: [ 115, 116, 114, 105, 110, 103, 0, 0, 0, 0 ] }

//buffer复制
var buf4 = new Buffer(10);
var buf5 = new Buffer('string','utf8');
//将buf5中的第1位开始,第3位结束的内容复制到buf4上的第2位开始的位置
buf5.copy(buf4,2,1,3); //2是buf4的起点,1/3是buf5的起始点/结束点
console.log(buf4.toString('utf8',2,4)); //Result:tr

2.FileSystem(文件系统) / Stream(流) /Path(路径处理)

1)FileSystem 与Stream

var fs = require('fs');
var newFile = './核心库/tpl1.txt';

//追加指定内容到文件
fs.appendFile(newFile,'No.2 New Content','utf8',function (err) {
    if(err){
        console.log(err);
    }
});

//打开文件和关闭文件
fs.open(newFile,'w',0666,function (err,fd) { //打开文件时找出fd,后续用于关闭
   if(err){
       throw err;
   }
   //关闭文件时,第一个参数是文件句柄
    fs.close(fd,function (err) {
        if(err){
            console.log(err);
        }
    })
});

//Stream(流) :创建可读可写流
var rStream = fs.createReadStream(newFile,{bufferSize:200});
var wStream = fs.createWriteStream(newFile,{bufferSize:200});

//判断文件是否存在
//同步方法
console.log(fs.existsSync(newFile)); //Result:true
//异步方法
fs.exists(newFile,function (result) {
   console.log(result);  //Result:true
});

//复制文件,
fs.link(newFile,'./核心库/tpl2.txt',function (err) {
    if(err){console.log(err);}
});

//删除文件
fs.unlink('./核心库/tpl2.txt');

//创建文件夹
fs.mkdir('./核心库/mk',function (err) {
    if(err){
        console.log(err);
    }
});
fs.rmdir('./核心库/mk');

2)FileSystem与Path

var fs = require('fs');
var path = require('path');

//递归遍历文件夹下所有文件
function consoleFiles(dir) {
    var files = fs.readdirSync(dir); //只能读取下一级的所有文件或文件夹名
    files.forEach(function (name) {
        var pathName = path.join(dir,name); // 成为一个完整的目录
        if(fs.statSync(pathName).isDirectory()){
            consoleFiles(pathName); //遇到文件夹使用递归继续往下获取一级,直至获取到文件名
        }else{
            console.log(pathName); //遇到文件名即可输出
        }
    });
}
consoleFiles('./核心库');

3)Path

var path = require('path');
var p = 'https://dushusir.com/abc/cde.html';

//路径标准化
var p1 = path.normalize(p);
console.log(p1);  //Result: https:\www.dushusir.com\abc\cde.html
//组合多个路径
console.log(path.join('https://dushusir.com/','abc','../abc')); //Result:http:\dushusir.com\abc

//将相对路径换成绝对路径
console.log(path.resolve('./')); //Result: 向上一层 D:\Code\前端开发技术\Node.js\NodeTest
console.log(path.resolve('../')); //Result: 向上两层 D:\Code\前端开发技术\Node.js

//输出路径的直接上级
console.log(path.dirname(p)); //Result: https://dushusir.com/abc
//输出路径的最后一部分
console.log(path.basename(p)); //Result: cde.html

//输出扩展名,以最后一个点开始
console.log(path.extname(p)); // Result: .html
//常量
console.log(path.sep); //Result: \
console.log(path.delimiter); //Result: ;

Node.js学习笔记(3)–Nodejs核心库之timers/util/events简单示例总结

1.Node.js核心库之timers

方法 描述
setTimeout 间隔一定时间后执行方法,执行一次
clearTimeout 清除定时器
setInterval 间隔一定时间执行方法,执行执行
clearInterval 清除定时器
setImmediate 类似setTimeout,将代码加入下一个事件循环
clearImmediate 清除setImmediate。

 

JS:

//setTimeout 和 clearTimeout
var i=0;
function print() {
    console.log(i++);
    timeOut = setTimeout(print,1000);
    if(i>10){
        clearTimeout(timeOut);
    }
}

//第二个参数是间隔时间,单位是毫秒
console.time('l1');
var timeOut = setTimeout(print,1000);
console.timeEnd('l1');

Continue reading…

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;}