JavaScript
FungLeo
键鼠轻游戏人间 风流谈笑傲江湖
展开
-
一个超简单的接口 Mock 工具升级版介绍,各位前端同学记得收藏哦!
一个超简单的接口 Mock 工具升级版介绍,各位前端同学记得收藏哦!这是一个我自己发起的项目,Github 地址是 https://github.com/fengcms/simple-mock ,其完整支持 RESTFul 接口的 Mock 服务。当然,支持非 RESTFul 风格接口也不在话下,关键是使用十分简便。我在接口演示文件里面,演示了 RESTFul 标准写法、分页列表、上传文件、登录接口等等多种。通过简单配置,还可以支持校验登录状态。此外,还支持将其它的接口代理过来使用。我本着最不需要额原创 2020-05-21 17:06:44 · 1164 阅读 · 0 评论 -
ES6 解构赋值的详细说明,建议给为前端收藏!
ES6 解构赋值的详细说明,建议给为前端收藏!相较于常规的赋值方式,解构赋值最主要的是’解构’两个字,在赋值的过程中要清晰的知道等号右边的结构.先简单地看一下原来的赋值方式.var a=[1,2] 分析一下这句代码的几个点:(1)变量申明和赋值/* 你可以理解这两个操作是分开的,虽然是一句代码. 声明变量都会出现变量名的提升(也就是是声明变量的这句代码会被提升到生效作用域的...转载 2020-05-05 21:58:24 · 1215 阅读 · 0 评论 -
一个超简单的 RestFUL API 接口 Mock 工具,建议各位前端同学来使用哦!
一个超简单的 RestFUL API 接口 Mock 工具,建议各位前端同学来使用哦!在我们前端的开发工作中,如果与后端做好了前后端并行开发的安排,那么我们肯定是少不了使用 Mock 工具的。作为前端同学对于网上流行的各种 Mock 工具应该都有一些了解,但是这些工具要么太过于强大,使用它还得学习一下它是怎么玩儿的,比如著名的 mockjs 工具。要么过于简陋,比如网上各种5分钟开发一个 moc...原创 2020-04-07 11:56:14 · 3468 阅读 · 2 评论 -
动态生成 uniapp 配置文件 pages.json 的解决方案
动态生成 uniapp 配置文件 pages.json 的解决方案最近接手了一个基于 uniapp 的开发项目,我个人对于它能够使用同一套代码就能够开发 h5\app\小程序 的强大功能表示非常钦佩。但是其配置文件 pages.json 也让我十分郁闷,原因无他,只因其是写死 JSON 文件,在管理的时候是十分不便的。在搜索了一些资料,期望可以用 pages.js 文件来替代 pages.js...原创 2020-03-28 18:16:49 · 10388 阅读 · 12 评论 -
JS数组递归——构建 element 级联选择器树形数据
JS数组递归——构建 element 级联选择器树形数据通常,我们前端在开发管理后台的时候,会选择 vue+element 这样的技术栈去实现。但我们后端给的数据格式通常并不符合 element 的参数数据要求。比如,级联选择器 cascader 的参数数据格式如下:[{ "label": "第一级", "value": 2, "children": [{ "label": "第二级...原创 2020-02-20 17:57:05 · 4274 阅读 · 0 评论 -
超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现
超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现对多选框实现 全选、不选、反选 是一个常见的功能,尤其是在外面使用了 vue 或者 react 等前端框架之后,仅仅是需要数据处理,我相信各位朋友都已经烂熟于心了。但是我近日遇到一个需求,琢磨了一下实现了。我感觉这段代码有分享的价值,因此编撰此文,与诸君分享。了解需要实现的功能需求一图胜前言,我们来看下要实现...原创 2020-02-18 16:34:03 · 2380 阅读 · 0 评论 -
javascript 商城结算页面选择今日或明日送货时间数组的实现
javascript 商城结算页面选择今日或明日送货时间数组的实现缘起今日在开发一个生鲜商城的项目,其中结算页面有一个需求。大概意思如下,后端会返回该店铺每日的营业时间,格式是 { startTime: '09.00', endTime: '21.00'} 这样的俩字段。前端要根据这俩字段来计算当天的和次日的送货时间段,以半个小时为间隔。其中的重点是如果当前时间大于开始时间,则要在输出的当天...原创 2020-01-07 15:15:06 · 1070 阅读 · 0 评论 -
JS判断数据类型以及数据过滤空值方法
JS判断数据类型以及数据过滤空值方法在我们的项目开发中,经常需要对一个传输中的数据进行滤空处理,过滤 null、undefined、''、[]、{}等,还要对字符串进行去除两端的空格操作。为此,我写了一个递归处理方法,代码如下:const toType = obj => { return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1...原创 2019-10-25 16:54:26 · 3215 阅读 · 1 评论 -
【转载】文件上传那些事儿,文件ajax无刷上传
文件上传那些事儿,文件ajax无刷上传 最近做了一个vue的文件上传组件,整准备整理一下,微博上看到这篇文章,讲得非常详细,就转载过来了。导语 正好新人导师让我看看能否把产品目前使用的FileUploader从老的组件库分离出来的,自己也查阅了相关的各种资料,对文件上传的这些事有了更进一步的了解。把这些知识点总结一下,供自己日后回顾,也供有需要的同学参考,同时也欢迎各位大牛拍砖指点共同学习。转载 2017-05-08 15:37:13 · 1366 阅读 · 0 评论 -
Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios
Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios前言我们在前面的教程Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表当中使用了superagent这个API请求工具。但是现在很多主流的教程都是使用的axios这个工具。因此,我就想重构一下我们的这个文件,让我们的项目,也能跑在axios这个接口工具上原创 2017-05-10 17:55:15 · 8841 阅读 · 6 评论 -
js 判断一个 object 对象是否为空
js 判断一个 object 对象是否为空转载原文判断一个对象是否为空对象,本文给出三种判断方法:1.最常见的思路,for...in... 遍历属性,为真则为“非空数组”;否则为“空数组”for (var i in obj) { // 如果不为空,则会执行到这一步,返回true return true}return false // 如果为空,返回false2.通过 JSON 自带的 s转载 2017-09-27 15:46:51 · 178475 阅读 · 9 评论 -
javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式// 图片地址var img_url = '13643608813441.jpg'// 创建对象var img = new Image()// 改变图片的srcimg.src = img_url// 打印alert('width:'+img.width+',height:'+img.height);结果如下:宽高都是转载 2017-09-27 16:35:44 · 19061 阅读 · 0 评论 -
JavaScript Standard Style(JS Standard 代码风格规则详解)
JavaScript Standard Style翻译: Português, Spanish, 繁體中文, 简体中文standard 规则列表,太多不必阅读。了解 standard 的最好方式是安装它,然后写代码尝试。规则缩进使用两个空格。eslint: indentfunction hello (name) { console.log('hi', name)}字符串使用单引号,除非是为转载 2017-09-11 16:17:01 · 4576 阅读 · 8 评论 -
React + webpack 开发单页面应用简明中文文档教程(二)创建项目
React + webpack 开发单页面应用简明中文文档教程(二)创建项目在上一篇博文当中,你是否感觉我实在是太啰嗦了一点,说了很多你不喜欢听的东西呢。不重要啦,这里,我们开始。使用 mac 或者 Linux 系统的朋友直接进行,使用 windows 的朋友,先自行解决终端的问题。 上一篇博文让你安装 nodejs ,不会没安装吧?没安装赶紧去安装。安装脚手架打...原创 2018-06-28 11:57:54 · 1954 阅读 · 0 评论 -
[转载]RESTful API 设计指南
[转载]RESTful API 设计指南 作者: 阮一峰 日期: 2014年5月22日 首发地址:http://www.ruanyifeng.com/blog/2014/05/restful_api.html网络应用程序,分为前端和后端两个部分。当前的发展趋势,就是前端设备层出不穷(手机、平板、桌面电脑、其他专用设备……)。因此,必须有一种统一的机制,方便不同的前端设备与后端进行通转载 2017-05-16 13:52:42 · 3589 阅读 · 0 评论 -
[转载]使用electron构建跨平台Node.js桌面应用经验分享
[转载]使用electron构建跨平台Node.js桌面应用经验分享 本文原文地址:http://www.zhangxinxu.com/wordpress/2017/05/electron-node-js-desktop-application-experience/最近,把团队内经常使用的一个基于Node.js制作的小工具给做成了可视化操作的桌面软件,使用的是electron,这里简单分享一转载 2017-05-16 11:04:12 · 2648 阅读 · 0 评论 -
原生JS自己构建一个0-1之间的随机小数
原生JS自己构建一个0-1之间的随机小数前言我们都知道使用Math.random()来得到一个随机数。但是很多人都没有深入的思考过,如何这个随机数是怎么来的。我也不知道是怎么来的,只知道这是一个比较复杂的随机算法。那么我们有没有可能通过自己的代码来实现一个类似随机数呢?我实践了一下,是可以的。不过我的算法比较简单,所得的随机数不是那么随机。目标,构建一个0-1之间随机小数开干我首先想到的是时间戳。所原创 2017-05-04 11:14:18 · 4879 阅读 · 0 评论 -
【转】为什么 ++[[]][+[]]+[+[]] = 10 ?
看到这个题目的时候很惊讶,因此转载过来分享给大家。首先,问这个问题的人是个天才,他怎么会遇到这样的一个问题。其次,回答这个问题的人更是一个天才,我难以想象他会回答这个问题,更难以想象的是,他的回答是如此的详细和丰富和完整,真正称得上诲人不倦。既然遇到了这个问题,我们不妨也跟着提高一下。这是一个Javascript语言题目,一个完全有效的等式,不信自己可以试一下,下面看看高人的题解:++[[]][+转载 2017-01-07 14:42:42 · 1644 阅读 · 0 评论 -
[转]前端开发问题之字符串日期转日期对象在safari浏览器中出现Invalid Date
问题描述:开发中需要写一个倒计时,但是时间周期是根据后端传过来的开始时间和结束时间进行计算的,后端传过来的字符串日期格式为:2012-11-12 22:11:22,在前端中我们使用 new Date()来将其转为date对象,一切进行顺利,在各个浏览器都没问题,但是safari中却出现了“Invalid Date”的异常信息,难缠的兼容性问题出现!解决:一开始以为是Date()构造函数的问题,立马采转载 2016-09-28 15:38:43 · 2250 阅读 · 0 评论 -
javascript 学习小结 (二)新增小数取整各种方法 by FungLeo
javascript 学习小结 (二) by FungLeo前言前面写过一个学习小结javascript 学习小结 JS装逼技巧(一) by FungLeo 那篇博文总结的东西还是比较多的.但是JS有很多的内容,都是很有用的知识点,不可能一下子记住.因此,我的学习小结的会一直更新.因为学习进度的不同,可能每篇博文的长短也不一样,有的学的东西多,就长点.查询某个字符串在某个数组中的索引值笨方法我的基础原创 2016-05-20 14:30:35 · 12163 阅读 · 0 评论 -
javascript 判断数组中的重复内容的两种方法(修复BUG) by FungLeo
javascript 判断数组中的重复内容的两种方法 by FungLeo前言一般,我们可能会给数组去重,这个操作并不复杂,执行一个循环就是了.现在,我要做的是,判断数组中是否有重复的内容,如果有,返回 true 否则,返回 false.思路把数组变成字符串循环原数组,拿每一个字段和这个字符串进行比对,看是否有重复如何拿A字符串和B字符串进行对比,并且要求判断出B字符串中包含过个A字符串呢?方原创 2016-06-06 16:27:14 · 7952 阅读 · 0 评论 -
javascript 自己实现数字\字母和中文的混合排序方法 by FungLeo
javascript 自己实现数字\字母和中文的混合排序方法(纯粹研究,不实用)前言在上一篇博文《javascript 数组排序sort方法和自我实现排序方法的学习小结》中,我用自己的方法实现了数字数组的排序.当然,实际运用中,我还是会使用sort方法更加方便.但是,我上一篇博文,仅仅是实现了数字排序,而srot方法默认可是能给字母实现排序的哦!而我的代码只能排序数字,看起来还是弱弱的.所以,我得加原创 2016-06-04 10:55:58 · 15749 阅读 · 0 评论 -
javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法
javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法前言在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝。如下图演示: 如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不是我们所需要的结果。 因此,数组以及对象的深拷贝就是javascript的一个基本功了。数组的深拷贝条条大道通罗马,实现数组的深拷贝,是有好几种方法的。举例如下:for 循环原创 2017-02-08 19:12:05 · 135056 阅读 · 30 评论 -
解决因为手机设置字体大小导致h5页面在webview中变形的BUG
解决因为手机设置字体大小导致h5页面在webview中变形的BUG首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美。这时候,你自信满满的将h5地址交给了APP工程师,做了一个WEBVIEW嵌套,然后就顺利交工了。测试组在一堆手机中测试APP,突然,在某个手机上打开,你的页面原创 2017-06-15 23:25:17 · 24864 阅读 · 28 评论 -
【转】指定文件、指定行、指定代码块不使用 ESLint 语法检查
指定文件、指定行、指定代码块不使用 ESLint 语法检查在使用了 eslint 进行代码检查后,可以大幅提高我们的代码规范。但是,在某些情况下,我们必须去写一些违反规则的代码。如果写了这些代码,则势必会导致各种提示报错。这种情况下,如果不去处理,则会导致项目警告越来越多,最终不知道哪些是必须的,哪些是可以修正的。因此,在某些地方,禁用检查就变得十分重要了。随便搜索了一下,找到了这篇博文,写得...转载 2019-05-28 12:12:11 · 2158 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(十一)将项目打包到子目录运行
React + webpack 开发单页面应用简明中文文档教程(十一)将项目打包到子目录运行好,前面我们经过一系列的开发,已经掌握了一些内容了。这篇博文,我们要学习,如何将项目打包。将项目打包到根目录运行如果我们需要将项目打包到根目录运行,这个就非常非常简单了。我们只需要运行npm run build命令,然后,等待编译,过会儿就编译好,并将我们的文件寸在了 build...原创 2018-06-28 12:09:27 · 2301 阅读 · 2 评论 -
React + webpack 开发单页面应用简明中文文档教程(十)在 jsx 和 scss 中使用图片
React + webpack 开发单页面应用简明中文文档教程(十)在 jsx 和 scss 中使用图片react 是一个非常自由的框架,如果没有强制的规范,每一个人都会发展出不同的编写风格。我遇到过很多 react 开发的项目,他们都把图片就进存放,简单说,就是存放在 src 目录下的某个地方,然后使用 ./xxx.jpg 这样的方式引入。这种写法对于我这种具有代码强迫症的人来说,简直是...原创 2018-06-28 12:08:28 · 2112 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值
React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值通过前面八篇博文,我们走下来,已经完成了一个小项目的基本开发。从这个章节开始,我们开始做一些更加高级的事情。前面我们讲过父组件给子组件传值,非常的简单。但是,子组件如何给父组件传值呢?我们需要明白一个概念,就是 react 组件之间的关系,如下图所示:由上及下特别简单,但是由下到上,就会比较困难。...原创 2018-06-28 12:07:35 · 1132 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面
React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面在前面博文中,我们已经渲染了列表,并且用 Link 标签,来进行了跳转。但是我们并没有编写内容页面。这一篇,我们来解决这些问题。创建 page/site/details.jsx 文件我们创建 page/site/details.jsx 文件,并录入一下内容:// 我们需要在页面...原创 2018-06-28 12:06:15 · 1349 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(七)jsx 组件中调用组件、父组件给子组件传值
React + webpack 开发单页面应用简明中文文档教程(七)jsx 组件中调用组件、父组件给子组件传值在上一章中,我们成功调取数据,并渲染了一个列表。应该还是有成就感的吧。这一章,我们来实现父子组件之间的传值。创建 @/coms/header.jsx 组件新建这个文件,并输入以下代码:import React, { Component } from 'react...原创 2018-06-28 12:05:02 · 1590 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(六)渲染一个列表,初识 jsx 文件
React + webpack 开发单页面应用简明中文文档教程(六)渲染一个列表,初识 jsx 文件在上一章中,我们顺利的配置了代理,并且请求到了 cnodejs.org 的公开 api 数据。这篇文章中,我们将把我们请求到的数据,渲染出来。通过这个页面的编写,我们需要对 react 的 jsx 文件,有一个简单的认识。编辑 page/site/index.jsx 文件,渲染列表...原创 2018-06-28 12:03:57 · 1332 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(五)配置 api 接口请求文件
React + webpack 开发单页面应用简明中文文档教程(五)配置 api 接口请求文件我们的项目大多数情况下,是需要和服务端进行交互的。因此,我们需要一个接口请求文件,这里,我们的接口调用,按照老习惯,还是请求 cnodejs.org 提供的公用接口。接口文档查看,请点击 https://cnodejs.org/api配置代理react 的代理配置相比 vue 的配置,要简...原创 2018-06-28 12:02:29 · 2030 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(四)调整项目文件以及项目配置
React + webpack 开发单页面应用简明中文文档教程(四)调整项目文件以及项目配置在上一篇博文中,我们很好的认识了项目的各个文件的所用,并且进行了一些调整。经过这些调整之后,我们的项目已经很成功的跑不起来了。嗯,我们要接着干,才能让我们的项目跑起来。编辑调整项目 src 文件配置 index.js 文件原文内容如下:import React from ...原创 2018-06-28 12:00:42 · 2122 阅读 · 8 评论 -
React + webpack 开发单页面应用简明中文文档教程(三)目录说明以及调整项目构架文件
React + webpack 开发单页面应用简明中文文档教程(三)目录说明以及调整项目构架文件在上一篇博文中,我们已经运行起来了我们的项目。但是,这只是一个初始项目而已,基本上属于不可用的状态,因此,我们要继续工作,展开我们的开发工作。这篇博文,我们来调整项目构架,以及配置文件,让项目可以更好的开发。自定义配置模式在默认情况下,项目的各种配置都是默认的,且不可修改,因此,我们...原创 2018-06-28 11:59:06 · 2320 阅读 · 0 评论 -
React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念
React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念我之前写了一系列的 vue 相关的入门博文,深受大家的欢迎。现在开发了几个 reactjs 的小项目,略有心得,因此,想与大家分享。由于之前有了 vue 开发的一些经验,因此,这个系列的博文会相对比较简单。如果你是有过一些经验的开发者,可以略过这篇博文,直接阅读下一篇。如果你只是掌握了 jquery 这...原创 2018-06-28 11:56:05 · 3496 阅读 · 0 评论 -
javascript 寻找当前页面中最大的 z-index 值的方法
javascript 寻找当前页面中最大的 z-index 值的方法我们在写类似 toast 这样的组件的时候,会希望我们的弹出层在当前页面的最上层,也就是说,希望 z-index 值为最大。所以,我们需要找到当前页面中最大的 z-index 值,然后把这个值 +1 即可。我们先来想一想思路。我们可以把 DOM 中的所有元素集合起来,然后转化成一个数组,然后我们遍历这个数组,把所有元素...原创 2018-06-01 11:03:11 · 8457 阅读 · 2 评论 -
javascript 判断参数是否为非0整数数字或者整数数字字符串的简单方法(小装逼)
javascript 判断参数是否为非0整数数字或者整数数字字符串的简单方法(小装逼)我们来判断一个值是否为数字,可以把它转化为数字,看是否为NaN 然后,再判断是否等于0即可简单的来实现判断了。所以,代码如下(num) => { if (!isNaN(parseInt(num))){ if (num !== 0) { // do something ...原创 2018-04-26 17:33:33 · 6981 阅读 · 2 评论 -
javascript 操作 url 中 search 部分方法函数
javascript 操作 url 中 search 部分方法函数前言首先,我们需要知道什么是 search , search 是 window.location 的一个属性.举个例子:首先,我们这里有一个 url,是 http://www.a.com/list/2.html?page=2&color=4&size=3#pic.我们访问访问这个地址,打开控制台,输入window.location,会原创 2016-06-14 18:03:20 · 16328 阅读 · 0 评论 -
javascript 删除 url 中指定参数,并返回 url
javascript 删除 url 中指定参数,并返回 url前言在之前写了一篇博文《javascript 操作 url 中 search 部分方法函数》.在这篇博文里面,我们通过写好的函数可以对url中的各种参数进行查询,设置.唯独,忘记了删除.而今天就是遇到要删除某个参数的问题.郁闷,于是,写了这个函数.实现代码// 删除url中某个参数,并跳转function funcUrlDel(name原创 2016-06-23 13:52:18 · 23047 阅读 · 1 评论 -
javascript 数组排序sort方法和自我实现排序方法的学习小结 by FungLeo
前言针对一个数组进行排序,一个很常见的需求.尤其在后端.当然,前端也是有这个需求的.当然,数组排序,是有现成的方法的.就是sort()方法.我们先开看下这个.标准答案,sort方法var arr = [45,98,67,57,85,6,58,83,48,18];console.log('原数组');console.log(arr);console.log('sort方法从小到大排序');co原创 2016-06-01 14:14:01 · 14035 阅读 · 7 评论