js
Mr航
前端开发,文武双全,勤奋好学。
展开
-
在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 · 6092 阅读 · 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 · 367 阅读 · 0 评论 -
前端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 · 419 阅读 · 0 评论 -
手写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 · 268 阅读 · 0 评论 -
前端优化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 · 541 阅读 · 0 评论 -
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 · 831 阅读 · 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 · 795 阅读 · 0 评论 -
老虎机
页面:<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 · 276 阅读 · 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 · 118 阅读 · 0 评论 -
基于策略模式---form表单验证
第一步:封装class Check { constructor() { this.check = []; /**** * 内置常用的校验规则 * @type {{minLength(*=, *, *): (*|undefined), isPhone(*=, *): (*|undefined), isEmpty(*, *): (*|undefined)}...原创 2019-12-16 09:17:01 · 179 阅读 · 0 评论 -
解决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 · 818 阅读 · 0 评论 -
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 · 314 阅读 · 0 评论 -
拦截浏览器路由的方法---拦截history
// 拦截history的方法,因为pushState和replaceState方法并不会触发onpopstate事件, const originalPushState = window.history.pushState; const originalReplaceState = window.history.replaceState; window.his...原创 2019-11-21 09:07:44 · 1170 阅读 · 0 评论 -
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 · 4563 阅读 · 0 评论 -
vue实现异步组件加载带loadng
// 实现loading效果import Loading from '@/components/Loading'const loadable = (asyncFunction) => { const component = () => ({ component: asyncFunction(), loading: Loading }) // 最终要返...原创 2019-11-12 09:27:41 · 881 阅读 · 0 评论 -
基于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 · 215 阅读 · 0 评论 -
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 · 494 阅读 · 0 评论 -
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 · 1907 阅读 · 0 评论 -
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 · 1255 阅读 · 1 评论 -
解决在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 · 5795 阅读 · 0 评论 -
webpack解读3(webpack.config)
/* * 公共文件的配置,多个文件可以引用 * */// nodejs 中的path模块var path = require('path')//引入公共配置文件var config = require('../config/index')//引入小工具var utils = require('../config/utils')//引入webpackvar webpack =原创 2018-01-15 22:01:35 · 275 阅读 · 0 评论 -
理解新的jsAPI:Channel Messaging
//Channel Messaging API的Channel Messaging接口允许我们创建一个新的消息通道, //并通过它的两个MessagePort 属性发送数据。 // 此特性在 Web Worker 中可用。 //而且Channel Messaging是异步的 console.log(1); //返回带有...原创 2019-05-23 15:49:31 · 572 阅读 · 0 评论 -
利用Mutation Observer API用来监听dom的变动
//Mutation Observer API用来监听dom的变动。dom变动之后立即触发相应的事件、 //dom触发之后不会立即执行,需要等到所有的dom元素更新后才会执行回调函数 //而且只会触发一次 /** * * @type {MutationObserver} 实例的回调函数 *...原创 2019-05-23 15:31:57 · 348 阅读 · 0 评论 -
js事件循环机制=>微任务与宏任务
// 宏任务 (第一次代码执行的环境 script标签 setTimeout ui渲染) 微任务:promise process.nextTick// 单线程(主线程) 工作线程 webworker 辅助线程//js执行机制 =》事件循环机制//js异步分为两部分,一是宏任务(setTimeout,script, ui渲染),二是微任务(promise,process.nextTick)...原创 2019-05-22 20:22:13 · 531 阅读 · 0 评论 -
const定义对象属性可以改变,但是常量无法改变,是为什么呢?
const指针指向的地址不可以改变,指向地址的内容是可以改变的。因为const只是保证对象的指针不改变,而对象的内容改变不会影响到指针的改变,所以对象的属性内容是可以修改的。1、修改对象的属性值是允许的2、修改常量的值会报错...原创 2019-05-17 11:45:25 · 4365 阅读 · 0 评论 -
深入源码理解promise
function resolvePromise(promise2, x, resolve, reject) { //判断x的类型,来处理promise是成功还是失败 //所有的promise都遵循这个规范,不同的人写的promise可能会混用 //尽量考虑周全,要考虑别人promise可能出错的情况 if(promise2 === x){ return rejec...原创 2019-05-13 13:02:37 · 239 阅读 · 0 评论 -
手写实现一个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 · 2418 阅读 · 4 评论 -
节流的原理
节流使用的场景:将减少一段时间内触发的频率。可以将一些事件降低触发频率。比如懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费资源;另外还有做商品预览图的放大镜效果时,不必每次鼠标移动都计算位置。<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <met...原创 2019-05-16 15:36:50 · 2220 阅读 · 1 评论 -
防抖的原理
防抖的使用场景: 将一段时间内连续的多次触发转化为一次触发。 例如:一般可以使用在用户输入停止一段时间过后再去获取数据,而不是每次输入都去获取<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charset="utf-8"> <meta ...原创 2019-05-16 11:51:45 · 2431 阅读 · 0 评论 -
实现对象深度拷贝
//实现深度克隆对象 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 · 241 阅读 · 0 评论 -
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 · 297 阅读 · 0 评论 -
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 · 285 阅读 · 0 评论 -
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 · 373 阅读 · 0 评论 -
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 · 217 阅读 · 0 评论 -
手写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 · 333 阅读 · 0 评论 -
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 · 528 阅读 · 0 评论 -
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 · 387 阅读 · 0 评论 -
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 · 669 阅读 · 0 评论 -
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 · 519 阅读 · 0 评论 -
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 · 775 阅读 · 0 评论