薛定谔的猫

薛定谔的猫 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

在小白的道路上越走越远...

个人动态

薛定谔的猫 提出了问题 · 10月27日

web-uploader beforeFileQueued 方法使用?

官方文档:
image.png

代码:
image.png

实际结果:
image.png

期望结果:

在开始上传前进行一些校验,再决定是否上传
不添加到队列中,即不会打印 fldfjlda.....

问题:

为什么 return false 了,但还是走了上传的方法?

关注 1 回答 0

薛定谔的猫 赞了文章 · 10月20日

如何让用户选择是否离开当前页面?

写在开头

  • 为什么要写这个文章,因为每个礼拜都有人问我这个问题...
  • 抄一个微信公众号的编辑器的类似功能场景来实现

为什么要让用户选择是否离开页面

  • 如果用户填写了很多数据此时
  • 不小心点了其他a标签或者关闭了浏览器,不做判断,那么用户数据直接丢了

梳理需求

  • 离开页面方式,被location.href,a标签,关闭浏览器或者当前tab页等...
  • 需要判断数据是否跟初始化时一致(用户有无填写表单...)
  • 用户选择离开就要继续逻辑,反之则不离开

正式开始

  • 首先要知道一个事件:onbeforeunload,MDN的说明是:当浏览器窗口关闭或者刷新时,会触发beforeunload事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。
  • ⚠️:HTML规范指出在此事件中调用window.alert(),window.confirm()以及window.prompt()方法,可能会失效

实践一下

  • 在微信公众号编辑器界面,输入一部分内容后,点击关闭tab页,此时出现弹窗
  • 删除所有内容后,回归初始进入的数据,点击关闭tab页,直接就关闭了,没有出现提示
  • 看插件显示,这个编辑器界面没有使用react和vue,应该是jq吧,测试下控制台,对的,一猜就中(小编太🐂了,不点个关注?)

回到项目中,加入beforeunload事件

  • HTML文件中加入script标签
 `<script type="text/javascript">
        window.onbeforeunload = function () {
            return "Leave this page?";
        }
    </script>` 
  • 点击关闭,或者此时输入window.location.href= "xxx.ooo.com"会出现

  • 那么问题来了,如果我通过a标签跳转呢?

通过a标签跳转(+前端路由)

  • 我使用的是dva/router,引入相关组件
`import { Prompt } from 'dva/router';
....
render(){
  return <Prompt message={this.handlePrompt} />
}` 
  • 引入Prompt组件,并且传入message是一个方法,看看这个方法
 `public handlePrompt = (location: Location) => {
        return false;
    };` 
  • 那么此时我们使用dva/router的history.push方法去跳转前端路由,就不能跳了,因为handlePrompt一直返回false,除非返回ture,否则这个页面通过a标签就无法跳转了...

  • 此时无论怎么点击一键开启都不会有效果,那么改成return true试试
 `public handlePrompt = (location: Location) => {
        return true;
    };` 
  • 一跳就过去了

问题来了,怎么判断是否需要跳转呢?

  • 参考微信公众号编辑器,如果你编辑了内容后(跟初始进入的数据不一致),而且你是通过页面内a标签跳转的,那么就出现弹窗确认)

  • 那么很简单,我们使用antd的Modal组件,以及lodash的deepclone(深拷贝)、_.isEqual(value, other)执行深比较来确定两者的值是否相等。

注意: isEqual这个方法支持比较 arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, 以及 typed arrays. Object 对象值比较自身的属性,不包括继承的和可枚举的属性。 不支持函数和DOM节点比较。

实现思路讲解

  • 组件初始化时候,深拷贝一份表单数据存入组件中
  • 当用户通过a标签离开页面时,触发handlePrompt方法,存储离开的目的url,此时使用isEqual比较当前的数据和组件初始化的表单数据是否一致,如果不一致则出现弹窗,让用户选择是否离开
  • 代码实现:

 `// 处理自定义离开弹窗
  handlePrompt =(location )=>{
    // 如果当前的保存为false,则弹窗提醒用户进行保存操作
    if (!this.isSave) {
      this.showModalSave(location);
      return false;
    }
    return true;
  }
  // 展示离开的提示的弹窗
  showModalSave = location => {
    this.setState({
      modalVisible: true,
      location,
    });
  }
  // 点击确认,进行页面保存操作,和保存成功后路由的跳转
  handleSaveAuto = () => {
    const { location } = this.state;
    const { history } = this.props;
    this.isSave = true;
    this.setState({
      modalVisible: false,
    });
    //进行保存操作的处理,这里可以换成自己点击确认后需要做的操作
    this.handleSavePaper('save','exit',location.pathname)
  }` 
  • 离开逻辑
 `// 取消是的路由跳转
  gotoNewUrl(url){
    const {dispatch,history } = this.props
    dispatch(routerRedux.push({
      pathname:url,
    }));
  }
  // 点击取消关闭弹窗
  closeModalSave=()=>{
    const { location } = this.state;
    const {dispatch,history } = this.props
    this.isSave = true;
    this.setState({
      modalVisible: false,
    },()=>{
      this.gotoNewUrl(location.pathname)
    });
  }` 
  • html结构
 `<Prompt message={this.handlePrompt}/>
 <Modal 
     title="温馨提示"
     visible={this.state.modalVisible}
     closable={false}
     centered
     onCancel={this.closeModalSave}
     footer={null}
 >
   <p>即将离开当前页面,是否保存当前修改?</p>
   <div style={{textAlign:'right'}}>
     <Button type='primary' onClick={this.handleSaveAuto}>保存</Button>
     <Button style={{marginLeft:'20px'}} onClick={this.closeModalSave}>取消</Button>
   </div>
 </Modal>` 

结束语

  • 遇到问题时候,应该先搜索引擎一波,准确的来说,你的月薪在50K以下,都应该多考虑使用别人的轮子/改造别人的轮子,前端发展到现在已经技术基本稳定(实现业务逻辑层面),前人也留下了很多宝贵经验,遇到问题,一定要先百度或者谷歌
  • 感觉对你有帮助,可以右下角点个在看,关注一波公众号:[前端巅峰]
  • 另外欢迎收藏我的资料网站:前端生活社区:https://qianduan.life
查看原文

赞 20 收藏 18 评论 1

薛定谔的猫 提出了问题 · 10月11日

karma start 报错

执行 karma start 后报以下的错

image.png

使用了 iview ui库

关注 1 回答 0

薛定谔的猫 提出了问题 · 10月9日

模板字符串如何绑定事件?

`<input onchange=???>` 
  1. ?号处如何写
  2. 如何传 event 参数

十分感谢~

关注 3 回答 2

薛定谔的猫 赞了回答 · 9月22日

解决图片pending 状态,导致其他页面不能正常使用

关注 2 回答 1

薛定谔的猫 提出了问题 · 9月22日

解决图片pending 状态,导致其他页面不能正常使用

A 页面有大量的图片,当切换到B页面时候,由于A页面的图片仍处于 pending 状态,B页面的一直处于加载中,不能正常显示,
请问如何在页面页面的时候,中止到之前页面的图片请求?

关注 2 回答 1

薛定谔的猫 提出了问题 · 9月11日

微信小程序报错 jsapi has no permission

部分机型小程序运行出现该错误,请问该如何解决?

"request:fail createRequestTask:fail: jsapi has no permission, event=createRequestTask, runningState=suspend, permissionMsg=permission ok, detail=network api interrupted in suspend state"

关注 1 回答 0

薛定谔的猫 提出了问题 · 9月1日

midway.js 可以同时启动 http与https 服务吗?

需求:实现项目启动的时候,暴露两个端口【80,443】可以通过http://xxxhttps://xxx 访问,如何实现吗?

关注 1 回答 0

薛定谔的猫 提出了问题 · 8月25日

node.js 配置 https,报403错误

midway.js 配置http,配置如下:

config.cluster = {
    listen: {
        port: process.env.PORT || 443,
    },
    https: {
        key: process.env.PORT || '.key',
        cert: process.env.PORT || '.crt',
    }
};

问题:请求结果403,该如何配置解决吗?

image.png

关注 2 回答 1

薛定谔的猫 收藏了文章 · 7月1日

40张图入门Linux——(前端够用,运维入门)

关注公众号“执鸢者”,回复“书籍”获取大量学习资料,回复“前端视频”获取大量教学视频,回复“Linux”获取本节整体思维导图。

本文主要是Linux的入门内容,利用40张思维导图从基础、操作、实用指令、组管理和权限管理、crond任务调度、Linux磁盘分区和挂载、Linux网络环境配置、进程管理、服务管理、RPM和YUM、软件安装关键点、Shell编程共十二部分着手,从而系统的了解一下Linux(基于Centos),本文的定位是前端工程师够用、运维工程师入门。

一、基础

主要阐述了什么是Linux、主要发行版有什么、如何在自己利用VM安装自己的Linux系统、Linux树形目录结构及相关目录的用途。

二、操作

主要介绍了Xftp5、XShell工具及vi和vim编辑器的使用。

三、实用指令

主要阐述了一系列实用指令,包括:关机&重启命令;用户登录和注销;用户管理;切换到指定运行级别;帮助指令;文件目录类;时间日期类;搜索查找类;压缩和解压类。

3.1 关机&重启命令

3.2 用户登陆和注销

3.3 用户管理

3.4 切换到指令运行级别

3.5 帮助指令

3.6 文件目录类

3.7 时间日期类

3.8 搜索查找类

3.9 压缩和解压类

四、组管理和权限管理

主要阐述了组管理及权限管理相关的内容。

五、crond任务调度

主要阐述了crond任务调度,使系统在某个时间执行特定的命令或程序

六、Linux磁盘分区、挂载

主要阐述了Linux磁盘分区、挂载,使开发者能够自己增加一块硬盘

七、Linux网络环境配置

主要阐述了Linux网络环境配置中的自动获取IP和指定固定的IP,从而实现网络连接。

八、进程管理

主要阐述了与进程管理相关的内容,包括基本概念、显示执行的进程、查看进程树、终止进程、动态监控进程、查看系统网络情况及进程状态。

8.1 基本

8.2 显示执行的进程

8.3 查看进程树

8.4 终止进程

8.5 动态监控进程

8.6 查看系统网络情况

8.7 进程状态

九、服务管理

主要阐述了何为服务以及与服务管理相关的一些列指令。

十、RPM和YUM

主要阐述了Linux系统中软件安装的两种方式:rpm和yum。

十一、软件安装关键点

阐述了软件安装中需要注意的关键点:如何配置环境变量及开放对应端口。

十二、Shell编程

主要阐述与Linux操作息息相关的Shell编程中的一些基础语法。

12.1 基本介绍

12.2 基本使用

12.3 shell的变量

12.4 注释

12.5 字符串

12.6 数组

12.7 运算符

12.8 条件判断

12.9 流程控制

12.10 read读取控制台输入

12.11 函数

相关章节<br/>
图解JavaScript——代码实现【1】<br/>
图解JavaScript——代码实现【2】<br/>
图解JavaScript————基础篇<br/>
图解JavaScript————进阶篇<br/>
图解23种设计模式(TypeScript版)<br/>

欢迎大家关注公众号(回复“Linux”获取本节的思维导图,回复“书籍”获取大量前端学习资料,回复“前端视频”获取大量前端教学视频)

查看原文

认证与成就

  • 获得 4 次点赞
  • 获得 9 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 8 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-04-08
个人主页被 190 人浏览