booder

booder 查看完整档案

深圳编辑  |  填写毕业院校  |  填写所在公司/组织 segmentfault.com/u/liuershou 编辑
编辑

初来乍到!

个人动态

booder 收藏了文章 · 2018-04-27

美团小程序框架mpvue入门教程

美团小程序框架mpvue入门教程

自打写了 美团小程序框架mpvue蹲坑指南,
一发不可收拾,今天趁周末空闲,来写个mpvue(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷。

另外,我还专门为本文做了一个简单的项目,如果懒得从头开始搭项目的童鞋,可以直接去我的
github上克隆到本地,
安装一下依赖,即可直接在此基础在开发,不需要做任何配置。如果你觉得该项目对有帮助,
请顺便给我Star,你们的支持是我最大的动力,谢谢!

好了,我们进入主题,首先,请允许引用一下美团官方对mpvue的介绍

mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js
的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

主要特性

使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:
  1. 彻底的组件化开发能力:提高代码复用性
  2. 完整的 Vue.js 开发体验
  3. 方便的 Vuex 数据管理方案:方便构建复杂应用
  4. 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
  5. 支持使用 npm 外部依赖
  6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
  7. H5 代码转换编译成小程序目标代码的能力

开始

学习最好的方式就动手,我们就徒手撸一个demo项目出来跑一跑,看看到底有没有官方说的那么好。
如果你有过vue的开发经历,相信你会对这个过程非常熟悉,甚至你都不需要安装其他工具,
直接用vue-cli创建项目,如果你一起没安装过vue-cli,那么你要先运行一下命令

npm install --g vue-cli

安装完vue-cli以后,我们就可以运行一下命令,来自动构建一个项目(期间会询问你是否使用一些工具/插件,
请根据自己的实际情况选择y或n,对于不懂得该选y还是n的,统统选n)

vue init mpvue/mpvue-quickstart test-wxapp

然后 进入我们创建的项目,并安装依赖

cd test-wxapp
npm i

最后,在运行一下我们的开发服务

npm run dev

项目就跑起来了,这个时候,我们打开微信开发者工具,选择小程序,然后新建一个,项目目录填
我们项目目录下的dist目录 test-wxapp/dist,就可以看到效果了

进阶

到此为止,一个基本的项目就完成了,但是,本文的目的不是让你学会搭一个空项目的,空项目的话,我觉得官方教程做的已经够好了。
接下来,我们来删掉几个示例文件,然后一步步添加页面.
首先,我们看一下项目的配置文件 /src/main.js 里面的初始内容如下:

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

export default {
  // 这个字段走 app.json
  config: {
    // 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去
    pages: ['pages/logs/main', '^pages/index/main'],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }
}

这里的 config 字段下面的内容,就是整个小程序的全局配置了,其中pages是页面的路由,window则是页面的一些配置(大部分都是顶部栏的配置)
,这些配置,最终都会被打包到原生小程序的app.json,对这些配置不了解的,建议看一下微信方法的小程序文档,这里不做赘述。

我们先把/src/pages 下面的counterlogs两个文件夹删掉,只保留一个index ,顺便把 /src/components 文件夹下面的文件也全删掉,
然后把/src/main.js 里面的 config.pages里面多余的路由也删掉,只保留一条['^pages/index/main'],这样目前就只有个index页面,

然后我们打开/src/pages/index/index.vue 我们把里面多余的代码删掉,只保留一个基础骨架

<template>
  <div class="container">
       我是首页
  </div>
</template>

<script>

export default {
  data () {
    return { }
  },
  methods: {},

  created () {}
}
</script>

<style scoped>

</style>
tip /src/utils/index.js 是一个公共函数库,里面只有一个简单的格式化日期函数,不要也可以删掉

到目前为止,一个干净的空项目就算是ok了,接下来我们来对微信原生的一些反人类的东西来做一下优化。

一、先用mptoast组件代替官方提供的wx.showToast, wx.showToast诸多不便我就不说了,关键是还有坑
小程序基础库比较低的,不管你怎么设置,总是会在弹窗里面加一个钩钩,有时候我想弹出错误消息也是打钩,
严重误导用户,字数上还有限制有带icon的不能超过7个字,你说说,你说说 7个字够干嘛的,
那我们来看看mptoast,据官方介绍mptoast具有轻量,配置少,冗余少,使用简单,可定制性强等特点

我们开根据官方介绍,从npm引入并配置

npm i vuex
npm i mptoast -D

在项目的主配置文件(一般位于src/main.js)加入以下代码

import mpvueToastRegistry from 'mptoast/registry'
mpvueToastRegistry(Vue)

在你需要弹窗的页面,引入组件,并注册,然后在页面内加入一个你注册的组件,就可以在js里面调用this.$mptoast()了, 以下是一个简单的实例

<template>
  <div>
    <-- 省略其他代码 -->
    <mptoast />
  </div>
</template>

<script>
import mptoast from 'mptoast'

export default {
  components: {
    mptoast
  },
  data () {
    return {}
  },
  methods: {
    showToast () {
      this.$mptoast('我是提示信息')
    },
  }
}
</script>

使用起来还是蛮简单的

二,用promise封装异步请求函数
在小程序的环境下面,要想发送一个外部请求,我们只能使用小程序官方提供的wx.request方法,
但是该方法的代码风跟跟Jquery年代的Ajax一样,都散靠回调来处理请求响应,如果有很多层回调,
就会有很多层嵌套,这让我们这些平时被async-await惯坏的人怎么接受?

所以,建完基本项目,我们要做的第一件事,就是用wx.request自己封装一个基于promise的异步请求方法。
我们先来看一下 wx.request的一个官方示例代码

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})

可以看到,每次请求都要发送一大堆的东西,重点少这些东西里面,很可能对于一个项目来说,
绝大部分都是固定不变的,那这样,不是冗余了么。

tip: 更多wx.request参数,请参考 微信官方文档

我们分析一下,第一个参数是url,也就是我们请求的地址,这个应该是每次都不一样的,但是,不一样的应该也只是url的最后一部分,
接口名称的位置不一样,前面的服务器地址一般都是一样的,例如http://www.abc.com/api/member/login 对于同一个项目的所有接口
服务器地址http://www.abc.com/api/应该都是一样的,不一样的只是后面的接口名称member/login,
那我们可以把url拆分成 服务器地址 + 接口名称,这样做也方便后期上线的时候,切换服务器地址。

第二个参数是请求的参数,请求的参数应该是每次都不一样的,所以这个我们就不做修改(事实上实际应用中,
经常有可能出现需要每个接口都带一个token的,我们也可以在这里统一加上去,不过这里就不做深入)

第三个参数是 请求头,这个一般同一个项目里面,这些都是一样的,所以我们就写死。 这里还有一个参数method请求方法,
这里因为使用默认值GET,所以就没列出,我们这边需要做设置,因为现在前后分离的模式,现在基本上大部分都是POST请求,所以我们这边也写死成method:'POST'

最后一个就是处理请求结果回调函数,示例里面只有一个请求成功的回调,其实我们应该再加一个请求实例的处理函数,
fail,而我们封装这个函数的重点,就是要用promise来处理这两个回调函数,使它们可以用async-await的语法

// 假设以下代码在 `/src/utils/requestMethod.js`

let serverPath = 'http://www.abc.com/api/'
export function post(url,body) {
    return new Promise((resolve,reject) => {
        wx.request({
              url: serverPath + url    // 拼接完整的url
              data: body
              method:'POST',
              header: {
                  'content-type': 'application/json'
              },
              success(res) {
                resolve(res.data)  // 把返回的数据传出去
              },
              fail(ret) {
                reject(ret)   // 把错误信息传出去
              }
            })
    })
}

有了这样的封装,我们就可以在其他地方引入 上面这个文件,然后使用post函数请求

import {post} from '/src/utils/requestMethod.js'
// 需要注意的是,这行代码必须要在async修饰的函数里面才能正确调用
let res = await post('member/login',{name:myname})

如果你觉得每次都要import这个文件很麻烦,那我们也可以把它挂在到Vue(mpvue)的原型(prototype)上,我们打开/src/main.js文件,然后在里面加入以下代码

import {post} from '/src/utils/requestMethod.js'
Vue.prototype.$post = post

这样,我们就可以在Vue(mpvue)的所有实例里面,直接使用 this.$post()来调用,只要一行代码,

// 这行代码同样需要在async修饰的函数里面才能正确调用
let res = await this.$post('member/login',{name:myname})

怎么样?是不是比原生的方便很多呢?

结束语

当然,跑起来以后,你可能还会遇到各种问题,这里我有对我自己遇到的问题做了一些总结
美团小程序框架mpvue蹲坑指南,希望对你有帮助,
还有官方文档也是很不错的哦

查看原文

booder 收藏了文章 · 2018-03-13

实用性前端知识 - 收藏集 - 掘金

阮一峰 - 函数式编程入门教程 - 前端 - 掘金
你可能听说过函数式编程(Functional programming),甚至已经使用了一段时间。 但是,你能说清楚,它到底是什么吗? 网上搜索一下,你会轻松找到好多答案。 与面向对象编程(Object-oriented progr...

六大方向助你突破前端生涯平台期 - 前端 - 掘金
无论我们从事何种职业,在职业生涯的某个阶段,都或多或少会遇到所谓的平台期。 在这样的阶段,我们会感觉到头顶似乎有了无形的天花板,或数月,或经年亦感觉不到自身的成长和进步,对于前端开发这样的技术工种,尤为严重。 前端开发岗位的第一个平台期因人而异,不可一概而...

44 个 JavaScript 变态题解析 - 前端 - 掘金
原题来自: http://javascript-puzzlers.he... 读者可以先去做一下感受感受. 当初笔者的成绩是 21/44... 当初笔者做这套题的时候不仅怀疑智商, 连人生都...

也许是史上最全的前端资源大汇总 - 前端 - 掘金
1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”?,终于取得转载权利,在此感谢晚晴幽草的大力帮助。 作者将原素材文章进行了新内容的添加和重新排列,但是因为文章...

vue2 + vuex 高度还原饿了么 App,与官方后台真实数据交互,获取商品信息,实现登陆、购物车、下单等功能 - 前端 - 掘金
前言 vue2的发布后自己也研究了一段时间,奈何公司的技术栈是以react为主,没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo,但和写一个完整的项目还是有很大差别的。于是自己想着用空余的时间写一个项目,选择了饿了么也只是因为...

Vue 服务端渲染业务入门实践 - 前端 - 掘金
作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处。 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实。 接过需求,好在需求不复杂, 简单构思 后决定用Vue, 得心应手。 切好图,...

技术 | 前端面试题(二):自定义事件 - 前端 - 掘金
我和阿里巴巴的同事守雌将为大家带来一个系列专题:前端面试题解析,一周更新两篇,也许答案可能不是最优的,但是也可以给你提供解决问题的思路。面试题力求实战,期望对于找工作的你,温故而知新的你,能有所帮助。 关于事件,我想这也是前端面试中必问的一道题,除了...

Talk is cheap, show me the code - 用 github 数据辅助你完善简历 - 掘金
我曾经在 V2EX 上发过这样一个帖子:作为一个前端狗,我又双叒叕做了个小站。在那个帖子里,推荐了我做的 hacknical 这个产品,其功能是以可视化图表的形式,生成用户在 github 的数据报告。目前为止,已经有 998 个用户通过 github 认证登...

观点 | 2017 年前端初学者的生存指南 - 前端 - 掘金
逝者如斯夫,不舍昼夜。 历史在向前发展,前端的“摩尔定律”是每隔18个月难度会上升一次,过去的2016年我们不再回顾,展望2017年,对于初学者想要生存下来,该怎么办?如果你有这个疑问,那么你就得好好阅读一下,我这篇文章了。 数据不准,2017年2月19...

JavaScript 三招两式之异步编程 (上) - 前端 - 掘金
Javascript 这门语言由于其特有的使用场景,在异步编程方面历经多个版本的发展,在社区的推动之下衍生出了一系列优秀的语法和思想。本文主要介绍这门语言当中,对异步逻辑的实现方式。...

前端 - 百度地图 API 基础入门 - 掘金

1.前言 最近想完成一个网站,里面需要使用地图相关的内容。 经过多方考虑,决定使用百度地图来完成,所以将整个学习历程进行简单的整理,方便朋友们来快速入门。 本文系作者 李鹏(MR_LP)原创,转载请私信并在文章开头附带作者和原文地址链接。 违者,作者保留...

vbuild: 为 Vue.js 优化的开发工具 (基于 Webpack) - 前端 - 掘金
Badges ...

http、https、web 开发、协议、tip/ip、状态码等简要手册 http 权威指南 - 前端 - 掘金
前言 需要说明一下,因为一直有在看《HTTP权威指南》,觉得这是...

面试感悟:一名 3 年工作经验的程序员应该具备的技能 - Android - 掘金
前言 因为和同事有约定再加上自己也喜欢做完一件事之后进行总结,因此有了这篇文章。这篇文章大部分内容都是面向整个程序员群体的,当然因为本身是做Java开发的,因此有一部分内容也是专门面向咱们Java程序员的。 简单先说一下,坐标杭州,13届本科毕业,算上年前...

女朋友的微博情绪监控 - 后端 - 掘金
就是这样,代码写好了,就差个女朋友了。 最后的效果就是检测某一微博博主新发的微博,如果判断为消极情绪就发出警告(手机通知、邮件通知、自动发一条上图那样的微博之类的)。 项目地址: https://github.com/DIYgod/Wei... 以 RS...

javascript 数组知识点整理 - 前端 - 掘金
<!-- author: molin head: date: 2017-01-24 title: javascript数组详细介绍 tags: Array images: category: js status: publish summary: java...

2016 年终总结 -- 前端生涯从 0 到 1 的过程 - 前端 - 掘金
简述 夜里写下这篇年终总结,作为互联网公司员工来说这篇年终总结来的真是很晚了 2016年先后就职于2家公司,于我个人来说算是前端生涯正经从0到1的过程,是2016年的年终总结,也是...

原生 js 实现前端路由 - 前端 - 掘金
最近一直在研究前后端分离,ajax可以很好的解决前后端分离的问题,但是又存在着浏览器无法前进后退,这个问题比较尴尬。但是采用前端路由的方式可以很好的解决这个问题。 前端路由与...

双向绑定的简单实现 - 基于 “脏检测” - 前端 - 掘金
本文基于“脏检测”机制实现一个简单的双向绑定。若您对如何使用ES5的getter/setter实现动态数据绑定较为感兴趣,可移步至双向绑定的简单实现——基于ES5对象的getter/setter机制。 脏检测基本原理 众所周知,Angular的...

双向绑定的简单实现 - 基于 ES5 对象的 getter/setter 机制 - 前端 - 掘金
在双向绑定的简单实现——基于“脏检测”中,我们使用“脏检测”的机制,实现了一个简单的双向绑定计数器。尽管逻辑比较清晰简单,性能也还可以,但每次都遍历DOM节点,也是会有一些性能浪费的。ES5提供了Object.defineProperty与Object.def...

其实,中国的开发者们从来没有开心过 - 阅读 - 掘金
「工作了快 8 年,几个月不学新东西,我总会担心自己被年轻人取代。」 这是目前开发者最典型的生存状态,资历对于开发者这个行业而言,似乎越来越贬值。在开发者的世界里,每隔一段时间就会有新的技术内容出来,要留在一线就要不断迭代自己,不仅要花时间精力不断学新东西,还...

推荐一些打死也舍不得取关的公众号和博客 - Android - 掘金
前言 大家好,我是光源。 来到新公司后,时间变得更加少了 —— 尽管晚上不用加班,但是项目进度的压力在那里。 习惯于把白天在公司的时间尽量花在快速编程上,而碰到的一个个需要细细查阅资料的问题会先记录在云笔记里,晚上夜深人静时慢慢花时间搜索、阅读、解决。 没有大...

NPM Magic - 前端 - 掘金
package.json package.json 最起码要包含 name 和 version 快速初始化 package.json: npm init --yes dependencies: 生产环境依赖的包 * devDepe...

看完就会用的 GIT 操作图解分析 - 后端 - 掘金
无论你是前端还是后台,无论是运维还是移动端研发,GIT是逃避不了的东西,当然你说你要用SVN,那不在这次的讨论范围之内。不多说,请看下文GIT图解分析,10分钟学会git操作,当然下面的教程是为实战为主,会跟你在别的网站看到的不一样。 ...

通用的验证模块 - 掘金
分享一个新鲜出炉的验证模块,用各种环境的规则验证,结合React或Vue做到无侵入式验证,做纯数据验证,不操作相关DOM与事件注册,规则配置方便,简单易用。 使用过很多的验证插件,总是没有一个特别让我满意,要么规则配置复杂,要么样式更改麻烦,这种大而全的框架在...

查看原文

booder 赞了文章 · 2018-03-01

前端简洁并实用的工具类

前言

本文主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数进行了封装,确实可以在项目中直接引用,提高开发效率.

1.日期

日期在后台管理系统还是用的很多的,一般是作为数据存贮和管理的一个维度,所以就会涉及到很多对日期的处理

1.1 new Date转化为yyyy-MM-dd HH:mm:ss

图片描述

DatePicker日期选择器默认获取到的日期默认是Date对象,但是我们后台需要用到的是yyyy-MM-dd,所以需要我们进行转化

方法一:将Fri Mar 23 2018 12:19:48 GMT+0800 (国际时间)转化为dd-MM-yyyy HH:mm:ss


export const dateToFormat=(date)=>{
    date.toLocaleString("en-US", { hour12: false }).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
}

方法二:
从element-UI的2.x版本提供了value-format属性,可以直接设置选择器返回的值
图片描述

1.2 将yyyy-MM-dd转化为new Date()

也就是转化为日期控件可以接受的类型

export const forMatToDate=(date)=>{
       let dateArr=date.split(':');
  return new Date(2017,10,19,dateArr[0],dateArr[1],dateArr[2]);
    }
有个坑,日期中初始化默认比实际设置的值大一

1.3 通过 moment

new Date到 hh:mm:ss moment('00:00:00').format('HH:mm:ss')
hh:mm:ss到new Date moment('00:00:00', 'HH:mm:ss')

1.4 获取当前的时间yyyy-MM-dd HH:mm:ss

没有满10就补0

export default const obtainDate=()=>{
 let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day=date.getDate();
      let hours=date.getHours();
      let minu=date.getMinutes();
      let second=date.getSeconds();
      //判断是否满10
      let arr=[month,day,hours,minu,second];
      arr.forEach(item=>{
        item< 10?"0"+item:item;
      })
      return year+'-'+arr[0]+'-'+arr[1]+' '+arr[2]+':'+arr[3]+':'+arr[4]      
}

1.5 将时间戳转化为yyyy-MM-dd HH:mm:ss

export default const returnTimestamp=(strTime)=>{
  let middleDate=new Date(strTime)
  return middleDate.toLocaleString('zh-CN',{hour12:false}).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
})   

1.6 比较yyyy-MM-dd时间大小

如果单个比较会比较复杂,这里直接处理成Number比较

方法一:利用正则转化成 Number

export default const compareTwo=(dateOne,dateTwo)=>{
    return Number(dateOne.replace(/\-/g,""))<Number(dateTwo.replace(/\-/g,""))
}

方法二:转化成 Date 对象

export default const compareTwo=(dateOne,dateTwo)=>{
    return new Date(dateOne)<new Date(dateTwo)
}) 

方法三:转化成时间戳

export default const compareTwo=(dateOne,dateTwo)=>{
    return new Date(dateOne).getTime()<new Date(dateTwo).getTime()
}) 

方法三:直接比较

export default const compareTwo=(dateOne,dateTwo)=>{
    return dateOne<dateTwo
}) 
测试用例:
"2007-2-2 7:30" > "2007-2-2 6:30" //true
"2007-02-02 7:30" > "2007-2-2 6:30" //false
所以直接比较不准确不建议使用

1.7 计算两个日期格式为(yyyy-MM-dd)相差几个月

export default const disparityFewMonth = (dateOne, dateTwo) => {

    let datesOne = dateOne.split('-').map(item => Number(item));
    let datesTwo = dateTwo.split('-').map(item => Number(item));
    const diff = [0, 0, 0].map((value, index) => {
        return datesOne[index] - datesTwo[index]
    });
    return (diff[0] * 12 + diff[1]) + '月' + diff[2] + '天'
}

1.8 new Date对象可接受的参数

1、new Date("month dd,yyyy hh:mm:ss"); 
2、new Date("month dd,yyyy"); 
3、new Date(yyyy,mth,dd,hh,mm,ss); 注意:这种方式下,必须传递整型;
4、new Date(yyyy,mth,dd); 
5、new Date(ms); 注意:ms:是需要创建的时间和 GMT时间1970年1月1日之间相差的毫秒数;当前时间与GMT1970.1.1之间的毫秒数:var mills = new Date().getTime();
注意:mth:用整数表示月份,从0(1月)到11(12月)

1.9 获取某年的某月的天数

export default const monthDay=(year,month)=>{
    return new Date(year, month, 0).getDate()
}

1.10 生成标识id

格式为时间戳的后8位加4位随机数

export default const disparityFewMonth = (dateOne, dateTwo) => {
    let num='';
    for (var i = 0; i < 4; i++) {
        num += Math.floor(Math.random() * 10);
    }
    return imgId = String(new Date().getTime()).slice(-8)+String(num);

}

2.数组

2.1 检测是否是数组

export default const judgeArr=(arr)=>{
        if(Array.isArray(arr)){
            return true;
        }
    }

2.2数组去重set方法

1.常见利用循环和indexOf(ES5的数组方法,可以返回值在数组中第一次出现的位置)这里就不再详写,这里介绍一种利用ES6的set实现去重.

2.set是新怎数据结构,似于数组,但它的一大特性就是所有元素都是唯一的.

3.set常见操作
大家可以参照下面这个:新增数据结构Set的用法

4.set去重代码

export const changeReArr=(arr)=>{
    return Array.from(new Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型
}

或者
export const changeReArr=(arr)=>{
    return [...new Set([1,2,2,3,5,4,5])]//利用...扩展运算符将set中的值遍历出来重新定义一个数组,...是利用for...of遍历的
}

Array.from可以把带有lenght属性类似数组的对象转换为数组,也可以把字符串等可以遍历的对象转换为数组,它接收2个参数,转换对象与回调函数,...和Array.from都是ES6的方法

2.3 纯数组排序

常见有冒泡和选择,这里我写一下利用sort排序

 export const orderArr=(arr)=>{
        arr.sort((a,b)=>{
            return a-b //将arr升序排列,如果是倒序return -(a-b)
        })
    }

2.4 数组对象排序

export const orderArr=(arr)=>{
        arr.sort((a,b)=>{
            let value1 = a[property];
            let value2 = b[property];
            return value1 - value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用
            //来接收对象属性名,其他部分代码与正常使用sort方法相同
        })
    }      
    

2.5 数组中的最大值

export const maxArr=(arr)=>{
    return Math.max(...arr)
 }
 
 或者export const maxArr=(arr)=>{
    return Math.max.apply(null,arr)
 }

2.6 数组的"短路运算"every和some

数组短路运算这个名字是我自己加的,因为一般有这样一种需求,一个数组里面某个或者全部满足条件,就返回true

情况一:全部满足

    export const allTrueArr=(arrs)=>{
          return arr.every((arr)=>{
             return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
          })  
    }

情况二:有一个满足
export default const OneTrueArr=(arrs)=>{
      return arr.some((arr)=>{
         return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
      })  
}

以上两种情景就和||和&&的短路运算很相似,所以我就起了一个名字叫短路运算,当然两种情况都可以通过遍历去判断每一项然后用break和return false 结束循环和函数.

2.7 数组过滤filter和处理map方法

filter:过滤满足某一条件的数组值,并返回新数组

export const filterArr = (arr, operator, judgeVal) => {
      return arr.filter(item => {
        if (operator == '>') {
          return item > judgeVal;
        } else if (operator == '<') {
          return item > judgeVal;
        } else if (operator == '==') {
          return item == judgeVal;
        }
      })
    }

map:对数组进行处理返回一个新数组

export const mapArr = (arr) => {
  return arr.map(item => item + 10;)//箭头函数的{}如果省略,则会默认返回,不用写return
 }

2.8将多维数组转化为一维的类

Array.prototype.flat = function() {
    var arr = [];
    this.forEach((item,idx) => {
        if(Array.isArray(item)) {
            arr = arr.concat(item.flat()); //递归去处理数组元素
        } else {
            arr.push(item)   //非数组直接push进去
        }
    })
    return arr;   //递归出口
}
测试用例:
arr = [[2],[[2,3,[4,5,[7,8]]],[2]],3,4]
console.log(arr.flat());

3.对象

3.1 对象遍历

export const traverseObj=(obj)=>{
        for(let variable in obj){
        //For…in遍历对象包括所有继承的属性,所以如果
         //只是想使用对象本身的属性需要做一个判断
        if(obj.hasOwnProperty(variable)){
            console.log(variable,obj[variable])
        }
        }
    }
    

3.2 对象的数据属性

1.对象属性分类:数据属性和访问器属性;

2.数据属性:包含数据值的位置,可读写,包含四个特性包含四个特性:

configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true
 enumerable:表示能否通过for-in循环返回属性
 writable:表示能否修改属性的值
 value:包含该属性的数据值。默认为undefined

3.修改数据属性的默认特性,利用Object.defineProperty()

 export const modifyObjAttr=()=>{
  let person={name:'张三',age:30};
  Object.defineProperty(person,'name',{
    writable:false,
    value:'李四',
    configurable:false,//设置false就不能对该属性修改
    enumerable:false
  })
} 

3.3 对象的访问器属性

1.访问器属性的四个特性:

configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为false

 enumerable:表示能否通过for-in循环返回属性,默认为false

 Get:在读取属性时调用的函数,默认值为undefined

 Set:在写入属性时调用的函数,默认值为undefined 

2.定义:
访问器属性只能通过要通过Object.defineProperty()这个方法来定义

export const defineObjAccess=()=>{
let personAccess={
    _name:'张三',//_表示是内部属性,只能通过对象的方法修改
    editor:1
  }
  Object.defineProperty(personAccess,'name',{
    get:function(){
      return this._name;
    },
    set:function(newName){
      if(newName!==this._name){
        this._name=newName;
        this.editor++;
      }
    }
    //如果只定义了get方法则改对象只能读
  })
}
  

vue中最核心的响应式原理的核心就是通过defineProperty来劫持数据的getters和setter属性来改变数据的

3.4对象或对象数组的深度拷贝

原生方法一:

export const deepClone=function(origin,target){
    var target = target || {}; //定义target
    for(var key in origin) {  //遍历原对象
        if(origin.hasOwnProperty(key)) {
            if(Array.isArray(origin[key])) { //如果是数组
                target[key] = [];
                deepClone(origin[key],target[key]) //递归
            } else if (typeof origin[key] === 'object' && origin[key] !== null) {
                target[key] = {};
                deepClone(origin[key],target[key]) //递归
            }
            target[key] = origin[key];
        }
    }
    return target;
}

方法二:Object.assign

Object.assign(objOne,objTwo);
//该方法是一个伪深度拷贝,如果改变对象里面的数组值还是会改变被拷贝的值

方法三:JSON.stringify
let objNew=JSON.parse(JSON.stringify(obj)) ;
//可以实现深度拷贝

3.5 找出字符中出现频次最多的字符

export const findMaxStr=(str)=>>{
    let o = {};
    for (let char of str) {
      if (o[char]) { //char就是对象o的一个属性,o[char]是属性值,o[char]控制出现的次数
        o[char]++; //次数加1
      } else {
        o[char] = 1; //若第一次出现,次数记为1
      }
    }
    console.log(o); //输出的是完整的对象,记录着每一个字符及其出现的次数
    //遍历对象,找到出现次数最多的字符和次数
    let max = 0;
    let maxChar = null;
    for (let key in o) {
      if (max < o[key]) {
        max = o[key]; //max始终储存次数最大的那个
        maxChar = key; //那么对应的字符就是当前的key
      }
    }
    console.log("最多的字符是" + maxChar);
    console.log("出现的次数是" + max);
}

3.6 连续的对象数组插入其他类型

1.要求
一个对象数组objArr,类似[{type:'text',content:''},{type:'img',content:''},{type:'img',content:''},],
要求数据结构是一个type为text和type为img的项交替出现

2.算法思路:
定义一个新对象数组,比较最后一项的type是否和当前项type相等,不等则push该项
如果相等就插入另一个类型

export const alternateObj=(objChange)=>{
    let objRule = [];
    objChange.map((item, index) => {
      //判断是否有连续同类型数据
      if (!index) {
        objRule.push(item);
      } else {
        // console.log("objRule值为", objRule);
        // console.log("item值为", item);
        if (objRule[objRule.length - 1].type == item.type) {
          if (item.type == "IMG") {
            objRule.push({ type: "TEXT", content: "" }, item);
          } else {
            objRule.push({ type: "IMG", content: "" }, item);
          }
        } else {
          objRule.push(item);
        }
      }
    });
    return objRule;
  }

4.axios

4.1 axios的get方法

export const getAjax= function (getUrl,getAjaxData) {
  return axios.get(getUrl, {
    params: {
      'getAjaxDataObj1': getAjaxData.obj1,//obj1为getAjaxData的一个属性
      'getAjaxDataObj2': getAjaxData.obj2
    }
  }).then(data=>{
      //成功返回
  }).catch(err=>{
      //错误返回
  })
}

4.2 axios的post方法

export const postAjax= function (getUrl,postAjaxData) {
  return axios.post(postUrl, {
      'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性
      'postAjaxDataObj2': postAjaxData.obj2
  }).then(data=>{
      //成功返回
  }).catch(err=>{
      //错误返回
  })
}

4.3 axios的拦截器

主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为0

1.请求拦截:将当前城市信息放入请求头中

axios.interceptors.request.use(config => {
  config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get('cityCode')
  return config
}),

2.响应拦截:处理reponse的结果

axios.interceptors.response.use((response) =>{
  let data = response.data
  if(response.request.responseType === 'arraybuffer'&&!data.length){
    reponse.date=0
  }
})

5.promise

promise是一种封装未来值的易于复用的异步任务管理机制,主要解决地狱回调和控制异步的顺序

5.1 应用方法一

export const promiseDemo=()=>{
new Promise((resolve,reject)=>{
    resolve(()=>{
        let a=1;
        return ++a;
    }).then((data)=>{
        console.log(data)//data值为++a的值
    }).catch(()=>{//错误执行这个

    })
})
}

5.2 应用方法二

export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接初始化一个Promise并执行resolve方法
    console.log(data)//data值为[1,2,3]
})
}

6.文本框的判断

6.1 全部为数字

方法一(最简单):

export const judgeNum1=(num1)=>{
    if(typeof num1=='number'){
        return true;
    }else{
        return false;
    }
}

方法二:isNaN

export const judgeNum1=(num1)=>{
    if(!isNaN(num1)){
        return true;
    }else{
        return false;
    }
}

注:当num1为[](空数组)、“”(空字符串)和null会在过程中转换为数字类型的0,所以也会返回false,从而判断为数字,所以可以将用typeof将以上特殊情况剔除.

方法三:正则

export const judgeNum1=(num1)=>{
  let reg=/^[0-9]*$/
  if(!reg.test(num1)){
    console.log('num1是0-9')
  }
}

6.2 只能为数字或字母

这个用正则判断
定义一个正则:let reg=/^[0-9a-zA-Z]*$/g

6.3 只能为数字,字母和英文逗号

因为存在输入多个编号,以英文逗号分隔的情况
定义一个正则:let reg=/^[0-9a-zA-Z,]*$/g

6.4 判断输入的位数不超过16位

直接利用字符串新加的length属性来判断

export const judgeNum1=(num1)=>{
      if(num1.length>16){
        console.log('num1超过16位')
     }
 }

6.5 去掉字符左右空格

export const trimLeOrRi=(str)=>{ //删除左右两端的空格
 return str.replace(/(^s)|(s$)/g, "");
}

7. 检测是浏览器还是客户端

其实本质都是利用navigator对象的userAgent属性
export const checkIosOrAndriod=(appMethod)=>{

  let ua_ios = window.navigator.userAgent.toLowerCase().match(/lan1.0_iOS/i),
  ua_android = window.navigator.userAgent.toLowerCase().match(/RRJC3.0_Android/i),
  isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
  isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  ios_browser=
  if(ua_ios || ua_android){
    appMethod;//调用原生的方法
  }else if(isAndroid){      
    return '安卓browser访问'
  }else if(isIOS){      
    return 'ios的browser访问'
  }
},

8.数字的处理

8.1四舍五入取值

export const getFloat=(molecular,denominator,n){//molecular是分子,denominator是分母,n是保留的小数位
   let number=denominator==0?0:molecular/denominator;    
    n = n ? parseInt(n) : 0; 
    if (n <= 0) return Math.round(number); 
    number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n);
    return number;   
}  

9.客户端类型

9.1 iPhoneX,iPhoneXS

export let checkIphoneX=(function judgeIphone(){
    // iPhone X、iPhone XS
    let isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
    // iPhone XS Max
    let isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
    // iPhone XR
    let isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;
    return isIPhoneX || isIPhoneXSMax || isIPhoneXR;
})()

9.2 IOS和Android

export function checkAgent () {
    var u = navigator.userAgent,
      Agent = '';
 
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
      Agent = 'Android';
    } else if (isiOS) {
      Agent = 'IOS';
    }
    return Agent;
  }

9.3 判断是横屏

export function judgeHOrV() {
      if (window.orientation == 180 || window.orientation == 0) {
          return 'landscape'
      }
    if (window.orientation == 90 || window.orientation == -90) {
         return 'portraitScreen'
   }
  }

10.路由相关

10.1 获取?后指定 name 值

export const getQueryString=(name)=> {
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  let url = window.location.href
  let search = url.substring(url.lastIndexOf('?') + 1)
  let r = search.match(reg)
  if (r != null) return unescape(r[2])
  return null
}

结束

很开心你还能看到这里,这些类可能你现在用不到,但可以先收藏着.
大家可以一起交流,下次项目开发直接拿过去用,现在3月项目比较赶,这个真的可以提高开发效率哦!祝大家新年快乐哒.

查看原文

赞 73 收藏 247 评论 16

booder 赞了文章 · 2018-03-01

前端简洁并实用的工具类

前言

本文主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数进行了封装,确实可以在项目中直接引用,提高开发效率.

1.日期

日期在后台管理系统还是用的很多的,一般是作为数据存贮和管理的一个维度,所以就会涉及到很多对日期的处理

1.1 new Date转化为yyyy-MM-dd HH:mm:ss

图片描述

DatePicker日期选择器默认获取到的日期默认是Date对象,但是我们后台需要用到的是yyyy-MM-dd,所以需要我们进行转化

方法一:将Fri Mar 23 2018 12:19:48 GMT+0800 (国际时间)转化为dd-MM-yyyy HH:mm:ss


export const dateToFormat=(date)=>{
    date.toLocaleString("en-US", { hour12: false }).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
}

方法二:
从element-UI的2.x版本提供了value-format属性,可以直接设置选择器返回的值
图片描述

1.2 将yyyy-MM-dd转化为new Date()

也就是转化为日期控件可以接受的类型

export const forMatToDate=(date)=>{
       let dateArr=date.split(':');
  return new Date(2017,10,19,dateArr[0],dateArr[1],dateArr[2]);
    }
有个坑,日期中初始化默认比实际设置的值大一

1.3 通过 moment

new Date到 hh:mm:ss moment('00:00:00').format('HH:mm:ss')
hh:mm:ss到new Date moment('00:00:00', 'HH:mm:ss')

1.4 获取当前的时间yyyy-MM-dd HH:mm:ss

没有满10就补0

export default const obtainDate=()=>{
 let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day=date.getDate();
      let hours=date.getHours();
      let minu=date.getMinutes();
      let second=date.getSeconds();
      //判断是否满10
      let arr=[month,day,hours,minu,second];
      arr.forEach(item=>{
        item< 10?"0"+item:item;
      })
      return year+'-'+arr[0]+'-'+arr[1]+' '+arr[2]+':'+arr[3]+':'+arr[4]      
}

1.5 将时间戳转化为yyyy-MM-dd HH:mm:ss

export default const returnTimestamp=(strTime)=>{
  let middleDate=new Date(strTime)
  return middleDate.toLocaleString('zh-CN',{hour12:false}).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
})   

1.6 比较yyyy-MM-dd时间大小

如果单个比较会比较复杂,这里直接处理成Number比较

方法一:利用正则转化成 Number

export default const compareTwo=(dateOne,dateTwo)=>{
    return Number(dateOne.replace(/\-/g,""))<Number(dateTwo.replace(/\-/g,""))
}

方法二:转化成 Date 对象

export default const compareTwo=(dateOne,dateTwo)=>{
    return new Date(dateOne)<new Date(dateTwo)
}) 

方法三:转化成时间戳

export default const compareTwo=(dateOne,dateTwo)=>{
    return new Date(dateOne).getTime()<new Date(dateTwo).getTime()
}) 

方法三:直接比较

export default const compareTwo=(dateOne,dateTwo)=>{
    return dateOne<dateTwo
}) 
测试用例:
"2007-2-2 7:30" > "2007-2-2 6:30" //true
"2007-02-02 7:30" > "2007-2-2 6:30" //false
所以直接比较不准确不建议使用

1.7 计算两个日期格式为(yyyy-MM-dd)相差几个月

export default const disparityFewMonth = (dateOne, dateTwo) => {

    let datesOne = dateOne.split('-').map(item => Number(item));
    let datesTwo = dateTwo.split('-').map(item => Number(item));
    const diff = [0, 0, 0].map((value, index) => {
        return datesOne[index] - datesTwo[index]
    });
    return (diff[0] * 12 + diff[1]) + '月' + diff[2] + '天'
}

1.8 new Date对象可接受的参数

1、new Date("month dd,yyyy hh:mm:ss"); 
2、new Date("month dd,yyyy"); 
3、new Date(yyyy,mth,dd,hh,mm,ss); 注意:这种方式下,必须传递整型;
4、new Date(yyyy,mth,dd); 
5、new Date(ms); 注意:ms:是需要创建的时间和 GMT时间1970年1月1日之间相差的毫秒数;当前时间与GMT1970.1.1之间的毫秒数:var mills = new Date().getTime();
注意:mth:用整数表示月份,从0(1月)到11(12月)

1.9 获取某年的某月的天数

export default const monthDay=(year,month)=>{
    return new Date(year, month, 0).getDate()
}

1.10 生成标识id

格式为时间戳的后8位加4位随机数

export default const disparityFewMonth = (dateOne, dateTwo) => {
    let num='';
    for (var i = 0; i < 4; i++) {
        num += Math.floor(Math.random() * 10);
    }
    return imgId = String(new Date().getTime()).slice(-8)+String(num);

}

2.数组

2.1 检测是否是数组

export default const judgeArr=(arr)=>{
        if(Array.isArray(arr)){
            return true;
        }
    }

2.2数组去重set方法

1.常见利用循环和indexOf(ES5的数组方法,可以返回值在数组中第一次出现的位置)这里就不再详写,这里介绍一种利用ES6的set实现去重.

2.set是新怎数据结构,似于数组,但它的一大特性就是所有元素都是唯一的.

3.set常见操作
大家可以参照下面这个:新增数据结构Set的用法

4.set去重代码

export const changeReArr=(arr)=>{
    return Array.from(new Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型
}

或者
export const changeReArr=(arr)=>{
    return [...new Set([1,2,2,3,5,4,5])]//利用...扩展运算符将set中的值遍历出来重新定义一个数组,...是利用for...of遍历的
}

Array.from可以把带有lenght属性类似数组的对象转换为数组,也可以把字符串等可以遍历的对象转换为数组,它接收2个参数,转换对象与回调函数,...和Array.from都是ES6的方法

2.3 纯数组排序

常见有冒泡和选择,这里我写一下利用sort排序

 export const orderArr=(arr)=>{
        arr.sort((a,b)=>{
            return a-b //将arr升序排列,如果是倒序return -(a-b)
        })
    }

2.4 数组对象排序

export const orderArr=(arr)=>{
        arr.sort((a,b)=>{
            let value1 = a[property];
            let value2 = b[property];
            return value1 - value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用
            //来接收对象属性名,其他部分代码与正常使用sort方法相同
        })
    }      
    

2.5 数组中的最大值

export const maxArr=(arr)=>{
    return Math.max(...arr)
 }
 
 或者export const maxArr=(arr)=>{
    return Math.max.apply(null,arr)
 }

2.6 数组的"短路运算"every和some

数组短路运算这个名字是我自己加的,因为一般有这样一种需求,一个数组里面某个或者全部满足条件,就返回true

情况一:全部满足

    export const allTrueArr=(arrs)=>{
          return arr.every((arr)=>{
             return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
          })  
    }

情况二:有一个满足
export default const OneTrueArr=(arrs)=>{
      return arr.some((arr)=>{
         return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
      })  
}

以上两种情景就和||和&&的短路运算很相似,所以我就起了一个名字叫短路运算,当然两种情况都可以通过遍历去判断每一项然后用break和return false 结束循环和函数.

2.7 数组过滤filter和处理map方法

filter:过滤满足某一条件的数组值,并返回新数组

export const filterArr = (arr, operator, judgeVal) => {
      return arr.filter(item => {
        if (operator == '>') {
          return item > judgeVal;
        } else if (operator == '<') {
          return item > judgeVal;
        } else if (operator == '==') {
          return item == judgeVal;
        }
      })
    }

map:对数组进行处理返回一个新数组

export const mapArr = (arr) => {
  return arr.map(item => item + 10;)//箭头函数的{}如果省略,则会默认返回,不用写return
 }

2.8将多维数组转化为一维的类

Array.prototype.flat = function() {
    var arr = [];
    this.forEach((item,idx) => {
        if(Array.isArray(item)) {
            arr = arr.concat(item.flat()); //递归去处理数组元素
        } else {
            arr.push(item)   //非数组直接push进去
        }
    })
    return arr;   //递归出口
}
测试用例:
arr = [[2],[[2,3,[4,5,[7,8]]],[2]],3,4]
console.log(arr.flat());

3.对象

3.1 对象遍历

export const traverseObj=(obj)=>{
        for(let variable in obj){
        //For…in遍历对象包括所有继承的属性,所以如果
         //只是想使用对象本身的属性需要做一个判断
        if(obj.hasOwnProperty(variable)){
            console.log(variable,obj[variable])
        }
        }
    }
    

3.2 对象的数据属性

1.对象属性分类:数据属性和访问器属性;

2.数据属性:包含数据值的位置,可读写,包含四个特性包含四个特性:

configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true
 enumerable:表示能否通过for-in循环返回属性
 writable:表示能否修改属性的值
 value:包含该属性的数据值。默认为undefined

3.修改数据属性的默认特性,利用Object.defineProperty()

 export const modifyObjAttr=()=>{
  let person={name:'张三',age:30};
  Object.defineProperty(person,'name',{
    writable:false,
    value:'李四',
    configurable:false,//设置false就不能对该属性修改
    enumerable:false
  })
} 

3.3 对象的访问器属性

1.访问器属性的四个特性:

configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为false

 enumerable:表示能否通过for-in循环返回属性,默认为false

 Get:在读取属性时调用的函数,默认值为undefined

 Set:在写入属性时调用的函数,默认值为undefined 

2.定义:
访问器属性只能通过要通过Object.defineProperty()这个方法来定义

export const defineObjAccess=()=>{
let personAccess={
    _name:'张三',//_表示是内部属性,只能通过对象的方法修改
    editor:1
  }
  Object.defineProperty(personAccess,'name',{
    get:function(){
      return this._name;
    },
    set:function(newName){
      if(newName!==this._name){
        this._name=newName;
        this.editor++;
      }
    }
    //如果只定义了get方法则改对象只能读
  })
}
  

vue中最核心的响应式原理的核心就是通过defineProperty来劫持数据的getters和setter属性来改变数据的

3.4对象或对象数组的深度拷贝

原生方法一:

export const deepClone=function(origin,target){
    var target = target || {}; //定义target
    for(var key in origin) {  //遍历原对象
        if(origin.hasOwnProperty(key)) {
            if(Array.isArray(origin[key])) { //如果是数组
                target[key] = [];
                deepClone(origin[key],target[key]) //递归
            } else if (typeof origin[key] === 'object' && origin[key] !== null) {
                target[key] = {};
                deepClone(origin[key],target[key]) //递归
            }
            target[key] = origin[key];
        }
    }
    return target;
}

方法二:Object.assign

Object.assign(objOne,objTwo);
//该方法是一个伪深度拷贝,如果改变对象里面的数组值还是会改变被拷贝的值

方法三:JSON.stringify
let objNew=JSON.parse(JSON.stringify(obj)) ;
//可以实现深度拷贝

3.5 找出字符中出现频次最多的字符

export const findMaxStr=(str)=>>{
    let o = {};
    for (let char of str) {
      if (o[char]) { //char就是对象o的一个属性,o[char]是属性值,o[char]控制出现的次数
        o[char]++; //次数加1
      } else {
        o[char] = 1; //若第一次出现,次数记为1
      }
    }
    console.log(o); //输出的是完整的对象,记录着每一个字符及其出现的次数
    //遍历对象,找到出现次数最多的字符和次数
    let max = 0;
    let maxChar = null;
    for (let key in o) {
      if (max < o[key]) {
        max = o[key]; //max始终储存次数最大的那个
        maxChar = key; //那么对应的字符就是当前的key
      }
    }
    console.log("最多的字符是" + maxChar);
    console.log("出现的次数是" + max);
}

3.6 连续的对象数组插入其他类型

1.要求
一个对象数组objArr,类似[{type:'text',content:''},{type:'img',content:''},{type:'img',content:''},],
要求数据结构是一个type为text和type为img的项交替出现

2.算法思路:
定义一个新对象数组,比较最后一项的type是否和当前项type相等,不等则push该项
如果相等就插入另一个类型

export const alternateObj=(objChange)=>{
    let objRule = [];
    objChange.map((item, index) => {
      //判断是否有连续同类型数据
      if (!index) {
        objRule.push(item);
      } else {
        // console.log("objRule值为", objRule);
        // console.log("item值为", item);
        if (objRule[objRule.length - 1].type == item.type) {
          if (item.type == "IMG") {
            objRule.push({ type: "TEXT", content: "" }, item);
          } else {
            objRule.push({ type: "IMG", content: "" }, item);
          }
        } else {
          objRule.push(item);
        }
      }
    });
    return objRule;
  }

4.axios

4.1 axios的get方法

export const getAjax= function (getUrl,getAjaxData) {
  return axios.get(getUrl, {
    params: {
      'getAjaxDataObj1': getAjaxData.obj1,//obj1为getAjaxData的一个属性
      'getAjaxDataObj2': getAjaxData.obj2
    }
  }).then(data=>{
      //成功返回
  }).catch(err=>{
      //错误返回
  })
}

4.2 axios的post方法

export const postAjax= function (getUrl,postAjaxData) {
  return axios.post(postUrl, {
      'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性
      'postAjaxDataObj2': postAjaxData.obj2
  }).then(data=>{
      //成功返回
  }).catch(err=>{
      //错误返回
  })
}

4.3 axios的拦截器

主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为0

1.请求拦截:将当前城市信息放入请求头中

axios.interceptors.request.use(config => {
  config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get('cityCode')
  return config
}),

2.响应拦截:处理reponse的结果

axios.interceptors.response.use((response) =>{
  let data = response.data
  if(response.request.responseType === 'arraybuffer'&&!data.length){
    reponse.date=0
  }
})

5.promise

promise是一种封装未来值的易于复用的异步任务管理机制,主要解决地狱回调和控制异步的顺序

5.1 应用方法一

export const promiseDemo=()=>{
new Promise((resolve,reject)=>{
    resolve(()=>{
        let a=1;
        return ++a;
    }).then((data)=>{
        console.log(data)//data值为++a的值
    }).catch(()=>{//错误执行这个

    })
})
}

5.2 应用方法二

export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接初始化一个Promise并执行resolve方法
    console.log(data)//data值为[1,2,3]
})
}

6.文本框的判断

6.1 全部为数字

方法一(最简单):

export const judgeNum1=(num1)=>{
    if(typeof num1=='number'){
        return true;
    }else{
        return false;
    }
}

方法二:isNaN

export const judgeNum1=(num1)=>{
    if(!isNaN(num1)){
        return true;
    }else{
        return false;
    }
}

注:当num1为[](空数组)、“”(空字符串)和null会在过程中转换为数字类型的0,所以也会返回false,从而判断为数字,所以可以将用typeof将以上特殊情况剔除.

方法三:正则

export const judgeNum1=(num1)=>{
  let reg=/^[0-9]*$/
  if(!reg.test(num1)){
    console.log('num1是0-9')
  }
}

6.2 只能为数字或字母

这个用正则判断
定义一个正则:let reg=/^[0-9a-zA-Z]*$/g

6.3 只能为数字,字母和英文逗号

因为存在输入多个编号,以英文逗号分隔的情况
定义一个正则:let reg=/^[0-9a-zA-Z,]*$/g

6.4 判断输入的位数不超过16位

直接利用字符串新加的length属性来判断

export const judgeNum1=(num1)=>{
      if(num1.length>16){
        console.log('num1超过16位')
     }
 }

6.5 去掉字符左右空格

export const trimLeOrRi=(str)=>{ //删除左右两端的空格
 return str.replace(/(^s)|(s$)/g, "");
}

7. 检测是浏览器还是客户端

其实本质都是利用navigator对象的userAgent属性
export const checkIosOrAndriod=(appMethod)=>{

  let ua_ios = window.navigator.userAgent.toLowerCase().match(/lan1.0_iOS/i),
  ua_android = window.navigator.userAgent.toLowerCase().match(/RRJC3.0_Android/i),
  isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
  isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  ios_browser=
  if(ua_ios || ua_android){
    appMethod;//调用原生的方法
  }else if(isAndroid){      
    return '安卓browser访问'
  }else if(isIOS){      
    return 'ios的browser访问'
  }
},

8.数字的处理

8.1四舍五入取值

export const getFloat=(molecular,denominator,n){//molecular是分子,denominator是分母,n是保留的小数位
   let number=denominator==0?0:molecular/denominator;    
    n = n ? parseInt(n) : 0; 
    if (n <= 0) return Math.round(number); 
    number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n);
    return number;   
}  

9.客户端类型

9.1 iPhoneX,iPhoneXS

export let checkIphoneX=(function judgeIphone(){
    // iPhone X、iPhone XS
    let isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
    // iPhone XS Max
    let isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
    // iPhone XR
    let isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;
    return isIPhoneX || isIPhoneXSMax || isIPhoneXR;
})()

9.2 IOS和Android

export function checkAgent () {
    var u = navigator.userAgent,
      Agent = '';
 
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
      Agent = 'Android';
    } else if (isiOS) {
      Agent = 'IOS';
    }
    return Agent;
  }

9.3 判断是横屏

export function judgeHOrV() {
      if (window.orientation == 180 || window.orientation == 0) {
          return 'landscape'
      }
    if (window.orientation == 90 || window.orientation == -90) {
         return 'portraitScreen'
   }
  }

10.路由相关

10.1 获取?后指定 name 值

export const getQueryString=(name)=> {
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  let url = window.location.href
  let search = url.substring(url.lastIndexOf('?') + 1)
  let r = search.match(reg)
  if (r != null) return unescape(r[2])
  return null
}

结束

很开心你还能看到这里,这些类可能你现在用不到,但可以先收藏着.
大家可以一起交流,下次项目开发直接拿过去用,现在3月项目比较赶,这个真的可以提高开发效率哦!祝大家新年快乐哒.

查看原文

赞 73 收藏 247 评论 16

booder 关注了用户 · 2018-02-27

StephenTian @stephentian

NO BB,show me the code

关注 13862

booder 关注了用户 · 2018-02-27

李十三 @lishisan

知道的越多,不知道的越多。

青团社招聘:前端技术专家

简历发至邮箱:lishixuan@qtshe.com

关注 16682

booder 关注了用户 · 2018-02-27

咚子 @zi_597d64ce14187

一个前端

关注 12542

booder 关注了用户 · 2018-02-27

krun @krun

关注 11355

booder 关注了用户 · 2018-02-27

dablwow80 @dablwow80

关注 1078

booder 关注了用户 · 2018-02-27

刘宁Leo @liuningfr

法国留学的前端菜狗子,想跟大家一起成长。

关注 2891

认证与成就

  • 获得 17 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-06-16
个人主页被 405 人浏览