MrSuperPorter-优快云博客

原创在vue项目中使用webp图片心得

1、首先要自己生成webp图片const webp=require('webp-converter');var fs = require('fs');var path = require('path');//解析需要遍历的文件夹，我这以E盘根目录为例//调用文件遍历方法fileDisplay('./webp');/** * 文件遍历方法 * @param filePath 需要遍历的文件路径 */function fileDisplay(filePath){ //根

2020-08-30 19:02:15 6487 1

原创手写原生ajax

app.Ajax = function (options) { var XHR = function (options) { var params = { methods: "GET", url : "", timeout: 3000, success: undefined, err ...

2020-04-11 18:48:38 407

原创前端cdn选址

1、2、3、4、/*** * 原生promise * @param promise2 * @param x * @param resole * @param reject * @returns {*} */function resolvePromise(promise2, x, resole, reject) { if (promise2 === ...

2020-04-11 18:44:52 462

原创手写es5版的promise

function resolvePromise(promise2,x,resole,reject) { if (promise2 === x) { try { //return reject(new Error("循环引用")); }catch (e) { return reject("循环引用"); } }...

2020-04-11 18:39:46 324

原创前端优化http请求，使用axios如何取消重复请求

const axios = require('axios');const qs = require('qs');import store from "./store"class Http { constructor() { // 请求的基础路径 this.baseURL =""; // 超时时间 this.timeout = 6000; ...

2020-03-11 08:31:35 607

原创 swiper、animate.css在react中开发fullpage页面

import React,{Component} from 'react';import './App.css';import Swiper from "swiper"import SwiperAnimation from '@cycjimmy/swiper-animation';import "animate.css/animate.min.css";export default ...

2020-02-16 18:42:47 886 1

原创 h5移动端上下布局

<template> <div class="home" id="home"> <div class="header">头部</div> <div class="content"> <div class="nav">导航</div> <div class="ban...

2020-01-30 00:04:30 838

原创老虎机

页面：<template> <div class="m-ui-tiger"> <div class="item"> <ul class="roller"> <li v-for="item in list1" :key="item.key"> <img :src="it...

2020-01-16 08:56:17 308 1

原创无缝滚动

<template> <div class="box"> <div class="scroll-wrap"> <ul class="scroll-content" :style="style"> <li v-for="item in prizeList">{{item.name}}</li ...

2020-01-15 09:42:02 148

原创基于策略模式---form表单验证

第一步：封装class Check { constructor() { this.check = []; /**** * 内置常用的校验规则 * @type {{minLength(*=, *, *): (*|undefined), isPhone(*=, *): (*|undefined), isEmpty(*, *): (*|undefined)}...

2019-12-16 09:17:01 214

原创解决ios解析new Date 时间出错方法

解决方法1:new Date("2018-06-14 00:00:00".replace(/-/g,'/')).getTime()解决方法2:new Date("2018/06/14 00:00:00").getTime()若按照正常写法new Date("2018-06-14 00:00:00").getTime();ios中显示NaN,若按照new Date('2018',...

2019-11-29 15:06:36 860

原创 vue-hooks取消上一次请求

// 根路由相关的hook 钩子全局钩子import store from '@/vuex/store';import * as types from '@/vuex/actions-type'export default { // 标识当前的hook的作用 cancelToken: (to, from, next) => { console.log("进行")...

2019-11-26 09:42:41 359

原创拦截浏览器路由的方法---拦截history

// 拦截history的方法，因为pushState和replaceState方法并不会触发onpopstate事件， const originalPushState = window.history.pushState; const originalReplaceState = window.history.replaceState; window.his...

2019-11-21 09:07:44 1231

原创如何优雅的在css中使用webp

less/* 通过这个函数来引入图片，例如： #wrapper{ @include bg('../img/sample.jpg') } 这段代码经过编译后便会生成如下两句代码 #wrapper{ background-image:url('../img/sample.jpg'); } .webp #wrapper{ background-image:ur...

2019-11-19 21:23:01 1804

原创 Filename和chunkFilename的区别

Output：有两个配置filename和chunkFilenameFilename：打包同步代码chunkFilename：打包异步代码配置如下：1、filename:'js/[name].[hash].js':Hash:是根据整个项目来构建,项目构建使用同一个hash，任何文件改动，所有hash都会改变2、filename:'js/[name].[chu...

2019-11-19 07:57:11 4642

原创 vue实现异步组件加载带loadng

// 实现loading效果import Loading from '@/components/Loading'const loadable = (asyncFunction) => { const component = () => ({ component: asyncFunction(), loading: Loading }) // 最终要返...

2019-11-12 09:27:41 922

原创基于axios封装ajax

import axios from "axios";import store from '@/vuex/store';import * as types from '@/vuex/actions-type'class AjaxRequest { constructor() { this.baseURL = "http://allad.huduo.tech/cms/v1"; //...

2019-11-12 09:25:08 246

原创 vue-cli最新配置

const path = require("path");const webpack = require("webpack");var MiniCssExtractPlugin = require('mini-css-extract-plugin')var WebpackMd5Hash = require('webpack-md...

2019-11-11 09:39:53 529

原创 webpack打包会根据webp-loader生成webp格式图片

/*** * create by porter * 这个loader已经包含了url-loader file-loader * webp的 * 参数：options{ * name:[name].[hash].[ext] 不传则默认使用hash 这个是url|file|webp * preset 文件类型 default，photo，picture，drawing，icon和...

2019-11-11 09:39:09 1961

原创 vue指令自动判断是否支持webp,然后自动更换图片

directives: { webp: { bind: (el,vnode) => { //先判断浏览器是否支持webp let isWebp = false; let elem = document.createElement("canvas"); if (!!(elem.getContext &&...

2019-11-11 09:37:33 1353 1

原创 input使用自动输入autofill的时候，修改背景颜色

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ededed !important; //字体颜色 -webkit-box-shadow: 0 0 0px 1000px transparent inset !imp...

2019-10-23 16:01:14 1285

原创解决在vue引入iframe 高度不自适应的问题

class Iframe { constructor(options) { this.$el = document.createElement('IFRAME'); this.$options = options; this.$target = options.target ? document.getElementById(options...

2019-10-20 16:20:21 5921

原创 react源码实现解析

1、通常我们写react代码的时候，都是以React.createClass()或者React.Component的形式创建我们的组件，但是经过webpack的babel编译之后，它默认被转换成为React.createElement（）这个方法，然后经过React.render的进一步处理；例如 React.createElement('ul',{id:'new',style: {font...

2019-07-24 10:10:55 259

原创手写webpack简化版源码

1、webpack配置let path = require("path");//定义的插件class A { //apply是固定的格式 apply(compiler) { //挂上每个钩子等待触发 compiler.hooks.parse.tap("xxx", function () { console.log(...

2019-07-11 16:22:35 364

原创 webpack配置loader的三种方式

let path = require("path");let HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = { mode:"development", entry: "./src/index.js", output: { filename:"bundle.js"...

2019-07-11 16:03:00 583

原创 webpack手写loader ---- style-loader

let loaderUtils = require("loader-utils");//style-loader是接收less-loader过来的内容进行解析function loader(source) { //组装成style格式的css let style = (` let style = document.createElement("style");...

2019-07-11 16:00:25 429

原创 webpack手写loader ---- less-loader--- 将less转成css

//引入less插件let less = require("less");//less-loader是负责编译css文件，style-loader是负责把css插入到head中function loader(source) { //添加异步 let cb = this.async(); //this.resource 文件的地址 //调用render将les...

2019-07-11 15:58:00 711

原创 webpack手写loader ---- url-loader --- 主要讲img转为base64

//获取参数的工具箱let loaderUtils = require("loader-utils");//获取文件标识let mime = require("mime");function loader(source) { //获取参数 let options = loaderUtils.getOptions(this); //获取图片的类型 const...

2019-07-11 15:55:28 554

原创 webpack手写loader -----file-loader--给我们的代码添加标识

//file-loader只是对文件进行复制移动到固定目录loaderUtils = require("loader-utils");function loader(source) { //interpolateName获取文件的hash值，并插入值,生成唯一的文件名 let name = loaderUtils.interpolateName(this, "[hash:8...

2019-07-11 15:51:00 812

原创 webpack手写loader ---- exact-loader css提取loader

//这个loader的作用是把css文件单独放置到一个文件中，然后通过页面中的link标签去引入function loader(source) { //发射或者输入一个文件，这个文件的内容就是css文件的内容 this.emitFile("main.css", source); //通过页面中的link标签去引入 let style = ` le...

2019-07-11 15:49:48 119

原创 webpack手写loader ----css-loader

function loader(source) { let reg = /url$(.+?)$/g; let current; let pos = 0; let arr = [`let lists = [];`]; while (current = reg.exec(source)) { let [matchUrl, p] = curr...

2019-07-11 15:47:13 412

原创 webpack手写loader -----banner-loader--给我们的代码添加标识

//这个插件可以获取传入optionlet loaderUtils = require("loader-utils");//检验工具let validateOptions = require("schema-utils");//fs操作文件let fs = require("fs");function loader(source) { //添加异步 let cb = ...

2019-07-11 15:46:28 321

原创 webpack手写loader -----babel-loader

//这个插件可以获取传入option let loaderUtils = require("loader-utils");//babel/core 有transform可以转代码成为ast抽象语法树let babel = require("@babel/core");function loader(source) { //source是文件的内容 let cb = thi...

2019-07-11 15:42:07 333

原创理解新的jsAPI：Channel Messaging

//Channel Messaging API的Channel Messaging接口允许我们创建一个新的消息通道， //并通过它的两个MessagePort 属性发送数据。 // 此特性在 Web Worker 中可用。 //而且Channel Messaging是异步的 console.log(1); //返回带有...

2019-05-23 15:49:31 610

原创利用Mutation Observer API用来监听dom的变动

//Mutation Observer API用来监听dom的变动。dom变动之后立即触发相应的事件、 //dom触发之后不会立即执行，需要等到所有的dom元素更新后才会执行回调函数 //而且只会触发一次 /** * * @type {MutationObserver} 实例的回调函数 *...

2019-05-23 15:31:57 384

原创 js事件循环机制=>微任务与宏任务

// 宏任务 (第一次代码执行的环境 script标签 setTimeout ui渲染) 微任务:promise process.nextTick// 单线程（主线程）工作线程 webworker 辅助线程//js执行机制 =》事件循环机制//js异步分为两部分，一是宏任务(setTimeout,script, ui渲染)，二是微任务（promise,process.nextTick）...

2019-05-22 20:22:13 556

原创手写实现一个reduce的源码

/** * * @param callback 为传入的回调函数 * @param prev 为初始值 */Array.prototype.reduce = function (callback,prev) { //遍历this 数组 for (let i = 0; i < this.length; i++) { //判断有没有设置初始值 ...

2019-05-22 11:05:22 2490 4

原创实现对象深度拷贝

//实现深度克隆对象 let obj = {name:{age:55}}; obj.a = obj; function deepClone(obj,hash=new WeakMap()) { //如果为null if(obj === null) return obj; //如果是正则 if(obj instanceof RegExp) ...

2019-05-20 22:20:25 262

原创 const定义对象属性可以改变，但是常量无法改变，是为什么呢？

const指针指向的地址不可以改变，指向地址的内容是可以改变的。因为const只是保证对象的指针不改变，而对象的内容改变不会影响到指针的改变，所以对象的属性内容是可以修改的。1、修改对象的属性值是允许的2、修改常量的值会报错...

2019-05-17 11:45:25 4442

原创节流的原理

节流使用的场景：将减少一段时间内触发的频率。可以将一些事件降低触发频率。比如懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费资源；另外还有做商品预览图的放大镜效果时，不必每次鼠标移动都计算位置。<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <met...

2019-05-16 15:36:50 2279 1

webp.rar 自动化转图片

空空如也