[成都|内门弟子]CSS-何俊|2021年01月27日的日报-技能树.IT修真院

发表于： 2021-01-27 21:48:40

1 988

今天完成的事情:

1-前端垮域问题有哪些常用的解决方式

什么是跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制

什么是同源策略(同域)

同源指的是"协议+域名+端口"三者相同，同源策略实际上是浏览器限制一个域名与另外一个域名的资源的交互的规则

URL http://store.company.com/dir/page.html 的源进行对比的示例:

http://store.company.com/dir2/other.html 同源只有路径不同

http://store.company.com/dir/inner/another.html 同源只有路径不同

https://store.company.com/secure.html 失败协议不同

http://store.company.com:81/dir/etc.html 失败端口不同 ( http:// 默认端口是80)

http://news.company.com/dir/other.html 失败主机不同

由于同源策略的存在，浏览器限制了跨域获取cookie，也限制了跨域DOM节点的访问，有效的防止的CRSF攻击

为什么会有跨域:

在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都是post/get请求

解决方式：

1.JSONP

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON数据

            $.ajax({
                url: 'http://www.tset.com:8086/login',
                type: 'get',
                dataType: 'jsonp',  // 请求方式为jsonp
                jsonpCallback: "handleCallback",  // 自定义回调函数名
                data: {}
            });

2.CORS

通过 XHR 实现 Ajax 通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为

3.Nginx反向代理:

跨域问题：同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题

需要自己配置nginx:

server {
        listen       8086;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:\WindowJS\css.java\jnshu.js; 
            index  index.html index.htm js.任务5-11111.html;
            try_files $uri $uri/ /index.html =404;
        }

        location /carrots-admin-ajax/{ 
            proxy_pass http://dev.admin.carrots.ptteng.com/;
        }

2-js继承的几种方式

1.利用 call 借用构造函数继承

优点:实现了继承属性，但值都不相同

缺点: 无法继承父级类别中原型上的方法

2. prototype 实现继承:利用prototype，将Student 的prototype 指向 Person 来达到继承效果

优点：继承了父级原型上的方法

缺点: 实例化多个Student 都必须共用相同的name 和 age

3.组合继承

结合prototype和call方法实现继承

            function Person(name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            Person.prototype.sayHi = function () {
                console.log("你好")
            }

            function Student(name, age, sex, score) {
                //借用构造函数
                Person.call(this, name, age, sex)
                this.score = score
            }

            // 改变了原型指向
            Student.prototype = new Person();//不传值
            Student.prototype.eat = function () {
                console.log("写代码");
            }

            var stu = new Student("小黑", 20, "男", "100分")
            console.log(stu.name, stu.age, stu.sex, stu.score);
            stu.sayHi()//你好
            stu.eat()//写代码

3-异步编程有哪几种方法来实现

1.回调函数

异步编程最基本的方法。回调函数的优点是简单，轻量级（不需要额外的库）。缺点是各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数

            function addNum(num1, num2, callback) {
                var sum = num1 + num2;
                return callback(sum);
            }

            function Num(num) {
                return num * num;
            }

            let num = addNum(1, 2, Num);
            console.log(num);//9

2.事件监听

采用事件驱动模式。优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以"去耦合"（Decoupling），有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰

            <button id="box"></button>
            var box = document.getElementById('#box')
            box.onclick = function () {
                alert('请单击box盒子')
            }