寻梦环游记

发表于2023-01-13|前端React.js|前端•React.js

React.js声明式组件化单向数据流纯函数不可变数据函数式编程 React.js 官网 ahooks React 需要使用 JSX，有一定的上手成本，并且需要一整套的工具链支持，但是可以完全通过 JS 来控制页面，更加的灵活。Vue 使用了模板语法，相比于 JSX 来说没有那么灵活，但是可以脱离工具链，通过直接编写 render 函数就能在浏览器中运行。 setState setState 触发时机受 React 控制, 异步更新生命周期内触发合成事件内触发触发时机不在 React 所控制范围内, 同步更新 setTimeout setInterval 自定义的 DOM 事件 promise.then Ajax 回调 setState 默认合并同步更新不会合并传入函数不会合并 React 18 更新，setState 都是异步合并的了 Automatic Batching 自动批处理 123456789101112131415161718192021222324252627282930313233343536class MyComponent ...

重学 Vue.js

发表于2023-01-13|前端Vue.js|前端•Vue.js

Vue.js渐进式 MVVM 单向数据流双向绑定Vue 官网Vue.js 技术揭秘 Nuxt 2Nuxt 3 VueUse 组件通信父子组件通信 props / $emit + v-on v-model $attrs / $listeners（inheritAttrs: false）兄弟组件通信 $parent.$children, 在 $children 中通过组件 name 查询到需要的组件实例 Vue3: $refs 跨层级组件通信 provide inject 任意组件通信 Vuex EventBus 自定义 v-model123456789101112131415161718192021222324<template> <input :value="modelValue" @input="inputHandler"></template><script>export default { name: 'VModel' ...

通信方式知多少

发表于2023-01-11|前端HTTPJavaScript|前端•HTTP•JavaScript

JSONP12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>JSONP</title></head><body> <input type="text" id="input" /> <ul id="list"></ul> ...

重学 Node.js

发表于2023-01-10|Node.js|Node.js

Node.jsNode.js 诞生于 2009 年，Node.js 采用 C++ 语言编写而成，是一个基于 Chrome V8 引擎的 JavaScript 运行环境，让 JavaScript 的运行脱离浏览器，可以使用 JavaScript 语言编写服务器端代码 Node.js 官网下载稳定版本，偶数版本为稳定版本，奇数版本为尝鲜版本Node.js 中文文档 NPM 官网NPM 中文文档 Yarn 官网Yarn 中文文档 Koa 官网Koa 中文文档初体验12345678910111213141516171819202122232425/* nodejs */const http = require('http')const server = http.createServer((req, res) => { res.end('Hello World!')})server.listen(3000)/* Express */const express = require('express')co ...

重学 JavaScript（二）

发表于2023-01-09|前端JavaScript|前端•JavaScript

面向对象抽象封装继承多态工厂模式123456789101112function Factory() { // 原料 let obj = {} // 加工原料 obj.prop = '' obj.fn = function() {} // 出厂 return obj}let productA = Factory()let productB = Factory() 工厂模式解决了代码复用的问题但是却没有解决对象识别的问题创建的实例都是 Object 类型, 不清楚是哪个工厂的实例公共方法和属性会随着工厂方法的调用而重复占用内存构造函数12345678910function Factory() { this.prop = ''}Factory.prototype = { constructor: Factory, fn: function() {}}let productA = new ...

重学 JavaScript（一）

发表于2022-12-27|前端JavaScript|前端•JavaScript

走进 JavaScript 世界JavaScript 是一门基于对象和事件驱动的弱类型脚本语言机器语言汇编语言高级语言面向过程 C 面向对象 C++ 函数式声明式脚本语言动态语言相较于编译语言，不需要编译器，它需要的是解释器编译器面向的是计算机解释器面向的是某个特定的软件或者计算机某一个部分 HTML 结构 CSS 美化 JavaScript 行为浏览器内核渲染引擎JS引擎越来越独立，内核就倾向于只指渲染引擎 JS 引擎解析和执行 javascript 来实现网页的动态效果组成 ECMAScript ECMA262 标准 JS语法和基本对象 JS-Web-API W3C 标准 DOM文档对象模型 BOM浏览器对象模型事件绑定 Ajax 存储引用方式12345678910111213141516171819202122232425<a onclick="alert('Hello World!')" id="fuck&quo ...

响应式设计

发表于2022-12-27|前端CSS|前端•CSS

媒体查询媒体设备 all所有类型的设备 screen彩屏设备 handheld 手持设备 print 打印预览 braille 盲文触觉设备 speech 屏幕阅读器 tv 电视类设备关键词 and - 和，在多个条件的时候，可以用 and 连接，表示条件都满足才加载样式 12345@media screen and (max-width: 1000px) and (orientation: portrait) { div { }} not - 不，表示只要不是某一个条件的情况下，其他条件都可以加载样式 12345@media not screen and (min-width: 1000px) { div { }} only - 只有，表示只有在某个条件下，才可以加载样式 12345@media only screen and (orientation: landscape) { div { }} , - 或，表示只要满足其中一个条件，就可以加 ...

移动端布局

发表于2022-12-25|前端CSS|前端•CSS

英寸一般我们都用英寸来描述设备的物理尺寸，例如电脑: 17英寸、13英寸，手机: 6.5英寸、4英寸；我们说一个手机6.5英寸，其实指的是屏幕对角线的长度1 英寸 = 2.54 厘米 Px 像素一个小正方形的方块，每一个像素都具备颜色和特定的位置；像素并不是个绝对单位分辨率屏幕具体由多少个像素组成，并不是分辨率高，就说明屏幕清晰的，这个还需要考虑尺寸问题 PPI像素点和清晰度的关系，即每英寸包含的像素点物理像素上面我们描述的这个像素，我们称为物理像素设备像素 UI像素，即设备真实存在的物理单元同样尺寸的两台手机: 低分辨率手机 320 480 和高分辨率手机 640 960高分辨率手机的两个像素点的大小 = 低分辨率手机的一个像素点的大小设定相同的像素点，在分辨率高的屏幕上，看上去会更小；这就是为什么同样大小的元素，在 PC 和移动端，显示的有差别的原因移动端下的像素点，比 PC 的像素点要更小那为什么 Mobile 70 70 看着比 PC 80 80 还要大呢？ Retina 视网膜屏幕我们的手机屏幕尺寸是非常多的，但是即使尺寸很多分辨率不同，我们会发现一个很神 ...

CSS 预处理器 Less

发表于2022-12-24|前端CSS|前端•CSS•Less

安装编译koala是现在市面上，最好用的 CSS预处理语言图形编译工具，可以编译多种 CSS预处理语言，例如: less、sass、compass 支持中文有图形界面可以很方便地修改输出路径修改压缩方式方便可以设置编译选项 sourcemap 生成源文件映射 line Comments 行注释 debug Info 调试信息 strict Math 严格运算模式，数学运算必须加上() strict Units 严格单位模式 autoprefix 自动添加前缀其他使用方法，参见官网基本语法变量@变量名: 变量值; 123456789101112131415161718192021222324@w: 100px; /* 属性值 */@imgurl: "../images"; /* 插值: 属性值中的某一部分 */@box: box_one; /* 插值: 选择器中的某一部分 */@background: background; /* 插值: 属性名中的某一部分 */.@{box} { width: @w; @&# ...

CSS 选择器

发表于2022-12-22|前端CSS|前端•CSS

样式优先级行内样式 > Id > Class > Tag > * 元素声明的样式 > 浏览器默认样式 > 元素继承的样式 !important 无敌选择器元素选择器 ID选择器#id {} 类选择器.class {} 标签选择器div {} 组合选择器.header, .footer {} 关系选择器后代选择器div p {} 父子选择器div > p {} 相邻选择器.test + p {}查找.test后的第一个p标签兄弟选择器.test ~ p {}查找.test后所有的同级p标签属性选择器 [class]查找有class属性的标签 p[class]查找有class属性的p标签 p[class="header"]查找有class属性，并且class属性只能是header的p标签1<p class="header"> ...