Nodejs-NPM

笔记：使用npm 第三方库

1
let v = require('packageName');
  • 会先查找是否是core module
  • 是否是 File / folder(没用./等路径代替就不是)
  • 是否是node_module

Semantic Versioning：2.3.4
major version. minor version.patch version
^2.3.4 <=>2.x
~2.3.4 <=>2.3.x
2.3.4 <=>2.3.4

  • 列出所有已下载的包及其版本：npm list

npm list –depth=0//仅显示你下载的包，不显示依赖包
npm view 包名
npm view 包名 versions/dependency
npm i 包名@版本号

  • 找出outdated包
    npm outdated
    npm update //update minor&patch version

npm i -g npm-check-updates//更新到最新版本
ncu -u //to upgeade package.json
npm i //下载更新的包

DevDependency：
有的时候我们在开发时需要使用一些依赖：测试包，打包工具等，这些依赖关系是开发依赖，他们不应在在生产环境中使用，所以我们就把这些依赖单独的放入Devdependency中

npm i jshint –save-dev
都下载到node_module文件夹中

展开全文 >>

Node.js-module

module

module的基本概念

  • 为了构建实用和可维护（maintainable）的应用，应该避免在global中创建变量和函数
    Node中每一个文件被认为是一个module（module中的变量的作用域仅在本文件中–相当于OOP中的类的private，如果外部想要使用module中的变量，就需要export它，变为public）

  • 每一个文件是一个作用域，在这个作用域中有一个对象（并不是global的属性）module

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    module:Module {
      id: '.',
      path: 'D:\\CSS&HTML练习',
      exports: {},
      parent: null,
      filename: 'D:\\CSS&HTML练习\\global.js',
      loaded: false,
      children: [],
      paths: [ 'D:\\CSS&HTML练习\\node_modules', 'D:\\node_modules' ]
    }

    main module：相当于主类

创建和加载一个module

  • 创建一个module只需要新建一个文件即可，如果要export 一个function或variable，使用module.exports.xx=xxx;|| module.export = xx;

  • 加载module：require（’path’）;这样就引入了path路径文件中的module.exports对象

module是如何实现的？

  • 为什么每个文件是一个独立的作用域？

其实就是在每个文件中创建了一个函数作用域
像这样 :(
function(exports,require,module,__filename,__dirname){
//在这里写入代码
}
)();

  • 这也就是为什么在每个文件中都可用require引入（但是require又不是global的属性）,因为require作为参数传入了每一个module中

nodejs内置module：

  • fs（file system）:里面所有的API都有async,sync模式，async（异步）都有一个callback函数
1
2
3
4
5
6
7
8
9
10
const fs = require('fs');
let url = 'www';
function log(msg){
    console.log(msg);
    fs.readdir('./',(err,result)=>{
        if(err) console.log('error: ',err);
        else    console.log('result：',result,result instanceof Array);
    })
}
exports.log = log;

  • Events module

  • Class：EventEmitter（是一个类）=>require(‘events’);

1
2
3
4
5
6
7
8
const emitter = new EventEmitter();
// raise a event
emitter.emit('haha');//但是没有监听器监听这个事件的话，就什么都不会发生，所以在发射事件之前，先要注册该事件的监听器

emitter.emit('logger');
emitter.addListener('logger',()=>{
    console.log('logger listener open');
})//这样写，事件不会被监听：当我们emit一个事件时，emitter会遍历所有registered listener，并同步的调用他们
  • event传参
1
2
3
4
emitter.addListener('logger',(eventArg)=>{
    console.log('logger listener open: ',eventArg);
});
emitter.emit('logger',{ data:1 });

在一个对象中的emit和listener才能使listener生效
所以在一个module中创建EventEmitter对象调用emit。并在另一个module中创建EventEmitter对象on来监听是无效的。
这就用到了封装的思想。当 一个对象可能触发事件时，我们可以给他封装上eventEmitter

在log.js中：

1
2
3
4
5
6
7
8
9
const EventEmitter = require('events');
class Logger extends EventEmitter{
    log(msg){
        console.log(this)
        this.emit('logging',{data:1}); 
        console.log('log: ',msg);
    }
}
module.exports = Logger;

在main.js中

1
2
3
4
5
6
const Logger = require('./global');
const log = new Logger();
log.on('logging',(msg)=>{
    console.log('listener ',msg);
})
log.log('using');
  • HTTP Module
1
2
3
4
5
6
7
8
9
10
11
const http = require('http');
const server = http.createServer((req,res)=>{
   /*  if(req.path == '/'){ */
        res.setHeader('content-type','text/html;charset=utf-8');//告诉客户端我的相应数据类型以及所用的字符集
       // req.setEncoding('utf-8')
        res.write('你好','utf-8');
        res.end();//响应完成后应该主动结束，不占用链路资源
    /* } */
});//server extends net.Server(This class is used to create a TCP or IPC server),but ner.Server extends EventEmitter
server.listen(3000);//Starts the HTTP server listening for connections. This method is identical to server.listen() from net.Server.

展开全文 >>

CSS-link&@import

把CSS应用到HTML上

link标签

  • link标签必须放在head标签中，不能放在其他元素中。Web浏览器在遇到link标签时，会查找并加载指定的样式表，使用样式表中的样式渲染HTML文档

  • link引入的样式表中只能有CSS规则和CSS注释。

  • 可以使用link配置候选样式表

如下，rel(relation)指定关系是样式表，type的值始终是text/css：说明通过link标签加载的数据类型。href指明样式表的URL，可以是绝对地址也可以是相对地址。media(其值可以是：screen，print，all等媒体描述符)

1
2
<link rel="stylesheet" type="text/css" href="" media="screen,print" />

  • 设置候选样式表(感觉不常用)
1
2
3
4
<link rel="alernate stylesheet" type="text/css" href="" media="screen,print" title="Default"/>

<link rel="alernate stylesheet" type="text/css" href="" media="screen,print" title="big Text"/>

@import指令

  • @import也会加载外部样式表。在HTML中@import指令必须存在于style标签中，而且必须放在其他CSS规则之前才能起作用
1
2
3
4
5
6
7
8
<style>
@import url(sheet.css) screen;
@import url(sheet1.css);
h2{
color:red;
}
</style>

@import与link的不同

  • link可以指定多个候选样式表

  • @import不可以指定候选样式表

  • @import不仅可以在style中使用，还可以在.css文件中引入CSS

展开全文 >>

前端性能优化-2节流 

1
2
3
4
5
6
7
8
9
10
11
/* 节流：减少一定时间内触发的频率 */
function t(fn,delay){
          let begin = 0;
        return function(){
            let cur = new Date().getTime();//单位毫秒，1970年一月一号距今的毫秒数
            if(cur-begin>delay){
                fn.apply(this,arguments);
                begin = cur;
            }
        }
      }

展开全文 >>

前端性能优化-1防抖 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* javascript :应用需求例如：限制用户高频率点击提交按钮，但是第一次点击时应快速响应*/
let btn = document.getElementById("btn");
      btn.addEventListener("click", debounce(submit,1000,true), false);
      function submit() {
        console.log(1);
      }


       function debounce(fn, wait, immediate) {
        let timeout, args, context, timestamp, result;
        let later = function () {
          let last = Date.now() - timestamp; //timestamp:存储上一次触发的时间
          if (last < wait && last >= 0) {
            //方法不可以立即执行，延迟执行
            timeout = setTimeout(later, wait - last);
          } else {
            //到了可以立即触发的点
            timeout = null;
            if (!immediate) {
              result = fn.apply(context, args);
              context = args = null;
            }
          }
        };
        return function () {
  //        console.log(timeout, timestamp);
          context = this;
          args = arguments;
          timestamp = Date.now();
          let callNow = immediate && !timeout; //判断是否立即执行
          if (!timeout) {
            //如果未设置定时器
            timeout = setTimeout(later, wait);
          }
          if (callNow) {
            result = fn.apply(context, args);
            context = args = null;
          }
          return result;
        };
      }

展开全文 >>

JS-数据结构-二叉树-1

二叉树的基本操作

插入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* 创建结点 */
function Node(data,left,right){
    this.data = data;
    this.left = left;
    this.right = right;
}
Node.prototype.show = function(){
    console.log(this.data);
}
function Tree(){
    this.root = null;//构造空树
}
Tree.prototype = {
    insert(data){
        let node = new Node(data,null,null);
        if(!this.root){
            /* 如果是一颗空树 */
            this.root = node;
            return;
        }
        let curNode = this.root;
        let parent;/* 暂存父级结点，回退时使用 */
        while(curNode){
            parent = curNode;
            if(data<parent.data){
                /* 构建一棵搜索二叉树左小右大 */
                curNode = curNode.left;/* 继续搜索左子树 */
                if(!curNode){
                    /* 到达叶 */
                    parent.left = node;
                    return;
                }
            }
            else{/* 继续搜索右子树 */
                curNode = curNode.right;
                if(!curNode){
                    parent.right = node;
                    return;
                }
            }

        }
    },
}

遍历,深度计算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

Tree.prototype = {
    ......
    preOrder(root){
        if(!root){
            return null;
        }
        root.show();
        this.preOrder(root.left);
        this.preOrder(root.right);
    },
    middleOrder(root){
        if(!root){
            return null;
        }
        
        this.middleOrder(root.left);
        root.show();
        this.middleOrder(root.right);
    },
    laterOrder(root){
        if(!root){
            return null;
        }
        
        this.laterOrder(root.left);
        this.laterOrder(root.right);
        root.show();
    },
    getMin(root){
        let cur = root;
        while(cur){
            if(!cur.left){
                return cur;
            }
            cur = cur.left;
        }
    },
    getMax(root){
        let cur = root;
        while(cur){
            if(!cur.right){
                return cur;
            }
            cur = cur.right;
        }
    },
    getDeep(root,deep){//返回深度
        let deep = deep||0;/* 使用递归计算深度，如何获取到上一层的deep？添加参数deep并使用短路或判断，若deep为undefined则为0 */
        if(root){
            deep++;
            let leftDeep=this.getDeep(root.left,deep);
            let rightDeep = this.getDeep(root.right,deep);
            return Math.max(leftDeep,rightDeep);
        }
        return deep;

    }
}

树查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function get(data,root){
    if(!root){
        return "未找到匹配的结点";
    }
    if(data < root.data){
        /* 在左子树 */
        this.get(data,root.left);
    }
    else if(data > root.data){
        /* 在右子树 */
        this.get(data,root.right);
    }
    else{
        return root;
    }
}

遍历非递归写法

中序遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function middleOrder(root){
    let result = [];
    let stack = [];
    let cur = root;
    while(cur||stack.length>0){
        while(cur){
            stack.push(cur);
            cur = cur.left;
        }
        cur = stack.pop();
        result.push(cur.data);
        cur = cur.right;
    }
    return result;
}

前序遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function preOrder(root){
    let result = [];
    let stack = [];
    let cur = root;
    while(cur||stack.length>0){
        while(cur){
            result.push(cur.data);
            stack.push(cur);
        }
        cur = stack.pop();
        cur = cur.right;
    }
    return result;
}

后序遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function preOrder(root){
    let result = [];
    let stack = [];
    let cur = root;
    while(cur||stack.length>0){
        while(cur){
            result.push(cur.data);
            stack.push(cur);
        }
        cur = stack.pop();
        cur = cur.right;
    }
    return result;
}


展开全文 >>

JS-事件-1

事件流

事件流描述了页面接收事件的顺序

事件冒泡

IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触
发，然后向上传播至没有那么具体的元素（文档）。比如有如下 HTML 页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <title>Event Bubbling Example</title>
    </head>
    <body>
        <div id="myDiv">Click Me</div>
    </body>
</html>
<!-- 在点击页面中的<div>元素后，click 事件会以如下顺序发生：
(1) <div>
(2) <body>
(3) <html>
(4) document -->

事件捕获

Netscape Communicator 团队提出了另一种名为事件捕获的事件流。事件捕获的意思是最不具体的节
点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标
前拦截事件

展开全文 >>

JS-面向对象-继承

实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的

原型链继承

构造函数、原型和实例的关系

  • 每个构造函数都有一个原型对象: Function.prototype
  • 原型有一个属性(constructor)指回构造函数: Function.prototype.constructor = Function
  • 实例有一个内部指针([[ prototype ]])指向原型: function_instance.__proto__ = Function.prototype
1
2
3
4
5
6
7
8
 /* 构造函数 */
function Father(){
    this.fatherName="f1";
}
console.dir(Father);/*构造函数内有prototype: {constructor: ƒ Father()} constructor指向father */
let fatherInstance = new Father();
console.log(fatherInstance.__proto__);/* fatherInstance为Father的实例：实例中有一个指针指向Father原型，输出{constructor: ƒ Father()} */

插入图片讲解

实现继承

1
2
3
4
5
6
7
8
9
10
11
12
function Father(){
    this.fatherName="f1";
}
Father.prototype.f = "pf"
function Son(){
    this.sonName="s1";
}
/* 现在想要Son继承Father，已知Son的构造函数的prototype:{constructor f Son()} ,那么只要改变Son的构造函数的原型即可*/
/* Son.prototype = Father.prototype; 不能使用此方法改变Son的原型，因为如此改变后，Son的实例只能使用自己的属性和Father原型上的属性，并没有继承Father实例中的属性，而且以后想要修改Son的原型必定会破坏Father的原型*/
Son.prototype = new Father();
console.log(s instanceof Father);//true
console.log(s instanceof Son);//true

插入图片

原型与实例的关系

  • 方式一
1
2
3
4
5
/* 上面用到了instanceof来检测原型与实例的关系 */
console.log(s instanceof Object);//true，找到s原型链上有和Object一样的构造函数
console.log(s instanceof Father);//true
console.log(s instanceof Son);//true
/* instanceof的原理：查找s的原型链，看看是否有和Object|Father|Son原型链上一样的构造函数 */
  • 方式二

确定这种关系的第二种方式是使用 isPrototypeOf()方法。原型链中的每个原型都可以调用这个方法，只要原型链中包含这个原型，这个方法就返回 true：

1
2
3
4
Father.prototype.isPrototypeOf(s);//true ，s的原型链中包含Father原型
Son.prototype.isPrototypeOf(s);//true ，s的原型链中包含Father原型
Object.prototype.isPrototypeOf(s);//true ，s的原型链中包含Father原型

原型链的问题

  • 某一实例成为构造函数原型后，共享内存的问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Father(){
    this.fatherFood=['面条','鸡蛋'];
}
function Son(){
    this.sonFoos = ['肯德基']
}
/* 继承 */
Son.prototype = new Father();

let s = new Son();
s.fatherFood.push('鸡腿');
let s2 = new Son();
s2.fatherFood;//["面条", "鸡蛋", "鸡腿"],但是s2的fatherFood也改变

  • 原型链的第二个问题是，子类型在实例化时不能给父类型的构造函数传参。就导致原型链基本不会被单独使用，用来修改继承关系。

盗用构造函数继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Father(name){
    this.fatherFood=['面条','鸡蛋'];
    this.name = "ff";
}
function Son(){
    this.sonFoos = ['肯德基'];
    Father.call(this,"ss");/* 执行Father，并修改this指向Son的实例,可以在子类构造函数中向父类构造函数传参 */
}

let s = new Son();
s.fatherFood.push('鸡腿');
let s2 = new Son();
s2.fatherFood;//["面条", "鸡蛋"]，解决了共享内存问题

s instanceof Father;//false
s instanceof Son;//true

盗用构造函数的问题：子类也不能访问父类原型上定义的方法，所以基本也不用此方法来修改继承关系

组合继承

组合继承（有时候也叫伪经典继承）综合了原型链和盗用构造函数，将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Father(name){
    this.fatherFood=['面条','鸡蛋'];
    this.name = "ff";
}
function Son(){
    this.sonFoos = ['肯德基'];
    /* 继承属性 */
    Father.call(this,"ss");
}
Son.prototype = new Father();/* 继承父方法 */

let s = new Son();
s.fatherFood.push('鸡腿');
let s2 = new Son();
s2.fatherFood;//["面条", "鸡蛋"]，解决了共享内存问题

组合继承弥补了原型链和盗用构造函数的不足，是 JavaScript 中使用最多的继承模式。而且组合继承也保留了 instanceof 操作符和 isPrototypeOf()方法识别合成对象的能力。

寄生式组合继承

其实组合继承也有一个问题：效率不是很高，因为它要执行两次父级构造函数，第一次在子级构造函数内，第二次在修改子级原型时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 寄生式顾名思义，在一个函数内部做了某些操作 */
function inheritPrototype(Father,Son){
    let prototype = Object.create(Father.prototype);/* Object.create(proto，[propertiesObject]);proto 新创建对象的原型对象 */
    prototype.constructor = Son;//修改constructor，因为之后要把这个prototype作为Son的原型，那么Son原型中的constructor一定要指向Son啦
    Son.prototype = prototype;
}

function Father(name){
    this.fatherFood=['面条','鸡蛋'];
    this.name = "ff";
}
Father.prototype.ff = function(){ console.log("function of father") }
function Son(){
    this.sonFoos = ['肯德基'];
    /* 继承属性 */
    Father.call(this,"ss");
}
inheritPrototype(Father,Son);

这里只调用了一次 Father 构造函数，避免了 Son.prototype 上不必要也用不到的属性，
因此可以说这个例子的效率更高。而且，原型链仍然保持不变，因此 instanceof 操作符和
isPrototypeOf()方法正常有效。寄生式组合继承可以算是引用类型继承的最佳模式。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

不断学习的鸽子