js中的继承

发表于 2017-05-13

http://www.cnblogs.com/ayqy/p/4471638.html

原型链继承

子类原型对象指向父类实例

1	Child.prototype = new Parent(); // 核心

优点：简单
缺点：
1. 从原型对象继承来的引用属性是所有实例共享的。
2. 创建子类实例时，无法向父类构造函数传参

构造函数

子类中调用了父类的构造方法，没有用到原型

1
2
3

function Child(name){
    Parent.call(this, name);   // 核心
}

优点：
1. 解决了子类实例共享父类引用属性的问题
2. 创建子类实例时，可以向父类构造函数传参

缺点：
1. 无法实现函数复用，每个子类实例都持有一个函数，太多了会影响性能，内存爆炸。。

组合继承

针对函数复用问题，构造函数+原型继承

function Parent(name){
  this.name = name;
}
Parent.prototype.fun = function(){};
function Child(){
    Parent.call(this);   // 核心
    // ...
}

func.call(this) ,

func中的this指向了第一个参数！

页面是如何呈现的

发表于 2017-05-13

1，浏览器首先会查询本机的系统，获取主机名对应的IP地址。

2，若本机查询不到相应的IP地址，则会发起DNS请求，获取主机名对应的IP地址。

3，使用查询到的IP地址，直接访问目标服务器。　

4，浏览器发送HTTP请求。

　　HTTP请求由三部分组成，分别是：请求行、消息报头、请求正文

5，从请求信息中获得客户机想访问的主机名。

6，从请求信息中获取客户机想要访问的web应用。（web应用程序指提供浏览器访问的程序，简称web应用）

7，从请求信息中获取客户机要访问的web资源。（web资源，即各种文件，图片，视频，文本等）

8，读取相应的主机下的web应用，web资源。

9，用读取到的web资源数据，创建一个HTTP响应。

10，服务器回送HTTP响应。

　　HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文

11，客户浏览器解析回送的资源，并显示结果。

重绘&回流是什么

发表于 2017-05-13

##页面是如何呈现的

页面

重绘

移动web

发表于 2017-05-11

iphone5为例：

说的640dp*1136dp指的是物理像素，而实际上实际开发用的是逻辑像素（px，浏览器使用的抽象单位）
dp，pt：设备无关像素，是固定的，不像逻辑像素可大可小。

这两者的关系是用dpr：设备像素缩放比

1px = (dpr)平方*dp

以dpr=2举例：

平面上：1px = 4dp

长度来说：1px = 2dp

所以，iphone5声称的640dp*1136dp也就是实际开发的320px*568px

dpi & ppi

dpi：打印机每英寸可以喷的墨汁点

ppi：屏幕每英寸内有多少像素渲染，也就是单位英寸内的像素密度

以iPhone 5为例，需要用物理像素去算

ppi=[（1136² + 640²）/4 (英寸) ]开方 = 326ppi (视网膜retina屏幕，dpr大于等于2)

ppi越高，像素数越高，图像越清晰（图像有更多的像素去渲染）

viewport

iOS：viewport是980px（在980px的视口上渲染无误，在移动端缩放）

Android：不确定，可能是1640,1200？

layout viewport：布局viewport，980px
visual viewport：度量viewport，缩放后的网页宽度

meta标签

1 2	document.body.clientWidth：布局viewport //书的大小 window.innerWidth：度量viewport 缩放后大小：当前屏幕可视区域下展示了多少像素放大镜

div：320*568px，默认viewport是980px，也就是320布局在980的页面上，只能显示一部分

最佳：

1	<meta name="viewport" content="width=device-width，initial-scale=1，user-scalable = no">

width=device-width 布局viewport=设备宽度

initial-scale=1 度量viewport = 布局viewport

document.body.clientWidth：320
window.innerWidth：320

未命名

发表于 2017-05-09

标题

h1~h6 / .h1~.h6
h1:36px;
h2:30px;
h3:24px;
h4:18px;
h5:14px;
h6:12px;

小标题：<small>

文本

段落：对初始样式做了定义

1
2
3

默认：14px
行高：20px
底部外边距：10px

排版对齐：

1
2
3

.text-left
.text-center
.text-right

大小写：

1
2
3

.text-lowercase
.text-uppercase
.text-capitalize //首字母大写

表格

带边框的表格：.table-bordered
条纹状表格：.table-striped
悬停变色：.table-hover
紧凑风格: .table-condensed

颜色：danger success warning active

表单

1	.form-control //输入框(input，textarea，select)变成圆角，得到焦点有边框

分组：

<div class="form-group">
  <label></label>
  <input class="form-control input-lg input-sm">
</div>

div应用form-group

form应用form-inline ，水平排版

未命名

发表于 2017-05-09

nodejs和javascript差异

js中的顶层对象：window
node中顶层对象：global

nodejs中的模块

一个文件就是一个模块，每个模块都有自己的作用域。我们使用var来声明的变量并不是全局的，而是属于当前模块下。

## index.js
var a = 100;
global.a = 200;
console.log(a);   //100

__filename:

当前文件被解析过后的绝对路径。eg: e:/web/index.js

该属性并非全局属性，属于模块作用域

__dirname

当前文件所在目录被解析过后的绝对路径。eg: e:/web

该属性并非全局属性，属于模块作用域

路径

绝对路径

相对路径：不加.的话是加载核心模块；./相同目录下的

首先按照加载的模块的文件名称查找，如果没找到会在模块名称后加上.js的后缀进行查找

require(“./3”)–>是否有3–>是否有3.js–>3.json–>3.node

process

是一个全局对象:process==global.process, 对当前运行的程序的进程进行访问和控制

返回的是module.exports

node.js：单线程异步驱动

php运行：本身不支持多线程，服务器Apache支持：初始化150个线程给php ,一万人访问，去线程池拿线程，用完放回，别人再拿

nodejs运行：单线程，那一万人访问怎么办？采用异步的方式

第一个人操作DB，就在内存中开辟一块空间，主线程到第二个人，上传

async

框架：express，koa，hapi

assert模块提供了一系列的断言测试

assert.equal(actual, expected[, message])

判断实际值 actual 和期望值 expected 是否相等。

未命名

发表于 2017-05-08

新建一个文件夹，添加package.json

{
  "name": "hello-world",
  "description": "hello world test app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "4.x"
  }
}

npm install 安装依赖

var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello world!');
});
app.listen(3000);

以上代码相当于：

var http = require("http");
var app = http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hello world!");
});
app.listen(3000, "localhost");

运行index.js

中间件

Express框架的核心是对http模块的再包装，相当于在http模块上加了一个中间层。

简单说，中间件（middleware）就是处理HTTP请求的函数。

特点：一个中间件处理完，再传递给下一个中间件。App实例在运行过程中，会调用一系列的中间件。

每个中间件可以从App实例，接收三个参数，依次为request对象（代表HTTP请求）、response对象（代表HTTP回应），next回调函数(代表下一个中间件)。每个中间件都可以对HTTP请求（request对象）进行加工，并且决定是否调用next方法，将request对象再传给下一个中间件。

next回调函数中如果包含参数，表示抛出了一个错误，不再执行后边的中间件。

use()

Express中注册中间件的方法，返回一个函数，顺序调用

var express = require("express");
var http = require("http");
var app = express();
app.use(function(request, response, next) {
  if (request.url == "/") {
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.end("Welcome to the homepage!\n");
  } else {
    next();
  }
});
app.use(function(request, response, next) {
  if (request.url == "/about") {
    response.writeHead(200, { "Content-Type": "text/plain" });
  } else {
    next();
  }
});
app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error!\n");
});

app.use(path,callback)中的callback既可以是router对象又可以是函数

app.get(path,callback)中的callback只能是函数

app.use(“/“,function(){}) //请求的是“/”时，执行第一个中间件为啥~~~~~~

app.use(“/home”,function(){}) //执行对应的中间件

Q：res.send / res.end()

如果服务器端没有数据返回到客户端那么就可以用 res.end

但是如果服务器端有数据返回到客户端这个时候必须用res.send ,不能用 res.end（会报错）

未命名

发表于 2017-05-08

类似于jsp，模板引擎

<% = 表达式%> 返回一个字符串

<% 表达式%> 执行js代码

模板文件render with jsonData

1 2	// load the template file, then render it with data var html = new EJS({url: 'cleaning.ejs'}).render(data);

view helpers

<li>
    <a href='supplies/<%= supplies[i] %>'>
        <%= supplies[i] %>
    </a>
</li>

用view helper：link_to 等价于上边

1
2
3

<li>
    <%= link_to(supplies[i], 'supplies/'+supplies[i]) %>
</li>

vscode调试之控制台输入

发表于 2017-04-27

自从开始看nodejs,深深感觉sublime在调试方面太不方便了，毕竟人家只是个编辑器啊你非要当IDE用@.@…

Anyway，刚嫌弃完sublime的下一秒我就装了VSCode，相比VS2010简直小清新啊哈哈哈

阅读全文 »

MongoDB

发表于 2017-04-26

MongoDB使用集合（collection）和文档（document）来描述和存储数据，collection就相当于表，document相当于行。

show dbs
use demo
db.dropDatabase()
db.createCollection("user")
show collections
user = db.getCollection("user")
user.insert({name:"cheyenne"})
user.find({name:"cheyenne"})
user.find();//找到全部记录
user.remove({name:"ss"})
user.drop()
//更新集合中的文档
user.save({_id:ObjectId("55cc25b360bcee730bafd2bf"),name:"ZhangSan"})
user.update({name:"ZhangSan"},{name:"ZhangSan",password:"567890"})
user.update({name:"ZhangSan"},{$set: {password:"567890"}});//$set设置字段的值

nodejs有针对MongoDB的数据库驱动：mongodb

Mongoose

创建一个连接

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/test');
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  console.log("we're connected!");
});

在Mongoose中，一切都是从Schema中衍生出来的，schema可以理解为表结构的定义，每个Schema会映射到mongodb的一个collection，它不具备操作数据库的能力。

定义好了Schema，接下来由Schema生成Model。

将Schema编译成Model，Model是一个类，每一条数据都是一个对象，它拥有在Schema中定义的属性和方法，可以对数据库操作。

内置的Promises

Mongoose的异步操作，比如：.save()和查询

为了向后兼容，Mongoose4默认返回一个mpromise。

Mongoose queries不是一个promise对象，但它确实有个.then()方法

mongoose构建在mongodb上，提供了Schema、Model和Document对象，用起来更为方便。

我们可以用Schema对象定义文档的结构（类似表结构），可以定义字段和类型、唯一性、索引和验证。Model对象表示集合中的所有文档。Document对象作为集合中的单个文档的表示。mongoose还有Query和Aggregate对象，Query实现查询，Aggregate实现聚合。

Nodejs连接MongoDB

nodejs连接mongodb时，mongodb://localhost:27011/myproject1连接字符串中最后的表名如果在数据库里不存在会自动创建，如果没有指定数据库则MongoClient使用默认的test数据库

插入数据：

var insertDocuments = function(db, callback) {
  // Get the documents collection
  var collection = db.collection('documents');
  // Insert some documents
  collection.insertMany([
    {a : 1}, {a : 2}, {a : 3}
  ], function(err, result) {
    assert.equal(err, null);
    assert.equal(3, result.result.n);
    assert.equal(3, result.ops.length);
    console.log("Inserted 3 documents into the collection");
    callback(result);
  });
}

insert方法返回了一个对象，有如下三个属性：

result Contains the result document from MongoDB

ops Contains the documents inserted with added _id fields

connection Contains the connection used to perform the insert

nodejs支持所有的MongoDB身份验证机制