前端
文章平均质量分 53
前端Beginners
这个作者很懒,什么都没留下…
展开
-
Hook详解(二)
接着上次hook钩子函数的记录,本次主要是对剩下的Hook函数useMemo,useref,useContext,useRecuder,useRecuser进行学习记录1、useMemo(记忆组件)该Hook函数与上次讲的useCallback(记忆函数)的功能是类似的,结构也是类似,在使用是也是需要进行 引入,传入的也是两个参数,第一个是函数,第二个是依赖数组,当数组中没有参数时,只会执行一次,状态变化也不会执行,当依赖中有值在该值发生变化后执行。import React, { useMemo, u原创 2022-04-30 17:27:45 · 681 阅读 · 0 评论 -
gulp的常用API
1、gulp.task(任务名称,任务处理函数)作用:创建一个基于流的任务2、gulp.src(路径信息)作用:找到源文件例子:gulp.src(’.a/b.html’) 找到在a目录下找到b.html文件gulp.src(’.a/*.html’) 找到a目录下的所有html后缀文件3、gulp.dest(路径信息)作用:将一个内容放入指定路径下4、gulp.watch(路径信息,任务名称)作用:监控指定目录下的文件,一旦发生变化执行后面的任务5、gulp.series(任务原创 2021-05-02 16:51:55 · 152 阅读 · 0 评论 -
gulp的使用
我们必须要一个结构完整的目录由于我们在打包完我们的文件名与源文件名是一致的我们也是不可以进行改名的,如果我们更改了名字我们在引入相应的文件就会出现错误通常我们在项目文件夹下建立两个文件dist与src文件夹src文件夹下放我们的相关源码 html,css,jsdist文件夹下我们放我们打包过后的文件 这个文件不需要我们自己区创建,在我们打包完成就生成了2、同时我们还需要建一个gulpfile.js的文件,与src同级在这个js文件里写我们整个项目的打包配置流程在每个项目在进行打包时,每次都需原创 2021-05-01 15:24:46 · 133 阅读 · 0 评论 -
svn与git
**svn:**svn存在的是每个版本的差异,需要内存比较小,但是回滚的速度比较慢优点:存储在单一的服务器,便于集中管理缺点:1、服务器宕机:写的代码得不到无法及时存储2、服务器损坏:整个项目丢失**git:**git每次存储的是项目的完整快照,需要的硬盘相对较大,但是Git会对项目进行压缩,最后与svn相差不了太多,并且回滚速度较快**git操作的基本流程:**底层命令:创建工作目录,对工作目录进行修改1、git add ./这个命令相当于git hash-objec原创 2021-04-29 20:51:19 · 90 阅读 · 0 评论 -
canvas操作图片& 设置背景
**canvas操作图片:**在画布上插入图片:在canvas中获取图片的路径:var img = new Image();img.src = “路径”ctx.drawImage(img,x,y,img.width,img.heigth)方法**在canvas设置背景:**ctx.createPatter(图片,平铺方式)方法这个方法有返回值,如果我们想要对我们的画布设置背景例:var patter = ctx.createPatter(图片,平铺方式);ctx.fillSty原创 2021-04-25 23:04:42 · 5721 阅读 · 0 评论 -
canvas绘制路径
我们单独使用canvas绘制图形时我们只可以绘制矩形,但是我们还会有其他的图像,我们绘制其他的图像我们就要通过绘制路径的方法图绘制其他的图形**绘制路径的步骤:**1、移动画笔到起始位置:ctx . moveTo(x,y);2、绘制一条当前位置到下一个位置的线line(线):(需要几条就画几条)ctx.lineTo(x,y);3、确定图像是填充的还是空心实线:**填充:**ctx.fill(); //里面没有参数 会自动合璧路径**轮廓:**ctx.stroke();原创 2021-04-20 11:39:17 · 457 阅读 · 0 评论 -
canvas
**简介:**canvas是H5中新增的元素,可以通过JavaScript中的脚本绘制图形注意;我们在使用canvas时,遇到低版本浏览器不支持时,我们在canvas标签中添加的所有元素内容都会被显示出来,我们就可以利用这一点添加提醒语句,如果支持则不管canvas中存在什么都会被隐藏不会显示,我们在浏览器看到的只是canvas,通俗的来讲canvas只是画布**使用:**canvas只是一个画布,要想在其上绘制内容我们需要找到他的渲染上下文getContext()方法,这个方法主要是用原创 2021-04-19 21:12:30 · 66 阅读 · 0 评论 -
H5中的小功能
**classList方法:**这个方法可以操作class,在原来的H4等,我们如果想要操作类会比较麻烦在H5中我们添加一个类:testNode.classList.add(" ");**删除一个类:**testNode.classList.remove(" ");**切换的方法:**(如果没有就新增,如果有就删除)testNode.classList.toggle(" ");**H5中获取自定义属性值:**dataset方法:例:我们在使用这个方法是,我们的命名要以d原创 2021-04-18 16:04:13 · 84 阅读 · 0 评论 -
H5新增标签
**新增语义化标签:**hgroup:代表网页或section的标题当元素出现多个层级,我们可以将h1~h6放在其中注意:1、如果只有一个标题标签就不要使用hgroup2、存在多个就使用3、如果有多个标题和文章数据,标题标签(h1~h6)就使用hgroup包住,和其他数据一起放入header标签中header:代表网页或section的头部(1)section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分;(2)article:特殊原创 2021-04-15 14:44:54 · 58 阅读 · 0 评论 -
attribute与property
**相关概念:**attribute:html的预定义和自定义属性我们统称为attributeproperty:js原生对象的直接属性我们称为propertyproperty属性为布尔值的,我们称为布尔值属性property属性值为非布尔值的,我们称为非布尔值属性**attribute与property的同步关系:**非布尔值属性:实时同步布尔值属性:property永远都不会同步attribute在没有动过property的情况下attribute会同步property在动过原创 2021-04-12 14:59:23 · 122 阅读 · 0 评论 -
less
**less的注释:**如果注释在less文件中使用 / / 时,编译在css文件中这个注释不可以(不显示),是给开发者看的如果在less文件中注释使用/ ** / 这个注释时,在编译完成的css文件中是显示的,给用户看到**less文件中的变量:**在多次使用一个值时,我们在进行修改时会比较方便1、在less文件中可以定义变量,必须使用@变量名:属性值例:比如在一个CSS文件中,pink色使用的次数比较多 那么我们就可以进行定义变量@color:pinkbackgroun原创 2021-04-05 16:19:41 · 98 阅读 · 0 评论 -
操作元素
操作元素是DOM的核心内容1、操作元素修改内容:innerText和innerHTML都可以进行对元素内容的修改,元素.innerText = 修改的内容;innerText与innerHTNL都可进行元素内容的删除,但是他们还存在许多的不同相同点:1、他们两种都可进行元素内容的删除2、都可以保留元素内容innerText:1、不可以识别HTML标签,在输入与输出都不会识别,输入会把HTML标签当中字符串进行输出,输出不会识别,不会进行输出2、输出时不保留空格和换行innerHTMK:原创 2021-04-02 22:16:23 · 244 阅读 · 0 评论 -
继承模式
**原型链继承:**得到父类构造函数的方法前面我们说到,所有的实例有一个内部指针,指向它的原型对象,并且可以访问原型对象上的所有属性和方法。doggie实例指向了Dog的原型对象,可以访问Dog原型对象上的所有属性和方法;如果Dog原型对象变成了某一个类的实例 aaa,这个实例又会指向一个新的原型对象 AAA,那么 doggie 此时就能访问 aaa 的实例属性和 AA A原型对象上的所有属性和方法了。同理,新的原型对象AAA碰巧又是另外一个对象的实例bbb,这个实例bbb又会指向新的原型对象 BB原创 2021-04-01 15:57:40 · 126 阅读 · 1 评论 -
节点操作
**父节点:**node.parentNode:得到的是该元素的父亲节点(离元素最近的父元素),如果找不到返回null**子节点:**(1)node.childNodes得到的是该元素的所有孩子(包含文本节点,元素节点,换行,空格等),为集合由于得到的是所有的内容,我们要想得到我们想要的元素节点,我们需要写一个判断程序进行选择,通过nodeype判断节点的类型,元素节点的类型为1,文本节点的类型为3(2)node.children这个可以得到所有的元素节点,也是一个集合,这个得到的为原创 2021-03-26 21:49:27 · 404 阅读 · 1 评论 -
事件拖拽
**事件拖拽**例如利用鼠标对一个盒子进行拖拽移动位置:用到的事件有:onmousemove 鼠标移动onmousedown 鼠标按下onmouseup 鼠标松开事件对象的event:event.clientX 获取鼠标的X轴event.clientY 获取鼠标的Y轴相关问题处理:鼠标在拖拽盒子时,鼠标点击哪,鼠标就在哪,不会自动变化原理位置的问题解决:通过获取鼠标的X轴和Y轴分别减去盒子左边距离和上边距离,结果为鼠标在盒子内离左边和上边的距离获取盒子外左边的距离为:盒子原创 2021-03-25 13:43:28 · 129 阅读 · 1 评论 -
事件相关
**事件的冒泡:**定义:指的是事件向上传导,后代的响应事件被触发时,其祖先的相同事件也同样被触发大多数的事件冒泡都是好的,但是也有例外,在我们不想要事件冒泡时,我们可以取消冒泡语法:我们需要对事件对象进行取消冒泡,所以我们需要定义事件对象我们将事件对象属性cancelBubble的值设置为true,就可以取消事件冒泡event.cancelBubble = true**事件的委派:**定义:事件的委派也叫事件代理,简单理解就是:原本是某个元素需要绑定的事件,现在将这个事件交给别原创 2021-03-20 15:59:28 · 53 阅读 · 0 评论 -
闭包
**如何产出闭包:**当一个嵌套的内部子函数引用了外部父函数的变量(函数)时,这时就产出是闭包**闭包是什么:**理解一:闭包是嵌套的内部函数(大多数人都是主要理解)理解二:包含被引用变量(函数)的对象(少数人)注意:闭包存在与嵌套的内部函数中判断闭包对象创建了几个就看外部函数调用了几次产生条件:(这几个条件都满足才可以判断产生闭包)1、函数嵌套2、内部函数引用外部函数的数据(变量/函数)3、执行外部函数常见闭包:1、将内部函数作为外部函数的返回值function fn1(原创 2021-03-19 10:38:50 · 61 阅读 · 0 评论 -
浏览器内核
**浏览器内核模块组成:(分为主线程和分线程)**主线程:JS引擎模块:负责JS程序的编译与运行(相对与其他语言来说,JS编译与运行是同时进行的)html,css文档解析模块:负责页面文本的解析DOM/CSS模块:负责DOM/CSS在内存中的相关处理布局和渲染模块:负责页面的布局和效果的绘制分线程:定时器模块:负责定时器的管理DOM事件响应模块:负责事件的管理网络请求模块:负责ajax请求事件处理机制:代码分类:1、初始化执行代码:包括绑定DOM监听事件,设置定时器,发原创 2021-03-18 17:35:14 · 78 阅读 · 0 评论 -
JavaScript函数对象
**一、利用字面量创建函数的对象:**(1)格式:var 对象名 = {//属性声明:属性名:属性值,//注意这里是逗号,属性名:属性值,属性名:属性值,属性名:属性值,//方法声明:方法名:function() { //匿名函数函数的内容;}}(2)对象的调用:调用属性:(两种方法)例:alert(对象名 . 属性名);(方法一)alert(对象名【‘属性名’】)//注意:方括号中要加引号【‘ ’】方法(二)调用方法://直接调用 对象名 . 方法名()例:原创 2021-03-12 11:24:47 · 219 阅读 · 0 评论