前端HTML5

最新推荐文章于 2024-06-21 21:16:45 发布

Pigsuuny

最新推荐文章于 2024-06-21 21:16:45 发布

阅读量506

点赞数 2

分类专栏：前端H5 JavaScript Vue生命周期文章标签：前端服务器 javascript vue

本文链接：https://blog.csdn.net/Pigsuuny/article/details/127990650

版权

JavaScript 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端H5

1 篇文章 0 订阅

订阅专栏

Vue生命周期

1 篇文章 0 订阅

订阅专栏

一、开发中有几种常用的content-type。

1.写在前面

content-type用来告诉服务器我们发送给服务器的数据类型。下面我们将总结一下开发中常用到的Content-type的类型。

2.Content-type类型

1.application/x-www-form-urlencoded

浏览器的原生form表单，如果不设置enctype属性，那么最终会以applicatiion/x-www-form-urlencoded方式提交数据。这种方式提交数据放在body里面，数据按照key1=value1&key2=value2的方式进行编码。

2.multipart/form-data

这种方式也是常见的post提交方式，通常表单上传时使用该方法。

3.application/json

告诉服务器主体的序列化的json字符串。

4.text/xml

该种方式主要用来提交XML格式的数据。

二、描述cookies,sessionStorage 和 localStorage 的区别。

（一）相同点：

都存储在客户端

（二）不同点：

1.存储大小不同。

cookie数据大小不能超过4k。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间不同。

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage 数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式不同。

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端，sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

三、Display有哪些值

none，inline，block，list-item，inline-block，table，inline-table，table-caption，table-cell，table-row，table-row-group，table-column，table-column-group，table-footer-group，table-header-group，run-in，box，inline-box，flexbox，inline-flexbox，flex，inline-flex

作用：

none：表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间，然visibility：hidden就保留

inline（默认值）：表示指定对象为内联元素

block：指定对象为块元素。

list-item：指定对象为列表项目

inline-block：指定对象为内联块元素。（这是CSS2中的属性）

table：指定对象作为块元素级的表格。类同于html标签table（CSS2）

inline-table：指定对象作为内联元素级的表格。类同于html标签table（CSS2）

table-caption：指定对象作为表格标题。类同于html标签caption（CSS2）

table-cell：指定对象作为表格单元格。类同于html标签td（CSS2）

table-row：指定对象作为表格行。类同于html标签tr（CSS2）

table-row-group：指定对象作为表格行组。类同于html标签tbody（CSS2）

table-column：指定对象作为表格列。类同于html标签col（CSS2）

table-column-group：指定对象作为表格列组显示。类同于html标签colgroup（CSS2）

table-header-group：指定对象作为表格标题组。类同于html标签thead（CSS2）

table-footer-group：指定对象作为表格脚注组。类同于html标签tfoot（CSS2）

run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）

box：将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

flexbox：将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

flex：将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

四、如何居中（垂直，水平）一个DIV

方案一：

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，兼容性：,IE7及之前版本不支持

div{

            width: 200px;

            height: 200px;

            background: green;

            position:absolute;

            left:0;

            top: 0;

            bottom: 0;

            right: 0;

            margin: auto;

    }

方案二：

div绝对定位水平垂直居中【margin 负间距】这或许是当前最流行的使用方法。

div{

            width:200px;

            height: 200px;

            background:green;

            position: absolute;

            left:50%;

            top:50%;

            margin-left:-100px;

            margin-top:-100px;

     }

方案三：

div绝对定位水平垂直居中【Transforms 变形】，兼容性：IE8不支持；

div{

            width: 200px;

            height: 200px;

            background: green;

            position:absolute;

            left:50%;    /* 定位父级的50% */

            top:50%;

            transform: translate(-50%,-50%); /*自己的50% */

     }

方案四：

css不定宽高水平垂直居中

.box{
             height:600px;

             display:flex;

             justify-content:center;

             align-items:center;

               /* aa只要三句话就可以实现不定宽高水平垂直居中。 */

        }

        .box>div{

            background: green;

            width: 200px;

            height: 200px;

        }

方案五：

将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构

<p class="outerBox tableCell">

  </p><p class="ok">

    </p><p class="innerBox">tableCell</p>

  <p></p>

<p></p>


/*

table-cell实现居中

将父盒子设置为table-cell元素，设置

text-align:center,vertical-align: middle;

子盒子设置为inline-block元素

*/

.tableCell{

  display: table;

}

.tableCell .ok{

  display: table-cell;

  text-align: center;

  vertical-align: middle;

}

.tableCell .innerBox{

  display: inline-block;

}

方案六：

子盒子实现绝对定位，利用calc计算位置

<p class="outerBox calc">

    </p><p class="innerBox">calc</p>

<p></p>


/*绝对定位，clac计算位置*/

.calc{

  position: relative;

}

.calc .innerBox{

  position: absolute;

  left:calc(50% - 宽度/2);

  top:calc(50% - 高度/2);

}

五、简述CSS中的transition 和 animation 的区别

transition和animation的区别:

1. Transition 强调过渡; Animation 强调流程与控制。

2. 两者的控制粒度不一样

某种程度上, transition 更加粗一点, 比如过渡的速度进行了封装, 可以控制是匀速改变还是贝塞尔曲线之类的。

animation 提供的 keyframe 方法, 可以让你手动去指定每个阶段的属性; 此外 animation 还封装了循环次数, 动画延迟等功能, 更加自由和强大。

3. 动画状态:

CSS的 transition 只有两个状态:开始状态和结束状态。

animation 可能是多个状态, 有帧的概念。

4. 动画触发方式:

CSS的transition需要借助别的方式来触发, 比如CSS的状态选择器（如:hover）或借助JavaScript来触发。

animation 不但可以使用上面的方式触发, 更重要的是可以自动触发。

5. animation 控制动效上要比 transition 强

因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。

6. 动画实现的范围:

transition 是有一定限制的, 并不是所有 CSS 的属性都具有过渡效果。

另外相比而言, CSS 的 animation 要比 transition 强大的多, 几乎所有的 css 属性都可以实现动画效果。

这也是为什么使用 animation 制作 Web 动画的场景更多。

7. 动画实现方式

CSS 的 animation 是离不开 @keyframes 的，换句话说，我们需要先使用 @keyframes 来注册一个动画效果，即帧来描述动画效果。当然，只注册也不见得有效果，还是需要使用 animation-name 属性引用 @keyframes 注册好的动画效果。

"注意": CSS transform 也是用来制作动效的，这个说法有点偏颇，CSS transform 只不过提供了一些函数，可以做不同的变换，这些函数运用于 CSS 的 transition 或 @keyframes 中能得到一些不同的效果，特别是配上时间，缓动函数之类的，效果会更佳。因此也被识认为是动效中不可或缺。其实在 animation 中，可以发挥你的想象，使用 CSS 中任意属性，实现一些有创意的动效。

transition和animation的共同点:

1. 从整体来看，animation 和 transition 想做的事情都是一样, 通过控制属性变化的过程也, 实现动画; 都是立足于控制本身 dom 的 css 属性变化过程, 来实现动画的视觉效果。而你看 transform 就不同, 本身一个 css 属性。

2. 他们都有“持续时间”、“延迟时间” 和“时间缓动函数”等概念，这些都是用来控制动效的效果。

六、如何随机打乱一个js数组（使用原生代码）

JavaScript：

let arr = [1, 2, 3, 4, 5]

    // 随机数函数

    function getRandomNum(min, max) {

      // 返回[min, max]之间的随机数

      return Math.floor(Math.random() * (max - min + 1) + min)

    }

    // 洗牌函数

    function shuffle(array) {

      let newArr = array.slice()  // 不改变原数组，将数组剪切一份给newArr

      for (let i = 0; i < newArr.length; i++) {

        const j = getRandomNum(0, i)

        const temp = newArr[i]

        newArr[i] = newArr[j]

        newArr[j] = temp

      }

      return newArr

    }

    let randomArr = shuffle(arr)

七、Vue里面compute和watch有什么区别。

1.总述

computed和watch都是vue框架中用于监听数据变化的属性。

2.computed计算属性

如果函数所依赖的属性没有发生变化，从缓存中读取，必须有return返回，使用方法和data中的数据一样，但是类似一个执行方法

3.watch监听器

watch的函数名必须和data中的数据名一致

watch中的函数有俩个参数，新旧

watch中的函数是不需要调用的

只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用

immediate:true 页面首次加载的时候做一次监听

4.区别

功能：computed是计算属性，watch是监听一个值的变化而执行对应的回调

是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调

是否调用return：computed必须有；watch可以没有

使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框

是否支持异步：computed函数不能有异步；watch可以

八、vue生命周期11个钩子函数。

1.Vue生命周期（初始生命周期）

2.Vue生命周期

beforeCreate(创建前)：在此生命周期函数执行的时候，data和methods中的数据都还没有初始化。
created(创建后)：在此生命周期函数中，data和methods都已经被初始化好了，如果要调用 methods中的方法，或者操作data中的数据，最早只能在created中操作。
beforeMount(载入前)：在此生命周期函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的。
mounted(载入后)：此时页面和内存中都是最新的数据，这个钩子函数是最早可以操作dom节点的方法。
beforeUpdate(更新前)：此时页面中显示的数据还是旧的，但是data中的数据是最新的，且页面并未和最新的数据同步。
Updated(更新后)：此时页面显示数据和最新的data数据同步。
beforeDestroy(销毁前)：当执行该生命周期函数的时候，实例身上所有的data，所有的methods以及过滤器…等都处于可用状态，并没有真正执行销毁。
destroyed(销毁后)：此时组件以及被完全销毁，实例中的所有的数据、方法、属性、过滤器…等都已经不可用了。

3.生命周期（其他三个钩子函数）

下面两个钩子函数一般配合使用

activated(组件激活时)：和上面的beforeDestroy和destroyed用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用 beforeDestroy和destroyed的话，就太浪费性能了。实例被激活时使用，用于重复激活一个实例的时候
deactivated(组件未激活时)：实例没有被激活时。
errorCaptured(错误调用)：当捕获一个来自后代组件的错误时被调用

Pigsuuny

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端HTML5

1.写在前面content-type用来告诉服务器我们发送给服务器的数据类型。下面我们将总结一下开发中常用到的Content-type的类型。2.Content-type类型浏览器的原生form表单，如果不设置enctype属性，那么最终会以applicatiion/x-www-form-urlencoded方式提交数据。这种方式提交数据放在body里面，数据按照key1=value1&key2=value2的方式进行编码。这种方式也是常见的post提交方式，通常表单上传时使用该方法。
复制链接

扫一扫