xuanxiao2013 / f2e-practice Goto Github PK

View Code? Open in Web Editor NEW

14.0 14.0 3.0 1.96 MB

烂笔头胜过好记性，前端实践

PHP 1.52% JavaScript 68.08% HTML 29.79% CSS 0.61%

f2e-practice's People

Contributors

Stargazers

Watchers

Forkers

lovoror kingsleyyu cathleenfang

f2e-practice's Issues

不调用构造方法实现的第二个问题

按照您的代码重新实现了一遍，发现还是有点小问题。我所预想的结果跟实际的结果不一样，您可以帮我解答一下吗？

function Parent(name, age) {
  this.name = name;
  this.age = age;
}

Parent.prototype.getName = function() {
  return this.name;
}
  //不调用构造方法实现
  function Son() {
      //如果没有 Son 的构造方法有参数需要处理，需要调用父类的构造方法
      //如果没有，可以不调用父类的够咱方法
      Parent.apply(this, arguments);
  };
  Son.prototype = new Parent();
  Son.prototype.constructor = Son;
var parent = new Parent('jack', 40);
var son = new Son('tom', 20);

console.log('sonName: ' + son.getName()); //sonName: tom(不调用构造方法)
console.log('parentName: ' + parent.getName()); //parentName: jack

Son.prototype.getName = function() {
  return this.name + " has a good son";
}
console.log('---------------');
console.log('sonName: ' + son.getName()); //sonName: tom has a ggod son(不调用构造方法)
console.log('parentName: ' + parent.getName()); //parentName:*jack*

跨域总结

最近工作中碰到跨域问题，记录一下。

搜索跨域问题解决办法，有好多总结帖，有好多的终极方案，有好多看了还是不明白说了个啥。花了几天时间自已一个一个的实践了一下，有好多办法可以跨域，方案的选择就看你的应用场景了。

跨域的问题总的来说可以分为2类，一类是消息之间的跨域传递，另外一类就是post登陆（安全性要求高）。

1. JSONP

由于script标签的请求是可以跨域的，JSONP就是利用这个特点来实现的，这个就是注意回调函数的名字避免冲突。可以看看这里的讨论聊聊 JSONP 的 P

2. document.domain

就是把两个子域的document.domain都设置为主域。DEMO

3. 嵌套iframe跨主域

就是在A域下嵌套B域的页面，同时A域传递给B域成功跳转地址。B域验证通过后，通过A域和B域指向的相同的服务器，B域给A域种cookie，A域获取cookie中的token在去B域那用户信息。DEMO

4. 服务端种cookie跨主域

这个需要两次请求，第一次告诉服务端种cookie，然后第二次发送jsonp请求，获取登陆状态。DEMO

5. window.name 跨域传递参数

window.name的值得长度据说等达到2M，在同一个窗口中，所有iframe共享window.name的值。通过这个可以跨域之间传递参数，要是有别的iframe使用这个window.name,那在利用它的时候就要好好的设计一下了。这里不爽的时要用到一个空得代理页面。DEMO。利用window.name解决iframe自适应高度点击DEMO。

6. postMessage

这个就是完全利用html5的新属性，IE6/7 不支持，有两种办法可以做到兼容。

第一种是利用IE6/7的navigator对象在父窗口和iframe之间是共享的，注册函数来传递参数。MessengerJS实现了，但是它提供的例子不能运行，配置host，和apache，可运行的例子点击messagejs。
不兼容IE6/7的点击DEMO。
第二种IE6/7 利用监听iframe的hash变化，传递参数 jquery-postmessage。

两种都不是很完美，一种是利用漏洞，一种参数是可见的，安全性低。

还有就是flash跨域，这个不在考虑范围之内。安全性高的建议采用第3中，对于安全性不是很高的参数传递，其它的都是不错的选择，尤其是第6条。

不调用构造方法实现继承的疑问

不使用构造继承时，在控制台输出的结果不符合您所写的文章的预期。不知道是不是我的代码有问题

function Parent(name, age) {
  this.name = name;
  this.age = age;
}

Parent.prototype.getName = function() {
  return this.name;
}

Parent.prototype.getAge = function() {
  return this.age;
}

Parent.prototype.love = function() {
  game: ['FPS'];
}

Parent.pay = function() {
  return 1000;
}

//不调用构造方法实现
function Son() {};
Son.prototype = new Parent();
Son.prototype.constructor = Son;

var parent = new Parent('jack', 40);
var son = new Son('tom', 20);

console.log('sonName: ' + son.getName());//sonName: undefined
console.log('parentName: ' + parent.getName());//parentName: jack
console.log('---------------');
console.log(Son.prototype.constructor == Son);//true
console.log(son instanceof Son);//true
console.log(son instanceof Parent);//true
console.log(son instanceof Object);//true

Son.prototype.getName = function() {
  return this.name + " has a good son";
}
console.log('---------------');
console.log('sonName: ' + son.getName());//sonName: undefiend has a ggod son
console.log('parentName: ' + parent.getName());//parentName:jack

redux 资料合集

学习redux有段时间了，相关不错的资料整理下，希望能帮到有缘人

五颗星推荐

中文文档通读不下3边，翻译的很好，想理解清楚redux，定下心来，认真读，必有收获
awesome-redux 官方推荐资料合集，没有啥说的
Redux中间件深入浅出就因为看了这篇文章才更加深入学习redux，同时对js有了别样的看法

三颗星推荐

解读 redux 的设计思路与用法问题提的不错，解释不是很到位，不过不影响理解redux
Redux 介绍这篇文章里面的flux和redux的对比图解释不错
simplest-redux-example redux es6 实践模板

一颗星推荐

javascript中的继承总结

javascript 中的继承

js 中继承比较复杂，坑比较多，最近有点时间整理下，记录下来。

js的继承实现方式大概分类如下的两大类，每一种实现都有自己的有点和缺点，根据场景选择吧

通过修改原型链来来实现继承
通过复制父类来来实现继承

为了理解继承的原型链的变化，我画了原型链图。下图是没有继承的时候，父类和子类的原型链图

function Parent(name, age) {
    this.name = name;
    this.age = age;
}
Parent.prototype.getName = function () {
    return this.name;
};
Parent.prototype.getAge = function () {
    return this.age;
};
Parent.prototype.love = {
    game: ['DoTa']
};

Parent.pay = function(){
  return 1000;
};

function Son(){}

修改原型链来来实现继承

修改原型链也有好几种，现在分开来说：

第一种：

实现原理: 修改原型链(子类的原型指向父类的原型)实现继承

优点: 简单

缺点: 子类修改影响父类

原型链图注意里面的红线

不调用构造方法实现

function Son(){}
Son.prototype = new Parent();
Son.prototype.constructor = Son;

调用构造方法实现

function Son(){
    Parent.apply(this, arguments)
}
Son.prototype = Parent.prototype;
Son.prototype.constructor = Son;

详细代码实现

第二种：

实现原理: 修改原型链(通过加入临时函数，阻止子类修改父类)实现继承

优点: 子类即能继承父类，又基本不影响父类，达到真正意义上的继承

缺点: 实例的对象和父类原型的对象相同的时候(父类的love)，可能会出现子类修改父类对象原型中的所有属性被实例共享，共享很适合函数，对基本值的属性也可以（实例上添加同名属性），但是对引用类型的值的属性来说，就会有问题

原型链图注意里面的红线

ES3 实现方式详细代码实现:

function create(proto){
    var F = function(){};
    F.prototype = proto;
    return new F();
}

function Son(){
    Parent.apply(this, arguments);
}
Son.prototype = create(Parent.prototype);
Son.prototype.constructor = Son;

ES5 实现方式详细代码实现:

function Son(){
    Parent.apply(this, arguments);
 }
 Son.prototype = Object.create(Parent.prototype)
 Son.prototype.constructor = Son;

ES6 实现方式详细代码实现:

class Parent{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}
Parent.prototype.getName = function () {
    return this.name;
};
Parent.prototype.getAge = function () {
    return this.age;
};
Parent.prototype.love = {
    game: ['DoTa']
};

class Son extends Parent {
    constructor(...args){
        super(...args);
    }
}

都说ES6 的Class 只是个语法糖，看来原因在这了

测试：

var parent = new Parent('jack', 40);
log('parentName:' + parent.getName()); // parentName:jack
var son = new Son('tom', 20);
Son.prototype.getName = function(){
    return this.name + ' has good father';
};
log('sonName:' + son.getName()); // sonName:tom has good father
log('parentName:' + parent.getName()); // parentName:jack


log(Son.prototype.constructor === Son); // true
log(son instanceof Son); // true
log(son instanceof Parent); // true
log(son instanceof Object); // true


log('parent love:' + parent.love.game); // parent love:DoTa
log('son love:' + son.love.game); // son love:DoTa

log('------------------------');

// 注意这里
son.love.game = 'DoTa2';
log('parent love:' + parent.love.game); // parent love:DoTa2
log('son love:' + son.love.game); // son love:DoTa2

log('------------------------');
son.love = {
    game: 'DoTa3'
};
// 注意这里
log('parent love:' + parent.love.game); // parent love:DoTa2
log('son love:' + son.love.game); // son love:DoTa3

复制父类来来实现继承

实现原理：通过深度复制把父类的方法复制一份给子类来实现继承

优点: 子类即能继承父类，又不影响父类，达到真正意义上的继承

缺点: 复杂