cm_xuan77-CSDN博客

原创 React 之错误边界

默认情况下，若一个组件在渲染期间（render）发生错误，会导致整个组件树全部被卸载错误边界：是一个组件，该组件会捕获到渲染期间（render）子组件发生的错误，并有能力阻止错误继续传播组件中添加捕获错误1.编写生命周期函数 getDerivedStateFromError 1.该函数为静态函数 static getDerivedStateFromError 2.运行时间点：子组件被...

2020-01-19 19:33:30 286

原创 React 之 PureComponent

用于避免重复渲染（执行render函数），提高效率以下面的示例：// taskContainer 组件class TaskContainer extends Component { state = { taskList: [] }; componentDidMount() { const task = []; for (let i = 0; i &lt...

2020-01-17 18:29:59 265

原创 React 之 Render Props

有时候，某些组建的各种功能及其处理逻辑几乎完全相同，只是显示的界面不一样，建议下面的方式选择其一来解决重复代码的问题(横切关注点)实现这两个组建，我们通常的写法是：// MoveBoxclass MoveBox extends PureComponent { state = { x: 0, y: 0 }; myRef = React.createRef();...

2020-01-17 18:29:04 276

原创 React - context

context1.组件创建上下文之后，上下文中的数据会被所有的后代组件共享2.组件依赖上下文，会导致组建不再纯粹依赖state和props旧的api创建上下文只有类组件才可以创建上下文1.给类组件书写静态属性childContextTypes，使用该属性对上下文中的数据类型进行约束2.添加实例方法 getChildContext，该方法返回的对象，即为上下文中的数据，该数据必须满足类...

2020-01-16 18:41:51 302

原创 React - ref

reference 引用function A (){ return (<h1>组件AAA</h1>)}<A ref="comA" /> // 不可这样使用，但是函数组件内部是可以使用ref的过时方式（不要使用）以聚焦input事件为例，以前的ref使用方式，ref 值为string已经过时，随时可能被移除（不建议使用，在16版中已不再可...

2020-01-15 16:47:19 126

原创快应用 -- canvas

快应用的canvas 是由canvas组件和渲染脚本组成的1 canvas 组件不支持属性width 、height ，通过style 设置 width（默认值 0 ）和 height（默认值 0 ）background-color 默认颜色是白色，且设置 background-color 无效只支持 margin 属性，不支持 padding 和 border1.2 渲染脚本与 ...

2020-01-09 14:45:30 350

原创 node 下载图片到本地

图片下载一．需求１．json文件刷选出imageUrl２．下载的图片必须保存载与json文件同名的文件夹中３．将json文件中原网络地址改为json文件本地路径二．分析１．采用node２．获取存储数据data文件夹中的文件目录３．遍历目录，获取json文件中，图片imgUrl４．下载imgUrl，保存到本地目录中５．将json文件中的imgUrl改为本地路径三．代码实现分解...

2019-08-14 15:16:39 6768 2

原创 v-show和v-if 多级菜单

<div id="app"> <tree :datalist='treeData'></tree> </div> <script> const treeData = [ { name: '一级 1', children: [ ...

2019-04-02 06:06:59 542

原创 vue实现日历demo

head要先引入vue：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>html： <div id="app"> <div class='data_header'> <div class='prevBtn' @click=...

2019-04-01 06:03:47 1150 1

原创模拟jquery原理

;(function() { function JQuery(selector) { return new JQuery.prototype.init(selector) } JQuery.prototype.init = function(selector) { let dom = {} if (selector.indexOf('....

2019-02-12 15:54:08 153

转载 VUE 组件化

组件化与模块化的区别按照网站的功能或者性能可以分为好几个模块，组件则是某块部分功能，一个模块可以由好多组件组成。比如：一个机器人由手、腿、头、身体组成，手和腿等就是几个模块，而手指头就是组件，这样说更加的形象。创建组件组件其实是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像...

2019-02-11 15:15:43 201

原创 js物体运动

1.物体匀速运动let div = document.getElementsByTagName('div')[0], btns = document.getElementsByTagName('button') btns[0].onclick = function() { console.log(div) startMove(div,...

2019-02-11 15:14:07 390 2

原创判断原始值和引用值及深度克隆

判断属性是原始值还是引用值原始值：String Number fucntion Boolean undefined引用值：Object Array Null判断方法 typeOf //引用值 object如果是引用值判断是对象还是数组判断方法：2.1 construct[].construct == Array / Object 弊端此方法容易被改写 l...

2019-02-11 14:16:46 286

原创 vuex -- 学习1

安装 vuexNPMnpm install vuex --save开始新建store文件，在store文件夹中创建store.js文件：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) // 这个一定一定不要忘记// ============================ 写法一const...

2018-11-23 14:45:31 115

原创 vue 中 props 组件传参

注意一：组件传参的时候不能使用驼峰式命名规则原因：html对大小写不敏感，浏览器会将所有的大写解释为小写使用：在你使用模板的时候，如果模板中的prop中是以驼峰形式命名的，那么在传参的时候要以短线分隔，eg：Vue.componet('myInpt',{ porps:['errMess'], template:`<div>{{errMess}}</div&g...

2018-11-23 14:42:39 2555

转载 canvas 绘制柱状图表

复制代码即可用<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ca

2018-11-22 16:51:51 861

原创淘宝生成图片二维码分享

最近公司需求提出仿淘宝分享生成一张含有图片/二维码/文字的图片实现方法：采用的canvas 插入图片和生成图片的功能生成二维码采用的是QRCode 插件实现效果：实现步骤：我是在vue环境中实现的1.引入qrcode1安装插件 npm install qrcode2、在main.js中引入import QRCode from 'qrcode' //定义生成二维码组件...

2018-11-22 15:23:43 3633 1

原创 vue组件避免样式干扰

2018-11-01 11:28:34 6060

转载 px与 rem css常见单位

文笔可能不太好，请多多包涵css的单位：px 这个不需要说rem/emvh/vwvmax/vmin1. rem /em1.1. 含义rem 是根据根元素的fontSize来计算，这里的根源素指的是html；em 是根据其父级的font Size来计算的。eg：rem<html style='font-size:20px;'> <header&g...

2018-11-01 11:18:16 257

原创移动端页面适配原生js及lib-flexible 插件

1.js 原生;(function(win, doc) { change() function change() { var remSize = window.innerWidth / 7.5 || 50 /*设计稿是以width = 750px 为基准的*/ document.querySelector('html').style.fontSize = (remSize &...

2018-10-31 17:28:12 897

转载 weex -- 上下滚定，中间滚动页面

<template> <div class='container'> <div class="header"> <text>头部</text> </div> <div class="content"&

2018-09-10 15:23:38 2027

原创 vue 中 input v-model中的坑及限制number的长度

v-model.number 存在的坑&lt;input type="number" v-model='order'&gt; //在输入值在输出的时候会被转换为string类型想要输入的内容依然是数字&lt;input type="number" v-model.number='order'&gt; 输出的时候是Number类型，因为在内部帮你把数据做

2018-09-05 14:50:39 28997 4

原创 vue中Image 事件图片加载出错

html<img :src="isWebp ? item.avatar : item.avatar + '.org'" class="avatar" @error="error(item,$event)" @load='load(item)'>jsexport default { name: "App", data () { return { ...

2018-09-04 10:15:15 8742

原创封装自己的alert toast

class Toast { constructor() {} // 传入的一个参数可以是一个字符串或者一个对象 default(org, callback) { let config = { text: '', tit: '提示', type: 'toast', timeOut: 1800 } if (callb...

2018-08-29 19:37:54 504

转载构建利用Proxy和Reflect实现双向数据绑定的微框架(基于ES6)

实现双向数据绑定的方法有很多，也可以参考本专栏之前的其他实现，我之所以选择用Proxy和Reflect，一方面是因为可以大量节约代码，并且简化逻辑，可以让我把更多的经历放在其他内容的构建上面，另外一方面本项目直接基于ES6，用这些内容也符合面向未来的JS编程规范，第三点最后说。由于这个小框架是自己在PolarBear这个咖啡馆在一个安静的午后开始写成，暂且起名Polar，日后希望我能继续完善这...

2018-08-29 10:13:43 237

原创 Jquery中改变this的指向 $.proxy()

介绍以下这个工具方法的使用：先介绍一下工具方法和实话化方法的区别： 1. 工具方法是定义在jQuery函数上的//定义在jQuery的函数上的/*function jQuery()jQuery.type = function(){}*/2.实例化方法是定义在jQuery原型上的下面开始进入正题：function show(){ console.log(t...

2018-04-18 10:56:20 2498

原创判断数据类型

1.typeof 只能检测原始类型，引用类型都是Object 值：string,Boolean,Number,undefined,object,function 其中 Array，null，object -> object2.instanceof 不准确var arr = [1,2,3];arr instanceof Array // truearr instanceof...

2018-04-18 10:16:00 124

原创 js实现页面数据的筛选

html:<div class="wrapper"> <div class="search"> <input type="text" class = "search_box" placeholder = "请输入用户名"> <p>

2018-04-12 14:34:28 9119

原创数组方法及其原码实现

var personArr = [ {name:'邓哥',src:'./img/1.jpg',des:'颈椎不好',sex:'f'}, {name:'成哥',src:'./img/2.jpg',des:'说',sex:'m'}, {name:'冰洁',src:'./img/3.jpg',des:'美',sex:'f'}, {name:'胖子',src:'./...

2018-04-12 14:22:03 423

原创深度克隆（deepclone）

var obj1 = { name:'duyi', people:{ cs:'cc', }, student:['jack'],}var obj2 = { name:"tengxu", people:{ teacher1:'jc', teacher2:'wb', teacher3:'dg',...

2018-04-11 14:25:45 1082 1

原创原生JS轮播图插件（兼容IE）

HTMLElement.prototype.creatTurnPage = function (ImageArray) { //====生成dom元素============== var DocUl = '<ul class ="sliderPage">' doated = '<div class ="sliderIndex"&gt...

2018-04-11 10:04:45 1734

原创原生js实现轮播图，兼容IE

html部分：<div class ="wrapper"> <ul class="sliderPage"> <li> <img src ="./image/1.png"> </li> <li> <img src ="./image/2.png"> </li> <li>

2018-04-10 16:57:51 1002

原创 canvas 常用属性 -- 1

在使用Canvas前，用canvas.getContext来测试浏览器是否支持Canvas：'use strict';var canvas = document.getElementById('test-canvas');if (canvas.getContext) { console.log('你的浏览器支持Canvas!');} else { console.log('你的浏

2018-03-24 20:34:08 288

原创 canvas 常用属性 -- 图解

1. 回到起始点和闭合当前路劲的区别：2.同时绘制两个相同的图形3.绘制矩形4.擦除整个画布5.矩形落地动画6.绘制圆弧7.绘制圆角8.绘制圆角矩形9.贝塞尔曲线10.

2018-03-24 20:33:39 847

原创多个子标签设置display:inline-block 子标签不能竖直居中

遇到的问题：父标签中的两个子标签都设置了：display:inline-block; 此时就遇到以下问题：span不能够竖直居中，始终在父标签的下方：解决办法：给高度最大的子标签设置vertical-align:middle;在该例子中，需要给a标签加上这个属性设置：设置完，效果如下：

2018-03-17 14:42:21 1562

原创 vue对storejs获取的数据进行处理时遇到的问题

export default { data(){ return { shopList:{}, isEmpty:false, //判断购物车中是否有存在内容 } }, created(){ if(!store.get('?shopCar')){ this.i...

2018-03-15 22:31:28 6655

原创 js中图片加载失败，显示默认图片

js处理img标签加载图片失败，显示默认图片1.第一种方法：如果已经引入了jquery插件，就很好办。没有的话，如果实在需要，可以附上代码：$('img').error(function(){ $(this).attr('src', "default.jpg(默认图片的url地址)"); });2.第二种方法：如果img标签是少量的话，可...

2018-03-14 23:52:59 2900

原创 HTML --img标签

<img src ="" alt ="" tittle ="">src 属性1.网上的链接<img src ="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3228814396,1351481453&fm=27&gp=0.jpg">//引用网上图片

2018-03-14 23:51:31 2821

原创 HTML -- a标签

<a></a>href 属性，全名为hyperText reference 超文本链接，里面写的是链接地址。 a的英文单词是anchor锚点的意思，标签的作用主要有： 1.定点跳转我们指定的id的元素位置： href的值为将要跳转到的标签其id的值 <a href=”#clickme”>点击我跳转</a>//这样就会跳...

2018-03-14 23:37:42 284

转载 HTML 标签 -- meta

meta标签是什么？META标签是HTML语言HEAD区的一个辅助性标签 meta标签是干什么用的？META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见，但却是文档的最基本的元数据. 元数据又是什么东西？元数据(Metadata)元数据(Metadata)是用来概括描述数据的一些基本数据。也就是描述数据的数据。metadat...

2018-03-14 23:26:05 152

空空如也

空空如也