随笔分类 - js
JSBridge的原理及使用
摘要：一、什么是JSBridge 主要是给 JavaScript 提供调用 Native 功能的接口，让混合开发中的前端部分可以方便地使用 Native 的功能（例如：地址位置、摄像头）。而且 JSBridge 的功能不止调用 Native 功能这么简单宽泛。实际上，JSBridge 就像其名称中的Bri
阅读全文
前端js使浏览器窗口全屏与退出----浏览器全屏时 监测通过esc按键退出全屏
摘要：vue项目 项目分为顶部导航、侧边导航、以及右边mainContent区域 需求是 让项目的其中一个页面有全屏功能 并且在全屏时隐藏掉顶部的顶导航栏 实现： 1.在state里 定义一个全局flag 根据这个flag来控制顶导航的显示与隐藏 定义在了usr module里 在store里引入就可以了
阅读全文
js 检测元素的宽度或高度变化
摘要：一、js监听window变化的方法 1、onsize只能监听window对象的变化 (1)、 window对象原生、jQuery方法 //原生写法 window.onsize = function(){ console.log("11"); } //jquery写法 $(window).resize
阅读全文
CommonJS 规范 与 ES6 规范
摘要：CommonJS规范即AMD：require, exports，module.exports ES6: export / import 遵循规范 require 是 AMD规范引入方式 import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法 调用时间 require是运行时调
阅读全文
大文件分片上传，断点续传，秒传
摘要：前段时间做视频上传业务，通过网页上传视频到服务器。 视频大小 小则几十M，大则 1G+，以一般的HTTP请求发送数据的方式的话，会遇到的问题：1，文件过大，超出服务端的请求大小限制；2，请求时间过长，请求超时；3，传输中断，必须重新上传导致前功尽弃； 解决方案： 1，修改服务端上传的限制配置；Ngi
阅读全文
dhtmlx-gantt相关配置
摘要：一：搜索功能 上次文章里面没有写，这次提一下吧，其实dhtmlxGantt甘特图里面自带搜索功能的如图所示 下面是代码展示：第一部分里面是设置列的，这里只显示需要的列，只需要按照如下添加一个标签，就可展示搜索框，主要实现功能是下面的搜索任务那部分，可直接用 gantt.config.columns
阅读全文
babel编译
摘要：Babel的目的就是让你可以使用最新的标准来开发,然后把兼容的问题交给它来完成.比如我如何在使用ES6的语法写完之后将其转换为ES5满足通用性呢? 先用这个最常用的Babel的用法来引入吧. 一、首先在项目中新建一个package.json文件,也可以使用 npm init 自动生成. 这里简单提一
阅读全文
input placeholder属性 样式修改(颜色,大小,位置)
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 input::-webkit-input-placeholder { 9 /* placeholder颜色 */
阅读全文
html2jspdf文档
摘要：jsPDF https://github.com/eKoopmans/html2pdf.js#options https://github.com/eKoopmans/html2pdf.js#options https://html2canvas.hertzen.com/configuration
阅读全文
npx
摘要：npm v5.2.0引入的一条命令（npx），引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。 举例：使用create-react-app创建一个react项目。 老方法： npm install -g create-react-app create-react-app my-ap
阅读全文
使用 ESlint、lint-staged 半自动提升项目代码质量
摘要：最近在项目部署了ESlint还有一些配套的工具，比如 prettier husky lint-staged，有些心得写出来分享下。 依据本篇可以实现在git commit之时，重新格式化代码，同时进行代码检查预防一些低级错误。最终期待项目中的开发人员提交到线上的代码符合代码规范、风格统一，看起来像是
阅读全文
js连按键盘事件
摘要：let ot = 0; document.onkeydown = (e) => { let nt = new Date().getTime(); let ct = nt - ot; if (ct > 0 && ct < 600) { console.log(“连按了” + e.keyCode); }
阅读全文
js判断页面是否长时间未操作
摘要：const waitOperate = (callback, second) => { let count = 0; let x; let y; let timer; //监听鼠标 document.onmousemove = function (event) { const x1 = event.
阅读全文
Tree-Shaking原理
摘要：一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目
阅读全文
js实现@提到好友
摘要：要求 1.输入@时，弹出匹配的好友菜单 2.光标进入包含有"@好友"的标签时，弹出菜单 3.按backspace删除时，如果光标前面是包含有"@好友"的标签，弹出菜单 4.兼容ie,firefox. 具体做法 针对要求一，很自然的会想到对输入框绑定事件。这里要绑定mousedown,而不是mouse
阅读全文
前端数据脱敏处理方法
摘要：数据脱敏常用于手机号、身份证号等敏感信息中 方法一： /** * 关键信息隐藏 * @param str 字符串 * @param frontLen 字符串前面保留位数 * @param endLen 字符串后面保留位数 * @returns {string} */ function hideCod
阅读全文
js中arraybuffer与blob的区别
摘要：ArrayBuffer ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer是不可以直接操作的，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容，详细的可以查看这篇文章：前端二
阅读全文
vue&react组件通信原理：发布-订阅模式的实现原理
摘要：//发布-订阅模式 //订阅：给自定义事件绑定函数。调用代码：on(ele,'myClick',fn) function on(ele, type, fn) { if (/^self/.test(type)) {//1、给所有浏览器的某个自定义事件绑定多个函数 if (!ele['selfEvent
阅读全文
前端嵌入视频直播和聊天支持.m3u8格式
摘要：1、安装vue-video-player npm install vue-video-player --save 2、在main.js中引入vue-video-player import VideoPlayer from 'vue-video-player' require('video.js/di
阅读全文
js监听页面元素是否变化
摘要：// 选择需要观察变动的节点 const targetNode = document.getElementById('some-id'); // 观察器的配置（需要观察什么变动） const config = { attributes: true, childList: true, subtree:
阅读全文
