qq_33203555-CSDN博客

一、需求在一些大屏项目中，需要使用到表格行数据滚动。本文介绍在vue项目中使用动画实现滚动表格。vue代码如下<template> <div style="cursor: default;margin:9px 10px 18px"> <div class="table-header table-row"> <div class="table-cell" style="width: 25%">计划名称</div>

2022-02-21 15:24:06 1104

原创 npm包发布

本文介绍npm包发布流程注册npm账号https://www.npmjs.com/账号注册地址使用注册的账号登录进入到项目目录执行npm login输入用户名密码以及邮箱发布npm包npm publish执行以上命令即可将项目目录下的文件以npm包的形式发到npm上更新版本npm version 1.0.1使用npm version 命令更新版本然后再npm publish 即可发布完成之后即可使用npm install 命令进行安装...

2021-07-22 16:54:19 114

原创小型脚手架工具搭建

开发一个脚手架工具本文介绍开发一个脚手架流程。实现类似vue-cli的初始化项目的功能初始化项目执行npm init初始化一个项目安装依赖包包名用途chalk控制台输出显示，比如加颜色啥的commander命令行工具，有了它我们就可以读取命令行命令，知道用户想要做什么了inquirer交互式命令行工具，给用户提供一个漂亮的界面和提出问题流的方式download-git-repo下载远程模板工具，负责下载远程仓库的模板项目ora用于显

2021-07-22 16:18:33 77

原创微前端项目搭建

本文主要介绍基于single-spa的微前端项目搭建一、涉及技术及框架single-spa：连接主项目与子应用的桥梁systemjs：浏览器端异步加载模块single-spa-vue：vue子应用连接主应用插件二、主应用工程搭建vue-cli搭建vue项目vue create root-web改造root项目使用systemjs加载子应用，以下是index.html的改造<!DOCTYPE html><html lang=""> <head&g

2021-01-28 15:21:11 519 1

原创使用cancelToken取消请求

本文介绍使用cancelToken取消axios的请求使用方法import Vue from 'vue';import Axios from 'axios';import { Promise } from 'es6-promise';import user from '../store/modules/user'import server from '../config/hostConfig'Axios.defaults.timeout = 45000; // 45s// Axios.

2020-12-20 10:48:35 2807 1

原创 nodejs文件上传下载

本文分享使用nodejs实现文件上传下载文件上传主要使用express启动web服务。使用multer处理文件表达数据代码如下：var express = require('express'); //引入expressvar app = express(); // 创建实例appvar fs = require("fs"); //引入fs，fs 是node中一个文件操作模块，包括文件创建，删除，查询，读取，写入。 var bodyParser = require('body-parser

2020-07-25 17:19:23 1072

原创小程序组件开发

本文分享小程序中组件开发下面以开发一个弹框组件为例，组件支持声明式调用以及函数式调用组件模板代码<view class='dialog-component'> <view class="mask" wx:if="{{showModal}}"></view> <view class='dialog-container' wx:if="{{sho...

2019-11-26 20:22:23 439

原创 js数组去重

下面分享常用的几种JS数组去重方法1、利用indexOf或者includes判断注意：indexOf判断NaN会失效。即[NaN].indexOf(NaN) === -1为真function unique1(arr){ if (!Array.isArray(arr)) { console.log('type error!') return }...

2019-11-12 11:49:33 183

原创圣杯布局与双飞翼布局

圣杯布局与双飞翼布局实现圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个...

2019-09-21 17:17:21 291 1

原创 html2canvas与jspdf实现下载图片以及打印PDF

本文分享使用html2canvas实现绘制页面成图片。使用jspdf实现将图片打印成pdf代码如下：<template> <div class="s-receipt"> <Modal v-model="modal" class-name="s-receipt vertical-center-modal" :mask-...

2019-08-31 18:04:08 1283

原创 Hybrid App混合开发通信

混合app即外壳为原生开发，安卓或者ios。业务为H5的APP。这样的APP可以减少开发成本。也可以热更新，用户不用更新app即能使用新功能。其中混合开发涉及一个通信的问题。即业务系统需要使用一个app功能时，需要H5调用native的功能。native完成一些操作也需要通知到业务系统，即native需要调用H5。通信原理：1、native通过注入方法到window对象上让js调用，实现H5...

2019-08-30 16:49:10 767

原创 react项目打包优化

本文分享react项目的打包优化，项目使用create-react-app创建。不做任何优化时打包体积过大，首页渲染十分缓慢。使用webpack-bundle-analyzer查看打包chunck的内容，使用方式如下：yarn add webpack-bundle-analyzeryarn add cross-env在package.json配置命令"scripts": { ...

2019-08-03 16:19:09 1382

原创 vue联系人组件

本文分享一个基于bscroll封装一个类似于联系人得组件//组件代码<template> <div class="ylw-indexList-wrapper"> <div class="ywl-index-list"> <label>{{title}}</label> <input type...

2019-07-23 16:47:45 1728

原创 vue组件开发

本文介绍开发一个弹框组件//组件代码<template> <div class="yui-wrapper"> <transition name="fade"> <div class="mask" v-show="showModal"></div> </transition> <...

2019-07-10 22:13:07 176

原创 vue中使用指令限制input输入

在项目中限制输入框的输入字符是一个很常见的场景。常见做法如下：1.监听@input事件在方法中处理2.封装input组件在组件中处理如下是监听@input事件的方法<inputtype=“text”placeholder=“备注信息”class=“order_input”v-model=“review_note”maxlength=“15”@input=“vaidate...

2019-07-06 12:20:31 4139

原创 keep-Alive遇到的一个坑

在vue中，有时候我们需要缓存一个页面，这个时候会用到keep-Alive。触发场景：在引用同一个子组件得两个页面，且该子组件会使用到dom元素得时候。例如子组件<template> <div class="yd-dialog-black-mask" v-show="showMask"> <div class="layer-wraper">...

2019-06-11 10:38:33 710

原创 H5开发IOS兼容性问题

本文分享在做H5开发的时候在IOS设备上的一些兼容性问题的解决方法1、设置overflow-y时滚动区域不流畅问题-webkit-overflow-scrolling: touch;2、键盘弹起收缩后区域留白问题window.scroll(0,0)3、new Date(str)报错问题是因为低版本的safari浏览器对new Date(str)有严格校验，对于诸如2017-08-3...

2019-05-09 11:31:18 1369

原创性能优化gzip压缩

gzip压缩可以提升资源加载40%以上得性能。gzip压缩需要资源为.gz得文件。同时服务器需要设置开启gzip压缩。本文介绍webpack构建得项目中开启gzip压缩，以及nginx配置gzip。如下是开启gzip压缩前后得网页加载对比由上图可知，vendor的那个js加载时间从8.64s缩短到了4.82秒，可见gzip压缩对于性能提升的作用很大。1、webpack开启gzip压缩在...

2019-04-26 14:35:03 1109

原创图片懒加载

图片懒加载在一定程度上可以大大优化性能，增强用户体验。主要就是当图片在可视区域时再加载真实的图片，不在时用一张图片代替。具体代码如下：//节流函数用于滚动时避免多次执行加载图片函数var throttle = function(){ //获取第一个参数 var isClear = arguments[0],fn; //如果第一个参数是boolean类型那么第一个参数则...

2019-04-10 15:51:45 300

原创 ES6变量的解构赋值

ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构赋值。1.数组的解构赋值如下：let [a,b,c,d] = [1,2,3,4]a // 1b //2c //3d //4let [e, [[f], g]] = [1 , [[2], 3]];e //1f //2g // 3如果解构不成功那么变量的值就是undefinedl...

2019-04-05 16:29:49 97

原创 var ,let,const的区别

var 是ES5申明变量的方式，ES6新增了let,const来申明变量。1.1let基本用法{ let a = 10; var b = 1;}a //ReferenceError: a is not definedb // 1上面的代码在代码块中分别用 let 和 var 声明了两个变量。然后在代码块之外调用这两个变量，结果 let 声明的变量报错， var 声明的变量返回了...

2019-03-28 16:10:54 142

原创 JS相等操作符（== 和===）

”“ 和“=”运算符用于比较两个值是否相等，当然它们对相等的定义不尽相同。两个运算符允许比较任意类型的操作数，如果操作数相等则返回true，否则返回false.下面表格展示不同类型的值用相等操作符比较后的结果。类型（x）类型（y）结果nullundefinedtrueundefinednulltrue数字字符串x == toNumber(y)...

2019-03-24 14:47:06 242

原创 webpack入门

webpack介绍本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack安装使用如下命令在项目中安装webpacknpm insta...

2019-03-16 16:43:07 116

原创 docker部署nodejs项目

本文主要分享使用docker部署nodejs项目使用docker部署项目主要分为三步1.创建nodejs项目编写package.json为项目安装依赖所用{ "name": "expressPro", "version": "1.0.0", "description": "", "main": "index.js", &q

2019-03-13 22:06:53 14767 1

原创 docker入门

docker介绍Docker 是世界领先的软件容器平台。开发人员利用 Docker 可以消除协作编码时“在我的机器上可正常工作”的问题。运维人员利用Docker 可以在隔离容器中并行运行和管理应用，获得更好的计算密度。企业利用 Docker可以构建敏捷的软件交付管道，以更快的速度、更高的安全性和可靠的信誉为 Linux 和 Windows Server 应用发布新功能。Docker 属于...

2019-03-13 11:37:11 90

原创 http缓存

缓存的优点缓存减少了冗余的数据传输，节省了你的网络费用。缓存缓解了网络瓶颈的问题，不需要更多的带宽就能够快速地加载页面。缓存降低了对原始服务器的要求。服务器可以更快地响应，避免过载的出现缓存降低了距离时延，因为从较远的地方加载页面会更慢一些。http缓存类型强缓存实现强缓存可以通过两种响应头实现：Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，s...

2019-02-25 17:01:01 145

原创 http、https与http2.0

http概述超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。1960年美国人Ted Nelson构思了一种通过计算机处理文本信息的方法，并称之为超文本（hypertext）,这成为了HTTP超文本传输协议标准架构的发展根基。...

2018-12-22 16:44:24 1491

原创移动端自适应布局

在移动端比如手机，ipad等设备上浏览网页或者应用的时候，往往会因为分辨率不同而需要做一些自适应的配置才能使网页在各设备上的展现一致。本文分享一种移动端自适应布局方案。1、使用js根据设备屏幕大小设置根元素html的font-size2、元素宽度高度等使用rem原理分析以横屏750px的设计稿为例，我们要在屏幕上显示750px的设计稿。那么网页默认的font-size为16px。所以整个...

2018-12-21 11:57:39 329

原创 cookie,sessionStorage与localStorage

1. cookiecookie的设计初衷是给服务端脚本用来存储少量数据的，该数据会在每次请求一个相关URL时传递到服务器中。cookie就像服务器给用户贴的“嗨，我叫”的贴纸一样，用户访问web站点时，这个web站点就可以读取那个服务器贴在用户身上的所有贴纸。cookie的有效期和作用域cookie默认的有效期很短暂，它只能持续在web浏览器的会话期间，一旦用户关闭浏览器，cookie保存...

2018-12-20 16:55:01 217

转载 ERR_CONTENT_LENGTH_MISMATCH解决方法

2018-10-13 21:45:13 10216

原创在create-react-app创建的项目中使用decorator

本文主要介绍在create-react-app创建的项目中使用修饰器。在create-react-app创建的项目中基本上配置文件都是生成好了的。但是默认配置并不支持修饰器。所以我们在使用@修饰器的时候会报错编译不通过。此时我们需要增加一个依赖来支持修饰器语法。安装如下依赖包npm install babel-plugin-transform-decorators-legacy --save...

2018-10-09 18:16:01 1006

原创使用electron构建桌面应用

简介electron是一个使用HTML、CSS、JavaScript构建跨平台桌面应用的框架。这样的话我们就可以将一个web网页项目打包成桌面应用。初始化项目我们可以直接下载github上的electron快速上手项目git clone https://github.com/electron/electron-quick-start.git执行包安装npm install 这样我...

2018-09-29 15:43:27 486

原创 vue源码解读-dom挂载1

vue框架是一款双向数据绑定的框架，能大大提高我们的开发效率。那么vue是如何将模板生成dom的呢，通过阅读源码可以知道这一过程。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;

2018-09-18 17:24:10 601

原创 VueRouter源码浅析

路由原理前端路由原理主要是监听浏览器的url变化来达到根据不同url渲染不同页面的目的。 VueRouter主要有三种实现方式：history模式hash模式abstract模式本文主要讨论hash模式。使用先看VueRouter的构造函数var VueRouter = function VueRouter (options) { if ( options...

2018-09-10 23:13:10 784

原创 JS函数节流

简介函数节流：对重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作，以提高性能。场景当我们不希望某些业务逻辑频繁执行的时候，比如： 1.window的resize,scroll事件触发时需要执行的逻辑 2.拖拽时的mousemove事件 3.输入框的keyup，change事件等节流器如下实现一个节流器，可以避免执行重复的逻辑而只执行一次。//节流...

2018-09-06 16:49:26 344

原创 JWT简单应用

简介JSON Web Token（JWT）是一个开放标准（RFC 7519），它定义了一种紧凑且独立的方式，可以在各方之间作为JSON对象安全地传输信息。此信息可以通过数字签名进行验证和信任。JWT可以使用秘密（使用HMAC算法）或使用RSA或ECDSA的公钥/私钥对进行签名。使用场景授权：这是使用JWT的最常见方案。一旦用户登录，每个后续请求将包括JWT，允许用户访问该令牌允许的...

2018-08-20 23:12:12 238

原创 koa-session2使用

使用场景在web应用中，我们常常使用session来管理会话，用一个sessionId来表明用户已登录。session结合cookie管理会话在web应用中是很常见的。安装在koa项目中npm install koa-session2简单使用//app.jsconst Koa = require('koa')const app = new Koa()c...

2018-08-01 19:07:15 5009 1

原创 jquery的1.11以上版本clone方法报错

场景$.ajax({ url:'./apps/views/sb/fjmA_year/001/001/001_cfg.xml', type:'get', async:false, success:function(result){ console.log($(result).clone()[0]) ...

2018-07-22 21:38:59 820

空空如也

空空如也