js
黄祚敏
前端工程师一名。
展开
-
opencv.js
opencv 图形入门。一。读取图片方法。在读取图片完成后请执行:let dst = new cv.Mat()。之后所有的操作数据都会在 dst 里面cv.matFromImageData(imgData):imgData: canvas 通过 getImageData 获取的数据。 cv.imread(imageSource) :imageSource可以是图片元素或canvas 元素或他们的id。二。显示图片。cv.imshow('canvasOutput', dst):canvasO.原创 2021-11-15 17:35:04 · 4547 阅读 · 0 评论 -
vue 基础
一。vue 生命周期:总共10个。初始化只会执行(1 2 3 4)。beforeCreate:即初始化状态之前 created:初始化状态后(initState 执行完成)。 beforeMount:虚拟dom生成之前,在该周期内执行 render 函数,生成虚拟dom和挂载dom mounted:此时dom元素已加载完成,可以进行dom元素操作。(调用顺序先执行子元素的mount再执行父元素) beforeUpdate:更新之前 updateed:更新后 beforeDestroy:销毁前原创 2022-02-15 15:08:46 · 436 阅读 · 0 评论 -
vue SEO
一。本人主要是在不改动SPA单页面的情况下,专门针对爬虫进行处理,从而完成SEO。使用工具:puppeteer、nginx。puppeteer:主要用于生成wa原创 2021-05-31 13:59:07 · 191 阅读 · 0 评论 -
字体加载
需求:就在字体加载完成时,将该字体的字绘制到canvas 中。假如该字体未加载完成前,使用canvas 绘制的就是默认字体的字。涉及到的项目:青柠设计:https://qingning6.com/一。如何判断一个字体是否加载完成。使用api :document.fonts./** * 验证字体是否加载完成 * fonts => [{fontSize, fontFamily}] * */function validFonts(fonts) { return new Prom原创 2021-04-02 17:24:08 · 1072 阅读 · 0 评论 -
阿里云 跨域问题处理
主要针对:No 'Access-Control-Allow-Origin' header is present on the requested resource一。首先是判断是不是客户端缓存的原因。二。按照阿里云的官方文档进行处理。链接:https://help.aliyun.com/knowledge_detail/39518.html?spm=a2c4g.11186623.2.18.37242dffXszCIQ三。确定下是否设置个允许跨域。设置过请求会出现如下图的header如果出原创 2021-01-15 18:24:02 · 2967 阅读 · 0 评论 -
opencv 构成js版本
重点说明:不要使用window 进行编译,不然会出现各种奇葩的错误。(我花啦一周的时间尝试wind10 没有成功。)一。系统安装步骤说明:如果是window 系统,请直接安装VMware 虚拟机。然后在虚拟机里面安装Ubuntu 20 版本。 VMware 下载地址:https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html Ubuntu下载地址:https://cn.ubuntu.com/dow原创 2021-01-07 15:01:26 · 1052 阅读 · 8 评论 -
axios 导出
一。导出代码。exportExecl () { let url = '/export' axios({ method: 'get', url: url, responseType: 'blob' }).then(response => { this.downl...原创 2019-04-12 17:04:12 · 480 阅读 · 0 评论 -
柯里化
一。柯里化(curry )的 的概念很简单:只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。二。具有通用性和高适用。三。常见作用:1、参数复用。2、提前返回。3、 延迟计算/运行四。实例。 (1)参数复用:function add(a) { return function (b) { return function (c) { ret...原创 2019-02-13 18:08:44 · 1021 阅读 · 0 评论 -
jsPlumb 流程图处理(二)
流程图一链接:https://blog.csdn.net/github_38186390/article/details/86470650承接流程图处理(一)。本文主要说明流程图的保存和加载部分。一、流程图保存操作。1、dom节点的保存。通过jQuery $('#' + id).get(0).outerHTML获得该don节点参数。2、连接的线保存。jsPlumb.getConne...原创 2019-01-14 15:02:10 · 2910 阅读 · 10 评论 -
jsPlumb 流程图处理(一)
本文主要针对流程图通过端点手动连接和保存后通过数据进行加载。例图:jsPlumb.getInstance() 该api主要用于生成当前实例、在一个页面多个流程图是这个api需要。一.流程图拖动问题从某个地方拖动元素到流程图区域可以使用jQuery-UI的拖动和放置进行处理。流程图内的拖动直接使用jsPlumb.draggable(id)改api里面的id为元素id。二.流程图...原创 2019-01-14 14:18:55 · 6206 阅读 · 0 评论 -
js 数组去重
js去重的多种方法: 1、通过删除原数组里面重复的数,进行去重。知识:数组反循环,indexOf。 function removeRepeat(data) { for(let i = data.length - 1; i >= 0; i--){ if (data.indexOf(data[i]) !== i) { data.splice(i, 1) ...原创 2018-08-28 15:28:31 · 325 阅读 · 0 评论 -
js 面试题(1)
一。script 标签: async:资源立即下载,异步加载外部资源,确保各资源之间不存在相互依赖的问题,load之前进行加载(h5存在) defer:表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效(h4存在)二。typeof /instanceof 的区别typeof:用于检测给定变量的数据类型。返回字符串类型的值undefined、string、...原创 2019-07-02 18:14:10 · 381 阅读 · 0 评论 -
js 引用类型、常用函数
Object 常用函数:(1)Object.assign()合并对象,返回Object。(2)Object.keys() 获取所有键返回Array。(3)Object.value() 获取所有值,返回ArrayArray 常用函数:(1)isArray: 检查是否是数组。(2)toString, join:都返回字符串,默认以逗号分开,join可以选择其他符合。(3)...原创 2019-07-09 16:42:01 · 298 阅读 · 0 评论 -
js 面试题(2)
一。函数表达式相关知识:(1)闭包:是指有权访问另一个 函数作用域中的变量的函数。(2)this指针:this 对象是在运行时基于函数的执行环境绑定的;在全局函数中,this 等于 window,而当函数被作为某个对象的方法调用时,this 等于那个对象。不过,匿名函数的执行环境具有全局性,因此其 this 对象通常指向 window。其次具体的this指向取决于代码。二。BOM(...原创 2019-07-15 14:25:31 · 250 阅读 · 0 评论 -
js 拖放
一。说明:通过draggable 属性设置元素是否可拖动。true 则可拖动,反之不行。二。拖放API(1)拖动元素时触发的API:dragstart():开始拖动的时候触发。 drag():拖动期间触发,dragstart 触发后就开始触发。 dragend():拖动停止时触发。(2)放置到目标元素时,触发的API:dragenter():元素被拖动到放置目标上,就触发。...原创 2019-07-18 14:37:05 · 167 阅读 · 0 评论 -
html5 canvas API
一。canvas 是一个html 标签。必须先设置其 width 和 height 属性,指定可以绘图的区域大小。width、height、css可以随便的修改。主要用于2D 绘图。画图操作必须先设置颜色,然后画线。所有以 fill 开头的API 都只能使用fillStyle 属性填充颜色,以stroke 开头的 API 都只能使用strokeStyle 属性进行描边。二。API说明:这...原创 2019-07-18 11:41:04 · 274 阅读 · 0 评论 -
js 函数节流
一。函数防抖:基本思想是指,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数, 创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器 并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器 尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才 执行。常用于onresize 事...原创 2019-07-23 15:45:37 · 303 阅读 · 1 评论 -
typeScript
一。类型说明:JavaScript 的类型分为两种:原始数据类型和对象类型。原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。二。TypeScript 内如何定义类型。通过(:)进行定义。类型值分别是(number, string, boolean, null, undefined, any(代表任何类型))。如果没有定义类型则默认设...原创 2019-08-02 10:57:38 · 195 阅读 · 0 评论 -
table 表头固定
一。table 表头固定说明。我们将表头和表内容分成两个表格就可以解决该问题。二。代码。css代码:里面定死的宽高只是为啦方便看效果,实际中需要使用js计算出来。* { box-sizing: border-box; } .table { border: 1px solid #efefef; ...原创 2019-09-27 14:06:34 · 2005 阅读 · 0 评论 -
js 深拷贝
一。js深拷贝方式: 1、递归实现。 function clone(data) { if (typeof data === 'object') { var newData = Array.isArray(data) ? [] : {}; for (var i in data) { newData[i] = ...原创 2018-08-27 14:13:29 · 314 阅读 · 0 评论 -
js 加减乘除精度问题
一。加法精度修改后如下:function add(...val) { let max = 0 let count = 0 for (let i = 0; i < val.length; i++) { const strVal = val[i].toString() const index = strVal.i...原创 2018-08-14 14:50:05 · 3436 阅读 · 3 评论 -
js基础(3)
1.split(separator,howmany)的使用。split()方法用于把一个字符串分割成字符串数组。通过。同时也可以根据具体的标示符进行分割。separator代表从指定的地方进行分割。howmany代表返回数组的最大长度。例:var str="How are you doing today?"console.log(str.split(" "));以空格进行分割。...原创 2016-05-16 19:21:56 · 83 阅读 · 0 评论 -
js基础(2)
1.函数的调用。例:function a(){ var c=5; return c;}function b(){ var h=a(); console.log(h);} 折主要说明的是:如何从一个函数中,调用另外一个函数的返回值; 2.substring的用法:substring(起始位置,结束位置)用于取出从起...原创 2016-05-11 18:10:05 · 69 阅读 · 0 评论 -
js基础(1)
1.{.indexOf()}的使用; 用来报告指定字符在此实例中的第一个匹配项的索引。搜索从指定字符位置开始,并检查指定数量的字符位置。 如果搜索的指定字符没有存在.indexOf()就返回(-1); 如果有就返回所在的地址; 2.对多种不同的商品进行汇总,建议用对象,这样可以把商品里面的信息补充的更加完整;例:goods_info[inputs[i].barc...原创 2016-05-10 20:13:47 · 91 阅读 · 0 评论 -
js基础
1.如何将一个数组里面的信息,传到其他的数组? 例:inputs=[{barcode: 'ITEM000000',name: '可口可乐',unit: '瓶',price: 3.00},{ barcode: 'ITEM000001',name: '雪碧',unit: '瓶',price: 3.00}];var shopping_list=[];shopping_li...原创 2016-05-05 21:19:00 · 82 阅读 · 0 评论 -
this的使用
一。在全局环境里面永远值向window,普通函数的调用也指向window。var name = "张三";function fn(){ var name = "李四"; console.log(this); // window; console.log(this.name); // 张三}fn();二。作为对象调用时,则指向对象。没有调用则取向于最终调用的对象。v...原创 2018-03-12 08:39:30 · 149 阅读 · 0 评论 -
闭包
一。闭包的概念:就是能够读取其他函数内部变量的函数。二。闭包的用途:1.可读取函数内部的变量。2.使这些变量始终保持在内存中。三。实例function f1(){ var i = 0; function f2(){ i++; console.log(i); } return f2;}var result = f1();result(); // 1resu...原创 2018-03-11 17:09:44 · 196 阅读 · 0 评论 -
轮播图的实现原理
一。实现轮播图最主要的就是定时器 (setInterval 函数和 clearInterval 函数),他们分别是定时和清除定时。二 。html代码如下:原创 2017-07-13 08:48:01 · 16345 阅读 · 0 评论 -
jQuery获取元素地址
一。获取元素可以方便我们来计算元素怎么摆放的问题。 offset: 获取匹配元素在当前视口的相对偏移。也就是当前元素到页面顶部的距离。 position: 获取匹配元素相对父元素的偏移。 scrollTop: 获取匹配元素相对滚动条顶部的偏移。 scrollLeft: 获取匹配元素相对滚动条左侧的偏移。 window.p原创 2017-07-12 17:28:30 · 288 阅读 · 0 评论 -
js 对象 数组 删除
一.对象的删除:可以直接用delete进行删除,也可以将其赋值为undefined;例如:var goods_info={ "000":{barcode:"000", type: '饮料', name: '可口可乐', price: '3', unit: '瓶'}, "001":{barcode:"001", type: '饮料', name: '雪...原创 2016-07-23 11:18:15 · 886 阅读 · 0 评论 -
js 数组 排序
一.数组的排序。数组排序一般用sort()方法就可以解决了。var id=['001','010','005','006'];id.sort();console.log(JSON.stringify(id));//["001","005","006","010"] 但是有许多复杂的数组就不能这样直接排序了。不过我们可以通过改造sort()方法来,进行排序。var goods...原创 2016-07-24 14:56:56 · 114 阅读 · 0 评论 -
promise 讲解
function add(num) { return new Promise((resolve, reject) => { console.log(num + ' + ' + num + ' = ' + (num + num)) if (num > 10) { setTimeout(resolve(num + n...原创 2018-08-08 14:20:22 · 189 阅读 · 0 评论 -
树形数据整合
function getTreeS() { const time = new Date().getTime() treeS(treeData) const timeEnd = new Date().getTime() console.log((timeEnd - time) + 'ms') console.log(tree(treeDa...原创 2018-08-03 17:23:27 · 553 阅读 · 0 评论 -
js 树形结构整合
一。根据标识符去掉空菜单。// 根据菜单有‘/’页面没有‘/’的特点function deleteEmptyMenu(data) { const newData = [] for (let i = 0; i < data.length; i++) { if (data[i].path.indexOf('/') === -1 || data[i].chi...原创 2018-08-03 15:12:42 · 1514 阅读 · 0 评论 -
jquery 监听标签( div )内容变化
1 .DOMNodeInserted 是对节点的插入后执行事件。$('div').bind('DOMNodeInserted',function(){ alert('插入了节点')}) 可以选取 class,id,元素。 2. DOMNodeRemoved 是对去掉节点后执行事件。 $('div').bind('DOMNodeRemoved',functio...原创 2016-11-30 17:55:43 · 2186 阅读 · 0 评论 -
angularJS
一。AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。例如:<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 这是通过网址自动加载的,也可以去下载文件,然后用上面的方式加...原创 2016-09-05 22:13:48 · 98 阅读 · 0 评论 -
jquery.ajax基础教程
一.jquery的引入. 先下载文件:http://jquery.com/download/然后加载jquery:<!DOCTYPE html><html><head><script src="jquery文件的地址"></script></head><body&g原创 2016-08-16 18:46:09 · 149 阅读 · 0 评论 -
ajax基础
一。ajax是异步的JavaScript和XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,可以是网页实现异步更新,这样就可以在不重新加载网页的情况下,进行局部的加载。 二。对象的创建。XMLHttpRequest是ajax的基础。1.创建语法:new XMLHttpRequest();2.老版本的创建:new ActiveXObject("Micr...原创 2016-08-14 20:32:05 · 68 阅读 · 0 评论 -
文本溢出的处理
一。对于显示文本的时候,有时候由于文本太长没有必要全部显示的时候。例如:有一个宽度为280px大小的一个,但是我们的文本长度却大于280px。我的处理方式有两种: 1.通过css 进行处理:p{ width: 280px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}t原创 2017-07-11 09:10:44 · 452 阅读 · 0 评论