第二节课问题收集

miniflycn commented 6 years ago

收集一下下周答疑课问题哈

ceerqingting commented 6 years ago

node + express + http-proxy-middleware搭建一个proxy服务器遇到的一个问题 前端：

    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    xhr.open('get', '/login?user=admin', true);
    xhr.send()

node:

var qs = require('querystring');
var http = require('http')
var server = http.createServer();

server.on('request', function(req, res){
  var params = qs.parse(req.url.split('?')[1]);
  res.writeHead(200, {
    'Set-Cookie': 'l=a123456;Path=/;Domain=127.0.0.1;HttpOnly'   // HttpOnly:脚本无法读取
});
  res.write(JSON.stringify(params));
  res.end();
})

server.listen('8080');
console.log('server is running at port 8080');

中间件

var express = require('express');
var proxy = require('http-proxy-middleware');
var qs = require('querystring');
var fs = require('fs');
var path = require('path');
var app = express();

var requestTime = function(req, res, next) {
  req.requestTime = Date.now();
  next();
}
app.use(requestTime);

app.get('/index.html',function(req, res) {
  res.sendFile(__dirname+ '/index.html');
});

app.use('/login', proxy({
  target: 'http:127.0.0.1:8080',
  changeOrigin: true,
  onProxyRes: function(proxyRes, req, res){
    res.header('Access-Control-Allow-Origin', 'http://localhost:8000');
    res.header('Access-Control-Allow-Credentials', 'true');
  },
  cookieDomainRewrite: 'localhost:8000'
}));

app.listen(8000)

浏览器访问接口时报504错误，这个是哪里错了吗？

JaffarL commented 6 years ago

new Promise((res,rej)=>{
    console.log(this)    // {}
    res()
}).then(res=>{
    console.log(this)    // {}
})

new Promise(function(res,rej){
    console.log(this==global)    // true
    res()
}).then(function(res){
    console.log(this==global)    // true
})

setTimeout(()=>{
    console.log(this)    // {}
}, 0)

setTimeout(function(){
    console.log(this)    // Timeout
}, 0)

以上代码在浏览器环境下都是window对象，但是在Node环境下是注释中的内容为什么用箭头函数写的回调函数里的this是一个空对象？这空对象是哪来的？而setTimeout里函数声明里的this是setTimeout函数对象？

wanCheng7 commented 6 years ago

关于上周那个继承的代码，我看了很久，还是对其中一些代码不太理解，希望老师讲一下，我的理解是不论ES5还是ES6都是往这个基类Base的原型对象上加上后面那几个方法，可对实现过程不太理解，不懂的地方有注释： ES6：

class Base {
    constructor () {
        this.events = {};  
    }
    on(event, fn) {
        (this.events[event] = this.events[event] || [])
        .push(fn)     //这个地方为什么要这么写，监听事件到底意味着什么
    }
    trigger(event, ...args) {   //这个函数我理解为是触发事件
        (this.events[event] || [])
        .forEach( (fn) => {    //这里为什么要用forEach，一次不就触发一个事件吗？
            fn.apply(this, args)
        })
    }
}

ES5：

function Base() {
    this.events = {}   //这里为什么一定要借助一个对象来存那些方法，起到一个中转的作用？
}
Base.extend = function (proto, static) {
    var Super = this
    function Cur() {
        Super.call(this)
    }
    var Pile = function () {}
    Pile.prototype = this.prototype
    Cur.prototype = new Pile()
    merge(Cur.prototype, proto)
    merge(Cur, Super, static)
    return Cur
}
merge(Base.prototype, {
    on: function (event, fn) {
        (this.events[event] = this.events[event] || [])
            .push(fn)
    },
    trigger: function (event) {
        var args = slice.call(arguments, 1)
        ;(this.events[event] || [])
            .forEach((fn) => {
                fn.apply(this, args)
            })
    }
})

Elliott-Hu commented 6 years ago

github上如何团队协作？比如homework3 以团队的形式提交作业……

imhxc commented 6 years ago

homework2作业不是很理解，看了下Tapable文档写的很简单，却不知道如何下手。

Elliott-Hu commented 6 years ago

tapable 我可以理解为是用来为一个库的编写提供各个阶段的hook吗？为什么一个为webpack的插件机制设计的东西还可以用来写其他的库呢？

Elliott-Hu commented 6 years ago

主要是引入tapable主要解决了什么问题？希望老师能从这个角度解答一下

loosenRogers commented 6 years ago

不好意思之前的课落下了在做第二课的预习作业exercise4时遇到个问题
测试时报错 es5写法就报错超时但是我已经写done()显示告诉测试结束了还是报错超时想请问下这是为什么？

FE-star / 2018.1

第二节课问题收集 #8