
javascript
I1326
前端坑里摸爬滚打的新猿
展开
-
js监听xmlhttprequest事件
js监听xmlhttprequest事件最近在项目中使用了tinymce组件进行富文本的实现,因为是后台工程,所以在全部接口进行了token校验,其中该组件的上传图片功能init时仅指定了上传的路径,并没有字段对request进行设置;翻了翻文档仅找到了重定义上传方法的解决方式;这里贴一个js直接监听xmlhttprequest事件的方法,即插即用;(function() { if (typeof window.CustomEvent === 'function') return fal原创 2021-08-27 16:17:25 · 2821 阅读 · 1 评论 -
vue三级联动控件
vue三级联动控件最近实现toc需求实现三级联动,找到这个组件挺省事的,记录下不迷路;先看下大概样式gitlab地址:https://dwqs.github.io/vue-area-linkage/使用仅需要npm i --save vue-area-linkage area-data在需要的页面或全局的main.js中引用import { pca, pcaa } from 'area-data'; // v5 or higherimport 'vue-area-linkage/dist原创 2021-08-10 14:44:54 · 459 阅读 · 0 评论 -
隐形水印设置及查看
最近有收到信息安全方面的需求,需要在内网文章中添加水印,在参考了各种实现后,选择了隐形水印,但是在实施后其他同事不知道如何将隐藏的水印显示出来,在知乎上看到了相关的帖子,从代码到回显都很详细,直接搬运过来备忘,转载请注明原作者;直接上代码了function watermark(settings) { //默认设置 var defaultSettings={ watermark_txt:"text", watermark_x:20,//水印起始位置x轴坐标 waterma转载 2021-07-08 15:04:57 · 6671 阅读 · 0 评论 -
基于Canvas的本地验证码vue组件
基于Canvas的本地验证码vue组件最近给外包填个坑,发现验证码因为hash问题导致同服务端校验一直不通过,访问量也不高直接在本地创建个简易算号器,后来觉得实在丑的难受baidu了个现成的基于canvas的算号器,感谢原作者卡卡欧文的分享;效果如下直接贴代码<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="content转载 2020-12-09 18:36:14 · 158 阅读 · 0 评论 -
creator摘星星完善练习
文档中摘星星的demo课后练习如下:加入简单的开始菜单界面,在游戏运行的一开始显示开始按钮,点击按钮后才会开始游戏为游戏失败加入简单的菜单界面,游戏失败后点击按钮才会重新开始限制主角的移动不能超过视窗边界为主角的跳跃动作加入更细腻的动画表现为星星消失的状态加入计时进度条收集星星时加入更华丽的效果为触屏设备加入输入控制开始按钮和游戏结束的组件都完成了,继续来搞后边的;3.限制主角的移动不能超过视窗边界这个需求想明白的话很容易;只要在满足上图条件时,把player节点动画的移动速度修原创 2020-07-15 16:04:47 · 625 阅读 · 0 评论 -
cocoscreator文档中第一个游戏的补充-补充开始按钮
cocoscreator文档中有一个摘星星的小游戏demo,可以带领新手初见游戏开发的各个流程,当让细节都不是很完善,重要的是流程和思想,内部的脚本也基本都提供给开发者了,拿来即用;这篇将接着文档demo流程完成后,一些未提到的元素进行补充;button文档中提供的demo并没有按钮组件该如何使用及触发事件的说明,现在为小游戏添加一个开始游戏的按钮;本文将延续官方文档的揍性,旨在快速搭建,想要了解更多细节还是到官网扒拉文档的好:button组件参考层级管理其中对canvas右键创建ui节点,选择but原创 2020-07-13 16:02:42 · 580 阅读 · 0 评论 -
cocoscreator初探-demo小游戏
今天尝试使用cocoscreator制作个小游戏,其实在这之前已经把creator文档里的第一个小游戏,摘星星敲了2、3遍了,因为只是兴趣,平时主要web开发用不到,正好现在赋闲在家,翻出来再瞅瞅,看看这次能不能自己输出点什么小玩意。起步跳过产品吹毕环节,直接https://www.cocos.com/creator官网下载最新的ide并安装,刚刚更新了2.4.0,更新的内容对新手没啥影响,略;ide初识其实有没有这张图都很清楚,大概有哪些东西干嘛用的一目了然;第一次接触creator文档上准备的原创 2020-07-07 17:14:49 · 1813 阅读 · 0 评论 -
vue3.0和2.0数据绑定实现区别
要实现数据的双向绑定,首先要理解以哪种方式,做了哪些事情;以vue举例来说就是使用definedProperty中的get\set方法来完成数据劫持,之后在通过diff算法对比新老dom差异修改vdom,重新render完成渲染;首先了解下definedPropertyObject.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。语法Object.defineProperty(obj, prop, descriptor)原创 2020-07-03 16:56:34 · 826 阅读 · 0 评论 -
自己实现call|bind|apply三兄dei
要简单实现call、bind、apply首先要弄清楚这哥仨是啥,调用入参返回值都是什么,然后照葫芦画瓢,一点点填起来就好了;能看思考咋实现的想必已经不需要在多赘言三个方法了,直接开始搞起;首先这哥仨都是改变this指向,简化问题就是实现myX把fn.myX(arg)中的参数传递给fn,并把fn的this修改成arg; var name = 'dahuang'; function a( ){ console.log(this.name); } obj = {nam原创 2020-06-30 14:52:34 · 238 阅读 · 0 评论 -
手写promise
面试中经常问道能否自己实现某个api其实如果对其掌握扎实都是不 难的;promise主要是通过状态去进行任务的队列管理,规避回调地狱;自己实现的话首先就是思考promise是什么,都包含那些属性和方法;state;reject;resolve;then;catch;all;race;大致搭个架子 class Promise{ constructor(){ this.state = 'pending' this.value = '' } reject(){}; resolv原创 2020-06-25 17:12:10 · 224 阅读 · 0 评论 -
从一道面试题入手搞清js的堆栈
概念性的东西先放在前边简单说下堆和栈堆(heap)动态分配的内存,大小不定也不会自动释放。栈(stack)会自动分配内存空间,会自动释放,弹夹模型后入先出(EvenLoop基础这里先不说)。V8引擎由两个主要部件组成:emory Heap(内存堆) — 内存分配地址的地方Call Stack(调用堆栈) — 代码执行的地方,也叫执行栈引用数据类型会被存放到堆中,为新的变量赋值实际上被赋予的就是这个内存的地址,而不是实际的值;执行过程中会把相关的引用放在执行栈中;例如: var obj =原创 2020-06-12 18:38:49 · 591 阅读 · 0 评论 -
轻松搞懂原型链
写在前边的话其实在写这个标题之前,想搞清楚的问题完全不是这个;但是在原本的问题上,好像钻了牛角尖,愈发的出不来,各路资料查来阅去,离出发点越来越远;以至于现在完全想不起最初的问题是啥了,看历史记录大概是object之类的;不过对于原型链的理解有了加深,索性就写一篇相关的帖子交作业好了。以下只是对我来说更好的理解,分享下-可能中间某些环节‘每有会意遍欣然忘食’,本着‘尽信书不如无书’哪里不对欢迎斧正;什么是原型链JavaScript 只有一种结构:对象。每个实例对象( object )都有一个私有属性原创 2020-06-10 15:55:05 · 306 阅读 · 0 评论 -
文档对象模型速览
什么是文档对象模型文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它可以动态的访问程序和脚本,更新其内容、结构和www文档的风格。文档可以进一步被处理,处理的结果可以加入到当前页面DOM是一种基于树的API文档,他要求在处理过程中整个文档都表示在储存器中。DOM树通过可编程的对象模型,javascript获得了足够的能力来创建动态的HTMLjavascript能够改变页面中的所有HTML元素javascript能够改原创 2020-06-09 14:55:16 · 304 阅读 · 0 评论 -
BOM速览-浏览器对象模型
浏览器对象模型BOM1.浏览器对象模型BOM(Browser Object Model)是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。Bom由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。2.组成浏览器对象模型有包括以下几个组成部分窗口对象window浏览器对象navigator历史对象history位置对象location文档对象document3.窗口对象window是javascr原创 2020-06-08 15:16:08 · 283 阅读 · 0 评论 -
js计时器+打字机效果demo
计时器在写程序的过程中,经常会用到在某个指定的时间来执行一段代码,或者让一段代码在一个周期内执行。js中常用的计时器有timeout\interval;不是很常用的requestAnimationFrame,还有基本不会用到的Immediate;setimmediate延时执行var immediateID = setImmediate(func, [param1, param2, …]);immediate的作用是在浏览器完全结束当前运行的操作之后立即执行指定的函数。然而通过下图可以看到immed原创 2020-06-07 16:49:57 · 689 阅读 · 0 评论 -
今天搞对象
对象什么是对象对象是javascript中的一种数据类型;对象是一种复合型数据类型,可以将很多个数据放在一个单元中;对象通过属性来获取相应的数据;对象通过方法来实现数据的处理和功能;对象是一个无序的数据的集合。直接创建再定义对象var student_01 = new Object(); student_01.name = "都根"; //属性定义 student_01.home = "佳佳布鲁根"; student_01.age = 23; stu原创 2020-06-07 00:50:52 · 312 阅读 · 0 评论 -
javascript函数基本概念
js函数1.什么是函数函数是为了完成某一特定的功能,可以多次被调用执行的一段javascript语句的集合2.定义函数function 函数名(参数1,参数2,参数3...参数N){ //javascript语名 return返回值;}3.函数的组成function:用于定义一个函数;函数名:一个合法的标识符,不能是保留字或表达式参数:可以有0个、1个或多个参数;形参parameter:函数定义的时候在小括号里面定义的参数列表。用来接收实际参数。实参argument:实际调用函原创 2020-06-05 15:38:05 · 264 阅读 · 0 评论 -
正则表达式基础+常用实例
正则表达式什么是正则表达式Regexp是正则表达式的缩写当您检索某个文本时,可以使用一种模式来描述要检索的内容Regexp就是这种模式简单的模式可以是一个单独的字符更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等您可以规定字符串中的检索位置,以及要检索的字符类型,等等RexExp对象Regexp对象表示正则表达式,他是对字符串执行模式匹配的强大工具。定义regexp通过new关键词来定义regexp对象格式:new regexp(表达式)以下代码定义了名为patt1的原创 2020-06-04 23:57:03 · 409 阅读 · 0 评论 -
js中的字符串对象
## 什么是字符串对象字符串对象,主要作用是对字符串进行处理的支持,字符串对象与字符串是完全不同的概念。 var str1= new String(1); var str2= String (1); var str3= '1'; str1===str2 //false str1===str3 //true str2===str3 //false字符串长度String.length var myString = new String(“hello world”); cons原创 2020-06-03 16:39:33 · 447 阅读 · 0 评论 -
js常用数学对象及日期对象
js常用数学对象及日期对象首先说明什么是对象,对象是一种复合数据类型,它们将多个数据集中在一个单元中存储,而且允许使用变量来存取这些值。1.什么是js数学对象数学对象Math主要作用是为数学计算提供常量和计算函数。该对象的不需要使用new关键字来得到对象,而是直接调用Math.method使用。Math业务开发中使用的不是很多,也没有什么弯弯绕的东西,记下属性,直接拿来用就好。2.Math函数与属性使用语法Math函数与属性使用语法Math.方法名(参数1,参数2,…);2.1 常用数学常量:原创 2020-06-03 15:19:13 · 388 阅读 · 0 评论 -
js基础-数组及数组的方法
一、什么是数组在程序设计中我们需要使用变量来储存值,而当数据量增多,重复的声明操作就变得异常繁复,为了处理方便, 把具有相同类型的若干元素组织起来的一种形式,这种形式即称之为数组。数组是一个有序的,值的集合。每个值叫做元素,每个元素在数组中都有数字位置的编号,即索引。索引下标以0开始。二、定义数组数组对象用来在单独的变量名中存储一系列的值。我们可以使用关键词 new 来创建数组对象,隐式创建,或创建时指定数组长度。1.var arr = new array();2.var arr = [];原创 2020-06-02 14:21:16 · 298 阅读 · 0 评论 -
javascript基础初识
一、javascript初识1.1 javascript是什么javascript是一种可以用来网页增加交互性的编程语言。javascript是可插入html页面的编程代码javascript插入html页面后,由浏览器执行javascript是一种面向对象的编程语言javascript是解释型编程语言。1.2 亲切的hello world <button type="button" onclick="alert('hello world!')">点击这里</button&原创 2020-06-01 17:09:39 · 457 阅读 · 0 评论