yzy_blog-CSDN博客

原创 redux

redux步骤1. createStore 创建store2. reducer 初始化、修改状态函数 3. getState 获取状态值4. dispatch 提交新5. subscribe 变更订阅创建store，src/store/ReduxStore.jsimport {createStore} from 'redux'const counterReducer = (state = 0, action) =>{ console.log('state',state

2020-11-30 19:51:44 143

原创 react复合组件

复合组件组件vs继承import React from 'react'import "./LayOut.css"export default function LayOut(props) { const {headerShow=true,bottomShow=true} = props; return ( <> {headerShow&&<div className="header">header

2020-11-25 17:19:36 174

转载由浅入深配置webpack4

前言webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。webpack需要掌握的核心概念????Entry:webpack开始构建的入口模块 Output: 如何命名输出文件，以及输出目录，比如常见的dist目录。 Loaders:作用在于解析文件，将无法处理的非js文件，处理成webpack能够处理的模块。

2020-09-22 18:32:32 209

转载可选链介绍

可选链 ?. 是一种访问嵌套对象属性的防错误方法。即使中间的属性不存在，也不会出现错误。如果可选链 ?. 前面部分是 undefined 或者 null，它会停止运算并返回 undefined。语法：obj?.propobj?.[expr]arr?.[index]func?.(args)复制代码** 我们改造前面示例代码：// 1. 对象中不存在指定属性const leo = {};console.log(leo?.name?.toString()); // unde

2020-08-13 11:27:57 2174

转载 iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配

最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。本文目录前言 · 内容与小黑线重叠情况说明1.安全区域含义2.微信小程序适配iPhoneX底部小黑条(Home Indicator) （1）适配方案一：使用已知底部小黑条高度34p...

2020-03-31 09:57:16 5377 1

原创 React Hooks

React Hook是FaceBook的React小组2018年底推出。2019年React Hooks是React生态圈里边最火的新特性了。它改变了原始的React类的开发方式，改用了函数形式;它改变了复杂的状态操作形式，让程序员用起来更轻松;它改变了一个状态组件的复用性，让组件的复用性大大增加。React Hooks 与原始编写形式对比原始class写法：import React...

2019-12-31 11:48:54 147

转载 textarea标签中的换行符和空格

问题：获取到textarea标签内的格式（换行符、空格），存入数据库，展示的时候能够保留基本格式。解决思路：IE9以上、FF、chrome的换行为\n， IE7-8的时候换行为\r\n，空格都为\s所以需要利用replace把不同浏览器的\n和\r\n都替换为html代码的，把\s空格替换为html的&nbsp注：如果使用jQuery的val()获取textarea的值...

2019-12-25 10:54:46 961

转载微信小程序中引入字体图标(阿里iconfont)

引言这篇博客算是转载的一篇文章，我在写一遍方便熟悉具体流程和方法。支持原博客作者，点击以下链接：微信小程序使用字体图标————————–更新一下—————————————————–最近发现阿里icon font官网中不可以直接在库中下载代码了，这里说一下，从哪里下载代码。将选好的图标加入库中，然后在库中点击 <添加至项目>如果没有项目，新建一个项目就好了然后在你的项...

2019-10-28 18:07:19 304

转载最常见的 Git 问题和操作清单汇总

引言本文整理自工作多年以来遇到的所有 Git 问题汇总，之前都是遗忘的时候去看一遍操作，这次重新整理了一下，发出来方便大家收藏以及需要的时候查找答案。一、必备知识点仓库Remote:远程主仓库； Repository：本地仓库； Index：Git追踪树,暂存区； workspace：本地工作区（即你编辑器的代码）二、git add 提交到暂存...

2019-08-28 16:21:06 150

原创唤起纯数字软键盘

<p>请输入手机号</p><input type="tel" novalidate="novalidate" pattern="[0-9]*"/>

2019-08-21 15:25:01 707

原创 h5键盘收起弹出js判断方法

// 判断设备类型 var judgeDeviceType = function() { var ua = window.navigator.userAgent.toLocaleLowerCase(); var isIOS = /iphone|ipad|ipod/.test(ua); var isAndroid = /android/.te...

2019-08-21 15:16:44 3407

转载 iframe的运用---特别是获取父子页面的元素

使用<iframe src="./iframe.html" frameborder="0" scrolling="auto" name="iframe"></iframe> 同域的情况下，当前页面获取iframe页面里面的元素的话，必须使用加载事件，window.frames.iframeName.onload = ...，window.frames.iframeN...

2019-08-16 20:43:00 657

原创使用渐变，一个div实现进度条

2019-08-14 17:55:23 362

转载 Learn Regex （学习正则）

1. 基本匹配正则表达式其实就是在执行搜索时的格式, 它由一些字母和数字组合而成. 例如: 一个正则表达式the, 它表示一个规则: 由字母t开始,接着是h,再接着是e."the" => The fat cat sat on the mat.正则表达式123匹配字符串123. 它逐个字符的与输入的正则表达式做比较.正则表达式是大小写敏感的, 所以The不会匹配the....

2019-08-08 16:20:32 1112

转载 webpack多环境(dev stg prd qa)打包问题

针对前后端分离的项目，在多环境部署的时候，不同环境的前端分别调用的后端接口不同，怎么实现呢？1. 脚本入口地方传入环境信息 "scripts": { "build:dev": "cross-env NODE_ENV=dev node build/build.js", "build:stg": "cross-env NODE_ENV=stg node build/b...

2019-06-06 13:47:55 1092

原创解决mac上用chrome调试的跨域问题

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/chanpin/Desktop/chromeData

2019-05-31 09:40:03 878

原创 h5的复制copy功能实现

<a id="text" href="#"> 我是被复制的内容 </a><span id="copy_btn">复制按钮</span>function copyFn(val){ window.getSelection().selectAllChildren(val);

2019-03-11 14:10:42 3124

转载 2019前端面试题汇总（主要为Vue）

1. 谈谈你对MVVM开发模式的理解MVVM分为Model、View、ViewModel三者。Model代表数据模型，数据和业务逻辑都在Model层中定义；View代表UI视图，负责数据的展示；ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和Vie...

2019-03-05 18:46:25 2186 1

原创 npm的镜像替换成淘宝的镜像

1.得到原本的镜像地址npm get registry > https://registry.npmjs.org/设成淘宝的镜像npm config set registry http://registry.npm.taobao.org/yarn config set registry http://registry.npm.taobao.org/2.换成原来的镜像...

2019-01-28 13:49:52 169

原创 react中实现在类定义的组件中绑定this上下文的效果的几种方法总结

bind方法。这个方法可以帮助我们绑定事件处理器的this，并可以向事件处理器中传递参数，比如：import React, { Component } from 'react';class App extends Component { handleClick(e, arg) { console.log(e, arg); } render(...

2019-01-09 18:06:07 395

转载为什么越来越少的人用 jQuery？

最早期的开发，大多都使用jQuery，它给我们带来了很多的便利：快速选取元素，方便操作DOM元素的API，各个浏览器之间完美的兼容性，链式操作，动画、ajax等等都是jQuery为前端开发人员来带的好处。为什么现在越来越少人用了呢？我来分以下几点，阐述我的想法：一、JS更新带来的冲击：1.快速选取DOM节点对于大部分使用jQuery的开发工程师来说，能够快速选取DOM节点，这个无疑是一...

2019-01-09 16:39:42 140

原创 node压缩html\js\css模块 html-minifier

git地址：https://github.com/kangax/html-minifier安装:npm install html-minifier -g使用：1、node命令行进入要压缩的项目的根目录后，执行：npm install html-minifier2、在此根目录下新建一个文件命名为test.js，其内容如下：var fs = require('fs')...

2018-12-20 16:57:07 1598 1

原创 javascript高级程序设计（第3版）

链接: https://pan.baidu.com/s/1DX6vP1uwveDoZMzvrjtY5A 提取码: tx2k

2018-12-07 17:42:03 166

转载技术面试官的9大误区

2018-11-28 14:57:07 162

原创关于jquery中data()的问题

jQuery中data（）解释为可以获取，设置元素自定义的属性，但是尽量不用data（）方法去获取元素的自定义属性;因为会有一些问题。<div class="div" data-id="1"></div><script> var id = $(".div").data("id"); //1 $(".div&qu

2018-11-20 14:03:42 1212

原创函数表达式使用的注意事项

函数声明提升sayHi();function satHi() { alert("Hi");}//这个是没问题的，函数在代码执行之前会先读取函数声明。但是当使用函数表达式的时候下面的例子会抛出错误。sayHi(); //错误；函数不存在var sayHi = function() { alert("Hi");}函数声明与表达式之间的区别。//不要这样做i...

2018-10-30 11:37:29 424

原创继承

1.原型继承function SuperType(){ this.property = true;}SuperType.prototype.getSuperValue = function() { return this.property;}function SubType() { this.subproperty = false;}//继承了SuperT...

2018-10-29 19:48:27 88

转载前端知识点总结——Vue

作者：楷楷https://www.hazyzh.com/b/180211145458 1.框架和库的区别框架（framework）：有着自己的语法特点、都有对应的各个模块。库（library）：专注于一点。框架的好处：提到代码的质量，开发速度提高代码的复用率降低模块之间的耦合度（高内聚低耦合） UI：user interfaceG...

2018-10-22 11:28:51 152

转载前端问题记录

前端问题记录（转载：来源https://github.com/qianbin01/frontend_train） HTML相关 CSS相关 JAVASCRIPT相关 DOM相关 HTTP相关 VUE相关算法相关网络安全相关 webpack相关 Html相关1 html语义化意义：根据内容的结构化（...

2018-10-17 15:14:27 389

原创倒计时

var activity_endts = 1537999200 * 1000;//活动结束时间戳 (毫秒级) run(activity_endts); //定时器 function run(enddate){ ...

2018-09-21 09:52:44 304

转载修复 iPhone X H5 底部安全区域定位按钮下内容穿透 BUG

2018-09-11 10:57:27 1407

原创 html2canvas截取图片跨域解决办法

var dataURL;html2canvas(document.querySelector(".poster_template_con"),{useCORS:true,logging:true}).then(canvas => { document.body.appendChild(canvas); $("canvas"...

2018-08-28 18:42:00 4864 1

原创 img的url转base64

function getBase64Image(img) { var canvas = document.createElement("canvas"); $("canavs").hide(); canvas.width = img.width; canvas.height = img...

2018-08-28 18:38:11 5521 1

原创前端性能优化

1.dns-prefetch2.请求合并合并请求减少http请求消耗，提升访问性能- css sprite- 静态资源合并（css，js合并）- 接口合并3.压缩压缩代码使css、js等静态文件变小。压缩图片使图片变小。- Css、js等静态资源压缩- 图片压缩，在不影响显示质量的情况下。- Gzip压缩4. http缓存基于http缓存的机制，我们...

2018-08-23 15:32:01 134

原创 turn.js

中文 API初始化参数配置选项<div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> &

2018-08-21 19:50:15 1292

转载 “一直不明白，程序员为什么要加班。”

程序员普遍的从业状态：“我的996，你不懂。”最近好不容易和程序员好基友M菌约饭成功，他张嘴就说了这句让我懵逼的话。他还说，“以前在上一份工作的时候，我们领导发话，程序员加班，就是程序员不行，测试bug少，就是测试不行。但是现在一切都变了，白天写代码，我老被各种事情打断。只有晚上运营、产品、老板们下班了，我才能安心写代码。想怎么写就怎么写，写完了还一次运行通过。只有那时，我才...

2018-08-02 20:43:21 467

翻译 React1-使用方法（Installation）

React is flexible and can be used in a variety of projects. You can creat new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.React 是一个弹性化的技术方...

2018-07-26 15:33:26 432

原创改变video的src

直接改变video的source是不能播放视频的  <video id="video_play"> <source src="" type="" id="video1"> </video> <button id="click1"&g

2018-07-24 13:23:57 8896 2

原创圆形进度条（canvas）

效果如下图：代码如下<canvas class="pull-right list_canvas" width="200" height="200" style="height:100px;width:100px"></canvas> function drawarc(percent, ctx, sR) { if (percent

2018-07-24 10:27:57 526

原创一些简单排序方法

冒泡排序冒泡排序比较任何两个相邻的项，如果第一个比第二个大，则交换他们。var bubbleSort = function() { var length = array.length; for (var i=0; i<length; i++){ for(var j=0; j<length-1; j++){ if(arra...

2018-07-23 16:07:25 115

空空如也

空空如也