4399面试题一面（转载题目）

最新推荐文章于 2023-09-06 10:09:58 发布

Yyy_>o<

最新推荐文章于 2023-09-06 10:09:58 发布

阅读量278

点赞数

文章标签： vue.js bootstrap webpack Powered by 金山文档

本文链接：https://blog.csdn.net/Yyyyy_0_0/article/details/129641227

版权

小球从高处掉下来上下反弹的动画实现

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .cont {
            width: 100px;
            height: 600px;
            background: #eee;
            margin: 20px auto;
            position: relative;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            border-radius: 50%;
        }
    </style>
</head>
 
<body>
    <div class="cont">
        <div class="box"></div>
    </div>
    <script>
        //获取节点
        var box = document.querySelector('.box');
        var cont = document.querySelector('.cont');
        //声明一个重力加速度
        var g = 5;
        //小球的初始下落速度为0
        var speed = 0;
        //设定小球的最大目标值
        var targe = cont.offsetHeight - box.offsetHeight;
        //设定定时器的唯一标识；
        var time = '';
        //给小球绑定点击事件
        box.onclick = function() {
            //先清除一下定时器，防止重复点击小球时定时器发生累加。
            clearInterval(time);
            //点击小球，启动计时器。
            time = setInterval(function() {
                //给小球一个加速度，小球下落
                speed += g;
                //如果小球碰到边框，则小球弹回
                box.style.top = box.offsetTop + speed + 'px';
                if (box.offsetTop > targe) {
                    //强制将小球移动到边框；
                    box.style.top = targe + 'px';
                    //小球开始回弹
                    speed = - (speed - g);
                    //当小球的速度的绝对值小于1时
                    if (Math.abs(speed) < 1) {
                        clearInterval(time);
                    }
                }
 
            }, 30)
 
        }
    </script>
</body>
 
</html>

如何判断数组

构造函数入手:obj instanceof Array

ES5新增的方法：Array.isArray()

webpack如何压缩文件

const path = require('path')

// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面
  template: './src/index.html',
  // 指定复制出来的文件名和存放路径
  filename: './index.html'
})

// 注意：左侧的 { } 是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 使用 Node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
  // 在开发调试阶段，把 devtool 的值设置为 eval-source-map
  devtool: 'eval-source-map',
  // 在实际发布的时候，把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
  // devtool: 'nosources-source-map',
  // mode 代表 webpack 运行的模式，可选值有两个 development 和 production
  // 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；
  // 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！
  mode: 'development',
  // entry: '指定要处理哪个文件'
  entry: path.join(__dirname, './src/index.js'),
  // 指定生成的文件要存放到哪里
  output: {
    // 存放的目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'js/bundle.js'
  },
  // 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
  plugins: [htmlPlugin, new CleanWebpackPlugin()],
  devServer: {
    // 首次打包成功后，自动打开浏览器
    open: true,
    // 在 http 协议中，如果端口号是 80，则可以被省略
    port: 80,
    // 指定运行的主机地址
    host: '127.0.0.1'
  },
  module: {
    rules: [
      // 定义了不同模块对应的 loader
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      // 处理 .less 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 处理图片文件的 loader
      // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
      // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
      // 使用 babel-loader 处理高级的 JS 语法
      // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
      // 因为第三方包中的 JS 兼容性，不需要程序员关心
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  },
}

（内容可能不正确，还需参考其它内容）

url输入发生了什么

详细请看：https://baijiahao.baidu.com/s?id=1752169952245738551&wfr=spider&for=pc

图片格式png和jpg区别

png

优点：无损压缩，支持透明，简单图片尺寸小，高保真。

缺点：①不支持动画，色彩丰富的图片尺寸大；②对自然照片和复杂色块的图片压缩率不高。

使用场景：logo/icon/透明图，适用于web所有场景。

jpg

优点：色彩丰富，文件小。

缺点：有损压缩，反复保存图片质量下降明显。

使用场景：色彩丰富的图片/渐变图像，照片，复杂banner

原生如何绑定无序列表以及加序号

<body>
    <div>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <button>加序号</button>
    </div>
    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            var ul = document.querySelector('ul')
            ul.style.listStyleType = 'decimal'
        })
    </script>
</body>

性能优化

详细请看：https://blog.csdn.net/mapbar_front/article/details/79836443

bootstrap原理

通过定义容器大小，平分 12 份（也有平分成 24 份或 32 份，但 12 份是最常见的），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

三列布局——两边固定，中间自适应

方案1：flex布局

flex是css3提供的一种新的布局方式，这种布局的产生就是为了实现自适应布局，它是随着移动互联网时代产生而引进的。

本方案是实现自适应布局的最佳方案。

父元素设置display: flex之后，子元素float，vertical-align，clear失效

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }
 
        .container>div {
            height: 100px;
        }
 
        .container {
            display: flex;
        }
 
        .aside-left {
            width: 300px;
            background-color: #a9ff29;
        }
 
        .middle {
            flex: 1;
            background-color: #ffb91b;
        }
 
        .aside-right {
            width: 200px;
            background-color: #40c3ff;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="aside-left">左侧</div>
        <div class="middle">中间</div>
        <div class="aside-right">右侧</div>
    </div>
</body>

怎么培养自己的产品思维

第一步，就是面对所有的工作，都要习惯性自问：我到底要交付一个什么样的产品？

第二步，明确产品的用户到底是谁。

第三步，明确服务契约。要明确地问自己，自己的产品，到底为用户提供了什么样的服务契约，用户通过产品实现什么样的价值？

第四步，将产品在微观视角打磨至卓越。

第五步，要习惯于成就用户，时刻谨记：以人为本。

第六步，关注数据，持续完善。

密码加密方式

方法一：base64转码和解码

<script>
       let str = 'ImGod';
       let str64 = window.btoa(str);
       console.log('转化后：'+str64);
       let jm = window.atob(str64);
       console.log('解码后：'+jm);
</script>

结果：

方法二：MD5 加密方式（不可逆）

<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>//引入
<script>
        let str = 'abc';
        let newStr = md5(str);
</script>

前后端分离缺陷

数据依赖导致文档重要性增加

接口文档需要很详细，且要及时更新。

前后分离站点开发会让网站的SEO成为空谈。

SSR原理

SSR是Server Side Render简称，叫服务端渲染。

在客户端请求服务器的时候，服务器到数据库中获取到相关的数据，并且在服务器内部将Vue组件渲染成HTML，并且将数据、HTML一并返回给客户端，这个在服务器将数据和组件转化为HTML的过程，叫做服务端渲染SSR。

而当客户端拿到服务器渲染的HTML和数据之后，由于数据已经有了，客户端不需要再一次请求数据，而只需要将数据同步到组件或者Vuex内部即可。除了数据以外，HTML也结构已经有了，客户端在渲染组件的时候，也只需要将HTML的DOM节点映射到Virtual DOM即可，不需要重新创建DOM节点，这个将数据和HTML同步的过程，又叫做客户端激活。

rcors原理

详细请看：https://blog.csdn.net/qq_17175013/article/details/88984274?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-88984274-blog-106454544.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-88984274-blog-106454544.pc_relevant_default&utm_relevant_index=2

vue组件传值——on emit原理

父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信

父组件--绑定事物监听

@后是绑定的事件名称，属性值为组件的方法名

<Header @addTodo="addTodo"/>

//或者
<Header ref="header"/>
this.$refs.header.$on('addTodo', this.addTodo)

子组件--触发事件

在方法函数中使用$emit来触发一个自定义事件，并传递一个参数，这个参数就是子组件要传递给父组件的值。

this.$emit('addTodo', todo)

（以上答案为百度查找及个人想法所得，仅作参考。）

Yyy_>o<

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4399面试题一面（转载题目）

面试题
复制链接

扫一扫

4399面试题一面（转载题目）

小球从高处掉下来上下反弹的动画实现

如何判断数组

webpack如何压缩文件

url输入发生了什么

图片格式png和jpg区别

原生如何绑定无序列表以及加序号

性能优化

bootstrap原理

三列布局——两边固定，中间自适应

怎么培养自己的产品思维

密码加密方式

前后端分离缺陷

SSR原理

rcors原理

vue组件传值——on emit原理

“相关推荐”对你有帮助么？