hping

hping 查看完整档案

杭州编辑杭州电子科技大学  |  印刷工程 编辑infosys  |  web开发工程师 编辑 txpinger.com 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

hping 关注了问题 · 2019-07-19

如何不完全加载图片拿到图片的原始宽高

目前有两种思路:

  1. 借鉴exif.js的做法,以二进制的形式请求图片数据,然后从二进制里面读取图片的宽高信息。javascript能否只请求图片的部分数据(含有宽高的数据),而不用把整个图片的二进制都请求下来?
  2. 牛人写的n年前的老代码。大概思路是请求这张图,起一个定时器不停问浏览器拿到原始宽高了没有,拿到数据时这张图不一定被浏览器完全加载。

第二种方式虽能实现效果,但是感觉思路上不如第一种,有没有大牛实践过第一种的。

关注 5 回答 3

hping 关注了问题 · 2019-07-19

js如何创建一个这样的随机数?

要求:
1、随机数包括(字母、数字)长度6位!
2、随机数不能重复!
3、每次随机出来的数也不能重复!

关注 4 回答 3

hping 关注了问题 · 2019-07-19

js监测页面横竖屏设置图片宽度失效

我通过监测页面横竖屏状态动态设置图片宽度,横竖屏变了之后,宽度的属性也设置成功了,但是不是实际应该展示的看度,还是需要刷新一下才能显示真正设置的宽度,这是什么原因呢?

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", checkScreenOrientation, false);
function checkScreenOrientation() {
     if (window.orientation === 0) {
            this.screenOrientation = 'portrait';
     }
     if (window.orientation === 90 || window.orientation === -90) {
            this.screenOrientation = 'landscape';
     }
     this.init()//执行设置图片宽度的方法 :slider.style.width = '100%';
}
        

根据我多方面分析,应该是竖屏给某些元素设置了宽高,在横屏下没有清除掉导致的。

关注 5 回答 1

hping 回答了问题 · 2019-07-19

解决js 密码 6-18 位正则校验问题

请把括号里面的所有+去掉, 不然你后面的{6,18}匹配的括号里面组合重复6-18, 如'f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6'就不会通过:

/^(?:\d|[a-zA-Z]|[!@#$%^&*]){6,18}$/

关注 7 回答 7

hping 回答了问题 · 2019-07-18

Vue动态组件数据回显,引发的奇怪问题

Swtext组件内部是不是又使用了Swtext,但是Swtext没有name属性

关注 5 回答 5

hping 回答了问题 · 2019-05-15

使用阿里图标库图标在元素中出现留白的问题

图标自己制作的吗,高宽不一样,应该是图标的问题

关注 4 回答 3

hping 评论了文章 · 2019-05-13

前端培训-初级阶段-场景实战(2019-05-09)-聊天框-发送框

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

初级阶段已经完结,之后会针对之前提到过的内容,对实际场景进行分享。正好前段时间我不是一直在加班做聊天的功能嘛。今天我们就来说一说其中遇到的东西。

我们要讲什么?

聊天功能中的发送框的实现及一些常规操作的实现。

  1. contentEditable
  2. Node 与 Element
  3. 插入功能(表情、截图等等)
  4. 粘贴功能
  5. 拖入功能

测试地址-测试下面的特性

关键词文字换行图片
input××
textarea×
contentEditable

contentEditable

你会说这东西我知道,给元素加上就可以编辑内容。老铁,这么简单当然不行了。

  1. 当你按下Enter/Return键在可编辑区域中创建一个新的文本行时,不同主流浏览器对此有不同处理(Firefox 插入
    、IE/Opera将使用<p>、 Chrome/Safari 将使用 <div>)
  2. css 也可以支持同样的功能-webkit-user-modify,值有

    1. inherit(继承);
    2. initial(默认);
    3. read-only(只读);
    4. read-write(读写);
    5. read-write-plaintext-only(读写、非富文本);
    6. unset(未设置);当一个属性定义了unset值,如果该属性是默认继承属性,该值等同于inherit,如果该属性是非继承属性,该值等同于initial
  3. 同上 contentEditable 属性支持的也不是逻辑值。plaintext-only 就是其中最亮的仔。
    最早还是在张鑫旭大佬-小tip: 如何让contenteditable元素只能输入纯文本哪里看的到的

当然我们用的还是富文本的样式。因为我们里面需要表情

Node 与 Element

Node

Node 是一个接口,许多 DOM API 对象的类型会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象;比如, 继承同一组方法,或者用同样的方式测试。
以下接口都从 Node 继承其方法和属性:
Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
-----------------https://developer.mozilla.org...
  1. Node.nodeName
    返回一个包含该节点名字的DOMString。节点的名字的结构和节点类型不同。
    HTMLElement 的名字跟它所关联的标签对应,比如 HTMLAudioElement 对应的是 'audio'
    Text 节点对应 '#text'
    Document 节点对应 '#document'
  2. Node.nodeType

    NameValuestatus
    ELEMENT_NODE1
    ATTRIBUTE_NODE2warn
    TEXT_NODE3
    CDATA_SECTION_NODE4
    ENTITY_REFERENCE_NODE5warn
    ENTITY_NODE6warn
    PROCESSING_INSTRUCTION_NODE7
    COMMENT_NODE8
    DOCUMENT_NODE9
    DOCUMENT_TYPE_NODE10
    DOCUMENT_FRAGMENT_NODE11
    NOTATION_NODE12warn

上面两个属于比较重要的

Element

Element是非常通用的基类,所有 Document对象下的对象都继承它. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。 这些继承自Element并且增加了一些额外功能的接口描述了具体的行为. 例如, HTMLElement 接口是所有HTML元素的基础接口, 而 SVGElement 接口是所有SVG元素的基本接口.大多数功能在类的层次中进一步制定.
在web以外的语言,像 XUL 可以通过 XULElement 接口, 同样也实现了Element接口.

Node 与 Element 差别

Node 中是会包含文本节点的。比如Text。
而 Element 包含的都是标签节点。

插入功能

如果换成 DOM 操作,好像功能还蛮简单的 appendChildinsertBeforereplaceChild好像就基本可以搞定了。但是换到富文本中呢?我们需要解决几个问题

  1. 获取当前焦点位置
  2. 在文本内容中插入内容
  3. 在节点内容中插入内容
  4. 其实还有一点,插入的时候会单击其他位置,导致焦点丢失,所以我们需要记住,然后设置到指定位置。

获取当前的焦点位置

window.getSelection();这个可以用来获取焦点位置。
anchorNode 指向用户开始选择(按下鼠标键)的地方,而 focusNode 指向用户结束选择(松开鼠标键)的地方。
注意不能与选区的起始位置和终止位置混淆,因为开始选择的位置可能在结束选择位置的前面,也可能在结束选择位置的后面,这取于选择文本时鼠标移动的方向(也就是按下鼠标键和松开鼠标键的位置)
isCollapsed 布尔值,用于判断选区的起始点和终点是否在同一个位置。

//可以用这段代码来观察
setInterval(()=>{
    var selection=window.getSelection();
    console.log(selection)
},1000)

clipboard.png

文本内容中插入内容

从上面的内容中,我们可以看到,在文本中是一个 Node 节点,那我应该如何插入节点呢?这其实就是调用 insertData 这个api就好了。但是,怎么能如此简单呢?我们插入的是 DOM 而不是简单的文本,所以这个操作不能用。
clipboard.png
这里我们要用的其实是splitText,用于在焦点处分割开内容。然后再after增加内容。
clipboard.png
clipboard.png

在节点中插入内容

这个就比较简单了。节点的话,直接加入进去就好了。因为节点不存在说中间插入。但是呢,当你在节点之后的时候,你需要获取其中所有的 nodes 然后根据 offset找到点。childNodeschildren 该使用那个呢?这个就涉及到上面说到的 NodeElement 的区别,留个小作业,自己试一下吧。友情提示,报错的时候记得看是不是 anchorNodeText 节点

clipboard.png

记录焦点位置&整合应用

既然点击会失去焦点,那么我们在blur的时候记录。然后给显示回去就OK了。
测试地址,其实还有一个效果没处理,那就是选区处理。可以当做一个课后作业。

粘贴功能

这个功能很坑,因为还是富文本。所以粘贴进来的是有样式的。但是我们不需要样式,所以我们要过滤掉所有的标签。但是又因为我们可以复制粘贴图片。所以我们需要过滤出来我们的图片。
方案有两种

  1. 获取文本,图片会变成alt属性标识的值(我用的是这个)
  2. 获取HTML,需要自己去过滤处理。

粘贴进来的内容,我们需要处理 paste 事件。 e.clipboardData 是获取剪贴板对象。提供了 getData 来获取剪贴板内容。比如 getData('text'); 获取文字内容。getData('text/html'); 获取html格式内容。

tips:

  1. 可以复制单图片。会在粘贴板中 files 里面。
  2. 不可以执行 setData 方法,看上去是浏览器厂商出于安全方向考虑。所以不能直接人为替换剪贴板内容达到目的。那么我们要注意 e.preventDefault();,用来阻止默认的事件。

拖拽功能

这个功能没实现,感觉上很难,达不到原生的那种感觉,也有可能是我api没找到,希望会的人告我一下
说一下我能给出的方案,因为不能 setData 所以方案还是考虑阻止默认的

  1. 分开处理,内部拖拽使用系统操作。外部拖拽禁止。
  2. 都使用自己的处理但是拿不到焦点,针对这个问题,可以做到增加提示,然后追加。
  3. 拖拽的话,可以有文件级别的。判断如果是文本文件之类的,可以读取文件内容。

后记

主讲人文章-浏览器科普
感谢评论区的回复, document​.exec​Command --MDN 的支持用起来的确会少控制一些逻辑。

查看原文

hping 回答了问题 · 2019-05-13

NodeJS的 按行读取(readline)模块,某种情况下,无法终止读取?(close方法不生效)

你自己都看到了文档说的很清楚

调用 rl.close() 不会立即停止 readline.Interface 实例触发的其他事件(包括 'line')。

不会立即停止line事件,表示调用rl.close后line事件还会继续出发的,和你加不加上 console.log()没有关系的,不行你在rl.close之前打个日志就知道了

关注 3 回答 1

hping 回答了问题 · 2019-05-10

React 组件 props 未在 render 中使用,控制台警告信息如何解决?

我猜你写的是一个dialog,有个ok按钮,是你的哪个div这样写了

 <div onOk={onOk}>xxx</div>

改为:

<div onClick={onOk}>xxx</div>

关注 2 回答 1

hping 回答了问题 · 2019-05-08

解决Fetch Api这个高级API的底层是用什么实现的呢?

不是xhr对象,这个问题就类似document.getElementById怎么实现的?div.addEventListener怎么实现的一样,都是浏览器提供的api,怎么实现我想你只有去看浏览器的源码

关注 3 回答 2

认证与成就

  • 获得 28 次点赞
  • 获得 24 枚徽章 获得 0 枚金徽章, 获得 6 枚银徽章, 获得 18 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-09-25
个人主页被 903 人浏览