前端遇到的问题：

最新推荐文章于 2024-07-12 16:27:40 发布

weixin_43702431

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量141

点赞数

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/weixin_43702431/article/details/120974505

版权

前端遇到的问题：
2021-03-30 12:00:00

子绝父相后，子的right没生效？

解：清除边框*{left:0;}生效了，将子盒子的right改为left浮动。
clearfix清除浮动后，下一个div仍没有向上贴顶？

解：因为上一个div添加了margin-bottom超出了父盒子。
图片布局后下边有一个空隙？

答：默认以基线为准，方法：vertical-aligin：middle/top/buttom以其中一条线为准。
双重for循环打印五行五列星星问题，为什么里循环外console.log（str+’\n’）str接着执行外循环时str值从5个星开始，而外循环外console.log（str+’\n’）就不会？
js父子节点操作的ie兼容性问题?
js获取不到数组的第二个元素？

答：动态生成表格案例：for的中括号位置不对，需把删除的操作移出来
document.write()会导致页面重绘，所以一般用innerHTML和document.createElement()来创建元素
事件委托的原理：
答：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
传统注册事件方式window.onload与window.addEventListener(‘load’)、(‘DOMContenLoaded’)的区别？
答：window.onload只能注册一个时间，新的会覆盖旧的；window.addEventListener(‘load’)必需等文档内容全部加载完成才开始执行；(‘DOMContenLoaded’)仅DOM元素加载完成即开始执行，不包括样式表、图片、flash等（用户体验良好）
mouseover和mouseenter的区别
答：mouseover时鼠标进入父盒子里的子盒子也会触发，因为mouseover会冒泡从而继承父盒子的方法；mouseenter进入子盒子时不会触发。
Css动画采用animate（）封装定时器的方法实现；移动的对象必须添加定位。用obj.timer来给每个对象添加独自的定时器，避免重复var开辟多个内存而占用内存
12.eslintrc.js>rules添加如下代码可解决eslint语法要求的最后多留一行问题（最后一行空白会被代码格式化插件自动去掉）：
```
 "eol-last": 0,
 "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],
```
cmd中操作element UI安装不成功：启用旧版本npm。
总是报Expected indentation of 0 spaces but found 2如何解决：

（1）修改了.eslintrc.js文件rules中加入 “indent”: [“off”, 2]

（2）在vue项目中找到build文件夹 --> webpack.base.conf.js --> module–>rules中把
```
 // 把下面这行注释掉，把 eslint 关闭/或把所有eslint规则注释掉      // ...(config.dev.useEslint ? [createLintingRule()] : []),
```
git的全局配置用户名和邮箱可以C盘.gitconfig中修改配置。

clearfix清除浮动只需到给浮动元素的父盒子添加clearfix属性

			.clearfix:before,
			.clearfix:after {
				content: "";
				display: table;
			}

			.clearfix:after {
				clear: both;
			}

			.clearfix {
				*zoom: 1;
			}

Syntax Error: TypeError: this.getOptions is not a function

答：基本是版本问题，降版本可解决
vue运行报错：Expected indentation of 2 spaces but found 4

答：在eslintrc.js的rules中添加"indent": [“off”, 2]，
权限扩展中，当屏幕宽度太小时图标会挤到第二行，给全局样式添加最小宽度：min-width:1366px;
typora永久保存图片设置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7QqurdII-1635235958406)(assets/1620232915993-1620232919450.png)]
报错：Unexpected space before function parentheses：

答：eslintrc.js的rules中添加

‘space-before-function-paren’: [

‘error’,

{

anonymous: ‘always’,

named: ‘always’,

asyncArrow: ‘always’,

},

]
报错：errors potentially fixable with the --fix option.

答：将package.json中scripts的：“lint”: “vue-cli-service lint” 修改为：eslint --fix --ext .js,.vue src
报错：TypeError: Cannot read property ‘validate’ of undefined

答：this.$refs.myBrandForm.validate()中的与ref="myBrandForm"名字叫的不一致，或者ref这个就没有定义。
报错：Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 12.x

答：运行 npm rebuild node-sass下载适合你当前环境的包
报错：npm ERR! errno -4058

答：不是在项目根目录运行终端命令，需cd进根目录在执行命令
变量提升问题：函数声明式的提升现象和变量提升略有不同，函数声明式会提升到作用域最前边，并且将声明内容一起提升到最上边。
```
bar()

var bar = function() {
  console.log(1);
}
// 报错：TypeError: bar is not a function
```
```
bar()
function bar() {
  console.log(1);
}
//输出结果1
```
- 所有的声明都会提升到作用域的最顶上去。
- 同一个变量只会声明一次，其他的会被忽略掉或者覆盖掉。
- 函数声明的优先级高于变量声明的优先级，并且函数声明和函数定义的部分一起被提升。
这款基于HTML5的在线拼车应用前端采用的是Vue框架的单页面开发，采用vue-cli脚手架工具构建项目，通过vue-router路由控制组件间的切换，由vuex进行组件间的数据通信，通过axios和后台接口进行数据通信。在开发过程中也遇到过不少问题，所幸也解决了，开发的过程也是学习的过程，我收获到了很多平常没有学习到的知识，掌握了一些原本不太熟练的技术，Spring Boot的应用节约了大量的时间和精力，不需要人为的配置大量的XML文件。
字符串转换为数组：
```
'1,2,3'.split(' ')
["1,2,3"]
```
数组转换为字符串：
```
[1,2,3].join()
"1,2,3"
```

splice方法可添加或删除：

从哪个位置将哪个数据替换：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");

fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Apple,Mango

从哪个位置删除几个并返回删除后的数组：

[1,2,3].splice(2, 1)
[3]

将字符串类型的时间转换为标准时间格式:

其中月份(dt.getMonth() + 1 + ‘’).padStart(2, ‘0’)代码，+1表示月份从0开始所以要+1，加一个空格连接能使时间变成字符串类型；padStart(2, ‘0’)代表月份用两位字符表示，若不足两位则在前面填充0.

 Vue.filter('dateFormat', function(originVal) {
    const dt = new Date(originVal)

    const y = dt.getFullYear()
    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
    const d = (dt.getDate() + '').padStart(2, '0')

    const hh = (dt.getHours() + '').padStart(2, '0')
    const mm = (dt.getMinutes() + '').padStart(2, '0')
    const ss = (dt.getSeconds() + '').padStart(2, '0')

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})xxxxxxxxxx

将字符串类型的数字 - 0可以转换成数值类型,用在接收的参数是数值型数据的时候。
```
('1'-0) => 1
```
eslint语法与代码格式化工具冲突，eslint不允许换行（会打印警告，但不影响项目运行），代码格式化工具又会自动帮你换行？

解决：在prettierrc格式化配置文件中把代码字符宽度属性printWith的值设为200（默认80）
```
"printWidth": 200
```
eslint语法参数需要使用驼峰命名法?

解决：把attr_id改为attrId
像素比=物理像素/css像素

（一个px像素放多少个物理像素）手机屏幕分辨率就是物理像素
变量提升和函数提升，变量提升只提升声明不赋值，函数则全部提升。如果变量名和函数名相同则保存函数，变量则忽略。
执行上下文：代码执行的环境。代码正式执行之前会进入到执行环境。
new Foo.getName( ) ,new一个函数会去执行这个函数
new Foo( ).getName( ); .(点)的优先级最高，所以先执行(new Foo( )).getName( );
new new Foo( ).getName( );—>new ((new Foo( )).getName)( );

函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次

–有个需要频繁触发的函数，处于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面的不生效。

 function throttle(fn, delay) {
            //记录上一次函数触发的时间
            var lastTime = 0;
            return function() { //记录当前函数触发的时间
                var nowTime = Date.now();
                if (nowTime - lastTime > delay) {
                    //修正this指向问题
                    fn.call(this);
                    //同步时间
                    lastTime = nowTime;
                }
            }
        }
        document.onscroll = throttle(function() {
            console.log(('该函数已被触发') + Date.now());
        }, 200)

函数防抖：一个需要被频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。（如下为一秒后的触发才生效）

 function debounce(fn, delay) { //记录上一次的延时器
            var timer = null;
            return function() { //清除上一次延时器
                clearTimeout(timer); //重新设置新的延时器
                timer = setTimeout(function() {
                        fn.apply(this);
                    },
                    delay);
            }
        }
        document.getElementById('btn').onclick = debounce(function() {
            console.log(('点击事件被触发了') + Date.now());
        }, 1000)

跨域方法：jsonp（需前后端一起设置）、cors、服务器代理（均只需后台设置）

//创建script标签
var script = document.createElement('script');
//设置回调函数
function getData(data) {
//数据请求回来会被触发的函数
console.log(data);
}
//设置script的src属性，设置请求地址
script.src = 'http://localhost:3000?callback=getData ' ;
//让script生效
document.body.appendChild(script);

node.js事件轮询机制：

nexttick（）

setTimeout（）

setImediate
从一个URL地址到最终页面渲染完成，发生了什么？

（1）DNS解析：将域名解析为ip地址

（2）TCP连接：TCP三次握手

a.浏览器发起，告诉服务器我要发送请求了

b.服务器发起，告诉浏览器我准备接受了，你赶紧发送吧

c.流浪器发起，告诉服务器我马上就发送了，你准备接受吧

（3）发送请求（请求报文）

（4）接受响应（响应报文）

（5）渲染页面

a.遇见HTML标记，调用HTML解析器解析成Token并构建成dom树

b.遇见style/link标记，调用CSS解析器，处理CSS标记并构建cssom树

c.遇到script标记，调用JavaScript解析器，处理script代码（绑定事件，修改dom树和cssom树）

d.将dom树和cssom树合并成一个渲染树

e.计算布局，计算节点的集合信息（布局）

f.将节点颜色绘制到屏幕上（渲染）

（6）断开连接：TCP四次挥手

a.浏览器发起，告诉服务器我发送完了（请求报文），你准备关闭吧

b.服务器发起，告诉浏览器，我东西接受完了（请求报文），我准备关闭了，你也准备吧

c.服务器发起，告诉浏览器，我东西发送完了（响应报文），你准备关闭吧

d.浏览器发起，告诉服务器，我东西接受完了（响应报文），我准备关闭了，你也准备吧
闭包：

形成的条件：

a.函数嵌套； b.内部函数引用外部函数的局部变量

闭包的优点：

a.延长外部函数局部变量的生命周期、

闭包的缺点：

a.容易造成内存泄漏
七层协议的体系结构

应用层、表示层、会话层、传输层、网络层、数据链路层、物理层
宏任务和微任务：

一个宏任务队列只有一个主线程，当宏任务队列的中的任务全部执行完以后会查看是否有微任务队列，如果有先执行微任务队列中的所有任务，然后继续执行第二个宏任务

VUE组件间的通信方式

1) 通信种类

```
 父组件向子组件通信
```
```
 子组件向父组件通信
```
```
 隔代组件间通信
```
```
 兄弟组件间通信
```

2) 实现通信方式

```
 props
```
```
 vue自定义事件
```
```
 消息订阅与发布
```
```
 vuex（重点）
```
```
 slot
```

八个生命周期：

beforeCreate（创建前）
created（创建后）
beforeMount(载入前)
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）
如何进行网站性能优化
- content 方面
  1. 减少 HTTP 请求：合并文件、CSS 精灵、inline Image
  2. 减少 DNS 查询：DNS 查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS 缓存、将资源分布到恰当数量的主机名，平衡并行下载和 DNS 查询
  3. 避免重定向：多余的中间访问
  4. 使 Ajax 可缓存
  5. 非必须组件延迟加载
  6. 未来所需组件预加载
  7. 减少 DOM 元素数量
  8. 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
  9. 减少 iframe 数量
  10. 不要 404
- Server 方面
  1. 使用 CDN
  2. 添加 Expires 或者 Cache-Control 响应头
  3. 对组件使用 Gzip 压缩
  4. 配置 ETag
  5. Flush Buffer Early
  6. Ajax 使用 GET 进行请求
  7. 避免空 src 的 img 标签
- Cookie 方面
  1. 减小 cookie 大小
  2. 引入资源的域名不要包含 cookie
- css 方面
  1. 将样式表放到页面顶部
  2. 不使用 CSS 表达式
  3. 使用不使用@import
  4. 不使用 IE 的 Filter
- Javascript 方面
  1. 将脚本放到页面底部
  2. 将 javascript 和 css 从外部引入
  3. 压缩 javascript 和 css
  4. 删除不需要的脚本
  5. 减少 DOM 访问
  6. 合理设计事件监听器
- 图片方面
  1. 优化图片：根据实际颜色需要选择色深、压缩
  2. 优化 css 精灵
  3. 不要在 HTML 中拉伸图片
  4. 保证 favicon.ico 小并且可缓存
- 移动方面
  1. 保证组件小于 25k
  2. Pack Components into a Multipart Document
aa
不使用 CSS 表达式
3. 使用不使用@import
4. 不使用 IE 的 Filter
- Javascript 方面
  1. 将脚本放到页面底部
  2. 将 javascript 和 css 从外部引入
  3. 压缩 javascript 和 css
  4. 删除不需要的脚本
  5. 减少 DOM 访问
  6. 合理设计事件监听器
- 图片方面
  1. 优化图片：根据实际颜色需要选择色深、压缩
  2. 优化 css 精灵
  3. 不要在 HTML 中拉伸图片
  4. 保证 favicon.ico 小并且可缓存
- 移动方面
  1. 保证组件小于 25k
  2. Pack Components into a Multipart Document
aa

weixin_43702431

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端遇到的问题：

前端遇到的问题：2021-03-30 12:00:00子绝父相后，子的right没生效？解：清除边框*{left:0;}生效了，将子盒子的right改为left浮动。clearfix清除浮动后，下一个div仍没有向上贴顶？解：因为上一个div添加了margin-bottom超出了父盒子。图片布局后下边有一个空隙？答：默认以基线为准，方法：vertical-aligin：middle/top/buttom以其中一条线为准。双重for循环打印五行五列星星问题，为什么里循环外con
复制链接

扫一扫