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

什么是面向对象?
    面向对象是一种编程思想: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
        地址: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
    中文网:
===============================================
响应式
    一套页面,在不同尺寸的设备下使用不同的样式


    原生响应式
        媒体查询
        @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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zypgjg.html