Fade

Fade 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

Fade 提出了问题 · 8月5日

解决Number.prototype.toFixed() 四舍五入出现bug

toFixed 定义:toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

bug表现:

image

复现代码:
let a1= 3.335
a1.toFixed(2)
// "3.33"
期望:

结果应该是3.34

这是为什么???
mozilla toFixed解释

关注 3 回答 3

Fade 回答了问题 · 4月17日

解决前端oss 直传如何保证Key 唯一?

一楼说用uuid,其实也是不对的。
因为用的最为广泛的uuid v4 版本是随机生成的,他无法保证唯一。随机的意思就是第一次随机结果为1,第二次随机结果也有可能是1,他只是几率小,但不能保证绝对唯一。
你们可能会说uuid 会拿mac 地址什么的。但是你仔细读那个uuid 文档就会发现,并没有说会拿地址,而且我开发的是app,你确定能拿到mac地址?。
不管你们查询uuid有多安全,我承认,但请注意,这是js 生成的,并且v4 版本明确表示是随机的。

我的最终解决方案是 ${uuid}-md5(${(token/userid)-${Date.now()}})

uuid + md5(token + 时间戳)

绝对的唯一。同一时间,token 绝对唯一。token 相同时,时间戳必然不同,从而保证了md5 后的字符串绝对唯一。

关注 4 回答 5

Fade 提出了问题 · 4月16日

cnpm 无响应

今天开机后cnpm 突然无法使用。输入cnpm - 指令,无反应,只是光标一直在闪烁。

在网上看到说是删除.npmrc 文件。删除后问题依旧存在。

删除node 重新安装node -> cnpm 镜像 -> 问题依旧存在。

删除node 重新安装node -> 没有安装cnpm 镜像,输入cnpm 指令依旧是无反应。

Image 1.png

图片为最后一次尝试。没有安装cnpm 输入无反应。卸载cnpm 输入cnpm -v 依旧无反应,光标闪烁。

如果没安装cnpm 正常反应应该是‘cnpm 不是内部或外部命令...’这样吧?

关注 2 回答 1

Fade 提出了问题 · 4月2日

腾讯oss 直传,回调延迟太大

使用的uni-app 开发的app

直传使用的是腾讯-小程序sdk
腾讯oss 文档

cos.postObject({
    Bucket: 'examplebucket-1250000000',
    Region: 'ap-beijing',
    Key: filename,
    FilePath: tmpFilePath, // wx.chooseImage 选择文件得到的 tmpFilePath
    onProgress: function (info) {
        console.log(JSON.stringify(info));
        // 上传进度回调
    }
}, function (err, data) {
    // 上传结果回调
    console.log(err || data);
});

上传一个将近50M的视频,发现当上传进度为100%时,15s 后才会有上传结果回调。
这个是怎么回事?

关注 1 回答 0

Fade 提出了问题 · 2月26日

解决前端oss 直传如何保证Key 唯一?

我使用的框架是uni-app。开发app。

上传文件代码

/**
* 此处key 截取方法是参照oss最佳实践里的
* 如果res.filePath为"file:///storage/emulated/0/DCIM/Camera/41aa3f433bb3b368fcc0eda32a7364f6.mp4"
此处的key就为 '/41aa3f433bb3b368fcc0eda32a7364f6.mp4'
*/
let key = res.filePath.substr(p1.filePath.lastIndexOf('/') + 1);
cos.postObject({
    Bucket: 'examplebucket-1250000000',
    Region: 'ap-beijing',
    Key: key,
    FilePath: tmpFilePath, // wx.chooseImage 选择文件得到的 tmpFilePath
    onProgress: function (info) {
        console.log(JSON.stringify(info));
    }
}, function (err, data) {
    console.log(err || data);
});

查阅腾讯oss 文档得知key规范:* 对象键(ObjectKey):对象键是对象在存储桶中的唯一标识。
腾讯oss 文档

但是作为前端,我很难保证这个key 唯一

于是我在网上搜索前端生成唯一id的方法

function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
}

我想问下你们是怎么做的?这个方法可用吗?
如何生成一个唯一id?

关注 4 回答 5

Fade 赞了文章 · 2019-09-29

XMLHttpRequest level2

HTML5 更新了很多API,XMLHttpRequest 就是其中一个。level 2 的XMLHttpRequest 更加强大了。

新建对象

var xhr = new XMLHttpRequst()
和之前一样

属性

先看老几样属性
onreadystatechange 同步ajax不可用此事件回调,abort() 也不会触发此事件,open() 之前设置
readyState 只读
responseText 只读
responseXML
responseURL
status
statusText

新属性
responseType 设置响应类型,可以是 arraybuffer / blob / document / json / text ,默认是 text
response 响应内容
timeout 超时毫秒数,同步请求不可用。默认是0,永不超时。在 open() 和 send() 之间设置,超时会触发 xhr 的 timeout 事件
upload 只读,ajax 上传对象,后面详细讲
withCredentials Boolean,是否允许跨域响应设置cookie,默认是 false

方法

abort() 触发 abort 事件

getAllResponseHeaders() 返回所有响应头部组成的字符串

getResponseHeader(key)

open(method, url)

overrideMimeType(mimetype) 重写响应类型,如果需要的话,在 send() 之前调用

send() 可以发送 FormData / Blob / Buffer / String / Document,不发送数据的话,建议使用 xhr.send(null)

setRequestHeader(key, value) 设置请求头,在 open() 和 send() 之间调用。如果没有设置 Accept, 则默认是 */*

事件

loadstart send() 之后触发,只触发一次
progress 进度事件,会不断被触发

xhr.addEventListener('progress', ev => {
  if (ev.lengthComputable) {
    console.log(ev.loaded / ev.total);
  }
});

ev.lengthComputable 长度可计算
ev.loaded 接收的字节数
ev.total 总字节数

// 可以使用 'onprogress' in xhr 判断浏览器是否支持 progress 事件

load 响应完成时触发。使用此事件就没必要再通过检查 xhr.readyState === 4 来确认响应完成了。不过 load 事件只是表示接收到服务器的响应,还需要通过 xhr.status 来判断响应是否成功。
error
abort xhr.abort() 触发
timeout 设置 xhr.timeout 之后,响应超时时触发

upload

xhr.upload 是 ajax 上传对象
xhr.upload 也有以下事件
progress
load
error
abort
xhr.upload.onprogress 和 xhr.onprogress 使用差不多,只是一个针对文件上传过程,一个针对从服务器获取响应的过程

FormData

表单数据类型

var form = new FormData();
form.append('username', 'xiaoming');

或者
var form = new FormData(document.getElementsByTagName('form')[0]);

// 使用 FormData,不用设置请求的 Content-Type,xhr 能够自动识别并设置
// 如果不使用 FormData,发送表单需要先设置 Content-Type 为 `application/x-www-form-urlencoded`, 如果表单中有文件需要上传,则 Content-Type 为 `multipart/form-data`
xhr.send(form);

// 如果只是上传文件,可以直接使用 `xhr.send(file)`

综上所述,使用 ajax 时,步骤如下:

  • var xhr = new XMLHttpRequest();

  • xhr.onreadystatechange = function () {}; level2 几乎可以不用了

  • xhr.open();

  • xhr 的相关设置,比如 事件监听,请求头设置,响应头改写等

  • xhr.send();

查看原文

赞 1 收藏 0 评论 0

Fade 回答了问题 · 2019-08-19

webstorm 2019.2 代码里部分汉字不显示?

editor -> font ->fallback font 这个选择中文字体

关注 3 回答 2

Fade 提出了问题 · 2019-08-19

webstorm 2019.2 代码里部分汉字不显示?

webstorm 更新到2019.02 后代码里的部分汉字不显示了;
切换editor->font 字体后发现,其他部分字体也存在这个问题;
当前使用的字体是consolas;consolas 字体也下载替换了好几遍了,依旧存在这个问题;

图片描述

// 选择视频
// 最大不超过100M
'视频大小不超过100M'

如上;
复制出来汉字是存在的;

关注 3 回答 2

Fade 提出了问题 · 2019-08-19

webstorm 2019.2 代码里部分汉字不显示?

webstorm 更新到2019.02 后代码里的部分汉字不显示了;
切换editor->font 字体后发现,其他部分字体也存在这个问题;
当前使用的字体是consolas;consolas 字体也下载替换了好几遍了,依旧存在这个问题;

图片描述

// 选择视频
// 最大不超过100M
'视频大小不超过100M'

如上;
复制出来汉字是存在的;

关注 3 回答 2

Fade 评论了文章 · 2018-06-29

vue-cli 3.x配置使用vux

在vue-cli3.x中配置使用VUX

写在前面

正常按照下面给定的配置,因官方更新过vue/cli3.x更新过vue-loader,导致的加载错误。之前因端午在家,未仔细查看错误,也没有去调试而武断的认为是webpack的问题,希望没有给大家造成困扰。vue-loader的版本更新之后,vux-loader的依赖版本还是之前版本,因而导致的下面评论区出现的错误。大家可以手动指定vue-loader的版本来解决此加载问题。

yarn add vue-loader@14.2.2 -D
or
npm install vue-loader@14.2.2 -D

2018/6/25更新


当时写此帖时,vue/cli3.x所使用的webpack版本和vux所使用的webpack大版本一致,现今vue/cli3.x所使用的webpack为4.x,与vux不一致,因此一些loader可能会出错。而且当时vue/cli3.x的文档并没有,故此写这篇自记和帮助大家,现在vue/cli3.x已进入RC,相应文档也已放出,各位可以通过vue/cli的文档来进行配置。

2018/6/18更新


vux是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面(官方介绍)。
这些天闲来无事用豆瓣开放的api练习一下vue-cli3.x,但是对于一些组件的实现自己写的实在太粗糙和功能不全,故而想引用一些优秀的三方UI组件。
vux算是我知道的较早的一个基于vuejs的UI组件库吧。但是当时没有需求,所以一直没有使用这个组件库,直到最近又重新关注了一下。
对于我的第一印象,就是vux的一些集成度太高了,虽然极大地方便一些开发者,使用vux-loader来按需加载组件库。对于之前的我来说,倒是很乐意这样的一个组件库产生,但是对于现在喜欢折腾一些新东西,就显得并不是非常的友好了(特别是对于我这种文档看的不那么细致的人来说)。
vue-cli3.x的一些服务配置整个的结构都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置提供了vue.config.js。那么问题来了,对于这么一个入口,肯定不能直接按照vux-loader的方法直接在配置文件置空webpackConfig了。而单独组件引用的话又被告知使用错误(事实上都直接报错了,因为没有正确对于组件的load)。
参照vux-loader文档的配置说明,那么就是merge以下vux-loader的配置到webpackConfig里面呗,接下来就简单了。我们只需要在vue.config.js文件中的webpackConfig的配置中mergevux-loader就行了。

module.exports = {
    configureWebpack: config => {
        require('vux-loader').merge(config, {
            options: {},
            plugins: ['vux-ui']
        })
    }
}

只要在vue.config.js配置中这样配置,那么你就可以正常的在你的项目中使用vux这个组件库了。

题后说明

本人文中所提到的仅代表本人个人使用感受,并不能说明事物实际属性,大家仅在乎配置相关即可。
vux作为非大团队维护的UI组件库,是一款非常优秀的基于vuejs的UI组件库。对于移动端的一些组件可以说是最全(仅在我的认知内)的,而且还提供了一些常用而实用的lib,在github上的star数已经超过12k,可以说是非常受欢迎的了。
还有一点.......不要在意文笔,实在不会写文章,求轻喷。

查看原文

认证与成就

  • 获得 2 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 6 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-06-28
个人主页被 153 人浏览