前端常见问题

[nianxiongdi]

常见问题

• rem与em区别
• flex-shrink
• 双向绑定
• 去抖
• 节流
• 两个栈模拟一个队列
• 行内快元素有间隙问题
• 事件委托
• 清除浮动
• [BFC] - 解决以下问题
  • 边框坍塌
  • 清除浮动的元素
  • 可以阻止元素被浮动元素覆盖
• 箭头函数
  • 不会创建自己的this,集成上一层的this
  • call, apply, bind无法改变this指向
  • 不能用做构造函数
  • 没有自己的arguments
  • 没有原型prototype
  • 不能作为generator
• bind实现
• cookie封装
• webStorage和cookie的区别
• 动态添加script标签
• new一个对象的过程

1、创建一个新对象，如：var person = {};

2、新对象的_proto_属性指向构造函数的原型对象。

3、将构造函数的作用域赋值给新对象。（也所以this对象指向新对象）

4、执行构造函数内部的代码，将属性添加给person中的this对象。

5、返回新对象person。

var person = {};
person._proto_ = Person.prototype; //引用构造函数的原型对象
Person.call(person); //将构造函数的作用域给person,即：this值指向person

• js实现模板字符串
• add(1)(2)(3)
• js封装、继承、多肽

css

• svg画三角形, css画三角形,画圆
• 伪元素::before的使用

布局

• flex两列布局
• float三列布局
• 左自适应，右固定宽度
  • １．使用float布局
  • 2. 使用子绝父相
  • 3. 使用flex布局,加上flex-direction: row-reverse;属性就可以了.
• 圣杯布局/三列布局
• 水平居中
• 垂直居中
• 不定宽高居中
• 高度填充100%的方法

react

• 子组件通讯
• forceUpdate - 强制渲染页面
• 父向子通讯 - contextTypes
• createContext - 多代元素之间通讯
• PureComponent - 内部的shouldcomponentupdate函数会对state,props进行浅比较.
• 生命周期
• 箭头函数
• React.createElement - 虚拟dom
• 虚拟dao转化为真是的dom,2
• setstate多次合并

node

• ejs模版引擎
• [koa解决跨域]

app.use(cors({
  origin: function(ctx) {
    const whiteList = [, 'http://127.0.0.1:6001', ''];
    console.log(ctx.origin);
    if(ctx.origin in whiteList) {
      return ctx.origin;
    }

    return "http://0.0.0.0:9000";
  },
  credentials: true,
  "Access-Control-Allow-Credentials":"true",
 
}))

• 字符串模版实现

function parseString(str, obj) {
  Object.keys(obj).forEach(key => {
    // str = str.replace(new RegExp(`{{${key}}}`,'g'), obj[key]);
    // str = str.replace(/`\$\{${key}\}`/g, obj[key])
    str = str.replace(new RegExp(`\{${key}\}`,'g'), obj[key]);
  });
  return str;
}
// const str = "{{name}}很厉name害{{name}}，才{{age}}岁";
const str = "{name}很厉name害{name}，才{age}岁";
const obj = { name: "qy", age: "18" };

console.log(parseString(str, obj));


function runTemplate(stringTemplate, row = {}) {
  return eval("`" + stringTemplate + "`");
}
console.log(runTemplate("年龄:${row.age}", { age: 20 })); // "年龄:20"
// 去除括号
// "${}${}${}".replace(/\$({)/g,function($, $1){return $1;})

算法

• 从长度为n的数组里选出m个数使和为固定值sum