前端学习(三十七）面向对象（笔记）
什么是面向对象？
面向对象是一种编程思想：OOP
面向过程
面向对象
面向数据
作用域链
先再当前函数找变量，如果找不到找父级，如果父级没有，在往上找，直到找到全局。如果全局也没有，就报错。
原型链
先再当前实例身上找，如果没有找构造函数，如果构造函数没有找父类，直到找到Object，如果没有，就undefined
=======================================================
如果创建一个类
Person
属性
name age gender
方法
eat() move() sleep()
构造+原型
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.eat = function(){
alert('真tm好吃');
};
Person.prototype.move = function(){
alert('时速200公里每小时');
};
Person.prototype.sleep = function(){
alert('每天都想睡24小时');
};
继承
function Worker(name,age,job){
Person.apply(this,arguments);
或者
Person.call(this,name,age,job);
}
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
Worker.prototype.showJob = function(){
alert('我的工作是:'+this.job);
};
另一种书写构造函数的形式
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
constructor:Person,
showName:function(){
return this.name;
},
showAge:function(){
return this.age;
}
};
ES6
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
return this.name;
}
showAge(){
return this.age;
}
}
class Worker extends Person{
constructor(name,age,job){
super(name,age);
this.job = job;
}
showJob(){
return this.job;
}
}
===============================================
devicemotion 重力感应
检测设备是否支持重力感应
if(window.DeviceMotionEvent){
//your code
}else{
alert('sorry,Your device does not support gravity induction');
}
===========================================
WebSocket 实时交互
ajax\jsonp
单向
服务器压力大
实时性不高
WebSocket
双向 服务器可以主动的响应客户端
=================================================
必须有后台配合
必须下载socket.io模块
npm i socket.io --save
前端
引入socket.io
http://地址:8081/socket.io/socket.io.js
跟后台建立连接
io.connect('http://地址:8081');
后台
websocket接管http
let server = express();
let http = require('http').Server(server);
http.listen(8081);
let io = require('socket.io')(http);
接收客户端连接
io.on('connection',(sock)=>{
sock
});
发送
.emit('名字',值,值2);
接收
.on('名字',(data,data2)=>{
data 值
data2 第二个值
});
=================================================
node.js
npm init 生成 package.json
npm i express express-static --save
--save
--save-dev
创建一个服务 --save
express
express-static
代码压缩 --save-dev
uglify
concat
===============================================
Browsersync
中文网:http://www.browsersync.cn/
===============================================
响应式
一套页面，在不同尺寸的设备下使用不同的样式
原生响应式
媒体查询
@media
@media screen and (min-width:800px){
}
>800 red
@media screen and (min-width:400px) and (max-width:800px){
}
<800&&>400 green
<400 blue
Bootstrap响应式
==================================================
前端
bootstrap
less/sass
四个尺寸
大屏 中屏 小屏 超小屏
效果
jquery
后台
Node
数据库
MySQL
