- 博客(30)
- 收藏
- 关注
RSS订阅原创 JS-千分位格式化数据
JS中千分位格式化数据实现方法如下功能描述：将给定的数字转化为千分位的格式，如把12345678转化为12,345,678。实现方法如下利用正则实现function toThousands(num){ let str = num.toString(); return str.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");}toThousands(123); //123toThousands(1234546); //123,456toTho
2021-05-12 16:15:13
1500
原创 Vue轮播，vue-awesome-swiper动态数据渲染，首次各种配置无效，轮播图没有效果。
在做vue项目时，使用vue-awesome-swiper首页轮播，banner图数据从服务器端加载；但发现使用的过程中轮播图不起作用，没有生效。分析：轮播图的数据是由父组件网络请求之后得到的，在用子组件打印swiper的数据的时候，发现是[]，此时并没有拿到网路请求的数据，所以会导致轮播图无效果，只默认显示第一张图片。解决：在父组件渲染轮播图组件的时候，加一层v-if判断，当有轮播图数据的时候再进行轮播图组件的渲染，就可以解决该问题了。<index-swiper ...
2021-04-18 18:03:39
840
1
原创 手写Promise.all() & Promise.race()
Promise.all()和Promise.race()是Promise中两个非常有意思的API。在实现并发控制上有着重要的作用（https://github.com/rxaviers/async-pool）。以下就Promise.all()和Promise.race()的实现做简单记录。Promise.all(iterable)会返回一个promise对象，当输入的所有promise对象的状态都变成resolved，返回的promise对象就会以数组的形式，返回每个promise对象resolve之
2021-04-12 15:13:00
166
原创 对模块化开发的一些笔记以及理解
关于对模块化开发的一些笔记1、html —> app.js ：将模块初始化【一个页面对应一个JS】 header footer tab sidebar —> init（）2、app.js —> 多个模块文件 —> 模块程序运行的文件【一个页面中含有多个模块】 header.js footer.js courseTab.js ....3、模块文件的功能 —> 多个组件 【一个模块含有多个组件】 渲染 ...
2021-03-27 16:10:49
94
原创 JS-关于函数表达式
把函数变成函数表达式一共有三种写法：第一种：(function test(){})();第二种： var test = function(){}();第三种：
2021-03-02 09:38:17
234
原创 绑定host以后，能够ping通，却在网页中访问不了该地址
本地绑定host映射的时候，能够ping地址，却访问不了地址。在网页中访问该地址时，却访问不了。解决：cmd下输入netsh winsock reset（重置 Winsock目录），然后重启电脑。详情可参考：https://blog.csdn.net/chuyouyinghe/article/details/80604406 https://blog.csdn.net/pyufftj/article/details/51228729...
2021-02-25 19:41:21
2264
原创 node express中post请求的参数接收不到
在post请求中，在express文件中加入以下代码：app.use(bodyParser.json()); //将请求转换成json格式app.use(express.urlencoded({ extended: true }))当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。 想要post请求得到值，设置extended是必须的 。传送门：node express中post请求的参数接收不到？...
2021-02-02 19:58:54
1865
2
原创 JS—简单实现jquery中的ajax请求
ajax的出现直接推进了从以往的混合模式开发往前后端分离开发的转型，下面简单实现以下jquery中的ajax请求，加深对ajax的理解与运用。主要就$.ajax()、$.get()、$.post()作简单，使用立即执行函数，函数中返回对象作一个模块。 /** *使用举例： ajax请求： xhr.ajax({ url:"http://localhost:3002/api", type:"POST",
2021-02-02 19:53:15
356
2
原创 JS—关于Object.defineProperty()的一些总结运用
参照MDN:Object.defineProperty()是在一个对象上定义一个新属性，或者修改对象现有的属性并返回此对象的方法，也相当于在对象身上定义了一个拦截器。关于更多Object.defineProperty()的更多用法，可以直接查看这一部分的文档Object.defineProperty()。以下就Object.defineProperty()的实际运用做一些简单分析。题目一：/*** 定义a,使打印出 “YOU WIN!”*/if(a==1 && a=..
2021-01-31 18:02:42
292
1
原创 JS—for...in和for...of的区别
for...of... 和for...in...都是用来遍历循环的，但两者还是有区别的。for...in...for...in...是ES5中的，用来遍历对象自身以及原型上可枚举的字符串属性，也可以用来遍历数组的键名； 大多数时候，我们只关心对象自身的属性，所以，一般使用Object.keys()代替，关于获取对象属性的方式，在这篇JS获取对象属性的方法中有讲到。for...of... for...of...是ES6新增的， 是用来遍历具有Symbol.iterator属性的数据结构，也.
2021-01-28 11:17:06
185
原创 Hash与History模式的区别
在react或vue的前端渲染中，通常会使用到hash或者history两种路由模式。hash路由：锚点操作，通过hash值的变化感知路由的变化，优点是兼容性高，缺点是带有#号不好看，这种路由只需要客户端支持，不需要服务端。 history路由：基于HTML5的history模式，监听URL的变化，需要客户端和服务端共同支持。1. hash路由hash是浏览器URL中#后面的内容，包含#。hash是url的锚点，改变#后的内容，浏览器会加载相应位置的内容，不会重新发起请求。 当页面中的has.
2021-01-22 10:59:41
1319
原创 JS获取对象属性的方法
JS对象的属性js对象的属性有两种类型：字符串类型和Symbol类型。 如果使用其他类型的值作为属性时，都会将其转为字符串；如果是对象类型时，会直接转为[object Object]。var obj = { ['str']: 'String property', // str: "String property" [Symbol()]: 'Symbol property', // Symbol(): "Symbol property" [{}]:"Object.
2021-01-21 18:12:12
12890
1
原创 CommonJs, CMD/AMD,ES6 Modules的区别
CommonJs, CMD/AMD,ES Modules都是前端模块化规范讨论的点，以下就这几种模块规范作简单总结。 CommonJs CommonJs一般用于服务端，Nodejs就是CommonJS的主要实践者; 四个重要的环境变量为模块化提供支持：module，exports，require，global,用module.exports定义当前模块对外输出的接口，用require加载模块； //暴露模块module.exports = value; //或者exports.xxx
2021-01-17 22:34:08
112
原创 vue中父子组件以及兄弟组件之间通信方式
vue父子组件通信方式利用props与$emit，父组件通过props向子组件传值，而子组件通过$emit向父组件发送事件进行值的参数传递，最常用； 父组件通过props向子组件传递回调函数，进而子组件能够向父组件传值； 利用$parent+$children进行值的相互引用； provide+inject：适用于子组件层级比较深的时候使用； 通过$listeners+$attrs; 使用refvue兄弟组件之间通信方式利用父组件进行值的相互传递，但是此种方法是借用父组件，所以父组件中对
2021-01-15 10:24:44
422
原创 前端安全之XSS与CSRF攻击
XSS（Cross-Site Scripting）：跨站脚本攻击，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息，如cookie，sessionId等，危害数据安全。 为了和CSS区分开，所以将第一个字母变为X，所以叫做XSS。 XSS的类型（三类）：1）存储型XSS：攻击者将恶意代码提交到目标网站的数据库中，当用户发出请求时，服务端将恶意代码从数据库取出，返回给用户，用户浏览器接收到响应后解析执行，混在其中的恶意代
2021-01-14 11:24:15
485
原创 图片瀑布流实现(基于Jquery)
在开发中，会遇到图片瀑布流的布局，下面，使用Jquery实现一个图片的瀑布流效果。 首先，要先明白瀑布流的使用情况。对于瀑布流的图片要求应当是等宽的，其大体布局如图所示： 从图中可以看到，瀑布流布局只有规律的： 除第一排图片之后图片的top总是往上次top最低的图片位置上靠； 除第一排图片之后图片的left总是由其上面那张图片的left决定 有了以上规律，便可进行代码实现，解决思路已经在代码中进行注释： <!DOCTYPE html><h...
2021-01-06 13:16:11
480
原创 JS new操作符原理并手动实现
JS new操作符主要做了以下几件事 创建空对象; 将对象的__proto__指向函数的prototype; 改变this的指针； 将其返回。 自己手动实现一个new 操作符 参考链接
2020-12-30 22:35:14
284
原创 Vue在2.X版本与3.X版本关于数据的双向绑定
Vue在2.X版本与3.X版本关于数据的双向绑定是不同的。在2.X中使用的是Object.defineProperty；在3.X中使用的是Proxy。以下就两种原理作简单实现。
2020-12-25 09:43:34
137
原创 基于React全家桶（react，redux，react-router)，Express，MongoDB的一个登录Demo
目录前言一、Demo简介二、通过Demo能够学到什么三、Demo部分截图展示1）注册页面2）登录页面3）页面的权限控制（使用React高阶组件实现）四、github地址（https://github.com/Sodaxiang/react_redux_login.git）如有帮助，请在github上给个star，非常感谢~不足的地方，欢迎大家在评论区留言讨论。前言该登录系统Demo基于react，redux，react-router,服务器端采用...
2020-12-14 20:59:40
385
1
原创 JS工具类函数之函数防抖与节流
在开发中，遇到一些频繁触发的事件，如window.onresize,window.onmousemove，window.onscroll等，或是实时输入模糊搜索需要不断向服务器发送数据的类场景，一般都会用到函数防抖与节流。那么，什么是函数防抖与节流呢？1.函数防抖函数防抖：函数需要频繁触发时，只有足够空闲的时候，才会执行一次。好像公交司机会等人都上车后才会开车一样.。 应用场景：实时搜索，拖拽等。 实现原理：第一次调用函数时，创建一个定时器，然后在指定时间之后再调用该函数。 function
2020-12-05 18:32:15
159
原创 Vue-Router路由path相同警告，不允许导航到相同路由，报错“NavigationDuplicated: Avoided redundant navigation to current loc
Vue-Router路由path相同警告，不允许导航到相同路由，报错"NavigationDuplicated: Avoided redundant navigation to current location: "报错提示：避免重复路由；原因：在页面上重复进入了相同的路由； 解决：主要有3种方案，如下（对于repalce方法也同样适用）： 直接在路由跳转的部分加上'.catch(()=>{})'，这可以避免显示错误，因为浏览器认为异常已被处理。 在定义路由时候加上全局捕获.
2020-11-28 22:01:22
1249
原创 VUE引入背景图直接使用url(‘@/assets/img...‘)会报错：“This relative module was not found: * ./@/assets/img/“
VUE引入背景图直接使用url('@/assets/img...')会报错："This relative module was not found: * ./@/assets/img/"场景：直接背景图url('@/assets/img/common/collect.svg')会报错；解决：在@前面加上~即可。
2020-11-26 11:31:15
1554
1
原创 javascript日期格式化formatDate方法封装
格式化日期函数，前辈们已经封装了很多已经有的函数，在需要用的时候直接拿过来用就好了。这里主要对用过的formatDate进行记录以及加上自己的理解。代码以及注释片段如下：/** * 参数： * 1. date: 秒级时间； * 2. fmt：格式化的格式 'yyyy', 'yyyy-MM-dd', 'yy-MM-dd', 'yyyy-MM-dd hh:mm:ss', ...(按需求自己定义格式) * fmt给一个默认参
2020-11-26 10:41:04
2881
原创 VUE相同路由参数不同不会刷新的问题
VUE相同路由参数不同不会刷新的问题通常情况下，我们喜欢用keepAlive包裹router-view <div id="app"> <keep-alive > <router-view/> </keep-alive></div> 同时在created中触发请求，在路由参数不同的情况下并不会执行对应的操作。 解决方法：1.将需要重新加载的组件加在keep-alive的属性exclude中 &l
2020-11-25 22:58:14
596
原创 基于VUE的前后端分离商城系统
目录1.项目简介2. 通过项目能够学到什么3. 项目部分截图展示 1）首页 2）详情页 3）购物车4.github地址（https://github.com/Sodaxiang/supermall.git）如有帮助，请在github上给个star，非常感谢~不足的地方，欢迎大家在评论区留言讨论。1.项目简介该项目为使用vue-cli4搭建的一个前后端分离的商城项目； 使用了Vue，Vuex，Vue-Router,ES6，Axios以及Webpa...
2020-11-25 10:27:23
2682
3
原创 npm学习
npm1.npm相关概念 npm（node package manager）是一个node的包管理工具，使用npm能够远程地操作很多包，包的结构使能够轻松跟踪依赖项和版本。使用npm之前，必须先安装node。 npm由三个独立的部分组成：网站：开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。 注册表（registry）：注册表 是一个巨大的数据库...
2018-07-21 13:01:10
164
原创 Markdown学习总结
MarkdownMarkdown是一种可以使用普通文本编辑器编写的标记语言(HTML也是标记语言)，通过简单的标记语法，它可以使普通文本内容具有一定的格式。1.Markdown几个注意点Markdown不支持空格，要使用空格，如行首空格缩进等，直接手动输入空格&nbsp; Markdown中换行可采用在一段文字后输入两个空格再会Enter回车便可实现 Markdown中注...
2018-07-20 23:18:22
199
原创 Web语义化的理解（H5语义化的作用）
Web语义化，简而言之，就是用正确的标签做正确的事。 HTML语义化让页面内容更加结构化，结构更清晰，便于浏览器，搜索引擎解析。语义化让文档更易读，搜索引擎的爬虫也依赖HTML标记来确定上下文和各个关键字的权重，利于SEO；另一方面，使屏幕阅读器能更好的为残疾认识服务，便于阅读和理解。参考：https://www.zhihu.com/question/20455165 h...
2018-06-18 15:23:01
961
原创 百度前端学院第一天——前端的一些知识
第一天：1、 HTML、XML、HTML5HTML5是HTML的新标准，增加了很多新的标签，语义性更强；XHTML是HTML和XML的“杂交”，对语法要求更严格，如标签必须闭合。2、 Web Server与Web ServiceWeb Server有比如Apache，Nginx，IIS等或者当今用Node.js自定义服务端。Web Services 是一个整体的是一个整体的服务系统，过web网络来...
2018-06-18 14:59:54
130
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人