JavaScript
关注
分享
扫一扫
虚年
邮箱475218106@qq.com
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
js数组对象，按照指定数据格式归并
原始数组const arr = [ { '颜色': 'red', '尺寸': '100', '规格': 'aaa' }, { '颜色': 'blue', '尺寸': '200', '规格': 'aaa' }]格式化后的数组const array = [ { 'specificationName': '颜色', ...原创 2020-04-23 15:11:28 · 729 阅读 · 0 评论 -
实现element el-form表单验证
<c-form :model="ruleForm" :rules="rules" ref="CForm"> <c-form-item label="用户名" prop="name"> <c-input v-model="ruleForm.name"></c-input> </c-form-item>...原创 2019-11-11 14:21:48 · 4469 阅读 · 0 评论 -
JavaScript设计模式：单例模式
单例模式：生成单例的类必须保证只有一个实例的存在，很多时候整个系统只需要拥有一个全局对象，才有利于协调系统整体的行为。示例1：弹窗基本思路：利用闭包，使函数只被执行一次<!DOCTYPE html><html lang="en"><head> <style> .dialog { position: fixed; ...原创 2019-11-03 14:54:04 · 164 阅读 · 0 评论 -
设计模式：发布/订阅模式（观察者模式）
发布/订阅模式（即观察者模式）： 设计该模式主要形成松散耦合。在这种模式中，并不是一个对象调用另一个对象的方法，而是一个订阅者对象订阅发布者对象的特定活动，并在发布者对象的状态发生改变后，订阅者对象获得通知。订阅者也称为观察者，而被观察的对象称为发布者。当发生了一个重要的事件时，发布者将会通知（调用）所有订阅者，并且可能经常以事件对象的形式传递消息。基本思路：发布者对象需要一个数组类型的属性，以...原创 2019-11-03 09:29:41 · 429 阅读 · 0 评论 -
vue element 多套主题换肤
1. 生成element皮肤1.1 下载custom-element-themegit clone https://github.com/PanJiaChen/custom-element-theme.git1.2 安装npm i element-theme -g1.3 修改element-variables.scss主颜色$--color-primary: #f81c1c !de...原创 2018-12-24 10:29:08 · 6342 阅读 · 1 评论 -
vue 组件的声明
vue 组件的声明1. 注册组件的方式全局注册局部注册// 组件注册方式1. 全局注册// Vue.component('CompOne', component)new Vue({ // 组件注册方式2. 内部注册 components: { CompOne: component }, el: '#root', template: ` ...原创 2018-04-05 13:41:35 · 2079 阅读 · 0 评论 -
vue组件 组件的继承extend
vue组件 组件的继承import Vue from 'vue'const component = { data () { return { text: 111 } }, props: { propOne: String }, mounted () { console.log('component1 mounted') },...原创 2018-04-05 16:25:52 · 11336 阅读 · 0 评论 -
v-mdoel 在组件上的运用
v-mdoel 在组件上的运用const component = { props: ['value'], template: ` <div> <input :value="value" @input="handleInput"> </div> `, methods: { handleInput (e) ...原创 2018-04-05 17:33:02 · 277 阅读 · 0 评论 -
vue 插槽slot与provide/inject跨组件传值
vue 插槽slot1. 默认插槽const component = { template: ` <div :style="style"> <slot></slot> </div> `, data () { return { style: { width: '...原创 2018-04-05 19:05:33 · 5875 阅读 · 0 评论 -
vue-router 导航守卫
1. 全局守卫router.beforeEach((to, from, next) => { console.log('before each') next()})router.beforeResolve((to, from, next) => { console.log('before resolve') next()})router.afterEac...原创 2018-04-07 09:38:22 · 1257 阅读 · 0 评论 -
vue中禁止ios浏览器页面滚动的橡皮筋效果
在iPhone浏览器上滚动页面时，页面出现了橡皮筋效果layout.vue<template> <div class="layout"> <header></header> <router-view/> <footer></footer&原创 2018-05-03 17:47:18 · 18984 阅读 · 2 评论 -
vue 原生指令
vue 原生指令1. v-bind v-bind:id缩写为:id2. v-text 数据绑定 与{{}}相似，但是没有{{}}灵活，比如实现 <div>Text: {{text}}</div> 使用v-text需要用字符串拼接 <div v-text="'Text:' + text"></d...原创 2018-04-04 09:55:53 · 446 阅读 · 0 评论 -
vue 监听器watch
vue 监听器watchnew Vue({ el: '#root', template: `<div> <div>Name: {{name}}</div> <div>Name: {{getName()}}</div> <div>FullName: {{fullName}}</div> &原创 2018-04-04 09:50:55 · 3043 阅读 · 0 评论 -
vue 计算属性computed
vue 计算属性下例中，getName方法调用可以起到与使用计算属性name相同的作用new Vue({ el: '#root', template: `<div> <div>Name: {{name}}</div> <div>Name: {{getName()}}</div> <div>Numbe...原创 2018-04-04 09:41:35 · 641 阅读 · 0 评论 -
vue 数据绑定-动态样式
vue 数据绑定-动态样式动态class名绑定的几种方式 1. 对象方式new Vue({ el: '#root', template: `<div :class="{active: isActive"></div>`, data () { return { isActive: true } }})数组内对象...原创 2018-04-04 09:33:54 · 6703 阅读 · 1 评论 -
vue 生命周期
vue 生命周期import Vue from 'vue'const app = new Vue({ el: '#root', template: '<div>{{text}}</div>', data () { return { text: 0 } }, beforeCreate () { console....原创 2018-04-02 22:13:42 · 167 阅读 · 0 评论 -
vuex modules模块
1. modules中的stateexport default () => { return new Vuex.Store({ modules: { a: { state: { text: 1 } }, b: { state: { text: 2 ...原创 2018-04-10 08:14:28 · 1396 阅读 · 1 评论 -
vuex 状态管理state、getter、mutation和action
vuex 状态管理1. state的三种用法直接获取store的statecomputed: { count () { return this.$store.state.count } }从mapState中获取computed: { ...mapState(['count'])}在mapState中定义别名comp...原创 2018-04-09 08:13:16 · 2990 阅读 · 1 评论 -
ES5 数组方法
ES5 数组方法ES5 定义了九个新的数组方法来遍历、映射、过滤、简化和搜索数组。1.forEach()forEach()方法从头至尾遍历数组，为每个元素调用指定的函数。三个参数：数组元素、元素的索引和数组本身。var data = [1, 2, 3, 4, 5]var sum = 0data.forEach(function(val){ sum += valu...原创 2018-03-26 09:46:05 · 1151 阅读 · 1 评论 -
JavaScript从回调地狱到async/await 发展的四个阶段
使用node8为运行环境； 代码实例，是读取package.json文件为例；第一阶段 回调函数const fs = require('fs')function readFile(cb) { fs.readFile('./package.json', (err, data) => { if (err) { cb(err) } cb(nul...原创 2018-03-06 08:45:11 · 605 阅读 · 0 评论 -
ES6数组方法ES5实现、节流防抖
joinArray.prototype.join = function(arg) { let result = this[0] || '' const length = this.length for (let i = 0; i< length; i++) { result += arg + this[i] } return resu...原创 2018-09-29 19:06:05 · 2763 阅读 · 0 评论 -
子组件改变父组件的值
子组件改变父组件的值，会报错。其实是采用单向数据流，子组件不能直接改变父组件的值，是以单向数据流的方式流转数据。可以采用以下两种减少代码量的方式改变父组件的值（忽略on和emit事件方式）。方法一：:xx.sync 和 $emit(‘update:xx’)Vue.component('child', { props: ['selected'], template: ` ...原创 2018-10-08 20:23:42 · 888 阅读 · 0 评论 -
ES6模板字符串replace实现
ES6模板字符串const obj = { name: 'zj', age: 18}const str = `我的名字叫${obj.name}，今年${obj.age}岁`console.log(str)模板字符串replace实现function replace(desc) { return desc.replace(/\$\{([^}]+)\}/, function ...原创 2018-11-08 18:26:06 · 9486 阅读 · 0 评论 -
koa 获取3种请求参数方式
地址query地址localhost:4000/users?q=1ctx.query// { q: 1 }获取router params路由localhost:4000/users/:id地址localhost:4000/users/1ctx.params// { id: 1}请求体body地址localhost:4000/users，content-type为a...原创 2019-08-18 10:09:49 · 2472 阅读 · 1 评论 -
HTTP options 作用是什么
HTTP options 作用是什么？检查服务器所支持的请求方法CORS 中的预检请求koa-router中allowMethods的作用响应options方法，告诉它所支持的请求方法请求OPTIONS方法返回404，koa中，添加app.use(userRouter.allowedMethods())，OPTIONS请求返回状态码200，请求头会返回允许的请求方法Allow →H...原创 2019-08-18 08:48:37 · 1198 阅读 · 0 评论 -
koa 错误处理中间件 koa-json-error
在写接口时，返回json格式且易读的错误提示是有必要的，koa-json-error中间件帮我们做到了安装使用koa-json-errornpm i koa-json-error -Sconst error = require('koa-json-error')`app.use(error({ postFormat: (e, { stack, ...rest }) => proc...原创 2019-08-20 09:09:00 · 2433 阅读 · 0 评论 -
JWT知识点以及在koa中的使用（jsonwebtoken，koa-jwt）
1. 什么是JWTJSON Web Token 是一个开放标准（RFC 7519）定义了一种紧凑且独立的方式，可以将各方之间的信息作为JSON对象进行安全传输该信息可以验证和信任，因为是经过数字签名的2. JWT构成'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiemoiLCJpYXQiOjE1NjY1Mjc1ODB9.zp0xQb...原创 2019-08-23 16:34:34 · 1095 阅读 · 0 评论 -
重新认识函数对象
函数对象function foo(a, b) { return a * b}1. length属性foo.length// 2参数个数为22. constructor属性foo.constructor) // [Function: Function]constructor属性，引用的是Function()这个构造器函数3.arguments对象function f(...原创 2019-07-27 17:57:32 · 148 阅读 · 0 评论 -
设计模式-观察者模式
观察者模式，也称发布-订阅模式，是一种行为型模式，主要用于处理不同对象之间的交互通信问题。观察者模式中通常会包含两类对象一个或多个发布者对象：当有重要的事情发生时，会通知订阅者一个或多个订阅者对象：它们追随一个或多个发布者，监听它们的通知，并作出相应的反应。通常来说，观察者模式可以分为两类：推送和拉动。推送模式是由发布者负责将消息通知给各个订阅者。拉动模式则要求订阅者主动跟踪发布者的状...原创 2019-07-27 17:56:40 · 187 阅读 · 1 评论 -
Vue SSR Nuxt 初探
1. 准备Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。1.1 初始化项目npx create-nuxt-app nuxt-demo> Generating Nuxt.js project in xx/code/nuxt-demo? Project name nuxt-demo?...原创 2019-05-06 16:16:40 · 768 阅读 · 0 评论 -
Leecode [数组] (3) 电话号码的字母组合
原题：17. 电话号码的字母组合给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。示例:输入："23"输出：["ad", "ae", "af", "bd", "be", "bf", "cd", "ce", "cf"原创 2019-02-20 15:29:38 · 193 阅读 · 0 评论 -
Leecode [排序] (7) 按奇偶排序数组
原题： 922. 按奇偶排序数组II给定一个非负整数数组 A， A 中一半整数是奇数，一半整数是偶数。对数组进行排序，以便当 A[i] 为奇数时，i 也是奇数；当 A[i] 为偶数时， i 也是偶数。你可以返回任何满足上述条件的数组作为答案。示例：输入：[4,2,5,7]输出：[4,5,2,7]解释：[4,7,2,5]，[2,5,4,7]，[2,7,4,5] 也会被接受。提示：...原创 2019-02-25 16:44:08 · 238 阅读 · 0 评论 -
Leecode [排序] (6) 冒泡排序
原题 75. 颜色分类给定一个包含红色、白色和蓝色，一共 n 个元素的数组，原地对它们进行排序，使得相同颜色的元素相邻，并按照红色、白色、蓝色顺序排列。此题中，我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。注意:不能使用代码库中的排序函数来解决这道题。示例:输入: [2,0,2,1,1,0]输出: [0,0,1,1,2,2]进阶：一个直观的解决方案是使用计数排序的...原创 2019-02-25 16:34:23 · 233 阅读 · 0 评论 -
Leecode [字符串] (2) 计数二进制子串
原题：696. 计数二进制子串给定一个字符串 s，计算具有相同数量0和1的非空(连续)子字符串的数量，并且这些子字符串中的所有0和所有1都是组合在一起的。重复出现的子串要计算它们出现的次数。示例 1 :输入: "00110011"输出: 6解释: 有6个子串具有相同数量的连续1和0：“0011”，“01”，“1100”，“10”，“0011” 和 “01”。请注意，一些重复出现的子...原创 2019-02-20 10:24:25 · 264 阅读 · 0 评论 -
LeecCode [字符串] (1) 反转字符串中的单词
原题：557. 反转字符串中的单词 III给定一个字符串，你需要反转字符串中每个单词的字符顺序，同时仍保留空格和单词的初始顺序。示例 1:输入: "Let's take LeetCode contest"输出: "s'teL ekat edoCteeL tsetnoc" 注意：在字符串中，每个单词由单个空格分隔，并且字符串中不会有任何额外的空格。JavaScript示例/**...原创 2019-02-19 15:57:36 · 196 阅读 · 0 评论 -
Leecode [正则] (5) 重复说的子字符串
原题 459. 重复的子字符串给定一个非空的字符串，判断它是否可以由它的一个子串重复多次构成。给定的字符串只含有小写英文字母，并且长度不超过10000。示例 1:输入: "abab"输出: True解释: 可由子字符串 "ab" 重复两次构成。示例 2:输入: "aba"输出: False示例 3:输入: "abcabcabcabc"输出: True解释: 可由子字符串...原创 2019-02-23 15:19:28 · 279 阅读 · 0 评论 -
Leecode [数组] (4) 格雷编码
原题 89. 格雷编码格雷编码是一个二进制数字系统，在该系统中，两个连续的数值仅有一个位数的差异。给定一个代表编码总位数的非负整数 n，打印其格雷编码序列。格雷编码序列必须以 0 开头。示例 1:输入: 2输出: [0,1,3,2]解释:00 - 001 - 111 - 310 - 2对于给定的 n，其格雷编码序列并不唯一。例如，[0,2,3,1] 也是一个有效的格雷编码...原创 2019-02-22 11:01:18 · 178 阅读 · 0 评论 -
ES6 reduce的实现
reduce 方法对累计器和数组中的每个元素（从左到右）应用一个函数，将其简化为单个值。reducer 函数接收4个参数:Accumulator (acc) (累计器)Current Value (cur) (当前值)Current Index (idx) (当前索引)Source Array (src) (源数组)有默认参数const arr =...原创 2018-11-08 19:33:14 · 1691 阅读 · 1 评论 -
Node.js事件循环
Node.js事件循环 ┌───────────────────────┐ ┌─>│ timers │ │ └──────────┬────────────┘ │ ┌──────────┴────────────┐ │ │ I/O callbacks │ │ └──────────┬────────────┘ ...原创 2018-03-12 09:25:21 · 178 阅读 · 0 评论 -
react-事件绑定
事件onClick点击事件JSX中，onClick={this.函数名}来绑定事件this引用的问题，组件使用ES6写法，需要在构造函数里用bind绑定this，或用箭头函数改变this的三种方法1.通过箭头函数onClick={()=>this.addName()}2.使用bind绑定this到当前类中onClick={this.addName.原创 2017-12-09 12:45:17 · 554 阅读 · 0 评论