今日笔记盒子模型

最新推荐文章于 2022-05-16 20:16:08 发布

devincob

最新推荐文章于 2022-05-16 20:16:08 发布

阅读量194

点赞数

分类专栏：前端-面试

本文链接：https://blog.csdn.net/devincob/article/details/96738379

版权

前端-面试专栏收录该内容

11 篇文章 0 订阅

订阅专栏

盒子模型有两种，分别是

ie 盒子模型
标准 w3c 盒子模型。

标准盒子模型：

在这里插入图片描述

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，
但是 content 部分不包含其他部分。

在这里插入图片描述

从上图可以看到标准 W3C 盒子模型的范围也包括 margin、border、padding、content，
不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

vue-router懒加载的方式
3种

*1 . vue异步组件技术 ==== resolve 异步加载*
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件
/* vue异步组件技术 */
{ path: ‘/home’, name: ‘home’, component: resolve => require([’@/components/home’],resolve) },
2. 组件懒加载方案二路由懒加载(使用import)
const 组件名=() => import(‘组件路径’);
const Home = () => import(’@/components/home’)
3. es提案的import()
4. webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

/* 组件懒加载方案三: webpack提供的require.ensure() */

{ path: ‘/home’, name: ‘home’, component: r => require.ensure([], () => r(require(’@/components/home’)), ‘demo’) },
4. webpack内置的require,ensure()方法

3种懒加载传送门
将数组乘以2
在这里插入图片描述

关键字new创建新实例对象经过了以下几步：

创建一个新对象，如：var person = {};var person= Object.create(null,{})
新对象的__proto__属性指向构造函数的原型对象。
将构造函数的作用域赋值给新对象。（也所以this对象指向新对象）
执行构造函数内部的代码，将属性添加给person中的this对象。
返回新对象person。

原型继承机制：
构造函数通过new 关键字创建了实例，
所有的实例对象共享同一个prototype对象，
那么从外界看起来，
prototype对象就好像是实例对象的原型，
而实例对象则好像”继承”了prototype对象一样。

这就是Javascript继承机制的设计思想。

web如何进行页面性能优化？
内容方面

减少HTTP请求
减少dom操作
使用缓存
懒加载
css，js压缩合并

jq中的$()是jQuery（）函数的别称
jquery获得div上的onclick属性 $(‘div’).attr(‘onclick’),
jquery怎么移除div上的onclick属性
$(^{'} d i v^{'}) . r e m o v e A t r r (^{'} o n c l i c k^{'}) j q u e r y 设置 d i v 上 o n c l i c k 属性$ (‘div’).attr(‘onclick’,test())

你知道的跨域的方式
josnp和vue-resonance
动态的改变script上的src 利用 script上无跨域限制
resonance是

methods:{
                    sendJsonp:function(){  
               this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            params:{
                                wd:'a'
                            }
                        }).then(function(res){
                            console.log(res.data);
                        });
                    }
                }

如何理解闭包
函数和声明函数的词法环境的组合
表现形式
函数内部可以读取函数外部的全局变量
函数外部无法读取函数内的局部变量

添加移除复制创建和查找节点
创建：
createElement（）
createTextNode（）
添加
appendchild（）、
移除
removeChild（）
替换
replaceChild（）
插入
insertBefore（）
查找
getElementById
getElementByClassName
getElementByTagName

vuex的工作流程，以及使用场景

Vue组件中dispatch触发action中函数，
然后通过action中的commit来触发mutation提交数据
mutation接到请求后会通过mutate修改state
最后通过 this $store.state.xxx来条用更新

使用场景主要是复杂组件之间的通信状态管理

Vue的双向绑定原理
Object.defineProperty()

call，apply，bind的区别
bind支持预传参，
同时不能连续绑定
call和apply只是传参数的时候第二个参数的不同
apply接受的是数组
call接受是元素列表

这三个都能改变this的指向
能借用其他函数的方法

判断是数据类型

typeof a
c instanceof Array
c.constructor === Array
Object.prototype.toString.call(a)
无敌万能的方法：jquery.type()

如何判断数组呢？
Array.isArray（[ ]）
Object.prototype.toString.call(a)

v-for和v-if同时使用会发生什么
执行v-for不执行v-if
因为v-for的优先级比较高
应该分开使用

vue中的ref？
ref 被用来给元素或子组件注册引用信息。
引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
如果用在子组件上，引用就指向组件实例：
$refs 也不是响应式的

v-once在日常开发中用的很多，

只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，
都会当作静态内容并跳过，这可以用于优化更新性能。

css怎么画圆？ border-radius设置为宽或者高的50%

div{
	width: 50px;
	height: 50px;
	background-color: blue;
	border-radius: 25px;
}

vue如何发请求

1、vue 支持开发者引入 jquery 使用 $.ajax()
首先，在 package.json 中添加 jQuery，然后 npm install
 
"dependencies": {
    "jquery": "^3.2.1",
  },
2、在 webpack.config.js ( 这边用的 vue-cli-simple 脚手架 )
 
 // 增加一个plugins
  plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],
3、最后，在全局（main.js）中去引用
 
import $ from 'jquery'

vue.resource（ 2.0后不再更新）

跨域请求（使用vue-resource发送跨域请求）
1、使用vue-resource发送跨域请求步骤
安装vue-resource并引入：npm install vue-resource -S
基本用法：
https://blog.csdn.net/sinat_38328891/article/details/80312965

1、 npm 安装 vue-resource
 npm install vue-resource<br>
2、 main.js 中引入
import VueResource from 'vue-resource'
Vue.use(VueResource)<br>
3、使用
this.$http.get('../src/data/a.txt')
    .then(function(res){
          alert(res.data);
    },function(){
          alert('false')
});

推荐使用 axios

//url :绝对路径
 
//1、npm 安装
npm install axios
   
//2、组件 中引入main.js引入
 
import axios from 'axios'
Vue.prototype.$http = axios
  
//组件中使用：
this.$http.post()

main.js引入迭代补进来的
import Axios from ‘axios’
// 配置请求信息
var $http = Axios.create({ 　baseURL: '请求路径', 　timeout: '3000', //请求超时时间　headers: {'X-Custom-Header': 'foobar'} //header传值，例如：Authorization }) Vue.prototype.$ http = $h t t p 组件中使用： t h i s .$ http.post()

使用

this.$http.get('url')
     .then(function(res){
    alert(res);
     })
     .catch(function(err){
    alert(err);
})
this.$http.post('url', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
});

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>axios发送ajax请求基本用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="send">发送ajax请求</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                send(){
                    axios({
                       method:'get',
                        url:'user.json'
                    }).then(function(res){
                        console.log(res.data.name);
                    });
                }
            }
        });
    </script>
</body>
</html>

axios详细配置信息如下：

{
  // `url` 是用于请求的服务器 URL
  url: '/user',
 
  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get
 
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
 
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
 
    return data;
  }],
 
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
 
    return data;
  }],
 
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
 
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },
 
  // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
 
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },
 
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
 
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // 默认的
 
  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },
 
  // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
 
  // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 默认的
 
  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default
 
  // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
 
  // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },
 
  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },
 
  // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,
 
  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认的
  },
 
  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // 默认的
 
  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
 
  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
 
  // `cancelToken` 指定用于取消请求的 cancel token
  // （查看后面的 Cancellation 这节了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}

浏览器主要组成部分

user interface用户界面
浏览器引擎
渲染引擎
parsing HTML to construct the DOM tree
render tree
Layout

主要渲染引擎
chrome opera safari Firefox
渲染引擎怎么工作的？
两棵树
DOM tree document object model

Render Tree

Layout

=和的区别
===代表值和类型都相等
== 会产生隐式转换只能判断转化后的值是否相等
null undefined 的区别
null 代表空对象这个值
undefined 代表未声明的值

typeof bar ===‘object’验证的风险
typeof 是用来判断值类型的
判断引用类型例如null object array都是不行不确切的
Object.prototype.toString.call（）
NaN是什么类型用什么判断
number类型 isNaN判断

this的作用域
取决于this调用的位置

use scrict是什么有什么用处
严格模式
好处
消除js语法中不合理，减少怪异行为
消除代码不安全，保证代码健壮
提高编译器效率，增加运行速度
（变量必须先声明，再使用，不能对变量使用delete操作）
怪异模式
什么是window对象
window是一个顶层对象不是另一个对象的属性
表示浏览器打开的窗口

什么是document 对象
是window和frames对象的意思属性是显示于窗口或者框架内的一个文档

原型链构造函数实例对象原型之间的关系图

构造函数是什么？：通过new 关键字生成实例的函数
在这里插入图片描述
实例是什么 实例就是通过构造函数创建出来的对象。

var M = function () {
	this.name = 'Jane'
} 
var obj = new M()
//这里obj就是M的实例

constructor是什么？
constructor是对象的属性，用于
返回对创建此对象的构造函数的引用。
此属性的值对函数本身的引用，而不是一个包含函数名称的字符串。

所有对象都会从它的原型上继承一个constructor属性：

普通函数在内部有return操作的就有constructor属性，没有return的没有constructor属性；
有constructor属性的普通函数的constructor属性值不是普通函数本身，是Object。

原型是什么？
原型指的就是原型对象，至于是谁的原型对象，需要靠函数的prototype属性和实例的__proto__属性来区别。
在声明了一个函数之后，浏览器会自动按照一定的规则创建一个对象，这个对象就叫做原型对象。这个原型对象其实是储存在了内存当中。
在声明了一个函数后，这个构造函数（声明了的函数）中会有一个属性prototype，这个属性指向的就是这个构造函数（声明了的函数）对应的原型对象；
原型对象中有一个属性constructor，这个属性指向的是这个构造函数（声明了的函数）。下面一张图可以很简单理解：
在这里插入图片描述

function student() {
/* 我就是构造函数 */
}
var m = new student();
m是构造函数student创建出来的对象，这个实例对象是没有prototype属性的，只有__proto__
看图：

可以看到构造函数中有prototype属性，指向的是student对应的浏览器存在内存中的原型对象
而m是构造函数创建出来的实例，它没有prototype，所以调用，prototype的时候是undefined 但m有__proto__shuxing ,这个属性可以直接访问到构造函数的student的原型对象
看图
在这里插入图片描述

点击查看关系图详解

原型链是什么?

当读取实例的属性时，从一个实例对象开始往上找，如果实例中找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
【实例对象的__proto__属性所指向的则是这个实例对象的原型对象，如果用obj表示这个实例，则原型对象表示为obj.proto。】
同时，这个原型对象顾名思义也是一个对象，而且它也有上一级的原型对象，
相对于上一级原型对象而言，它也是一个实例对象，那么它也拥有__proto__属性，它的__proto__属性也指向它的原型对象，
后面也以此类推，一直到Object.prototype这个原型为止，Object.prototype为原型链的末尾点。

apply和call的区别
apply和call都能修改this指针
唯一不同是函数的第二个参数前者是数组的形式传递
后者是元素的形式传递

替代图片有哪几种方法

font-face canvas

mvvm的原理
model view viewmodel
model 和view 通过viewmodel连接
用户操作view会通过viewmodel反应到modal上
model 修改逻辑会通过viewmodel显示到view上

输入http到页面渲染中间发生了什么

输入网址
浏览器会解析一个ip地址 通过这个地址会到一个服务器获取数据
获取到数据之后
会将html解析成dom树
将css样式表解析成cssdom样式树
然后浏览器渲染引擎会将dom树和cssdom结合起来
对应的进行布局，渲染成一个 render树
然后浏览器的根据节点在显示屏的高度宽度 将render树渲染到指定的位置
将颜色什么都渲染进去

html是怎么渲染的
解析html文件创建dom树
解析css 形成css对象模型
将css与dom合并构建render渲染树
布局和绘制

创建一个对象有哪几种方法
可以通过字面量
构造函数
工厂模式
new
原型链
…

new 一个实例对象会发生什么

创建一个新对象，如 let obj = Object.create(null, {})
新对象的原型_proto__属性指向构造函数的原型对象
将构造函数的作用域赋值新创建的实例对象
执行构造函数中内部代码，将属性添加给obj中的this对象
如果构造函数没返回值默认返回obj新对象

最新的ecmascript标准定义了8中数据类型

7种原始基本数据类型

Boolean
Null
Undefined
Number
BigInt
String
Symbol

和Object

基本数据类型和引用数据类型有什么区别
基本数据类型和引用数据类型
一个是值类型一个是引用类型
值类型是存放在栈中的
引用类型是存放在堆上的
值类型是复制值
引用类型复制的是指针

箭头函数和普通函数的区别

普通函数的this的指向问题

数组去重有那些方法
原型链 indexOf方法
ES6 […new Set(arr)]
ES6 Array.form(new Set(arr))

用set有那些好处

js中遍历对象的方法有那些

map forEach some every reduce filter
find
他们的底层循环实现都是用for来做的
for 循环可以用什么来代替

除了遍历方法 for in
while也可以代替

for in 能否遍历出原型对象
能
深拷贝
function clone(){
let newObj = Array.isArray(obj)?[]:{}
for(let key in obj){
let val = obj[key]
newObj[key]= typeof val == ‘object’&&val !==null?clone(val):val
}
return newObj
}

使用for…in时会遍历对象原型中的自定义属性

Array.prototype.haha=function(){}
var arr=[];
for(var p in arr){
  alert(p) //haha
}

上面代码在所有浏览器中均输出‘haha’

解决方法

Array.prototype.haha=function(){}
var arr=[];
for(var p in arr){
  if(arr.hasOwnProperty(p)){
    continue
  }
  alert(p) 
}

hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，当属性是对象本身的一个成员时，返回值为true。

vue的生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

详解Vue生命周期
created和mounted之间的区别
created创建完实例后被调用
数据观测和方法的运算已经完成事件回调事件监听都已经完成

$el目前不可见
所以挂载还没开始

mounted 被新创建的vm.$el替换挂载到实例上去，后调用该钩子函数
vue中v-model的原理
v-model可以实现双数据绑定。它的本质上是语法糖，利用v-model绑定数据后，其实就是既绑定了数据，又添加了input事件监听

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

说一下 Object.defineProperty上面的一些方法
vue3.0 proxy

浏览器的策略–同源策略缓存策略

写一个函数判断字符串回文

将多个对象合并成一个对象
结构对象
{…a，…b}
Object.assign(a,{b:2})
循环遍历
for in obj.hasOwnproperty

css flex布局

vue 传值

devincob

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
今日笔记盒子模型

v-once在日常开发中用的很多，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。css怎么画圆？ border-radius设置为宽或者高的50%div{width: 50px;height: 50px;background-color: blue;border-radius: 25px;}vue...
复制链接

扫一扫