前端學習(三十七）面向對象（筆記）

什麼是面向對象？
    面向對象是一種編程思想：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