blog
blog copied to clipboard
xianzou
弦奏的博客 一个混迹多年的前端开发人员，正在努力的学习中
```JS const typeList = [ 'string', 'number', 'undefined', 'boolean', 'function' ]; function isTypeList(obj) { if (obj === null) { return true; } const type = typeof obj; return typeList.includes(type); }...
### Webpack打包“JavaScript heap out of memory”错误 > 现在前端一般使用webpack打包，当项目越来越大的时候，打包需要的内存增多，会超出`V8引擎`对`Node`默认的内存限制大小，导致内存泄漏的错误 解决方案： 安装插件`increase-memory-limit`解决： 步如下： - `npm install -g increase-memory-limit` - `npm install cross-env --D` 使用： `package.json`新增`script`命令： ```json "scripts": { "fix-memory-limit": "cross-env LIMIT=2048 increase-memory-limit"...
### webpack混用css modules > 项目中开启`css modules`后，需要处理一些不想被转译成`css modules`,比如一些`node_module`中的包，或者一些插件里面的包； 示例：常见的`css-loader`配置： ```js const ruleUseArr = [],sassLoader = []; if(process.env.NODE_ENV === 'production'){ const miniCssExtractPlugin = new MiniCssExtractPlugin({ filename: 'index.css', chunkFilename: '[id].css', }); ruleUseArr.push(MiniCssExtractPlugin.loader); }else{...
### 分享到QQ ```jsx const shareTitle = `${title}-厦门市大数据安全开放平台`; // 标题 const imgUrl = 'https://www.baidu.com/img/baidu_jgylogo3.gif'; # shareTitle 标题 # imgUrl 图片 # summary 详细内容 window.open(`http://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(document.location.href)}?sharesource=qzone&title=${shareTitle}&pics=${imgUrl}&summary=${summary}`); ``` ### 分享到微博 ```jsx const shareTitle =...
# React Hooks详解 > 本文只做记录，请访问：[原文地址](https://juejin.im/post/5dbbdbd5f265da4d4b5fe57d#heading-6)，作者： [秋天不落叶](https://juejin.im/user/594f84ca8d6d81005703d38d) ## 一、什么是 Hooks - React 一直都提倡使用***\*函数组件\****，但是有时候需要使用 state 或者其他一些功能时，只能使用***\*类组件\****，因为函数组件没有实例，没有生命周期函数，只有类组件才有 - Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 - 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用...
30行js和30行css实现一个进度条组件，关键在于运用`css变量`，[如何使用css变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)； ## 预览图  ## 代码 ### Javascript ```jsx import React from 'react'; import PropTypes from 'prop-types'; import Styles from './main.module.scss'; /** * * 传入percent，生成进度条 * @param {*} { percent...
## unpkg 是什么 unpkg 是一个前端常用的公共 CDN，它通过 URL 语法完成了别人 web 界面内才能达到的效果，简洁而优雅，在流行的类库、框架文档中常常能看到它的身影。 > 它部署在 cloudflare上，在大陆地区访问到的是香港节点。 它支持 h/2 和很多新特性，如果不考虑网络延迟的原因，性能优化较为出色。在国内一些互联网公司也有镜像，例如[知乎](https://yq.aliyun.com/go/articleRenderRedirect?url=http%3A%2F%2Funpkg.zhimg.com%2F)和[饿了么](https://yq.aliyun.com/go/articleRenderRedirect?url=http%3A%2F%2Fnpm.elemecdn.com%2F)。 它能以快速而简单的方式提供任意包、任意文件，通过类似这样的 URL ： >unpkg.com/:package@:version/:file ## 怎样使用 unpkg `unpkg.com/react@^16/umd/react.production.min.js` `unpkg.com/d3` 例如，我在npm发布了一个组件react-signature-phone，我可以这样访问： `unpkg.com/react-signature-phone`：  也可以使用@latest访问最新版本： `unpkg.com/react-signature-phone@latest`...
目前都很流行webpack打包，但是引入样式过多，很容易导致打包出来的样式文件过大，然而IE9对样式表却有限制，具体如下： [KB 262161](http://support.microsoft.com/kb/262161) 概述了Internet Explorer 6至9支持的样式表和规则的最大数量： - A sheet may contain up to 4095 rules > `样式规则最多只能有4095个,多于这个数目的会被忽略,这里应该是指选择器` - A sheet may @import up to 31 sheets > `样式表（通过@import, 或...
## 列表内不同宽高图片保持长宽比例一致 使用栅格化系统进行图片布局的时候，里面经常需要放图片，但是图片的高宽不一定都一致，且需要图片加载不出来也有占位； 知识要点：块级元素（如div,p）的padding设置为百分比的时候，是按照容器的宽度来定的，那么我们可以按照图片的比例来设置容器的高度（使用padding-top/padding-bottom），图片则使用绝对定位显示在容器的下层。 直接上代码 html: ```jsx 07:12 图片说明 04:58 图片说明 ``` css： ```jsx * { box-sizing: border-box; } .section-video ul.list { padding: 5px; width: 100%; font-size: 12px; background-color: #0363b5;...
# 伪元素before和after的content常见用法 本文转载自掘金用户【聪明的汤姆】的[【如何把css'content的操作跟价值发挥到最大💢】](https://juejin.im/post/5d5638fff265da03cd0a7a51#heading-13)，经过尝试后截取常见实用的用法，喜欢的话可以点击链接去关注他，有很多css相关的技巧； ### 基本用法 ```html 弦奏 ``` ```css h3::before { content: "欢迎" } h3::after { content: "进入聊天室" } ``` 浏览器显示：  ### 进度条 ```html ``` ```css .progress { width:...