前端学习
个人前端学习专栏
程序员小豪
阿里云专家博主,全栈工程师,曾于蔚来、腾讯实习,现任职于某大厂,技术栈:Vue,React,Python,Java
展开
-
js手写new操作符
每天一道手写题手写new核心代码 function myNew(fn, ...arg) { let obj1 = {} if (fn.prototype) obj1.__proto__ = fn.prototype let res = fn.apply(obj1, arg) if (res && (typeof res == 'function' ||原创 2021-10-17 22:38:45 · 192 阅读 · 2 评论 -
重排和重绘
浏览器的渲染过程1.解析HTML,生成DOM树2.解析CSS,生成CSS规则树(CSSOM)3.合并DOM和CSSOM,生成渲染树(Render-Tree)4.计算渲染树的布局(Layout)5.将布局渲染到屏幕上(paint)什么是重排和重绘重排:当DOM的变化引发了元素几何属性的变化,比如改变元素的宽高,元素的位置,导致浏览器不得不重新计算元素的几何属性,并重新构建渲染树,这个过程称为“重排”。重绘:当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等属性都确定下原创 2021-09-28 21:48:38 · 239 阅读 · 0 评论 -
深入探究Vue diff算法
1.虚拟dom虚拟DOM(Virtual DOM)是对DOM的JS抽象表示,它们是JS对象,能够描述DOM结构和关系。应用的各种状态变化会作用于虚拟DOM,最终映射到DOM上。优点1. 虚拟DOM轻量、快速:当它们发生变化时通过新旧虚拟DOM比对可以得到最小DOM操作量,从 而提升性能patch(vnode, h('div#app', obj.foo)) 2. 跨平台:将虚拟dom更新转换为不同运行时特殊操作实现跨平台const patch = ini原创 2021-09-14 18:45:09 · 282 阅读 · 0 评论 -
去掉微信小程序按钮边框
.btn::after { border: 0;}原创 2021-09-05 17:36:44 · 378 阅读 · 0 评论 -
Vue v-for 渲染本地静态图片
最近做一个小项目遇到一个问题,用v-for渲染本地静态图片无法显示,我将图片放在了assets文件下然后放在某个页面的data,准备用v-for 渲染一组图片却无法显示,这是怎么回事呢?我上网查到原来是webpack会把 src/assets下的图片会被看作模块依赖进行处理那么解决方法是什么呢?1. 用require引入图片路径,例如require('./relative/path/to/file.jpg')2.将图片放到static文件夹下面...原创 2021-08-31 14:29:04 · 830 阅读 · 0 评论 -
微信小程序view文字内容无法自动换行
加上以下代码可以自动换行display: block;text-overflow: ellipsis;word-wrap: break-word;再加上以下代码当文字超过两行时省略号替代text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box !important;-webkit-line-clamp: 2 !important;-webki原创 2021-08-25 20:04:12 · 536 阅读 · 0 评论 -
CSS 文字超出变为省略号
display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;就五行代码效果如下原创 2021-08-25 17:04:26 · 184 阅读 · 0 评论 -
flv.js 学习
前言这次有个项目要使用到flv.js,是我以前从未接触过的知识,边学边做吧Flv.js是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 Flash。由 bilibili 网站开源。Github地址:https://github.com/Bilibili/flv.js/Flv.js概览一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF(MP.原创 2021-08-18 13:20:01 · 1342 阅读 · 0 评论 -
微信云开发
前言最近做一个项目,由于没有后端,所以就使用云开发吧...1.初始化到云开发控制台找到“设置” ,然后找到“环境设置”,再去复制环境ID,写到下面env中// app.jsApp({ //小程序一启动就会执行 onLaunch() { wx.cloud.init({ env: 'questionnaire-school-7bza9c3ed76' }) },})2 数据增删改查2.1数据查询get传统写法 wx.cloud.d.原创 2021-08-12 15:51:19 · 204 阅读 · 0 评论 -
antd 学习1
1. 安装yarn add antd2.antd的按需引入+自定主题2.1 安装依赖:yarnaddreact-app-rewiredcustomize-crababel-plugin-importless@3.12.2 less-loader@7.1.0(这里安装less和less-loader指定版本是因为现在安装的less和less-loader版本较高,配置完会报错)2.2 修改package.jsonscripts": {"start": "react...原创 2021-08-03 15:34:58 · 259 阅读 · 0 评论 -
React学习2
1.React原理1.1 setState多次setState只会进行一次render,会把所有setState合并再进行render推荐语法用两个setState会不一样,会加2,而原来的语法则是只加1setState的第二个参数this.setState( (state, props) => { return { count: state.count + 1 } }, ...原创 2021-07-31 16:11:46 · 868 阅读 · 0 评论 -
npm install报错gyp ERR&! stack Error: Can‘t find Python executable python
晕了,今天安装react脚手架突然报这种奇怪的错 ,前几天还没事的。。。。搞了一晚上,才找到解决办法原来是npm版本问题,我原本的版本是7.20.2,把版本降到6.14.6就行了npm i -g npm@6.14.6...原创 2021-07-28 22:55:57 · 539 阅读 · 2 评论 -
React学习1
前言最近做一个项目需要用到react,就开始学习一下react吧1.起步1.React安装npm i react react-dom <div id="root"></div> <!-- 1 引入js文件 --> <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_mo原创 2021-07-25 22:35:53 · 237 阅读 · 2 评论 -
vue cli 3 配置别名
1.创建vue.config.js文件module.exports = { configureWebpack: { resolve: { alias: { // '@'是src默认的别名 'assets': '@/assets', 'common': '@/common', 'components': '@/component原创 2021-07-19 16:27:20 · 326 阅读 · 0 评论