随笔笔记-2023

xiaoxiao无脸男

已于 2023-12-27 21:24:30 修改

阅读量1.1k

点赞数 23

文章标签： javascript 前端

于 2023-12-26 21:39:39 首次发布

本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/135232013

版权

随笔

computed 是基于他们的依赖进行缓存的，。如果要随时计算 new Date().now（因为不是响应式的）,那么需要用 computed。

如果不希望用缓存那么就用 methods
字符与字节
- 1 字节==8 位
- 1B=8 bit;
- 1KB = 1024B,1MB=1024KB=1024*1024B
编码：
- UTF-8 编码：1 个英文字符（包含标点符号）==1 个字节，1 个中文（包含标点符号和繁体）===3 个字节
- Unicode 编码：1 个英文（包含标点符号）/1 个中文（包含标点符号和繁体）===2 个字节
二进制和十进制的转换
- 正整数十进制转换成二进制：除以二倒取余数
- 二进制转换成正整数十进制：每个位数的值*2 的相应幂次方
- 小数十进制转换成二进制：乘以 2 按顺序取整用余数再乘以 2 取整
- 小数二进制转换成十进制数：每个位数的值*2 的相应的负幂次方
- 负数十进制整数转换成二进制:先算正数的二进制 a，a 不够八位就补 0 成 b, 取反码成 c,c+1(即补码)成 d，d 即为结果
- 负数二进制转换成十进制：先减 1 成为 a,a 再取反码成为 b,计算 b 的十进制为 c,-c 即为结果
- 八进制用 0 开始，比如 07
- 八进制转换成二进制：一位八进制代表 3 位二进制，将每一位替换成二进制（不够 3 * 位就补 0 即可）
- 八进制转换成十进制：每一位上的值*8 的相应幂次方
- 二进制转换成八进制:取 3（不够补 0）合 1，
- 十进制转换成八进制：除以 8 倒序取余数即可
- 十六进制用 0x 开头，比如 0xA1
- 二进制转换成十六进制：取 4(不够补 0)合 1，
- 十六进制转换成二进制：取 1 分 4
- 十进制转换成十六进制：除以 16 倒序取余数
- 总结：十进制转换成 x 进制，用十进制除以 x 倒序取余数即可
小程序

小程序的生命周期回调

1.onLaunch 生命周期回调-监听小程序初始化
2.onShow 生命周期回调-监听小程序显示（从后台显示到前台）
3.onHide 生命周期回调-监听小程序隐藏（从前台隐藏到后台）
4.onError 错误监听函数
5.onPageNotFound 页面不存在监听函数
其他开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问
如何获取用户的 openid
用 wx.login 调用接口获取登录凭证（code）,通过凭证进而换取用户登录态信息（包含用户的唯一标识 openid 以及本次登录的会话密钥等）
app.json 是全局配置，包含所有页面路径、界面表现、网络超时时间、底部 tab 等
点击事件 bindtap=“handleStart”
页面路由跳转 wx.switchTab({url:“./index”})
js 中的设计模式

观察者模式=订阅/发布模式,该模式中有观察者（订阅者）和被观察者(发布者)
比如 vue 中的$emit
数据库

创建、删除表(主键、外键、约束 check、默认值 default)
插入、查询、删除行
高级查询(条件查询)
表与表的关联，比如复制\union\inner join

js 基础

js 是面向对象编程，但是没有类和实例的概念，通过原型来实现面向对象编码。

mvc 框架：是 Model View Controller.是模型（model）-视图(view)-控制器(controller)的缩写。

MVC 是一种使用 MVC 设计创建 Web 应用程序的模式：

Model(模型):是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象复杂在数据库中存取数据
View(视图):是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的
Controller(控制器):是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

注意：MVC 框架不是设计模式
框架和设计模式的区别：

框架是代码重用，而设计模式是设计重用，架构介于两者之间。
设计模式是对在某种环境中反复出现的问题以及解决该问题的方案的描述，它比框架更抽象；
框架可以用代码表示，也能执行或者复用，而对模式而言只能实例才能用代码表示，设计模式是
比框架更小的元素，一个框架中往往包含 1 或多个设计模式，框架总是针对某一特定应用领域，但
同一模式可适用于各种应用。即框架是软件，而设计模式是软件的知识。
MVC:Model-view-controller:是通过 controller 来控制，
mvc 有两种流程:
通过 view 接受指令，传递给 controller.然后对模型进行修改或者查找底层数据，最后把改动渲染在视图上,即 view->controller->model>view
通过 controller 接受指令，传给 controller; 即controller->model->view
mvc 优点:
耦合性低。视图层和业务层分离。
重用性高
生命周期成本低
可维护性高
部署快
mvc 缺点：
不适合小型中型的应用程序
视图与控制器之间过于紧密连接
视图对模型数据的低效率访问
mvc 用在 java(struts2)和 c#（asp.net）服务端应用中
MVVM:model-view-viewModel

model:指数据
view:视图
viewModel：视图模型，是暴露公共属性和命令的视图的抽象，MVVM没有MVC中的controller,也没有MVP中的presenter,有的是一个绑定器，在vm中，绑定器在视图和数据绑定器之间进行通信
MVVM是双向数据流，m和v之间的双向通信，由vm作桥接

vue组件之间是单向数据流的，比如父->子；子->父

vue是用单向数据流去管理状态：
单向数据流过程：指的是用户访问view,view发出用户交互的action,在action里* 对state进行相应更新。state更新后会触发view更新页面的过程。这样数据单向进行流动，利于维护和预测view->action>state>view
react是单向数据流，没有双向绑定的v-model指令，需要自己绑定事件并写this.setState({“a”:event.target.value})
双向数据绑定，带来双向数据流，即数据(state)和视图(view)之间的双向绑定。v-model是(value的单向绑定+onChange事件侦听)的一个语法糖

从一个进程到另一个进程的切换是由操作系统内核管理的。内核时系统管理全部进程所用代码和数据结构的集合。
xss:跨站脚本攻击。

比如可以document.cookie获取用户cookie,获取用户数据
解决xss：1.在服务器端设置cookie不能通过document.cookie获取 2.对用户输入的数据进行加密

vue使用vuex时，刷新子页面数据会丢失。解决方法：向后台请求ajax，并在刷新前将vuex里面的值保存在sessionstorage,在回调返回数据之间用sessionstorage,若返回则用vuex
promise的好处：在异步执行的流程中，把执行代码和处理结果的代码分离了。
系统提供window.VueCalendarLang 勾子函数来让用户自定义语言
app.js：常规配置+核心模块引入

配置和核心模块引入
配置静态文件地址
配置模板引擎
配置视图模板的位置
配置端口
配置路由

函数的声明有两种方式

函数表达式即字面量声明 var a = function(){}
函数关键字声明 function a(){}
注意：js中的函数声明会提前

原型

构造函数和实例的关系：
person1和person2都是构造函数Person的实例。
实例的构造函数属性（constructor）指向构造函数。person1.constructor==Person
构造函数和原型的关系
Person.prototype == 原型对象；
Person.prototype.constructor = Person

实例和原型对象的关系
实例会继承原型对象的属性，在隐式属性__proto__里面找。
person1.proto===Person.prototype;

注意：原型对象和实例都是Person的实例，都是普通对象，（但是Function.protype除外，
是函数对象，但是没有prototype属性）

简单数据类型和复杂数据类型的引用：

简单数据类型是值引用，存在栈内存中。
复杂数据类型是地址引用，即在栈内存中存放地址，这个地址指向堆内存中的对象。复制复杂数据类型是复制引用（即地址）
普通数据类型比较的是值得比较。引用类型比较的是引用的比较

Person.prototype.consotructor == Person;
person1.__proto__==Person.prototype;
person1.constructor ==Person;

这个连接存在于实例和构造函数的原型对象之间，不是存在于实例和构造函数之间

普通对象与函数对象的区别

普通对象有var o1={};var o2 = new Object;var o3 = new f1();
函数对象有函数的3种声明方式，有字面量声明、函数声明、通过构造函数声明。函数对象是函数
总结：凡是通过new Function()创建的对象都是函数对象，其他的都是普通对象。
对象都有__proto__属性，函数对象才有prototype属性
一个普通对象的构造函数===Object。
Person.prototype是一个普通对象，所以Person.prototype.proto==Object.prototype

对象的创建方法:

var o = Object.create({a},{ name:{
        enumerable: true,
        value:"ssss"
    }})

第一个参数a是将o.proto=a,第二个参数是给实例o添加自定义属性，默认是不可枚举不可改的，需要添加enumerable: true, writable: true,

new操作符做了哪些事

var obj = {};创建了一个空对象obj
obj.proto=ClassA.prototype 将这个空对象的__proto__属性指向函数对象的prototype成员对象
ClassA.call(obj).使用新对象调用函数，函数里面的this指向了新实例对象
将初始化完毕的新对象地址，保存到等号左边的变量中
注意：若构造函数中返回this或者返回值是基本类型的值，则返回新实例对象；若返回值是引用类型的值，则实际返回值是这个引用类型

继承方法
B通过A的实例实现继承 B.prototype = new A();
Grunt:是一种任务自动运行器，与Gulp类似

Grunt的配置分三步：1.手动配置任务 2.加载插件 3.任务注册
Grunt是一种能够优化前端的开发流程的工具，而webpack是一种模块化的解决方案。
Grunt的工作方式：在一个配置文件中，指明对某些文件进行压缩、组合、检查等任务的具体步骤，然后在运行中输入相应的命令

webpack：是一个现代js应用程序的静态模块打包器。当* * webpack处理程序的时候，它会递归的
构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle

webpack的工作方式：把你的项目当做一个整体，通过入口文件，webpack将从这个文件开始找到你的项目所依赖的文件，使用loaders来处理它们，最后打包为一个浏览器可识别的js文件。

两种方法使script不会阻塞DOM的渲染

添加defer属性：会在后台下载，等前边的脚本执行完毕后才会执行，按script的顺序来执行
添加async属性：会在加载完毕后执行。不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。
使用场景：

defer,脚本代码依赖于页面中的DOM元素(文档是否解析完毕),或者被其他脚本文件依赖
async:脚本不关心页面中的DOM元素，并且也不会产生其他脚本需要的数据

模块化工具require.js
require.js的作用：

实现js文件的异步加载，
管理模块之间的依赖性，便于代码的编写和维护。

关于F12调试代码

F10 一步一步执行，遇到方法的时候，一步执行完方法，不会进入到方法中，即不会看到方法里面详细的调试
F11 一步一步执行，遇到方法的时候，会进入到方法的内部，一步一步执行方法里面的代码
F11+Shift 从当前的方法中退出，即一步执行完方法，
F8+Ctrl 使断点调试无效

vue3

router引入组件时，不支持template写法，支持render直接return写法，
使用router时，router-view标签需写在app.vue里面。
使用createApp(App)来创建实例
orientationChange是移动端提供的方法，确定用户何时将设备由横向查看切换为纵向查看模式。
router-link标签没有tag属性，需使用v-slot和标签的@click去实现原来的tag属性。
methods里面通过this.xx使用setup里面的data
組合式选项，从vuex引用useStore，从vue-router引用useRoute,useRouter
vue3的setup中没有this和 $re f s ，如果要使用$ refs时，需要引入getCurrentInstance并调用，该方法只在setup和生命周期函数中有效，在方法中无效。
获取xx=computed(()=>return {}）里面的值需要使用xx.value;

vue异步更新队列

vue在更新dom时是异步执行的。当侦听到数据变化，vue不会立即重新渲染。vue会开启一个队列，缓存在同一事件循环中所有数据的变更。
当watcher多次触发时，只会被推入到队列中一次，在内部对异步队列尝试使用原生的Promise.then\MutationObserver\setImmediate，如果环境不支持，会使用setTimeout来实现。