三.JavaScript
庚中
这个作者很懒,什么都没留下…
展开
-
优雅的导出请求接口
不知道大伙是如何定义请求接口的,就我目前这个项目而言,是这么做的:// api.jsimport http from './config/httpServer.js' /* 登入页面获取公钥 */export const getPublicKey = (data) => { return http({ url: '/userGateway/user/getPublicKey' }, data)}// 用户登录export const login = data => {原创 2020-12-19 17:09:45 · 486 阅读 · 1 评论 -
Vue自定义全部插件
在某些情况下,我们封装的内容可能不需要使用者对其内部代码结构进行了解,其只需要熟悉我们提供出来的相应方法和 api 即可,这需要我们更系统性的将公用部分逻辑封装成插件,来为项目添加全局功能,比如常见的 loading 功能、弹框功能等。开发 Vue 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。可以通过如下4种方式来自定义插件:MyPlugin.install = function (Vue, options) { // 1. 添加原创 2020-12-19 16:54:52 · 272 阅读 · 1 评论 -
日期的处理
new Date转化为yyyy-MM-dd HH:mm:ss方法一:将Fri Mar 23 2018 12:19:48 GMT+0800 (国际时间)转化为dd-MM-yyyy HH:mm:ssexport const dateToFormat=(date)=>{ date.toLocaleString("en-US", { hour12: false }).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')}原创 2020-07-07 11:12:49 · 267 阅读 · 0 评论 -
wecha支付流程
原创 2020-07-20 09:31:29 · 280 阅读 · 0 评论 -
set-cookie认证的方式
原创 2020-04-19 00:53:04 · 481 阅读 · 0 评论 -
H5移动端大转盘抽奖插件, 简单、易用、无依赖
#Lottery.js#H5移动端大转盘抽奖插件, 简单、易用、无依赖。效果:##step 1: 引入资源<canvas id="lottery" width="300" height="300"></canvas><button id="handler">开始抽奖</button><!-- Lottery Javascript...原创 2020-03-17 15:18:55 · 1261 阅读 · 0 评论 -
ES6编程风格
块级作用域用let全面取代var全局使用常量 // bad var a=2,b=2,c=3 //best const [a,b,c]=[1,2,3]字符串多用模板字符串// badconst a = "foobar";const b = 'foo' + a + 'bar';//bestconst a="foobar"const b=`foo${a}bar`//foof...原创 2020-02-29 13:44:03 · 382 阅读 · 0 评论 -
工作工具之-函数封装-string篇
stringclass StringFn { /** * 去除空格 * @param {str} * @param {type} * type: 1-所有空格 2-前后空格 3-前空格 4-后空格 * @return {String} */ trim (str, type) { t...原创 2020-02-25 02:11:16 · 169 阅读 · 0 评论 -
工作工具之-函数封装-number篇
numberclass NumberFn { /*随机数范围*/ random (min, max) { if (arguments.length === 2) { return Math.floor(min + Math.random() * ( (max+1) - min )) }else{ r...原创 2020-02-25 02:07:43 · 875 阅读 · 0 评论 -
工作工具之-函数封装-补充篇
补充/* //////////////////////////////判断操作///////////////////////////////////*/class TypeFn { isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' }...原创 2020-02-25 02:06:28 · 156 阅读 · 0 评论 -
工作工具之-函数封装-http篇
http/* let url = 'http://demo.com/api' 例: ajax({ url: url, success: function(data) { } })*/function ajax(setting){ //设置参数的初始值 ...原创 2020-02-25 02:03:16 · 186 阅读 · 0 评论 -
工作工具之-函数封装-dom篇
DOMclass DomFn { $ (selector){ var type = selector.substring(0, 1); if (type === '#') { if (document.querySelecotor) return document.querySelector(selector) ...原创 2020-02-25 02:02:35 · 130 阅读 · 0 评论 -
工作工具之-函数封装-date篇
dateclass DateFn { /** * 格式化时间 * * @param {time} 时间 * @param {cFormat} 格式 * @return {String} 字符串 * * @example formatTime('2018-1-29', '{y}/{m}/{d} {h}:{i}:{s...原创 2020-02-25 02:01:44 · 192 阅读 · 0 评论 -
ES6语法总结(我的第二版,比较完整版)
ES6相关es6的新增的一些东西一. let const的增加1.letES6中新增了用于声明变量的关键字a.具有块级作用域 if (true) { let a = 10; }console.log(a) // a is not defined注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。b.不存在变量提升conso...原创 2020-02-23 00:56:24 · 385 阅读 · 0 评论 -
正则表达式总结
1.正则表达式概述1.1什么是正则表达式正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字...原创 2020-02-22 16:17:58 · 277 阅读 · 0 评论 -
JQ编程原理
案例:给元素添加自定义方法普通写法: // 1.封装自执行函数给上面元素添加颜色的方法 (function(globel){ function Libary(selector,color){ let elements=document.getElementsByTagName(selector); ...原创 2020-01-16 22:48:53 · 273 阅读 · 0 评论 -
函数式编程
简介:重点是需要做什么?而不是如何描述,比如遍历数组并打印.小案例:// 1.遍历let forEach = function (array, action) { for (let index = 0; index < array.length; index++) { action(array[index]) }}// 2.打印let logIt...原创 2020-01-12 02:53:49 · 205 阅读 · 0 评论 -
项目中用到的特别函数封装
//写cookiesfunction setCookie(name, value) { var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); document.cookie = name + "=" + escape(value) ...原创 2019-12-11 17:24:54 · 206 阅读 · 0 评论 -
canvas刮刮卡游戏开发
canvas刮刮卡游戏开发先看效果:一.基础知识-画布元素的使用1 绘制线条思路在页面中添加画布元素获取画布元素的上下文环境对象使用上下文环境对象绘制图形,保存在内存中绘制一个线条//设置画布的起始点context.moveTo(x,y);//从当前位置绘制直线到x,y坐标context.lineTo(x,y);案例和效果:2. 绘制不同线条颜色的三角...原创 2019-11-27 15:36:57 · 255 阅读 · 0 评论 -
面试准备之原生JS
一.数据类型在javascript当中数据类型总共分为两类:基本类型和引用类型;基本类型是有6种分别是:null,undefined,boolean,number,string和symbol(es6新增,表示独一无二的值,具体可以看阮一峰的介绍);引用类型统称为Object对象,主要包括对象,数组.基本类型和引用类型的区别:主要是存储位置不一样,基本类型直接存储在栈当中,而引用类型只是把指针...原创 2019-11-26 01:04:27 · 384 阅读 · 0 评论 -
使用Socket.io实现实时更新聊天记录
一.使用Socket.io实现实时更新聊天记录(即不同的窗口实时更新数据)实现如图:1.前言先了解什么是WebSocketWebSocket 连接本质上就是一个 TCP 连接,WebSocket会通过http请求建立,建立后的WebSocket会在客户端和服务器端建立一个持久的连接,直到有一方主动的关闭了该连接。所以现在服务器就知道有哪些用户正在连接了,这样通讯就变得相对容易了。2.So...原创 2019-05-17 23:54:57 · 2184 阅读 · 0 评论 -
毒鸡汤
作为一个程序员,任何时候,都不要瞧不起别人…鸟活着时,吃蚂蚁;鸟死后,蚂蚁吃鸟。一棵树可以制成一百万根火柴,烧光一百万棵树只需一根火柴。所以不要瞧不起任何人!你瞧不起别人时,只不过别人不和你计较!花,姹紫嫣红,却只是昙花一现: 树,朴素寻常,却可以百岁长青。活着,低调做人。因为作为一名程序员,就算你想高调,你有时间和金钱吗?别做梦了,好好学习吧!...原创 2019-05-10 23:49:03 · 219 阅读 · 0 评论 -
移动端rem适配(只需三个步骤)
开始前:一定要记住,在iphone5下,1rem=16px;图示:下面开始三个步骤:1.获取html的宽操作代码:let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body2.获取htmlDom元素le...原创 2019-05-10 13:52:19 · 28194 阅读 · 3 评论 -
案例:js实现关闭淘宝二维码
案例:js实现关闭淘宝二维码先看效果演示:HTML和CSS代码结构&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;meta c原创 2018-10-06 14:00:27 · 1927 阅读 · 1 评论 -
async-await的原理和使用
总结:其实前面加了async的函数,当我在这个函数调用的时候进行打印发现它输出的是一个promise对象,其实这个函数的本质就是返回了一个promise对象,在这个函数里里我们加上await后,即使调用的是异步代码,它也会变成类似于同步,只有让这个异步代码执行完后,才会执行下面的同步代码来执行,这就是它的本质。<!DOCTYPE html><html lang="en">...原创 2019-06-19 00:02:12 · 4632 阅读 · 2 评论 -
MD5加密的使用
比如一个登录密码的加密过程:1.先安装js-md5cnpm install js-md52.引入md5import md5 from 'js-md5';3.调用md5方法4.给后台传递原创 2019-06-20 10:42:23 · 695 阅读 · 0 评论 -
axios封装的办法
1.建立单独的api.js2.使用原创 2019-06-18 10:06:18 · 150 阅读 · 0 评论 -
ES6动态属性名的使用
原创 2019-06-26 22:51:36 · 3642 阅读 · 1 评论 -
动态获取域名的办法
动态获取域名的好处是当我们部署测试环境和正式环境时不需要我们手动修改.原创 2019-09-06 17:46:57 · 988 阅读 · 0 评论 -
ES6语法总结
一.环境搭建(这个环境自动编译es6语法,并且页面自动会刷新)1.执行下面三条命名(采用的是ssh安装)git clone git@github.com:huanggengzhong/es6-webpack.gitcnpm icnpm i webpack -gcnpm i webpack-dev-server -gnpm start安装成功后,自动会打开如下页面:测试es6模块语...原创 2019-04-08 22:24:53 · 464 阅读 · 0 评论 -
数组对象的排序方法
//数组对象方法排序:从小到大function sortByKey(array,key){ return array.sort(function(a,b){ var x=a[key];//如果要从大到小,把x,y互换就好 var y=b[key]; return ((x<y)?-1:((x>y)?1:0)); });}//...原创 2019-03-19 21:55:49 · 6822 阅读 · 0 评论 -
案例:求斐波那契数列第n位是多少封装函数
//斐波那契数列:1,1,2,3,5,8,13,21,34,55… //我们写一个函数getFB()就是用来求斐波那契数列第n位的数是多少. //把已经求过的项用对象保存起来,以后如果还要求这个项就直接取出来用,这样就解决了性能低下的问题. function createFB(){ var obj = {};//声明一个对象,用来保存已经求过的项.. function g...原创 2018-10-23 19:57:10 · 695 阅读 · 0 评论 -
案例:点击li标签弹出对应的索引
需求:点击li标签,弹出对应的索引先看效果:html结构:<ul id="ul1"> <li>我是li标签1</li> <li>我是li标签2</li> <li>我是li标签3</li> <li>我是li标签4</l原创 2018-10-22 11:31:42 · 1953 阅读 · 0 评论 -
写一个遍历整个dom树的函数
需求:写一个遍历整个dom树的函数思考:我们的办法的先找出这个元素的所有子代,再让子代找子代,直到找到么有子代为止…,如果写一个函数就是用来求一个元素的子代的. 那这个元素的子代再求子代的时候是不是也要调用这个函数啊? 这不就是函数内部调用了函数本身,这不就是递归嘛.所以,我们采用递归思想解决这个问题.1.声明一个空数组,用来存储元素.var list=[];//用来后面储存获取的元素...原创 2018-10-22 11:01:18 · 689 阅读 · 0 评论 -
案例:使用js中的Math.random()函数生成n到m间的随机数
需求:生成n到m的随机数思路:分四步走第一步算出 m-n的值,假设等于w;第二步Math.random()*w;第三步Math.random()*w+n第四步Math.ceil(Math.random()*w+n)例子:生成300到1000的随机数Math.ceil(Math.random () * 700 + 300);//结果生成300到1000的随机数;补充:Math.c...原创 2018-10-07 18:56:02 · 526 阅读 · 0 评论 -
案例:封装一个函数,实现求数组的最小值
需求:已知数组 arr = [1,9,3,7,5] ,使用程序计算出该数组的最小值,封装成函数求最小值思路:打擂台思想1.声明一个无穷大的变量min;2.遍历整个数组;3.判断数组中的元素arr[i]是否小于等于min;4.如果是的话让arr[i]赋值给min,实现数组中小的元素做擂主;5.最终的min就是最小的元素;javascript代码实现过程<script> ...原创 2018-10-06 17:50:52 · 4051 阅读 · 0 评论 -
案例:开关思想实现数组的去重
场景: 比如给你一个数组var Arr = [ 25, 70, 60, 70, 65, 65, 80 ],最终要得到去重后的新数组[25,70,60,65,80].思路: 1.先定义个空的新数组newArr; 2.遍历旧数组Arr 中所有元素; 3.定义一个isZai变量表示开关,默认为false状态; 4.遍历新数组所有元素与旧数组元素比较(Arr[ i ] == newArr...原创 2018-10-06 17:23:34 · 468 阅读 · 0 评论 -
案例:开关思想判断一个数是否在数组当中
开关思想原创 2018-10-06 16:40:39 · 316 阅读 · 0 评论 -
案例:用js实现九九乘法表
全程用js代码实现,只需几行代码即可,欢迎收藏完整代码如下:<script>for(var i=1;i<=9;i++){//外层循环决定行的数量 for(var j=1;j<=i;j++){//内层循环决定列的数量 document.write ( j + "*" + i + "=" + j * i +"&nbsp;&nbsp...原创 2018-09-28 21:33:00 · 304 阅读 · 1 评论 -
案例:用js求 1到100之间 所有能被5整除的数的和
箩筐思想:1.声明一个空箩筐;2.for循环遍历1-100之间的数据3.判断被5整除的数4.放入箩筐5.打印到控制台完整代码:<script>var sum=0;//空箩筐 for(var i=1;i<=100;i++){//遍历1-100之间的数据 if(i%5==0) {//判断能被5整除的数 s...原创 2018-09-28 21:59:00 · 10051 阅读 · 0 评论