![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
个人
文章平均质量分 61
Qssn丶
学无止境,码无尽头
展开
-
JavaScript中的this指向全解析
面试常见问题,特地记录一下。代码已经关联到github: 链接地址 觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:this在 JavaScript 中,this 是指当前函数中正在执行的上下文环境,下面从定义的方式和调用的方式上简单聊下其中的this指向问题。定义的形式function关键字通过 function 构造的函数,this是运行时指向,取决于运行时的调用者(作用域)。var obj = { foo: function () { //定义时位于全局,之后原创 2021-09-20 17:30:54 · 389 阅读 · 0 评论 -
JS解析url链接和获得get参数的两种方法
这里使用正则的方式获得具体的参数~/** * 解析url * @param {String} url eg:https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=js&oq=js */const parseUrl = (url) => { const reg = /(\w+):\/\/([\w\.]+)\:?(\d*)?([\/\.\w]*)?\??([^#]*)?#?(\S*)?/原创 2021-08-20 18:21:57 · 1035 阅读 · 0 评论 -
webpack打包后运行时文件分析(webpack5)
本文基于webpack5,分析打包后的文件,参考了网上的资料,同时加上了个人的理解,欢迎讨论。代码已经关联到github: 链接地址 觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:简单打包文件介绍//index.js 入口import { cc } from './Test'cc()//Test.jsfunction cc(){}export {cc}运行时分析webpack执行打包后生成的js文件是一个立即执行函数,其参数modules为一个对象{},包含我们所原创 2021-05-18 16:02:39 · 1653 阅读 · 1 评论 -
虚拟DOM和DOM diff 记录 (增加fiber)
面试常见问题,特地记录一下。代码已经关联到github: 链接地址 觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:什么是虚拟DOM与真实DOM对应,一个能表示真实DOM的对象。react下的虚拟DOM格式:const vNode = { key:null, props:{ children:[{type:'span'}] }, className:"", onClick: () => {}, type:'div'}代码创建:使用 Rea原创 2021-05-18 15:59:17 · 266 阅读 · 0 评论 -
React hooks组件中,定义的方法取不到新的state值的坑
项目中使用postal订阅方法时,使用react hooks useEffect去监听方法时,发现取到的state一直是旧的值,然后重写了例子。假设有个需求,父组件修改颜色,父组件会把该颜色传到子组件,子组件每次点击会打印当前自己state里面的颜色。这里子组件有两个监听事件,一个是原生dom的监听方式,一个是react提供的监听,再测试的时候发现二者表现不同,所以写了两个。直接预览:h...原创 2020-04-01 11:56:08 · 7511 阅读 · 0 评论 -
querySelector报错:: Failed to execute 'querySelector' on 'Document': '#$$assgrp__f0001' is not a valid
导致这种报错的querySelector是按css规范来实现的,所以它传入的字符串中第一个字符不能是数字、特殊字符,修改成用属性匹配即可解决,如下document.querySelector('[id="$$assgrp__f0001"]')...原创 2020-03-04 13:41:45 · 6925 阅读 · 0 评论 -
React-router4 使用bundle-loader实现按需加载(code-splitting)
一、参考链接: 1.官网:https://reacttraining.com/react-router/web/guides/code-splitting/code-splitting-server-rendering2.某文章:http://blog.csdn.net/mjzhang1993/article/details/79094594二、源码链接:http://downlo原创 2018-02-05 17:16:50 · 5310 阅读 · 2 评论 -
react论坛问答demo(react+redux)
react的一个小例子,实现了添加问题以及描述、对问题进行赞或踩、能对问题进行答复,排序等功能。用webpack搭的环境,react功能用到了redux、中间件、动画、路由(按需加载),其他用到了less和immutable。首次使用请用npm install 可以下载安装package.json中的模块也可以用来当作开发react的环境!当作自己的记录了。路由按需加载请看我的这篇文章:原创 2018-01-26 09:50:05 · 1828 阅读 · 0 评论 -
webpack3解决font awesome找不到字体(webpack引入font awesome)
看了N个网页都没解决,最后吧file loader的useRelativePath设置为true解决了。看了一下,该属性是生成一个相对 url ,难道之前打包的时候引入的都是绝对URL?这点求大佬指点。下面是引入font awesome的步骤。1.下载font awesome 这是废话。我用的是CSS2.引入font awesomeimport '../../font-awesome...原创 2018-05-10 16:04:40 · 1757 阅读 · 0 评论 -
阿里云windows开放tomcat 8080端口(修改防火墙规则)
今天试着外网打开tomcat,发现不行,就去调试了一下,发现了防火墙的规则问题,记录一下。(我的服务器是WIN10)控制面板-Windows 防火墙-高级设置(左侧菜单栏)-入站规则(同左侧)- 新建规则(选完入站后在右侧)然后跟着提示走就可以了。原创 2018-02-06 17:23:29 · 2841 阅读 · 0 评论 -
React-Router做路由,打包出来的静态文件丢到Tomcat里路由不生效,刷新页面404两个错误
有些开发er可能会想把做好的react项目,打包出来的静态文件丢到tomcat上测试,然后发现自己的路由怎么不生效了?? 页面不进行加载了。 第二个就是但是当我们刷新一下浏览器,或者打开一个不存在的页面的时候路由不加载(都是路径惹的祸) 首先,看一下自己的本地路径是不是这个样子的: http://localhost:8888/home然而丢到tomcat的webap原创 2018-02-07 17:32:52 · 5297 阅读 · 0 评论 -
reactjs用剪头函数绑定this,告别constructor绑定this
在写react组件的时候,你是不是也被constructor方法里的绑定this烦恼过(如下),如果不是,那就没必要看下去了... constructor(props){ super(props); this.showAddQuestion=this.showAddQuestion.bind(this); this.hideAddQuestion=this.hideAddQuesti...原创 2018-02-08 16:33:28 · 1075 阅读 · 0 评论 -
postal.js使用+例子
使用postal.js实现subEvent类似的观察者模式,让a.js事件发生后,执行b.js中的方法。文档:https://www.awesomes.cn/repo/postaljs/postal-js 1.安装postalnpm install postal2.介绍 subscribe (channel, topic, callback)订阅事件或者说是注册事件,...原创 2018-01-24 16:28:29 · 1881 阅读 · 1 评论 -
windows菜鸟级TOMCAT图文安装教程(含卸载教程)
因为项目需要,俺把TOMCAT8卸载了,又重新安装了一遍TOMCAT7.0,特来MARK一下。(PS:安装前提是你以经装好了JDK)如果你的TOMCAT出现指定的服务未安装提示,那是你没安装TOMCAT服务,请看第6步。安装安装首先你要安装TOMCAT,就要去下载一番。 http://tomcat.apache.org/index.htm之后设置环境变量原创 2016-11-25 17:29:04 · 5566 阅读 · 0 评论 -
使 sublime 可以自动补全 jsx 的标签(前提是安装Emmet )
使 sublime 可以自动补全 jsx 的标签(前提是安装Emmet )方法:菜单->Preferences->Key Bindings - User 添加下面的代码:[{ "keys": [ "tab" ], "args": { "action": "expand_abbreviation" }, "command": "run_emmet_action", "c转载 2017-12-18 16:03:12 · 1176 阅读 · 0 评论 -
Struts2文件下载小例子
项目补充了一下,需要从服务器上下载文件(效果如下图),来maker一下。1.后台JAVA代码 //省略这两个参数的get set 方法 private InputStream downloadFilePath;//下载文件流 private String downloadFileName;//下载文件名 /** *TODO(根据路径下载pdf) *@p原创 2017-09-01 15:36:05 · 575 阅读 · 0 评论 -
微信小程序,使用scroll-view实现下拉加载更多(下一页)源码
maker一下使用scroll-view实现下拉加载更多(下一页),比较粗糙,如下图。 由于数据是死数据,只能加载一次(如图)。源码下载:http://download.csdn.net/download/dknightl/9922174 下拉逻辑由scroll-view里的bindscrolltolower参数实现。 判断是否可以下拉由当前页数和总页数比较判断wxml<!--inde原创 2017-08-05 16:08:59 · 9121 阅读 · 1 评论 -
微信小程序页面使内容充满整个屏幕(高度、宽度100%),并使内容水平和竖直都居中
很多时候,我们会希望将内容充满整个屏幕(高度、宽度100%),如下图 代码如下wxml页面代码 <view class="empty_tip "> <image class="" src="../../image/empty_cart.png" mode="widthFix"></image> <view class="classname">购物车竟然是空的</v原创 2017-07-28 09:36:05 · 75306 阅读 · 2 评论 -
微信小程序引用同一js文件中的方法函数(function)
在小程序的js文件中,有时候我们也要复用同一js的一个或多个方法。微信小程序引用同一js文件中的方法函数(function)原创 2017-07-27 20:03:13 · 44466 阅读 · 0 评论 -
微信小程序点击移除添加class(点击改变背景颜色和字体颜色)
微信小程序不允许DOM操作,所以不能用addClass这种方法,我的用法如下。 点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加class(class的css可以先写好)。 <!--页面--> <view class="info_choose "> <view class="catalog_name原创 2017-07-25 14:30:12 · 27570 阅读 · 11 评论 -
微信小程序商品详情页交互源码(选择商品类型切换、预览商品图片)
maker一下自己捣鼓的商品详情页,主要是选择商品类型的交互和样式,点击不同类型切换图片和文字,商品增加减少,还有商品预览图片(本地图片无法预览!!!)。。源码下载:http://download.csdn.net/download/dknightl/99398721.效果图2.wxml<view class="swiper_area"> <swiper indicator-dots="{{in原创 2017-08-18 13:51:08 · 23859 阅读 · 1 评论 -
webpack3构建生产和开发环境分离
官网链接:https://webpack.js.org/guides/production/ webpack开发环境和生产环境的构建目标差异很大。在开发环境中,需要具有强大的、具有实时加载或者热模块替换的source map和localhost server。而生产环境中,关注的是更小的bundle,更轻量的source map,以及更加优化的资源,已改善加载文件的时间。要遵循逻辑分离,我们通常建...原创 2018-02-08 15:12:50 · 1174 阅读 · 0 评论 -
Gradle项目编译报错: 编码 GBK 的不可映射字符
今天找出许久未看的JAVA项目进行操作,也不知道是什么原因,编码竟然是GBK的,然鹅我的Eclipse默认编码是UTF8,项目是可以运行的,但是中文各种错乱,把所有文件改成UTF8编码后发现报错“编码 GBK 的不可映射字符”;最后通过修改build.gradle文件编码解决(改成utf-8,难道Gradle项目编译编码是根据这个文件的编码来的?) 如何上述方法没有解决,请在buil...原创 2018-04-15 16:25:46 · 3604 阅读 · 0 评论 -
CSS3 transform对普通元素z-index、positon和overflow的影响,
transform对普通元素的影响是个巨坑,自己亲身体验的总共有三点提升元素的垂直地位,也就是z-index会变大改变元素的定位属性,fixed变成absolute,absolute变成relative使绝对定位(absolute)的子元素受父元素overflow:hidden的作用。(ps:绝对定位(absolute)的子元素宽度大于父元素,如果父容器的定位是static,也就是默认时...原创 2019-07-19 15:16:14 · 1271 阅读 · 0 评论 -
上下两端固定,中间随内容自动撑高的H5代码,达到一定高度中间内容出现滚动条
工作上遇到的,感觉比较实用,记录一下没超过最大高度不会有滚动条内容超过出现滚动条 /* css代码 */ .box{ display: flex; flex-direction: column; width:400px; min-height:30vh; /* 保证最小高度 */ max-he...原创 2019-07-09 17:31:06 · 817 阅读 · 0 评论 -
适用于前端JS中文排序的方法(localeCompare)
localeCompare方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。referenceStr.localeCompare(compareString[, locales[, options]])compareString 表示用来比较的字符串因为后一个参数浏览器支持不是很友好,就不多做介绍,感兴趣可以到MDN上看。一般的用法就是 a.localeC...原创 2019-06-25 14:17:51 · 4455 阅读 · 1 评论 -
JS拖拽时禁止点击事件的三种方法
做项目的时候碰到一个问题,表格列头点击排序,但是拖动列排序的时候也会触发表头的单击事件,找了一圈,大致都是两种思路,但是原理都一样。就是js点击事件和拖拽事件都会执行mousedown(鼠标按下)和mouseup(鼠标释放)两个事件,拖拽多了个mousemove那么就衍生了两种方法mousedown记住鼠标按下的时间戳,然后在mouseup用鼠标释放的时间戳与之比较,少于150毫秒就触发...原创 2019-04-25 15:26:17 · 8611 阅读 · 0 评论 -
子元素设置position:fixed,z-index大于父元素依然被父元素盖住
在项目中遇到一个奇怪的问题,当父元素样式overflow有滚动条、borde-radius存在、position不为static时,和z-index不为auto时,子元素的position就算是fixed,且z-index大于父元素,也会被隐藏掉。源码和效果图如下:直接体验请点击:链接源码:源码 <style>#father { width: 200px; ...原创 2019-04-13 17:29:41 · 3499 阅读 · 0 评论 -
React16版本Hook钩子函数的简单理解
自己也在学习中,百度到的文章都是翻译API的,记录一下自己的理解吧,本身是小白,有错误请指出。目前在学习当中,发现React的偏向于将逻辑从组件中抽出,使组件仅仅用于接收数据渲染,而逻辑全放入Hook中操作。useState用于返回组件的初始化state并且返回更新方法,它只关心你传入的初始值,可以包装一下更便于抽出逻辑,组件只用于渲染。useState返回的第一个参数就是你initialS...原创 2019-03-03 20:04:36 · 1514 阅读 · 0 评论 -
js禁止右键
禁止右键菜单一搜就有了,下面代码是禁止右键事件,可以根据event的which或者bottun进行判断禁止$('#11').mousedown(function(e){ if(3 == e.which){// or e.bottun===2 console.log('这是右键单击事件'); }else if(2 == e.which){//or e.bottun ...原创 2018-12-04 09:03:50 · 399 阅读 · 0 评论 -
使用原生js实现reduce
mark一下 //var arr=['a','b','c'];//var arr=[1,2,3];//var arr='abc';var sum=function(a,b){ console.log(a,b) return a+b;}/** * * @param {数组} arr * @param {操作函数} f * @param {初始值} ...原创 2018-07-28 11:32:57 · 1441 阅读 · 0 评论 -
Chrome禁用浏览器的密码框自动保存密码提示输入('autocomplete="off"'在Chrome中不起作用解决方案)
最近在做项目的时候,要求项目的密码框不显示所记住密码的提示框(就是密码输入框点击不显示该网站所保存的密码列表),然后试了很多方法。autocomplete="off"无效,onfocus="this.type='password'"无效等等。然后发现了chrome自动保存密码提示的规则:1.input的id,2.input的name。方法1去掉input的id和name属性,然后给in...原创 2018-07-31 10:17:02 · 6520 阅读 · 2 评论 -
webpack-dev-server 解决跨域问题
在毕设开发时,由于用react开发前端,SSM开发后端,在二者需要数据交互的时候,发现二者的端口不一样,会出现喜闻乐见跨域问题,由于react用了devServer(webpack-dev-server),所以可以使用devServerd 的proxy解决。 比如我前端的路径为http://localhost:8888,而后端启动的服务为http://localhost:8080,正...原创 2018-04-29 14:17:17 · 3084 阅读 · 0 评论 -
SSM框架中SpringMvc配置jsp、html两个视图解析器
今天弄毕设时因为前后端分离,前端React生成的是html文件,而后端是Jsp页面,需要SpringMvc配置jsp、html两个视图解析器,核心思想是继承SpringMvc给的父类,自己写一个解析类,方法如下:第一步:继承InternalResourceView,写解析类package com.ssm.hui.util;//这是你的包名 跟import java.io.File;impo...原创 2018-05-09 17:39:15 · 9717 阅读 · 0 评论 -
js控制css中的帧动画, 使动画每点击一次运行一次
今天在模拟右侧栏向左滑出时,发现动画只会起作用一次,最后解决了~如下图解决思路是:动态添加class。css.moveAnimation{ animation:mymove 1s; }@keyframes mymove /*Safari and Chrome*/{ from {right:-400px;} to {right:0px;}}js(用的是react,动态添加class核...原创 2018-04-13 11:42:42 · 3796 阅读 · 0 评论 -
预览 GitHub 项目里的html文件
在github上面html的链接前面添加上https://htmlpreview.github.io/?即可比如这个链接https://github.com/ruanyf/jstraining/blob/master/demos/backbone-demo/index.html你打开看到的是html页面,加上https://htmlpreview.github.io/?之后就可以直接显示网页了,如...转载 2018-04-18 16:35:32 · 1350 阅读 · 0 评论 -
JS传入日期(XXXX-XX-XX格式)与当前日期比较
//传入日期与当前日期比较JS传入日期(XXXX-XX-XX格式)与当前日期比较原创 2017-07-10 14:34:13 · 6787 阅读 · 0 评论 -
高德地图JS开发常用实体类
AMap.Map//地图类,基础AMap.Geolocation//高精度定位,用于地图高精度定位AMap.Autocomplete//输入联想提示,用户输入框联想提示AMap.Geocoder//地理编码与逆地理编码服务,用于地址描述与坐标间的相互转换原创 2017-07-07 16:15:53 · 953 阅读 · 0 评论 -
高德地图WEB端,在所画的圆(Circle)内显示在圆(Marker)内的点
1.圆和点都是自己定义的, 高德地图WEB端,在所画的圆(Circle)内显示在圆(Marker)内的点原创 2017-07-08 11:56:11 · 15817 阅读 · 3 评论 -
JQuery动态创建表单并提交
很多时候,当使用链接跳转时,需要传递参数,而使用ajax会丢失参数,使用拼接参数方式,url会不美观,so… function getPlanDetail(ppSn){ //去掉单引号 取得要提交的参数 如果自身传的值无单引号则无需 var planSn=ppSn.replace(/'/g,"");转载 2017-06-01 10:31:54 · 867 阅读 · 0 评论