前端开发
关注
分享
扫一扫
文章平均质量分 62
XIPIKER
这个作者很懒，什么都没留下…
展开
-
BFC是什么？
BFC简介BFC全称Block Formatting Context，名为“块级格式化上下文”。BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性。怎样触发BFCoverflow: hiddend转载 2021-04-13 23:19:24 · 233 阅读 · 0 评论 -
create-react-app 添加typescript与ant design实现按需加载
首先创建初始项目npx create-react-app test-demo添加typescript注意create-react-app引入typescript不需要自己手动创建tsconfig.json等配置文件，安装引入即可，引入之后将test-demo项目src路径下的.js后缀文件改为.tsxnpm install --save typescript @types/node @types/react @types/react-dom @types/jest引入ant design原创 2021-01-26 10:18:49 · 584 阅读 · 2 评论 -
React Hooks简单总结
hooks基础教程地址https://www.bilibili.com/video/BV1y4411Q7yH?p=1react hooksreact hooks必须在react 16.8及其以上版本才能生效useStateconst [count, setCount] = useState(0); // 数组解构// 等同于const _useState = useState(0);const count = _userState[0];const setCount = _user原创 2021-01-12 21:57:39 · 215 阅读 · 0 评论 -
ECMAScript 6.0 知识点汇总(二)
迭代器Iterator// Iterrator 是一种新的遍历机制，它有两个核心// 1.迭代器是一个接口，能快捷的访问数据，通过Symbol.iterator来创建迭代器。// 2.迭代器是用于遍历数据结构的指针(数据库的游标)。// 迭代器的使用let items = ['one', 'two', 'three'];// 创建迭代器let ite = items[Symbol.iterator]();console.log(ite.next()); // {value: "one",原创 2020-08-18 18:58:30 · 122 阅读 · 0 评论 -
ECMAScript 6.0 知识点汇总(一)
简介ECMAScript 6.0(一下简称ES6)是Javascript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得Javascript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6既是一个历史名词，也是一个泛指，含义5.1版以后的Javascript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。babel介绍被称为下一代的Javascript编译器。可以将es6的代码转换成原创 2020-08-16 16:54:11 · 274 阅读 · 0 评论 -
axios知识点简单汇总
特征1.从浏览器中创建XMLHttpRequests。2.从node.js创建http请求。3.支持Promise API。4.拦截请求和响应。5.转换请求数据和响应数据。6.取消请求。7.自动转换JSON数据。并发请求methods: { sendAjax() { // 请求1 get // 请求2 post this.$axios.defaults.baseUrl = 'http://127.0.0.1:8888';原创 2020-08-16 16:53:05 · 237 阅读 · 0 评论 -
Vue Router
路由的实现1.传统开发方式url改变后，立刻发生请求响应整个页面，有可能资源过多，传统开发会让页面出现白屏2.SPA单页面应用(Single Page Application)，锚点值改变后不会立刻发送请求，而是在某个合适的时机，发起ajax请求在对页面进行局部渲染，优点是页面不立刻跳转用户体验好。<html> <body> <a href="#/login">登录页面</a> <a href="#/re原创 2020-07-23 13:18:12 · 141 阅读 · 0 评论 -
通过Tab切换效果的例子解决vue中数组更新后视图不刷新问题
故事背景开发中我们比如做Tab页切换效果，思路是首先声明一个数组Arr，每个Tab标签对应一个数组下标存着Tab选中的状态，arr[true, false, false, false, false]，然后去根据Tab选中的下标去更改数组Arr的值为true，但是问题出现了，为什么我触发了更新数组方法而视图没有改变呢(PS:VUE中)。以下代码做了错误还原以及解决方法Object.assign({}, this.XXX, arr)或者用数组的push方法也可以解决这个问题，为什么会发生这个呢，没仔细研究，感原创 2020-07-17 13:58:53 · 1044 阅读 · 1 评论 -
Vue知识总结
指令看文档，没啥好写的。组件与父组件传值方式父>子1.先给父组件中绑定自定义的属性。2.在子组件中使用props接收父组件传递的数据。3.可以在子组件中任意使用。子>父1.在父组件绑定自定义事件2.在子组件中触发原生的事件，在函数中使用$emit触发自定义的childHandler具名插槽标签详细讲解看这个文章，https://www.cnblogs.com/tomatoto/p/9633631.html过滤器过滤器的作用：为页面中数据进行添油加醋。有两原创 2020-07-16 01:23:59 · 138 阅读 · 0 评论 -
ES5 实现获取本周、上周、本月、上月、本季度的时间处理工具类
简介在日常工作日我们前端有时候会配合后端小伙伴做统计操作，可能会需要获取一些特殊日期时间，所以经过整合出一个工具类分享给大家，喜欢的给个star，给个小小的鼓励哈!工具类 dateFormatUtil.js // 当前日期 let now = new Date(); // 今天本周的第几天 let nowDayOfWeek = now.getDay(); // 当前日 let nowDay = now.getDate(); // 当前月 let nowMonth原创 2020-06-09 11:15:23 · 771 阅读 · 0 评论 -
javascript高级程序设计-第八章
注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。BOM简介ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，缺少事实上的规范...原创 2020-04-26 14:52:09 · 232 阅读 · 1 评论 -
javascript高级程序设计-第七章
注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。递归递归函数是在一个函数通过名字调用自身的情况下构成的，如下所示。function factorial(num){ if (num <= 1){ return 1; } else { return num * factorial(num-1...原创 2020-03-31 13:40:14 · 204 阅读 · 0 评论 -
javascript高级程序设计-第六章
注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。面向对象的程序设计“无序属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正因为这样（以及其他将要讨论的原因），我们可以把 ECMAScript 的对象想象...原创 2020-02-26 19:55:34 · 200 阅读 · 0 评论 -
javascript高级程序设计-第五章(续)
注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。Array类型重排序方法数组中已经存在两个可以直接用来重排序的方法：reverse()和 sort()。reverse()方法会反转数组项的顺序。var values = [1, 2, 3, 4, 5]; values.reverse(); consol...原创 2020-02-25 16:32:01 · 144 阅读 · 0 评论 -
javascript高级程序设计-第五章
注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。引用类型引用类型的值（对象）是引用类型的一个实例。在 ECMAScript 中，引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称为类，但这种称呼并不妥当。尽管 ECMAScript从技术上讲是一门面向对象的语言，但它不具备传统的面向对象语言所支持的类和...原创 2020-02-23 23:34:14 · 183 阅读 · 1 评论 -
javascript高级程序设计-第四章
注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。基本类型和引用类型的值ECMAScript 变量可能包含两种不同数据类型的值：基本类型值和引用类型值。基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。引用类型的值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存中...原创 2020-02-22 23:18:39 · 399 阅读 · 0 评论 -
javascript高级程序设计-第三章
注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。严格模式为什么使用JavaScript严格模式在严格模式启用后，JavaScript引擎会对脚本进行更严格的评估。通常不会触发显式异常的Sloppy代码现在会导致代码在使用之前被抛出异常。所谓严格模式就是是ECMAScript 5中的一项新功能，它允许将程序或函数...原创 2020-02-22 21:21:35 · 172 阅读 · 0 评论 -
javascript高级程序设计-第二章
注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。script标签位置一般情况下页面加载会有延迟，如果script里面js文件比较大可能会出现网页刚加载时的空白情况，所以为了避免这种问题，通常我们会把script标签放在body元素中，这里面试中有时候会问道，属于比较基础的问题。示例代码<!DOCTYP...原创 2020-02-21 23:06:03 · 154 阅读 · 0 评论 -
React基础学习(看心情学习更新)
几个基本概念介绍Library（库）:小而巧的库，只提供了特定的API；优点就是船小好调头，可以很方便的从一个库切换到另一个库；但是代码基本上不需要改变。Framework（框架）:大而全的是框架；框架提供了一整套的解决方案；所以，如果在项目中间，想切换到另外的框架是比较困难的。前端三大主流框架Angular.js:出来较早的前端框架，学习曲线比较陡，NG1学起来麻烦，NG2~NG5...原创 2020-02-21 22:33:53 · 170 阅读 · 0 评论 -
javascript计算现职年数
没啥好分享的，简单的小工具写一下，方便以后使用// startDate、startDate，时间格式'2019-10-1'export function MonthsBetw(startDate, endDate) { // 现职年数 startDate = startDate.split('-'); endDate = endDate.split('-'); let ye...原创 2020-01-14 15:22:13 · 322 阅读 · 0 评论 -
React 打包下载图片，使用 jszip 压缩插件 和 file-saver 插件
1.需要使用 jszip 压缩插件 和 file-saver 插件npm install jszip --savenpm install file-saver --save2.示例代码import React from 'react';import {Form} from 'antd';import JSZip from 'jszip';import saveAs from 'f...原创 2019-12-25 13:30:00 · 2451 阅读 · 3 评论 -
React 使用 Video.js 加载 HLS视频流
加载依赖npm install --save video.js封装组件说明: 这里sources可以传入多个视频源，type可以自己指定根据播放流来进行选择。因为需求我是一个一个视频单独加载出来的。VideoPlayer.jsimport React from 'react';import videojs from 'video.js';import './myVideo...原创 2019-07-04 13:12:04 · 7495 阅读 · 0 评论 -
React运行浏览器报错[A <Router> may have only one child element]
错误信息Uncaught Invariant Violation: A <Router> may have only one child element at invariant (http://localhost:8111/bundle.js:1071:15) at Router.componentWillMount (http://localhost:8111/b...原创 2019-06-28 16:29:33 · 1334 阅读 · 8 评论 -
CSS3的Flex布局
什么是Flex布局flex布局在移动端自适应用的比较多，意为“弹性布局”，任何一个容器都可以设置flex布局，使用flex布局以后，子元素的float、clear和vertical-align属性将失效。.box{ display: flex;}行内元素使用.box{ display: inline-flex;}Webkit内核的浏览器，需要加上-webkit前...原创 2019-07-09 16:07:52 · 102 阅读 · 0 评论 -
React npm run build报错[Module build failed: SyntaxError: Unexpected token (6:4)]
错误信息ERROR in ./src/index.jsModule build failed: SyntaxError: Unexpected token (6:4)已有配置信息package.json{ "name": "react-xipiker-v1", "version": "1.0.0", "description": "react-xipiker-v1",...原创 2019-06-28 14:11:25 · 5915 阅读 · 0 评论 -
react脚手架构建运行时报错问题
具体操作sudo npm install -g create-react-appmkdir react-first-democd react-first-democreate-react-app react-clicd react-clinpm install (依赖安装完以后执行npm start)npm start错误$ react-scripts startThere...原创 2019-06-27 15:49:16 · 3771 阅读 · 0 评论 -
React-loadable 编译时出现import报语法错误(Module build failed: SyntaxError: Unexpected token (7:18))
报错配置信息package.json{ "name": "react-xipiker-v1", "version": "1.0.0", "description": "react-xipiker-v1", "main": "index.js", "scripts": { "build": "webpack --config ./build/webpack.d...原创 2019-07-01 14:40:54 · 4165 阅读 · 0 评论