![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 78
朝着大前端冲鸭
欢迎大家访问本人其他平台:github--->woshiitdaniu
展开
-
vue异步加载的简单试验
网络上关于vue的优化手段非常多,有些有效有些就一般般了,习惯了ctrl+c/v拿来主义的人来说,直接照搬过项目就好了,然而这些优化手段是不是都用上才会秒开呢?或者说也许我们只要一个就好?因为优化的目的就是为了减少项目体积,增强体验的。下面利用工作之余 我做了些优化手段的简单对比,也让新手们知道怎么去做简单的对比试验来检验自己的优化效果。注明:以下测试都是本地、wifi环境 实际生产环境优化效果会更明显!!路由的异步加载项目代码通过使用webpack提供的import方法可以让对应的.原创 2021-12-18 13:17:53 · 896 阅读 · 0 评论 -
记一个简单react自定义hooks的迭代历程
好久没有写过博文做分享了,之前觉得能在论坛上发表自己观点的都是大牛级别的才会在上面晒出自己的代码和想法,后来发现其实不然,我觉得论坛上就是汇聚了一群热爱编程热爱生活的同行,偶然发点有趣话题,一起用代码或者算法的角度去玩玩也挺有趣的。不知道大家是如何去带自己的组员,尤其是刚出校门不久的小学弟快乐编码呢?今天就遇见一个很有普适性的事情,值得跟大家分享分享的。事情是这样,产品经理从用户那获得了一个需求,与其说是需求,倒不如说是吐槽。用户说以前的系统长table的表头都是可以固定的,这样我滚原创 2021-11-24 22:07:18 · 432 阅读 · 0 评论 -
阅读element-radio有感
radio.vue<template><!--label用于控制位置和公共样式的--><labelclass="el-radio":class="[border&&radioSize?'el-radio--'+radioSize:'',{'is-disabled':isDisabled},{'is-focus':focus},...原创 2021-06-22 20:22:24 · 144 阅读 · 0 评论 -
vuex是怎么工作的
vuex插件是vue全家桶中十分重要的一款插件,它的作用是沟通各个组件通信的桥梁,通过定义state状态,所有组件都可以通过this.$store.getter或者是mapState来获得状态,也可以通过this.$store.commit来改变状态,那么它是如果开始的?又是如何做到所有组件共享状态的?为什么状态变了其他组件也能立即感知并重新渲染?下面就让我们带着问题一步步去揭开这些神秘的面纱吧首先我们看看插件的源码结构然后再看看我们是如何使用它的Vue main.js...原创 2021-06-22 20:15:17 · 148 阅读 · 1 评论 -
vue-diff的鼻祖snabbdom patch函数源码
import{Module}from"./modules/module";import{vnode,VNode}from"./vnode";import*asisfrom"./is";import{htmlDomApi,DOMAPI}from"./htmldomapi";typeNonUndefined<T>=Textendsundefined?never:T;functionisUndef(s:a...原创 2021-06-06 22:59:30 · 176 阅读 · 1 评论 -
欢迎大家npm i echarts-json
![echart-json](https://img2.baidu.com/it/u=3355464299,584008140&fm=26&fmt=auto&gp=0.jpg)##echart-json是什么?![8ab85def98394a16ab77e8c2840c4823.png](en-resource://database/499:1)##echart-json有哪些功能或特点?*非常方便的在项目中`引入`*npminst...原创 2021-04-10 23:11:41 · 247 阅读 · 1 评论 -
原生实现图片裁剪和导出
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.big-box{width:500px;height:500px;position:rel...原创 2020-12-09 21:22:07 · 358 阅读 · 0 评论 -
巧妙解决js超大数字相加问题
我们知道在Js中,超过一定位数的数字会以科学计数法的方式呈现,然后这样的话会造成我们无法在进行一些常规的计算和显示,那么我们应该如何处理这种超大数字的运算呢?这里我提供一个加法的思路,非常简单,也非常易懂,废话不多说,直接上代码。//利用补齐法来解决js超大数字之间相加的问题 let a = '123456444565456' let b = '121231456' let c = '000000121231456' ...原创 2020-11-05 22:27:25 · 4043 阅读 · 2 评论 -
将真实dom保存到内存中,将内存中的vnode变成真实dom
<div id="demo" class="test"> <p>你好javascript</p> <ul> <li>{{name}}</li> </ul> </div> <script type="text/javascript"> ...翻译 2020-07-18 16:22:37 · 399 阅读 · 0 评论 -
微信小程序电商常用滚动套路
<template> <view style="height: 100vh;background: #C7C7C7;"> <!-- 顶部tab导航部分 1.scroll-into-view="{{showView}}" 这里需要借助这个属性来指定显示tab 2.scroll-left="{{navScrollLeft}}" 借助left来使scroll能让遮盖的tab动画显出 -->...原创 2020-06-17 21:59:07 · 294 阅读 · 0 评论 -
纯js实现的图片查看组件
HTML部分:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片组件</title> <link rel="stylesheet" type="text/css" href="index....原创 2019-12-13 16:14:41 · 837 阅读 · 0 评论 -
IE兼容6,7,8版本盒子阴影写法
<html> <head> <meta charset="UTF-8" /> <style type="text/css"> .wrap { position: relative; }...原创 2019-11-11 17:21:35 · 175 阅读 · 0 评论 -
Vue的源码解析
https://www.cnblogs.com/libin-1/p/6845669.html 参考vue虚拟DOM 的底层 使用了DomcumentFragment api 先创建一个内存池 将真实dom放进该内存池中 然后统一修改后再将节点通过appendchild()方法放回真实dom中具体请参考本人github项目https://github.com/w...原创 2019-03-09 20:09:05 · 328 阅读 · 0 评论 -
Mysql优化诀窍--分表技术
当一个表的数据达到了上千万或者是上亿条记录时 查询起来就非常费时,那么我们就需要拆分该表 以便增加运行效率那我们如何进行分表呢?分表sql语句:insert into table1 values(字段1,字段2...) from select * from table2 当然可以使用存储过程和方法三 将图片和视频放在图片或视频服务器上最大连接数 可...原创 2019-05-09 09:58:32 · 117 阅读 · 0 评论 -
Mysql优化诀窍-定时维护(定时任务案例 定时发送邮件)
mysql获取当前时间的时间戳函数unix_timestamp()利用定时任务 制作简易的定时发送邮件功能PHP脚本 版本我们利用定时任务 每隔一分钟就调用下面这段脚本 去查找出那些邮件状态为0(未发送)的数据,然后取出它的发送时间与当前时间进行比较,小于或等于当前时间就执行发送逻辑以上是模拟发送成功 并没有发送逻辑 实际开发中我们需要借助第三方邮...原创 2019-05-09 09:58:44 · 917 阅读 · 0 评论 -
Mysql优化诀窍-定时维护(定时备份)
1.我们在使用分组的时候 可以把默认排序关闭select * from stu group by name order by null;2. 我们在联表查询的时候 left join on 左连接的效率要比其他连接效率高? 有疑问3.选择正确的引擎一般的 如果是需要事务能回滚的 要高安全性的 就需要使用innoDB引擎 但是这个引擎的执行效率没有myisam高什...原创 2019-05-09 09:58:59 · 262 阅读 · 0 评论 -
Mysql优化学习-创建索引
索引分为:普通索引(index)、主键索引(primary key)、全文索引(Fulltext index)、唯一索引(unique index)如何创建主键索引/唯一索引?1.在创建表的时候创建 :create table stu( id int primary key, name varchar unique (加了unique就默认为...原创 2019-05-09 09:59:10 · 153 阅读 · 0 评论 -
vue 实现多组合复选框案例
完成效果如图:当我们点击标题全选时 指定店铺所有商品都被选中,取消时全取消当我们选择某店铺商品数量等于该店铺所有商品时,该店铺全选按钮被选中废话不多说,代码呈上 欢迎给出更好的方案实现该功能---------------------------------------------------- goods_select.vue ----------------...原创 2019-03-16 18:18:30 · 4220 阅读 · 0 评论 -
Mysql优化学习-查找慢查询语句
如何添加索引1.在表创建时加create database table1{ id primary key not null, index|keys 索引名 (id)}2.在已经创建好的表中添加create index|keys 索引名 on 表名 (字段名)3.如何使用索引 一般是用添加了索引的字段作为where的条件如:selec...原创 2019-05-09 09:59:20 · 161 阅读 · 0 评论 -
简单的移动端app适配
这个方案是结合 sass来实现的一、导入sassnpm i sass-loader node-sass --save-dev二、在入口文件上获取不同屏幕下的字体大小main.jsfunction setHtmlFontSize(){ document.documentElement.style.fontSize = document.documentElement.cl...原创 2019-03-14 20:56:16 · 404 阅读 · 0 评论 -
Vue 插槽的使用
test.vue<template> <div class="big-box"> <Parent> <Child v-for='items in 5' :key='items'> <img :src="imgUrl"/> ...原创 2019-04-02 16:50:34 · 718 阅读 · 0 评论 -
webpack简单配置
通过exclude排除掉不相关的js文件可以一定程度优化打包过程配置热更新:devServer:{hot:true}如果我们要处理jsx语法 则需要在loader中加个预设 preset以下写法仅适用webpack version4.0以下同时需要npm i webpack-preset-react -D在webpack要引入插件 需要使用到requ...原创 2018-09-01 14:22:23 · 372 阅读 · 0 评论 -
给指定的元素添加水印
let watermark = {}/*@desc:给指定的元素添加水印@params { Object }obj@params1 { String } canvasId canvas元素@params2 { String } contentId canvas父容器元素@params3 { String } canW canvas生成图标的宽度@params4 { Str...原创 2019-07-18 14:37:46 · 854 阅读 · 0 评论 -
vue将table导出成excell
首先安装 file-saver、xlsx依赖包<template> <div class="tb-contaner" style="font-size: 14px;"> <header style="background: white;"> <p class="tb-name"> ...原创 2019-07-16 10:51:50 · 538 阅读 · 0 评论 -
H5内嵌原生app
其实我们不管是从ios还是安卓都可以看出 原生app能内嵌H5的原因是因为有了webview这个app内嵌浏览器视图,从而使得我们可以开发html然后加载到app中(原理几乎跟pc端请求、加载、渲染是一样的),一般的当我们将h5开发好后就可以有两种方式请求到原生app中,一个是将html代码放到服务器上,一个是放在当前app项目目录中本地请求(一般用于调式)。因此,可以看到内嵌其实并不难,...原创 2019-05-23 22:21:08 · 8025 阅读 · 0 评论 -
开发一个项目前应该要做的那些事
很多前端新手在开发的时候总是显得效率不高,其实很大程度上是准备工作不到位,大部分新手一拿到设计稿就开始上手,等到快完工的时候才发现这没做好那没做好,常常导致返工不断,因此在正式开发敲第一行代码前不妨静下来好好思考下整个项目的逻辑以及项目开发会遇到什么,根据本人开发经验,总结以下开发前要准备的工作,希望能帮助到新手在项目开始前要做的工作:一、统览所有的设计稿,找出共同元素...原创 2019-05-17 16:24:58 · 2806 阅读 · 0 评论 -
如何写github的README.md
我们在写一个开源项目的时候 往往需要写一下readme来让别人简要的了解一下项目的运行环境、以及采用的思路,那么如何写一个好的readme呢 github有自己的符号来进行标题、正文、分行、代码片段等的实现,以下几个是常用的符号:一、## (注意:#越多字号越小) 这个符号是用来生成加粗标题字体的 同时会生成一条底边线 比如:## 技术栈:二、1.```英文...原创 2019-05-22 16:48:52 · 529 阅读 · 0 评论 -
Mysql 集群 pxc
数据库多节点 冗余设计达到集群pxc 有利于防止单节点故障后影响整个项目的运行使用pxc集群方案 的好处是能保证集群中各个数据库节点数据的强一致性 但是也需要消耗很多得性能来达到这个目的,对于金额和交易等高价值数据就必须要保证一致性一般的可以使用haproxy来做数据库负载均衡的中间件一般可以使用阿里开源的数据切分中间件mycat世界500强企业架构:...翻译 2019-05-09 09:57:12 · 194 阅读 · 0 评论 -
开发中遇到的问题及解决方案
一:页面刷新时会跳屏 原因是js中有修改css样式的语句而该js文件又放在了body底部 所以当结构生成完 样式还没有开始渲染,解决方法 将动态修改font-size的js代码放在body最前部二:webpack解析的图片会出现同一目录下 一张能显示另一张显示不出来的情况而且还自动加了一层目录原因是路径问题解决方法:使用require在ht...原创 2019-05-09 09:56:28 · 2090 阅读 · 0 评论 -
如何将本地代码上传到github
第一步:安装git第二步:在github上new 一个 仓库 并clone ssh或者是url地址第三步:到本地项目的目录右击 选择 git bash第四步:第五步:设置ssh key 否则无法更新代码...原创 2019-07-05 09:14:20 · 141 阅读 · 0 评论 -
用hbuild打包vue webApp
打包白屏问题参考:https://blog.csdn.net/u010212601/article/details/82350252手机物理回退按钮问题参考:https://blog.csdn.net/brake_lzk/article/details/80678567npm run build 报以下错解决方法:npm i webpack-cli -g 针对打包后背景图片...转载 2019-02-25 15:26:37 · 454 阅读 · 0 评论 -
简单的原生ajax封装
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script原创 2018-11-04 12:24:47 · 118 阅读 · 0 评论 -
如何利用react将Table下载成excel
import React from 'react'import ReactDOM from 'react-dom'import ReactHTMLTableToExcel from 'react-html-table-to-excel'//主要是这个插件!!import { Table } from 'antd';import reqwest from 'reqwest';//这个插件是用...原创 2018-09-06 17:43:12 · 4681 阅读 · 0 评论 -
Node.js项目
这里mongose语言可以参考https://www.jianshu.com/p/2f54b90efe15首先配置好入口文件app.jsapp.js中比较重要的两个模块是express swig(用于解析模板内容)文件解析模板swig的配置利用res.render()解析指定目录下的文件 由于我们在前面配置swig的时候我们已经指定了路径为./views所以...翻译 2018-09-06 20:52:44 · 275 阅读 · 0 评论 -
react项目开发总结
一 在引用css样式表时不需要使用 from 如:import './XXX.css'同时因为react中的样式表是共用的 所以在定义id 和className的时要注意唯一性引入图片时需要这样引入import ImageS from 'XXX.jpg'然后在<img src={ImageS}>二 命名组件的时候必须首字母大写三 在组件中 函数之间不需要用逗号隔...原创 2018-07-01 16:57:46 · 1112 阅读 · 1 评论 -
react-redux一看就会的简单教程
第一步:在根目录下的index.js中导入redux 与react-redux的函数如:import React from 'react';import ReactDOM from 'react-dom';import App from './App';import registerServiceWorker from './registerServiceWorker';import {HashR...原创 2018-07-01 16:59:04 · 522 阅读 · 0 评论 -
react一看就会的简单路由设置
不管是vue还是react 这种单页面的框架一定都少不了路由下面给大家讲讲在实际项目中react的路由设置第一步: 在src目录下新建一个目录route 在该目录下新建一个index.js用于管理路由如:import React ,{ Component } from 'react'import {Switch,Route,Redirect} from 'react-router...原创 2018-07-01 17:44:03 · 8797 阅读 · 0 评论 -
vuex的实践,看了你就会用!
在正式写vuex前 我想给分享一个关于性能优化的小东西 如下:有时候当我们在项目中点击跳转路由时 当那个路由界面非常复杂时 为了缩小白屏时间 我们可以使用webpack提供的代码切割方式对该组件代码进行切割具体代码如下:const home = r => require.ensure([], () => r(require('../page/home/home')), 'home'...原创 2018-07-03 20:05:44 · 360 阅读 · 0 评论 -
前端性能优化那些事
其实吧 网络上已经对前端如何优化性能做了很多很好的总结 我下面要说的只是对他们的一些提炼和自己的总结首先,大家可能有个误区 觉得应该把所有的性能方法都用上才是最棒的,但是有没有想到 万物都是有利有弊的。比如:http请求数,网上都讲到要减少请求数,但一味的追求数量上的减少其实并不明智,我们更应该看到减少请求数是不是会增加单个请求的请求体量呢?要知道,如果一个文件体量过大也是会影响加载资源速...原创 2018-07-04 14:42:44 · 163 阅读 · 0 评论 -
ES6与ES7异步处理
在ES6中Promise()异步函数最突出的特点就是可以使用.then()来替换之前回调函数的多层嵌套 增加代码可读性和维护性如:runAsync1().then(function(data){console.log(data); return runAsync2();}).then(function(data){ console.log(data); return runAs...原创 2018-07-07 11:55:12 · 1034 阅读 · 0 评论