浅谈我们遇到的一些面试题（css篇）

小白男神
306 阅读1分钟

前言

我是小白，励志要做技术男神的帅逼，目前住在南京，做了快3年前端工程师，这是今天的笔记。

  • js
    • 跨域的理解和解决方法
    • jquery链式调用实现原理
    • 模块机制，AMD、CMD和commonjs
    • 复合图层（硬件加速）
    • this对象和bind,call函数使用
    • 函数申明与函数表达式的区别
  1. 前端常用库
  2. html
    • 页面渲染流程
    • html5新特性
    • window、history、xhr、location
    • Cookie、sessionStorage、localStorage的理解和区别
    • 文件上传实现
  3. vue
    • 虚拟dom有什么好处
    • 生命周期/组件生命周期
    • vuex的原理
    • vue-router传参和监听变化
    • 过滤器和指令的使用，是否使用过全局过滤器
    • 组件通信方式了解几种？
    • 计算属性compute和侦听器watch，可否修改compute里的值，怎么改
    • slot插槽，slot-scope使用
    • this.$nextTick的用法
  4. react
    • 创建组件的方式createClass、stateless function、extend Component/PureComponent
    • redux工作流程
    • 生命周期/组件生命周期
    • react-router-v4理解
    • 高阶组件
  5. webpack
    • 介绍一下webpack的工作原理
    • 简单介绍一下webpack里面的配置项
    • 使用过哪些webpack的插件和loader
    • webpack中如何配置实现多入口页面
  6. nodejs
  7. ajax/axios/jsonp
  8. 微信小程序开发/mpvue
    • 谈谈你对小程序开发的理解
    • 小程序点击按钮传参是怎么做的
    • 小程序开发中是否用了框架，ui组件样式怎么写的
  9. 业务相关
  10. 前端性能优化
  12. git管理工具

ajax/axios/jsonp

1. 创建一个XMLHttpRequest异步对象
2. 设置回调函数
3. 使用open方法与服务器建立连，设置请求方式和请求地址
4. 用send发送请求，向服务器发送数据
5. 在回调函数中针对不同的响应状态进行处理

// 1. 创建一个XMLHttpRequest异步对象
let xhr
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  xhr = new XMLHttpRequest()
} else {// code for IE6, IE5
  xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
// 2.设置回调函数
xhr.onreadystatechange = callback

// 3.使用open方法与服务器建立连接,设置请求方式和请求地址
// get 方式
xhr.open("get", "test.php", true)
// post 方式发送数据 需要设置请求头
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

// 4.用send发送请求，向服务器发送数据
// get 不需要传递参数
xhr.send(null)

// post 需要传递参数
xhr.send("name=jay&age=18")

5. 在回调函数中针对不同的响应状态进行处理
function callback() {
  // 判断异步对象的状态
  if(xhr.readyState == 4) {
    // 判断交互是否成功
    if(xhr.status == 200) {
      // 获取服务器响应的数据
      var res = xhr.responseText
      // 解析数据
      res = JSON.parse(res)
    }
  }
}

axios.get('http://xxx/xxx/xxx/xxx',{
  params: {
     id: xxx
  }
}).then(res => {
    console.log('数据是:', res);
}).catch((e) => {
    console.log('获取数据失败');
})

axios.post('http://xx/xx/xx/xx/xxx',{
  name: '小月'
}).then(function(res){
  console.log(res);
}).catch(function(err){
  console.log(err);
});

// 可以一次性发送多个请求，如果全部请求成功，在axios.spread方法接收一个回调函数
function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
this.$axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(res1,res2){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
}))

    // 得到查询结果后的回调函数
    var flightHandler = function(data){
    };
    var url = "http://xxx/xxx/xx?code=xxx&callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script);

跨域的理解和解决方法

得到的页面优化

文章中部分内容整理自

结语

以上是我的第一篇笔记，本人前端小白一只，如果写的不好请各位大佬指正，俺想再学习到更深知识，希望和各位大佬交朋友,希望我的笔记对您提供舒适的观看体验。

avatar
文章
阅读
粉丝