美文网首页
前端开发基础

前端开发基础

作者: 元气满满321 | 来源:发表于2019-06-09 23:01 被阅读0次

CSS

盒子模型:https://blog.csdn.net/Renkx0404/article/details/76096095
box-sizing决定元素遵循啥盒子模型:https://wanghan0.github.io/2017/03/31/css-box/
清除浮动:https://www.jianshu.com/p/53cde7aa3a61
CSS选择器优先级:import>内联>id>类|属性》标签》继承》通配符https://segmentfault.com/a/1190000008961940
CSS
1、position属性
https://blog.csdn.net/luckyfbb/article/details/80068706
http://www.jianshu.com/p/244a55b1d5b6
2、BFC
——块级格式化上下文。BFC 可以看作是隔离了的独立“块”,“”块“里面的元素不会在布局上影响到外面的元素
触发BFC:https://blog.csdn.net/DFF1993/article/details/80394150
可以通过触发BFC解决一下问题
1)阻止margin外边距重叠:每个div触发bfc
2)阻止margin高度重叠:父bfc
3)清除浮动:父bfc
3、两列布局(左侧宽度固定、右侧宽度自适应):https://www.jianshu.com/p/b4ba0ef3307a
4、三列布局:利用float
css样式:

#left {
    float: left;
    width: 200px;
    background: green;
}
#right {
    float: right;
    width: 200px;
    background: blue;
}
#center {
    background: red;
    margin-left: 200px;
    margin-right: 200px;
}           
html:
<div id="box">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="center">center</div>
</div>

5、水平垂直居中???

6、如何实现一个三角形:
如何实现一个圆形:

   .circle{
    width: 100px;
    height:100px;
    border-radius: 50px;
    background-color: red;
   }

CSS3新增属性
1)border-radius实现圆角;阴影box-shadow
2)box-sizing:content-box|border-box
3)媒体查询

js

js引入方式:https://www.jianshu.com/p/8099a0f45657
闭包https://www.zhihu.com/question/19554716
闭包是什么?闭包就是把外部作用域的变量引用封闭到函数里,使得变量不能被外部访问,同时可以通过函数提供访问接口。

function princess(){
  var adventures = [];
  var a = "a",
      b = "b",
      c = "c";
  adventures.push(a,b,c);
  //返回函数
  return {
    story: function(){
    return adventures[adventures.length-1];
  }
  }
}
console.log(princess().story());//"c"
console.log(adventures[0]);//adventures is not defined

闭包用在哪,有什么好处?1、模拟块级作用域2、通过函数访问私有变量和函数
闭包缺点?1、函数内部封闭的变量除非手动清理,不然一直存在内存当中
创建对象方式
1.原型方式


原型链:
原型链我的理解就是对象可以有个「默认的属性来源」,当读取一个对象上不存在的属性时,就会到原型上查(每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。也就是说,在我们调用person1.sayName()的时候,会先后执行两次搜索。首先,解析器会问:“实例person1有sayName属性吗?”答:“没有。”然后,它继续搜索,再问person1的原型有sayName属性吗?”答:“有。 ”于是,它就读取那个保存在原型对象中的函数当我们调用person2.sayName()时,将会重现相同的搜索过程,得到相同的结果。而这正是多个对象实例共享原型所保存的属性和方法的基本原理)
原型链实现继承(SubType.prototype = new SuperType();)

function SuperType(){
  this.value = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.value;
}
function SubType(){
  this.subValue = false;
}

//重写SubType原型对象,继承SuperType
SubType.prototype = new SuperType();
var instance = new SubType();
console.log(instance.getSuperValue());

组合模式实现继承:(page187)

js this指向
普通函数的this:1.直接调用指向window对象2.对象调用就指向对象3.指向new出来的实例
箭头函数
1)this指向:与外层函数this指向一致
2)new不可用,箭头函数不能实例化对象,会报错
问:addEventListener里面的箭头函数指向谁: window

 btn.addEventlistener('click', () => {
      console.log(this);
}let btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
  alert(this);
})

js数组方法:https://www.cnblogs.com/obel/p/7016414.html
splice(起始位置,想删除几个)
删除整个数组1.arr.splice(0,arr.length)2.length=0
js深拷贝https://www.jianshu.com/p/6622b5a9d48d(对象Object,数组Array);

function clone(data){
  if(Array.isArray(data)){
    let arr = [];
    for(let i in data){
      arr[i] = clone(data[i]);
    }
    return arr;
  }else if(data instanceof Object){
     let obj = {};
     for(let key in data){
       obj[key] = clone(data[key]);
     }
    return obj;
  }else{
    return data;
  }
}
console.log(clone({name: 'yujuan',hobbies:{outgoing:"play",indoor:"sing"}}))

浅拷贝(5种基本类型Undefined,Null,Number,String,Boolean)
数组去重:
通过构造函数模式,创建一个对象(Page164):

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

//let person = new Person("yujuan",18);
//console.log(person.name);
let o = new Object();
Person.call(o,"yujuan",18);
let person = o;
console.log(person.name);

通过原型模式创建对象:

跨域https://www.jianshu.com/p/07e29c06f631
1、JSOP
2、CORS
词法作用域(执行环境):
作用域链:
函数声明

function f(){
    console.log(“1”);
}

函数表达式

var f = function(){
    console.log(“1”);
}

区别在于函数表达式需先声明再使用;
什么是变量提升:将函数声明和变量声明提到当前作用域的顶部

HTTP

HTTP 状态码知道哪些?

304的作用?

Cookie 是什么?Session 是什么?
Cookie和Session的区别如下
1、cookie保存在客户端,session数据放在服务端
2、cookie的大小和数量有限制
3、安全性不如session

LocalStorage 和 Cookie 的区别是什么?
Cookie会与服务器交互,localStorage存在浏览器本地
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的

GET 和 POST 的区别是什么?

HTML

Web语义化https://zhuanlan.zhihu.com/p/25493886
行内元素和块级元素https://jeffjade.com/2015/06/24/2015-06-24-css-block-inline/

编程基础与排序

双层for循环:return VS break VS continue
快速排序

function quickSort(arr,l,r){
    var i,j,x;
    if(l<r){
        i=l;
        j=r;
        x=arr[i];
        while(i<j){
            while(i<j&&arr[j]>=x){
                j--;
            }
            if(i<j){
                arr[i]=arr[j];
            }
            while(i<j&&arr[i]<x){
                i++;
            }
            if(i<j){
                arr[j]=arr[i];
            }
        }
        arr[i]=x;
        //递归调用
        quickSort(arr,i+1,r);
        quickSort(arr,l,i-1);
    }
  return arr; 
}  
console.log(quickSort([18,2,9,32,6,14],0,5));

冒泡排序

function bubbleSort(arr){
  for(var i =0;i<arr.length-1;i++){
    for(var j=0;j<arr.length-i-1;j++){
      if(arr[j+1]<arr[j]){
        var temp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = temp;
      }
    }
  }
  return arr;
}
console.log(bubbleSort([18,2,9,32,6,14]));

react

  1. 生命周期https://www.jianshu.com/p/24a85ae72284
  2. setState

redux

  1. 特点

mongodb

顺序存储和链式存储区别(即数组和链表的区别)

其他话术

1、优势
1)学习新技术:就写成一个小demo
2)带着测试思维,对功能的理解更全面,去开发

算法题(体现出来思考过程,面试官注重的不是这题的正确答案,而是你的思考和逻辑能力)

1.数组寻找最大数
2.有正有负的数组里,求连续最大数字和
3.智力题:四只蚂10圈蚁速度问题;判断两个矩形是否相交
4.递归问题:阶乘;斐波那契(上台阶);
5.链表
1)逆置链表
2)输出倒数第n个结点
3)单向链表是否有环
6.二叉树按层级打印


水平居中

es6语法

1.let const 块级作用域,变量在代码块里有效
2.模版字符串反引号标识起始,${变量}标识变量
3.解构赋值

let dog = {type: 'animal', many: 2}

let { type, many} = dog

console.log(type, many)   //animal 2

4.箭头函数(写法更简洁)

js数组splice

数组去重
作用域
cookie session技术难题和区别
for循环:return VS break VS continue
return:return跳出
break:跳出
continue:下层循环

相关文章

网友评论

      本文标题:前端开发基础

      本文链接:https://www.haomeiwen.com/subject/rfpoxctx.html