前端
关注
分享
扫一扫
subwaysamurai
这个作者很懒，什么都没留下…
展开
-
前端 base 元素与文档请求相对路径之间的关系
在浏览器中，不论是请求静态资源（如 css、js、jpeg、png），还是发起 Ajax 请求，只要目标地址是一个相对路径，那么就会进行路径拼接。最终地址 = 基础地址 + 相对路径基础地址的值就是脚本全局环境的 window.document.baseURI。按照平常经验，我们在两种情况下请求一个相同的相对路径 /request.php当前浏览器地址为 http://host:port/a 时 ，实际请求地址为 http://host:port/request.php当前浏览器地址为 ht原创 2020-11-16 19:25:02 · 306 阅读 · 0 评论 -
前端页面路由与浏览器cookie的坑
问题现象：用户访问 /asd 重定向到/asd/user/login，因为第一次打开所以鉴权失败，登录后把 session 存到 cookie 中并且页面路由切换到 /asd/home/index，此时在 /asd/home/index 刷新窗口重新访问，会跳转到 /asd/user/login，这是不正常的，并且查询 cookie 为空，这也不正常，因为并没有做清除 cookie，诡异的事情出现了，此时在 /asd/user/login 刷新窗口重新访问，会成功鉴权并跳转到 /asd/hom.原创 2020-11-04 11:54:49 · 646 阅读 · 0 评论 -
百度地图js文字标签与bootstrap.css冲突坑
百度地图文字标签 BMap.Label 类实例化后添加到地图中的元素会因为bootstrap.css中的样式而显示异常可以看到，行内元素label的宽度为0，并没有被元素里的文字结点的宽度撑开，导致元素的文字溢出，背景颜色只在左右padding的2px空间内看到。造成这个的原因是bootstrap.css的label样式问题，max-width属性只要在 label 元素的样式中设置 max-width 为unset即可解决。这种情况出现的原因还没搞明白，我对max-原创 2020-10-15 10:37:27 · 369 阅读 · 0 评论 -
bootstrap-datetimepicker时间选择插件picker view dropdown menu显示位置异常
事情是这样的，由于最近在做大屏展示的项目，然后刚好需求是显示分辨率为5760x1080，所以在项目一开始的时候做了这么一个设置，方便在普通显示器上调试。<body> <div class="container"> ... </div><body>html,body { margin: 0; padding: 0; height: 100%;}.container { margin: 0;原创 2020-09-05 16:08:05 · 407 阅读 · 0 评论 -
哔哩哔哩调整视频播放速度超过2
在控制台输入js：document.querySelector('video').playbackRate = 4;可以将视频速度调整至4倍，其他任何使用video标签播放视频的网站都可以。原创 2020-08-08 10:21:04 · 1135 阅读 · 1 评论 -
编程中state和status区别的理解
React中一个组件比如按钮组件Button，Button组件中disabled不可点击，loading加载中这些变量就是state，而disabled是true还是false，loading是true还是false这些就是status。原创 2020-07-27 16:59:23 · 2004 阅读 · 0 评论 -
后端express和前端fetch实现文件下载
参考：https://www.jb51.net/article/89958.htmhttps://blog.csdn.net/qq_34149935/article/details/83867661https://blog.csdn.net/lanadeus/article/details/77529574原创 2020-07-27 13:34:35 · 302 阅读 · 0 评论 -
http请求Content-Type小坑
写Content-Type的时候如果只写MIME类型如application/json的时候不要加 ; 号，否则在nodejs中用body-parser无法成功获得请求体，得到的是空对象{}Content-Type: application/json; 错误Content-Type: application/json 正确Content-Type: application/json; charset=UTF-8 正确...原创 2020-07-03 10:25:59 · 259 阅读 · 0 评论 -
antd库Slider组件使用要特别小心
如果设置了一个过小的step，那么就会有危险。因为每一个step都是一个刻度，而Slider组件会将每一个刻度渲染成一个span元素。当min为-4000，max为4000，step为0.0625时，中间的刻度就会有80000+，光渲染这8W个元素就能把浏览器拖死。...原创 2020-06-22 18:03:33 · 2459 阅读 · 0 评论 -
想要引用被react-redux库connect高阶组件包裹的WrappedComponent的ref的坑
在React中，想要在父组件引用子组件的属性或方法就需要使用ref将子组件的组件实例在父组件中引入。但是如果子组件export的是使用react-redux库的connect函数封装的话export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent)在父组件render函数中渲染子组件<ChildComponent ref={this.childComponent = ref} />时获原创 2020-06-22 11:49:38 · 1953 阅读 · 1 评论 -
前端实现页面路由功能时上线部署全指南
apache作为web服务器：1.在apache服务器http.conf文件中解锁3个模块：LoadModule rewrite_module modules/mod_rewrite.soLoadModule proxy_module modules/mod_proxy.soLoadModule proxy_http_module modules/mod_proxy_http.so2.打开重定向功能和代理功能：# 打开重定向功能RewriteEngine on# 打开代理功能原创 2020-05-27 19:33:03 · 359 阅读 · 0 评论 -
浏览器表单元素提交重置的方式
原创 2020-05-26 17:20:38 · 248 阅读 · 0 评论 -
使用FormData获取form元素表单数据和label radio的使用
将form元素传入FormData的构造函数可以创造出一个FormData对象，可以很方便地取到form元素内部各种表单控件的值。使用input type="radio"的时候在外层包一个label元素，然后里面是input type="radio"和<span>解释文字</span>，这时外层的label元素不需要指定for属性的值，点击外层label元素时会自动实现for属性的功能，一般的做法是分开写一个label元素然后for属性指向radio的id，这样的话需要指定很多意原创 2020-05-18 17:23:28 · 809 阅读 · 0 评论 -
不同dom的blur事件和click事件发生冲突
直接上测试代码<!DOCTYPE html><html lang="en"><head> <title>不同dom的blur事件和click事件发生冲突</title> <meta charset="UTF-8"> <meta name="viewport" content="width...原创 2020-04-20 19:15:34 · 355 阅读 · 0 评论 -
JS字符串前补位和后补位
前补位：String.prototype.padStart主要用于toString为2进制，8进制，16进制等位数不足补全语法：str.padStart(targetLength [, padString])参数说明：targetLength当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。padString 可选填充字符串。如果...原创 2020-03-23 14:18:59 · 3408 阅读 · 2 评论 -
img、video标签显示
用object-fit和object-position来进行内容显示区域调整原创 2020-03-14 09:53:17 · 1111 阅读 · 0 评论 -
reduce滥用记录
原始数据：let data = [ { "index": 0, "data": [ {"key": "index","type": "number","value": 0,"editable": false, "options": {} }, {"k...原创 2020-03-10 19:37:47 · 138 阅读 · 0 评论 -
JS数组遍历方法every()和some()的实用技巧
使用every和some代替forEach因为forEach可以用return进行类似for循环中continue的功能，但for循环中break的功能无法实现，而every和some都通过控制return的值来控制循环中断跳出break。具体做法是：every方法返回值是布尔类型，最终返回值为true需要每一次回调函数返回值都为true，如果某一次回调函数返回值为false则ever...原创 2020-03-09 12:49:14 · 1898 阅读 · 0 评论 -
对象中括号变量赋key
暂时没查到这个特性是从es几开始有的原创 2020-03-07 16:08:50 · 326 阅读 · 0 评论 -
回收站功能
很多时候设置多一个或多个用作表示删除信息的字段就可以实现。当用户点击删除时并不是把数据删除，只是改变是否已删除字段。这样做的话用户拿到的数据列表（取已删除字段为false的数据）就像真的已经把数据删除掉了，但其实在回收站中可以看到之前删除的数据（取已删除字段为true的数据）。在回收站中的删除才是真正的删除实际数据，把数据列表中关于该数据的记录删除。基于以上，还可以在数据列表中每一...原创 2020-03-05 11:15:53 · 365 阅读 · 0 评论 -
改善用户体验
1.用tabIndex控制用户点击tab键时光标跳转的下个目标原创 2020-03-03 10:02:32 · 417 阅读 · 0 评论 -
生产环境下屏蔽浏览器控制台输出
在部署到生产环境之前，在js文件开头加上window.console = { log: function () {}};原创 2020-02-27 16:31:31 · 869 阅读 · 0 评论 -
ES8获取Promise执行结束后的返回值
正常的Promise对象抛出的状态值只能在回调函数resolve、reject或then、catch中作为形参得到。直到做项目过程中偶然发现了这个。。。(async () => { console.log( await (() => { return new Promise((resolve, reject) => { ...原创 2020-01-17 14:21:37 · 1624 阅读 · 0 评论 -
使用bilibili开源的flvjs实现摄像头rtsp视频直播
转自：https://blog.csdn.net/weixin_42536639/article/details/102870788转载 2019-11-28 09:29:05 · 790 阅读 · 0 评论 -
html5 cordova 视频直播
暂时只测通了电脑浏览器上的视频直播用的是video.js@7.3.3测试了rtmp和hls先说rtmp，video.js设置源为rtmp时界面极其辣鸡，而且好像界面上所有元素都绑定了一个额外的点击事件，无论点击界面的哪个位置（video标签内、video标签外）都会触发video的toggle（paused为true时play()，paused为false时pause()），而且vid...原创 2019-10-23 19:43:06 · 904 阅读 · 0 评论 -
性能优化
1.尽量少访问DOM和尽量减少标记尽量少访问DOM的意思是将可能重复访问DOM树的操作尽量合并尽量减少标记的意思是尽量减少文档中不必要的HTML标签数量，过多不必要的元素只会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间2.合并和放置脚本，减少请求数量尽量把多个javascript脚本合并到一起，让浏览器请求服务器的数量尽量少把所有<script>标签...原创 2019-10-04 04:35:58 · 119 阅读 · 0 评论 -
与运算符 &&
在 JavaScript 中，true && expression总是返回expression，而false && expression总是返回false。因此，如果条件是true，&&右侧的元素就会被渲染，如果是false，React 会忽略并跳过它。function Mailbox(props) { const un...原创 2019-09-17 11:37:11 · 581 阅读 · 0 评论 -
input中的value始终是string
asd原创 2019-08-27 14:50:15 · 1472 阅读 · 1 评论 -
video标签显示问题
最近在弄视频文件播放，出现了给video标签src赋视频文件路径，但是用来测试的mp4文件可以正常显示，而tup运行时生成的mp4文件却不能显示，video标签已经读取了mp4文件的资源，但是显示为空白。经过百度，h5的video标签对于mp4格式视频文件只支持h264编码，与tup沟通后将生成编码转为h264可以正常读取显示，以下是百度的结果https://www.php.cn/di...原创 2019-08-07 18:12:44 · 3842 阅读 · 0 评论 -
img图片预加载
realpicture.jsapp.js可以看到页面上有10个已加载默认图片的img标签img0-img9，z-index依次递减，img0在img1上面，img1在img2上面...假如现在img0在img1上面，那么收到实时图片时，其实只是将下层img1的src更改为最新的实时图片的路径，然后等img1的图片资源加载到文档后将img0的z-index -10让img0...原创 2019-08-05 10:03:52 · 1146 阅读 · 0 评论