flex 布局
Flex 布局 好多年前写的笔记移动到博客上 Flex 布局概念- flexible: box 弹性盒状布局 - 容器控制内部元素的布局定位 - css 引入的新布局模型 - 伸缩元素,自由填充,自适应 优势- 可在不同方向排列元素 - 控制元素排序方向 - 控制元素的对齐方式 - 控制元素之间的等距 - 控制单个元素放大与缩放比例,占比,对齐方式 模型- 容器内部放项目 - 主轴 从左向右 从上向下 - 交叉轴 flex容器的属性和布局- flex container: flex 容器 - flex item :flex 项目 元素 - flex direction 设置元素排列方向 - row 主轴 从左向右 - row-reverse 主轴 从右向左 元素也会反向排列 - column 主轴 从上向下 - column-reverse 主轴 从下向上 - flex-wrap 使容器内的元素换行 - nowrap 不换行 - wrap 换行 - wrap-reverse 反向换行 -...
性能优化
JS性能优化 好多年前写的笔记移动到博客上 1.资源合并与压缩 减少http请求 减少请求资源大小 html压缩 在线网站压缩(现代浏览器不再使用) node.js html-minifier 工具 后端模板引擎压缩 css 压缩 在线网站压缩(现代浏览器不再使用) html-minifier 工具 clean-css 对css进行压缩 js压缩与混乱 无效字符的删除 剔除注释 代码语义保护 代码保护 在线网站压缩(现代浏览器不再使用) html-minifier 工具 uglifyjs2 对js进行压缩 文件合并 首屏渲染 缓存失效 在线网站压缩(现代浏览器不再使用) 使用node.js 实现文件合并 fis3 类似 webpack 工具。效果是有的图片相关优化 图片压缩 css雪碧图(不常用了) 一次加载比较慢 — 合适的 image inline base64格式转化 矢量图 svg iconfont tinypng.cpm 图片压缩 智图 把png转成webp格式 整体压缩%40+ 雪碧图svg www.spritecow.com ...
uniApp初学者指北
好多年前写的笔记移动到博客上 uniApp初学者指北初识 uniApp什么是 uniapp- Union Application - 前端框架 - 基于 Vue - 开发规范和小程序一样 - 一套代码编译到 多端使用 为什么使用 UniApp- 多端编译 - 接近元素,效果更好 - 开发效率高(代码提示) - 开发(人力/维护/时间)成本低 - 学习成本低 - 支持 Npm 和自定义组件 - 社区活跃,代码迭代快 框架基础MVC 与 MVVM 设计思想MVC- model 模型 数据 - view 视图 - contriller 控制层 MVVM- 2. viewModel 核心调度者 - 1. model 修改数据 - 3. view 视图自动修改 项目结构文件类型- component 组件 - pages 页面 - static 静态文件 - unpackge 编译目录 pages.json- pages [] 启动页 第一个pages - path :string - style : {} 全局标题与页面标题-...
JS设计模式
好多年前写的笔记移动到博客上 JS设计模式 … 什么是面向对象面向对象(很重要) 概念 类(模板) - 对象(实例) 属性&方法 - 多个实例 三要素:封装 继承 多态 继承,子类继承父类 封装,数据的权限和保密 public 完全开放 protected 对子类开放 private 对自己开放 多态,同一接口不同实现 面向对象的意义 数据结构化 结构化的才是最简单的 编程应该 简单 & 抽象 UML类图工具 MS Office...
vue2 初学者指北
vue2 初学者指北 好多年前写的笔记移动到博客上 vue 基础历史背景 一款渐进式 javascript 框架 尤雨溪(Evan You)特点 轻量 20kb min + gzip 渐进式框架 响应式更新机制 学习成本低 vue 基础环境 Chrome vs code node.js 8.9+ npm123456// vue 实例let app = new Vue({el: '#app',data: {}}) 12VUE CREATE PROJECTNAMESCOPED css样式限制在 单文件组件内 属性 (万物皆属性 )自定义属性 Props原生属性 attrs特殊属性 class, style事件普通事件(绑定事件)修饰符事件(.stop)插槽普通插槽(slot=xxx)作用域插槽(slot-scope=xxx)双向绑定 单项数据流 model 更新 触发 view 的更新 view 更新 触发 model 更新 vue 双向绑定 or 单项数据流 vue 是单项数据流...
微信小程序 web-view
好多年前写的笔记移动到博客上 微信小程序 web-viewapi 调用 小程序需要jsdk 才能调用 wx.miniProgram 相关 api jsdk version “weixin-js-sdk”: “^1.6.0” import wx from ‘weixin-js-sdk’ window.wx = wx 之后在页面调用 wx.miniProgram.navigateBack() 即可 无法调用大部分时候是因为没有全局 wx 所以需要赋值 支付 web-view 支付既小程序支付 非公众号 h5 调用支付时需要再h5 页面发起订单请求参数 之后回到小程序支付 完成后带参数回到h5页面 完成支付流程
前端知识点
好多年前写的笔记移动到博客上 jS基础关于基础 工程师的自我修养 - 基础 扎实的基础会让你高效学习新技术 关于面试 看到面试题首先想到的是什么 -> 考点 如何看待网上永远看不完的面试题 -> 以不变应万变 如何对待接下来遇到的面试题 题目考察知识点 JS变量类型 强制类型转换 浏览器渲染过程 作用域 JS模块化 JS基础算法 JS变量类型 变量计算 值类型(在内存中有多份) undefined,string,number,boolean 引用类型(在内存中只有一份指针) 对象(object), 数组(array),函数(function),null typeof 运算符可以得出的类型共6种- undefined - string - boolean - object - number - function(typeof引用类型中唯一能区分出来的) 变量计算 - 强制类型转换- 字符串拼接 - == 运算符 - if 语句(变量) - 逻辑运算符 何时使用===...
安装 yarn pnpm 以及设置 npm 源
安装 yarn pnpm 以及设置 npm 源重要 安装完成后 windows 提示 无法加载文件 c/*** */ 因为此系统上禁止运行脚本 访问某某某无所谓了 管理员身份打开 cmd 或者是 powerShell 输入 set-executionpolicy remotesigned yes 确认重启编辑器就可以了
MobaXterm 一款好用的 ssh 终端工具
MobaXterm 一款好用的 ssh 终端工具下载地址 https://mobaxterm.mobatek.net/download.html 使用免费版即可 ssh 登录教程 https://blog.csdn.net/weixin_44205779/article/details/123685547
docker 的使用
docker 基本命令docker 镜像加速 https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors docker ps 查看当前运行的镜像 docker ps -a 查看所有镜像 docker run imageName 运行镜像 以下命令可以叠加使用如 -p 8080:9090 -v /root:/data docker run imageName -p 8080:9090 镜像端口映射 docker run imageName -v /root:/data 路径映射 docker stop 关闭镜像 docker restart 重启一个被 stop 的镜像 docker remove 删除 docker...