前端心得笔记
关注
分享
扫一扫
J_aSON_
这个作者很懒，什么都没留下…
展开
-
react中请求网络图片加载不出来的问题 解决
React中img加载图片时遇上了403我在做项目的时候遇上了这么一个问题，那就是在React项目中，使用img标签加载网页的图片的时候，居然遇上了403，但是直接把网页图片的地址放到地址栏时浏览器是可以成功加载的，但是放到React项目中使用img加载网页图片的时候就会403，如果遇上了这种情况，以下是解决办法：在index.html文件中加上<meta name="referrer" content="no-referrer">下面是转载的一篇技术介绍Referrer Poli原创 2021-07-25 09:55:13 · 1717 阅读 · 1 评论 -
三种不同形式的ref
三种不同形式的ref一.字符串形式的ref （最老的版本，不是特别推荐使用了,他可能会在未来的版本中被移除）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iqq9N6Vk-1626356126211)(/home/jason/.config/Typora/typora-user-images/image-20210715132455206.png)]我们用ref = ‘input1’标记一个标签后， 用this.refs.input1获取到的东西不是虚拟dom,虚拟d原创 2021-07-15 21:35:34 · 1003 阅读 · 0 评论 -
2021.7.14props
this.props中的值是只读的 不能通过 this.props.name = 'jack’这类的语句进行修改。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zreNEBIH-1626275198964)(/home/jason/.config/Typora/typora-user-images/image-20210714225309012.png)]这种情况几乎用不到构造器就两个作用1.初始化state(但是我们也可以在其他地方赋值) 2.为事件处理函数..原创 2021-07-14 23:07:18 · 228 阅读 · 0 评论 -
2021.7.14 展开运算符
2021.7.14 react review…运算符是不能展开对象的在 es6语法中 , 添加了一个可以用于深度拷贝的语法 let a = {…obj}; 这样可以把obj上的内容完全复制一份到a的位置， 他不同于浅拷贝let a = obj ,这个只是给了a 一个obj的引用。在react中，我们在给reactDOM绑定要渲染的组件时，可以通过props传参,这个时候，我们可以通过{…props}语法进行批量传参，这个语法虽然长得和上面的语法很像，但是这个是不一样的，这里面的{}相当于一个分隔符，原创 2021-07-14 21:04:00 · 224 阅读 · 0 评论 -
jsx语法规则复习
jsx语法规则复习2021.7.061.在定义虚拟dom时，不要写引号。2.标签中要写js表达式要用{}包起来3.在jsx中如果要写类名class，需要替换成className,因为class已经作为类的关键字了。4.类似font-size这种连着的在jsx中3应该用驼峰命名法书写5.jsx中只能有一个根标签6.如果你写了自己随便定义的标签名[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oyZBTvWc-1626232861626)(/home/jason/.原创 2021-07-14 11:21:10 · 187 阅读 · 0 评论 -
2.2. React开发依赖
2.2. React开发依赖开发React必须依赖三个库：react,包含了React所必须的核心代码react-dom ： react渲染在不同平台所需要的核心代码babel: 将jsx 转换城React代码的工具第一次接触React会被它繁琐的依赖搞蒙，对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个库。其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情：在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含转载 2021-05-23 13:23:52 · 694 阅读 · 0 评论 -
第一章.无处不在的js js复习总结
一.无处不在的js1.0前言本章包含以下内容Javascript核心语言特性Javascript引擎核心要素Javascript开发中的3个最佳实践MVC(Model- View - Controller ----模型 - 视图 - 控制器)1.1理解js函数是一等公民(一级对象)函数闭包作用域基于原型的面向对象————不同于其他主流的面向对象语言(例如 c# , java , Ruby) 使用基于类的面向对象， Javascript 使用基于原型的面向对象。正是如此原创 2021-03-25 12:11:03 · 189 阅读 · 0 评论 -
delete和splice的应用与区别
在实现删除一个卡片的功能时，因为this.setdata可以试实时渲染，所以我打算把对应的数组元素删除，有两种选择：1.delete, 2.array.splice。但是这两种写法会导致不一样的结果，delete会把内容删除，但是数组长度没变，导致渲染出了一个空数组，而splice才会达到真正的删除效果。...原创 2021-03-17 14:02:34 · 199 阅读 · 0 评论 -
百度翻译开放平台在成功调用后返回了api错误码52003，该用户未授权或者未开通此项服务
百度翻译开放平台在成功调用后返回了api错误码52003,在官网中解释，该状态代表该用户未授权或者未开通此项服务。但是我两样都成功了，最后发现是一位内我的wx.request()的method是post，导致调用失败了。删了就对了，可能是content-Type没有指定的问题。...原创 2021-03-14 18:57:25 · 2897 阅读 · 2 评论 -
二.运行时的页面构建过程 js复习总结
二.运行时的页面构建过程2.1生命周期概览2.2页面构建阶段2.2.1HTML解析和DOM构建尽管DOM是根据HTML来创建的，两者紧密联系，但需要强调的是，两者并不相同。你可以把HTML代码看作浏览器页面UI构建初始DOM的蓝图。为了正确构建每个DOM,浏览器还会修复它在蓝图中发现的问题。2.2.2执行Js代码1.包函在函数内的代码叫做函数代码，而在所有函数以外的代码叫做全局代码。2.一般来说，js代码能够在任何成都上修改DOM结构，它能够创建新的节点或者移除现有的DOM节点。但它依然不能做原创 2021-02-17 22:37:19 · 193 阅读 · 0 评论 -
第一章.无处不在的js js复习总结
一.无处不在的js1.1理解js对象，原型，函数和闭包的紧密结合组成了JavaScript。1.1.1js是如何发展的1.1.2转换编译器当我们想利用JS的最新特性时，也往往会被残酷的现实绑架：用户依然在使用老旧的浏览器。这该怎么办呢？解决这个问题的方式之一时是使用转换编译器transpilers(即“转换器” + “编译器”， “transformation + compiling”)，这类工具能够把最前沿的JS代码转换为等价的（如果不能实现，则使用相似的）能在当前浏览器中运行的代码。推荐转换原创 2021-02-16 09:29:58 · 283 阅读 · 3 评论 -
vue-axios用法总结
axios1.axiosaxios 是基于promise对ajax的一种封装ajax mvcaxios MVVM2.axios的基本使用 <script src="axios.js"></script> <script> import axios from 'axios' //默认使用get方式 axios({ url:"xxxx" }).then(res =>{原创 2021-01-19 19:41:29 · 204 阅读 · 0 评论 -
vue知识点整理
vue知识点整理 1、vue的生命周期 初始化： beforeCreate：一般没啥用，数据没挂载，DOM 没有渲染出来 created：数据已经挂载，但是 DOM 没有渲染出来，这个钩子函数里面可以做一些异步的操作，并且在这个钩子函数里面更改数据不会影响到运行时钩子函数。 beforeMounte：这个函数代表着 DOM 快要被渲染出来了，但是还没有被渲染出来，跟 created 一样，做一些异步的操作 mounted：数据已经挂载，真实...转载 2020-12-18 21:56:38 · 528 阅读 · 1 评论 -
div + css 的布局 较 table布局有什么优点？
1.改版的时候更加方便，只要改css文件2.页面加载的速度更快，结构化清晰，页面显示简洁。3.表现与结构相分离。4.易于优化（seo）搜索引擎更友好，排名更容易靠前。原创 2020-09-13 18:37:25 · 264 阅读 · 0 评论 -
Quirks 模式是什么？它和 Standards 模式有什么区别
从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差， IE6 将对 CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果 IE6 支持 CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强原创 2020-09-13 18:33:42 · 747 阅读 · 0 评论 -
每个HTML 文件里头都有个很重要的东西，Doctype,知道着是干什么的么？
声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用那种HTML 或 XHTML 规范。（重点： 告诉浏览器按照何种规范解析页面）原创 2020-09-13 18:32:14 · 229 阅读 · 0 评论 -
不同浏览器的内核分别是什么？
1.IE：trident 内核2. Firefox： gecko 内核3. Safari : webkit 内核4. Opera :以前是presto内核，Opera 现已改用 Googlr Chrome 的 Blink 内核5. Chrome： Blink 内核（基于 webkit，Google 和Opera Software共同开发）原创 2020-09-13 18:24:51 · 446 阅读 · 0 评论 -
CSS3：nth-child()选择前几个元素
CSS3 nth-child()选择前几个元素 </h1> <div class="clear"></div> <div class="postBody"> 一、选择列表中的偶数标签 :nth-child(2n)二、选择列表中的奇数标签 :nth-child(2n-1)三、选择从第6个开始的，直到最后:nth-child(n+6)...转载 2020-07-24 12:22:25 · 756 阅读 · 0 评论 -
Jquery折叠菜单实现的多种方法
一直对前端的东西掌握的不是太好,最近抽出点时间稍微学点jQuery。感觉确实很好用，提供了一些现成的好东西，还能跨浏览器。这里就通过一个折叠菜单的实现，记录一下几种常用的动画效果。一、目标效果HTML代码：HTML<body> <fieldset> <legend>Collapsible List 1</legend> <ul> <li>0 前言</l...转载 2020-07-21 09:50:50 · 1569 阅读 · 0 评论 -
Jquery对象与DOM对象之间的些许区别与联系
一.Jquery跟DOM有什么区别？1.JQuery是JQuery对象，而DOM是原生JS的对象。2.JQuery的顶级元素是$，而DOM的顶级元素是window。3.根据JQuery获取的对象就是JQuery对象，根据原生JS获取的对象就是DOM对象。4.JQuery对对象的操作不能用在DOM上，DOM中对对象的操作不能用在JQuery上。5.JQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）。二.操作DOM的常见方法.document.getElementById(原创 2020-07-21 09:19:43 · 747 阅读 · 0 评论 -
getElementsByClassName（）与getElementById（）两个方法的返回值区别
在这里我们可以很清楚的理解为什么获取div1时添加了一个[0]，但是明明类名为box1的元素只有一个时，这里也要添加[0]呢？这是因为获取div2时通过类名获取返回的本身是一个数组，只有通过[0]才能单独获得其中的元素。这是添加了【0】的返回值下面是不添加【0】的返回：...原创 2020-07-15 16:27:13 · 1288 阅读 · 0 评论 -
sass在vs code上如何运行，预编译
splice 方法中只有一个参数的话，这个参数（number）其实是第二个参数，及删除数组元素的个数，并且是从0开始的。原创 2020-05-26 15:41:55 · 437 阅读 · 0 评论 -
基本的JavaScript：使用递归创建倒计时
这个题刚开始我以为很简单的那种。但是这个题有一个点是我未曾注意到的。关键之处在于刚开始我没有看中文里的一句翻译， 之所以发生这种情况，是因为在递归调用返回之后，推送才最后一次发生。这句话解决了我所有的疑惑，茅塞顿开。我终于明白了为什么当 n<1时，返回的但是一个空数组（ 【】 ）。我一直以为最后一个是空数组的话，那答案一定是嵌套数组 （nested array).终于，我明白，最后返回的数组中的中括号，就是由n<1时产生的。其实这个代码的执行过程，有点像深度搜索，先执行 countAr.原创 2020-05-18 23:31:10 · 563 阅读 · 1 评论 -
第一章：ECMAScript6简介-阮一峰ES6入门标准笔记
ECMAScript 6 简介ES6是Javascript 语言的下一代标准，已经在2015年6月 正式发布了，他的目标是使得javascript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。1.ECMAScript 和Javascript 的关系ECMAScript 和Javascript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAscript方言还有Jscript 和 Actionscript)日常场合这两个词是可以互换的.2.ES6 与 ECMAScrip原创 2020-05-08 18:13:14 · 557 阅读 · 0 评论 -
精灵图制作后续-参考线的妙用
精灵图制作总结：制作精灵图是为了实现一个动画，目前我已经把把整个动画做完了，。中间在实现动画效果时，遇到了很多不同的问题，所以特地回来总结一下。一：参考线的使用：由于制作精灵图，最好是把每张的大小都截的一样，所以最好需要合适的画布大小和参考线，参考线建立我所知道的有两种方法：（这两种参考线的应用下面我都会讲到）1.手拉，就是用手直接从顶部或者左侧的标尺拉出来，拉到想要的位置。2.通过视...原创 2020-04-11 11:09:41 · 254 阅读 · 0 评论 -
制作精灵图
制作精灵图材料：n 张图片工具： 1.ps cc 2015步骤：1.首先我先用ctrl + n 新建了一个文件，然后设置了透明图层的大小，因为图片缩小了会失真，所以我设置的很大（我也不太懂）2.通过计算每张图片要占的像素大小设置，参考线（纵向/横向），参考线在视图中。3.然后就点击文件的 置入嵌入式智能对象，然后就调整一下大小合适之后，右键置入就可...原创 2020-04-03 15:06:13 · 354 阅读 · 0 评论 -
js中for循环中绑定事件（lis[i]与this 不能相互替换的原因）
先附上代码for( i =0;i<lis.length;i++) { console.log("e" + i); lis[i].onclick = function(){ //干掉其他人 for(var j=0;j<lis.length;j++) ...原创 2020-04-02 10:55:39 · 1180 阅读 · 1 评论 -
什么是IIFE
**说一说JS的IIFE**1. 定义IIFE: Immediately Invoked Function Expression，意为立即调用的函数表达式，也就是说，声明函数的同时立即调用这个函数。对比一下，这是不采用IIFE时的函数声明和函数调用：function foo(){ var a = 10; console.log(a);}foo();下面是IIFE形式的函数调...转载 2020-04-02 10:24:57 · 2384 阅读 · 0 评论 -
前端笔记（问题集4）
2020/2/121.刚刚发现了一个很牛的东西，在写微博网页的时候，我发现它有一个地方把font-size设为了0，我当时觉得奇怪，就给它取消了，结果发现文字不能环绕图片了。当时我就想这么麻烦干嘛，不如用float,直接将他浮动，这样文字就会自动环绕图片。但是我还是查了查这个问题，原来给为inline-block元素的父元素设置为0后。就能让父元素中的空格的大小为0，这样就解决了行内块级元素之...原创 2020-02-17 19:01:47 · 191 阅读 · 0 评论 -
本周问题集
1.在写微博的时候发现id为weibo_top_public的div是个父元素，却高度为0，并且处在整个元素的最下方，很奇怪。原创 2020-02-12 16:58:20 · 159 阅读 · 0 评论 -
2020.1.30~2020.2.5的周报
1.刚刚写百度的时候发现一个很有趣的现象，我对绝对定位position:absolute设置了宽度max-width时，直接把它弄消失了。本来绝对定位在标准流中就不占空间，这么一弄感觉就跟没了一样，我猜想可能时因为max-width是为了适应最大宽度，所以对于绝对定位就直接变成0，或者max-width对绝对定位的元素不适用。...原创 2020-02-05 19:57:37 · 185 阅读 · 0 评论 -
周报1
这周我开始学习了前端的知识，学习了HTML和CSS。感觉周报和学习笔记有点类似，所以我还是把这周的总评写一下吧，具体的就不多说了。1这周HTML看完了（仅仅是混了个脸熟）2CSS学了接近一半（脸熟）3这周疏于敲代码，下周要改正。4学习态度还算可以，希望下周能够继续努力，争取下周把网页做出来。...原创 2020-01-21 19:18:31 · 171 阅读 · 0 评论 -
前端入门心得笔记
第一篇心得笔记刚开始学前端时，觉得前端的入门好像和其他语言不太一样，好像不太需要书，因为其他编程语言的繁杂导致有一本讲的十分详尽的书时十分必要的，而前端好像并不是这样。搜了很多怎么入门的帖子，最终我还是选择了视频入门，因为在对前端的世界一无所知的情况下，有一个老师来引导是一件令人愉悦的事情。而通过一些字面上的资料来学习更容易让人感到枯燥无味。今天了解了在前端开发中，HTML，CSS与JS所...原创 2020-01-21 19:01:39 · 256 阅读 · 0 评论