前端学习(三十七）面向对象（笔记）

什么是面向对象？
    面向对象是一种编程思想：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