分享工作中的小问题

weixin_冬至_0 2020/9/15 20:03:40

### 1,setState给值问题: 在写给一个值的增减时,习惯性的 直接给了 count -- 所以,在setState时,就这样写成错的形式也来了``` let {count} = this.statethis.setState(() => { count: count -- })这样值一直没有变化 也不报错,正确的是: count -- retur…

### 1,setState给值问题: 

在写给一个值的增减时,习惯性的 直接给了 count -- 所以,在setState时,就这样写成错的形式也来了

```  

let {count} = this.state

this.setState(() => {

      count: count --

 })

这样值一直没有变化 也不报错,

正确的是:  

count --  

return {

        count

      }

```

原因:  要先执行完计算拿到结果再附值给对象属性

### 2,有个input输入的小问题分享一下。

在input的type=number时,键盘的输入可以输入. 、- 、 + 这些数字符号 所以就可以输入成 1.1.111、--1 ++1.1.1 类似这要的不正确的格式,在文本框里显现还是错误的格式,但是实际的值已经被清空了。

###3,vue绑定事件几种写法形式的区分:

 ```

@click="saveUpdate"

@click="saveUpdate()"

@click="saveUpdate(param)"

@click="saveUpdate($event)"

这几个写法的传参是不一样的,有时候习惯如果没有需要接收参数时就直接写成第一种了

第一种会默认传入事件对象 saveUpdate( e ) { 可以接收到事件对象 }

第二种接收的会是undefined

第三种接收的是对应的值。

第四种是当前传入事件对象

 在开发时还是不建议第一种省略的方式,不注意时就出现了第一和第三 一起出现的时候就有bug了

再说一下对比react上的点击事件的写法 react 的写法比较严格 好的写法在绑定onClick时写了函数名加()  : 因为要传参。  如果没有 比如像这样 onClick={ 函数名(..) } 在数据变化传值时会直接执行了里面的事件。 处理是用 () => 函数名() ;当然也要具体看你事件里是具体怎么定义的,

### 4, 写input输入验证时问题;

发现input的输入事件  在谷歌 与 360 上输入中文时不一样 ,不止是浏览器上不同,不在不同的输入法的工具上就有区别,比如万能输入法和王输入法就遇到过这样的情况,@input的事件不执行,只执行了@compositionend 的事件,所以在写@input的同时加上@compositionend 最好

@input的事件在输入中文时会在输入拼音时触发,且在造词时,input会先触发。处理是将验证放到了,blur上。

### 5,图片使用总结问题

图片的地址,在backgroungImage 时,如果地址上有个别空格或特殊的字符等,可能会存在不显现的情况,改成img标签或者 路径初始化的时候加上encodeURI即可 就没问题了  这种情况还要和后台返回的数据协议好,不行后台数据也做了转码处理,你再转码处理一次就有问题了。

用backgroundImage读图片,,遇到图片路径带有 () 括号时就不显现的 问题?

http://img1.sycdn.imooc.com/5f57443000017be010500244.jpg

要在路径上加上引号。 不加对有括号的不行,没括号的没有关系. 还是严格一点都加上这个引号

http://img2.sycdn.imooc.com/5f574314000143b710150187.jpg

http://img3.sycdn.imooc.com/5f5743140001cbda07050649.jpg


### 6,window.URL.createObjectURL问题

window.URL.createObjectURL( e.target.files[0] ) 对象提供的这个API只是将文件换成一个本地的url路径,只方便图片的本地预览,打包到线上路径是打不开的,还是需要将文件上传至服务来保存地址。 这只是一个临时的地址。

### 7,  用Umi-request 做文件流请求时 没有找到合适的方法,用了fetch来代替。

### 8 ,公众号项目的授权自动登录问题;

在授权返回的页面路径中,用hash模式this.$router.params拿不到code/infoid的参数,改用browser可以!但在本地浏览器调试刷新会失去路径状态

### 9,360安全浏览器的一个版本(好像是9.几) 不兼容对象里解构的写法 { ...obj } 改成 Objcet.assgin() 来处理

### 10, 从后台管理端 直接跳转到 PC端 并登录问题

 第一次跳转登录不成功问题 . 再次跳转可以成功的情况,可以是session保存状态问题,处理解决用了一个中间弹层 要求再确认一下。

### 11,推荐一个Day.js 

Day.js 一个轻量的 JavaScript 时间日期处理库,和 Moment.js 的 API 设计保持完全一样, 会用moment就完全会dayjs, 比起moment来说功能上无阉割但体积超轻仅2Kb.

Ant Design4.0已全面替换moment.js为day.js

### 12,非整型的Number类型问题

JavaScript中 非整型的Number类型不能用== (===也不行)来比较 例如0.1+0.2 不能===0.3

浮点数精确运算导致左右结果不相等 
正确做法:Math.abs(0.1+0.2-0.3)<=Number.EPSILON

类型转换 中多数情况下 建议用Number 不建议用parseInt parseFloat

### 13,开发字体显示问题:

网页浏览器上的手机模拟器 最小可视像素是12px 不能再小 移动端则是实际的像素 开发时还是参照真机为准 3 安卓机上0.5px的border或者高度又可能显示不出来 文字有可能被遮盖掉一像素 注意兼容开发

### 14, 几个优化方面的问题记录:

(1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程。
    常见方法:合并多个CSS文件和js文件,利用CSS Sprites整合图像,Inline Images(使用 data:URL scheme在实际的页面嵌入图像数据 ),合理设置HTTP缓存等。小图标可以用图标字体或svg
(2)减少DNS查找  
(3)避免重定向
(4)使用Ajax缓存
(5)延迟加载组件,预加载组件 按需加载
(6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。虚拟dom

(7)最小化iframe的数量:iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。单页面应用

(8)避免404:HTTP请求时间消耗是很大的,因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的,它只会降低用户体验而不会有一点好处。

### 15 依赖setTimeout精准定时的尴尬

setTimeout它只负责设定一个计时器,到点把要执行的函数添加到任务队列。而把函数添加到任务队列并不能保证立即执行, 什么时候能执行取决于事件循环什么时候把这个函数调度到主线程。事件循环调度异步函数的前提是主线程空闲, 如果主线程被阻塞了,即使把函数添加到事件队列,事件循环也不会立即调度它到主线程。这就是setTimeout不能精确定时执行某个函数的原因。


随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[分享工作中的小问题]http://www.zyiz.net/tech/detail-147068.html

上一篇:「1.8W字」一份不可多得的 TS 学习指南

下一篇:鸿蒙系统中的 JS 开发框架

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程