随笔笔记-2023

随笔

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

    如果不希望用缓存那么就用 methods

  2. 字符与字节
    • 1 字节==8 位
    • 1B=8 bit;
    • 1KB = 1024B,1MB=1024KB=1024*1024B
  3. 编码:
    • UTF-8 编码:1 个英文字符(包含标点符号)==1 个字节,1 个中文(包含标点符号和繁体)===3 个字节
    • Unicode 编码:1 个英文(包含标点符号)/1 个中文(包含标点符号和繁体)===2 个字节
  4. 二进制和十进制的转换
    • 正整数十进制转换成二进制:除以二倒取余数
    • 二进制转换成正整数十进制:每个位数的值*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 倒序取余数即可
  5. 小程序

    小程序的生命周期回调

    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”})

  6. js 中的设计模式

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

  7. 数据库
  • 创建、删除表(主键、外键、约束 check、默认值 default)
  • 插入、查询、删除行
  • 高级查询(条件查询)
  • 表与表的关联,比如复制\union\inner join
  1. js 基础
  • js 是面向对象编程,但是没有类和实例的概念,通过原型来实现面向对象编码。
  1. mvc 框架:是 Model View Controller.是模型(model)-视图(view)-控制器(controller)的缩写。

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

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

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

    框架是代码重用,而设计模式是设计重用,架构介于两者之间。
    设计模式是对在某种环境中反复出现的问题以及解决该问题的方案的描述,它比框 架更抽象;
    框架可以用代码表示,也能执行或者复用,而对模式而言只能实例才能用代码表 示,设计模式是
    比框架更小的元素,一个框架中往往包含 1 或多个设计模式,框架总是针对某一特定应用领域,但
    同一模式可适用于各种应用。即框架是软件,而设计模式是软件的知识。

  2. MVC:Model-view-controller:是通过 controller 来控制,

    mvc 有两种流程:

    1. 通过 view 接受指令,传递给 controller.然后对模型进行修改或者查找底层数据,最后把改动渲染在视图上,即 view->controller->model>view
    2. 通过 controller 接受指令,传给 controller; 即controller->model->view

    mvc 优点:

    1. 耦合性低。视图层和业务层分离。
    2. 重用性高
    3. 生命周期成本低
    4. 可维护性高
    5. 部署快

    mvc 缺点:

    1. 不适合小型中型的应用程序
    2. 视图与控制器之间过于紧密连接
    3. 视图对模型数据的低效率访问

    mvc 用在 java(struts2)和 c#(asp.net)服务端应用中

  3. MVVM:model-view-viewModel

  • model:指数据
  • view:视图
  • viewModel:视图模型,是暴露公共属性和命令的视图的抽象,MVVM没有MVC中的controller,也没有MVP中的presenter,有的是一个绑定器,在vm中,绑定器在视图和数据绑定器之间进行通信
    MVVM是双向数据流,m和v之间的双向通信,由vm作桥接
  1. 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事件侦听)的一个语法糖
  1. 从一个进程到另一个进程的切换是由操作系统内核管理的。内核时系统管理全部进程所用代码和数据结构的集合。
  2. xss:跨站脚本攻击。
  • 比如可以document.cookie获取用户cookie,获取用户数据
  • 解决xss:1.在服务器端设置cookie不能通过document.cookie获取 2.对用户输入的数据进行加密
  1. vue使用vuex时,刷新子页面数据会丢失。解决方法:向后台请求ajax,并在刷新前将vuex里面的值保存在sessionstorage,在回调返回数据之间用sessionstorage,若返回则用vuex
  2. promise的好处:在异步执行的流程中,把执行代码和处理结果的代码分离了。
  3. 系统提供window.VueCalendarLang 勾子函数来让用户自定义语言
  4. app.js:常规配置+核心模块引入
  • 配置和核心模块引入
  • 配置静态文件地址
  • 配置模板引擎
  • 配置视图模板的位置
  • 配置端口
  • 配置路由
  1. 函数的声明有两种方式
  1. 函数表达式 即字面量声明 var a = function(){}
  2. 函数关键字声明 function a(){}
    注意:js中的函数声明会提前
  1. 原型
  1. 构造函数和实例的关系:
    person1和person2都是构造函数Person的实例。
    实例的构造函数属性(constructor)指向构造函数。person1.constructor==Person
  2. 构造函数和原型的关系
    Person.prototype == 原型对象;
    Person.prototype.constructor = Person
  1. 实例和原型对象的关系
    实例会继承原型对象的属性,在隐式属性__proto__里面找。
    person1.proto===Person.prototype;

注意:原型对象和实例都是Person的实例,都是普通对象,(但是Function.protype除外,
是函数对象,但是没有prototype属性)

  1. 简单数据类型和复杂数据类型的引用:
  • 简单数据类型是值引用,存在栈内存中。
  • 复杂数据类型是地址引用,即在栈内存中存放地址,这个地址指向堆内存中的对象。复制复杂数据类型是复制引用(即地址)
  • 普通数据类型比较的是值得比较。引用类型比较的是引用的比较
Person.prototype.consotructor == Person;
person1.__proto__==Person.prototype;
person1.constructor ==Person;

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

  1. 普通对象与函数对象的区别
  1. 普通对象有var o1={};var o2 = new Object;var o3 = new f1();
  2. 函数对象有函数的3种声明方式,有字面量声明、函数声明、通过构造函数声明。函数对象是函数
    总结:凡是通过new Function()创建的对象都是函数对象,其他的都是普通对象。
    对象都有__proto__属性,函数对象才有prototype属性
  3. 一个普通对象的构造函数===Object。
    Person.prototype是一个普通对象,所以Person.prototype.proto==Object.prototype
  1. 对象的创建方法:
var o = Object.create({a},{ name:{enumerable: true,value:"ssss"}})

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

  1. new操作符做了哪些事
  1. var obj = {};创建了一个空对象obj
  2. obj.proto=ClassA.prototype 将这个空对象的__proto__属性指向函数对象的prototype成员对象
  3. ClassA.call(obj).使用新对象调用函数,函数里面的this指向了新实例对象
  4. 将初始化完毕的新对象地址,保存到等号左边的变量中
    注意:若构造函数中返回this或者返回值是基本类型的值,则返回新实例对象;若返回值是引用类型的值,则实际返回值是这个引用类型
  1. 继承方法
    B通过A的实例实现继承 B.prototype = new A();
  2. Grunt:是一种任务自动运行器,与Gulp类似
  • Grunt的配置分三步:1.手动配置任务 2.加载插件 3.任务注册
  • Grunt是一种能够优化前端的开发流程的工具,而webpack是一种模块化的解决方案。
  • Grunt的工作方式:在一个配置文件中,指明对某些文件进行压缩、组合、检查等任务的具体步骤,然后在运行中输入相应的命令
  1. webpack:是一个现代js应用程序的静态模块打包器。当* * webpack处理程序的时候,它会递归的
    构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将这些模块打包成一个或多个bundle
  • webpack的工作方式:把你的项目当做一个整体,通过入口文件,webpack将从这个文件开始找到你的项目所依赖的文件,使用loaders来处理它们,最后打包为一个浏览器可识别的js文件。
  1. 两种方法使script不会阻塞DOM的渲染
  1. 添加defer属性:会在后台下载,等前边的脚本执行完毕后才会执行,按script的顺序来执行
  2. 添加async属性:会在加载完毕后执行。不会按着script在页面中的顺序来执行,而是谁先加载完谁执行。
  3. 使用场景:

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

  1. 模块化工具require.js
    require.js的作用:
  1. 实现js文件的异步加载,
  2. 管理模块之间的依赖性,便于代码的编写和维护。
  1. 关于F12调试代码
  1. F10 一步一步执行,遇到方法的时候,一步执行完方法,不会进入到方法中,即不会看到方法里面详细的调试
  2. F11 一步一步执行,遇到方法的时候,会进入到方法的内部,一步一步执行方法里面的代码
  3. F11+Shift 从当前的方法中退出,即一步执行完方法,
  4. F8+Ctrl 使断点调试无效
  1. 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和 r e f s ,如果要使用 refs,如果要使用 refs,如果要使用refs时,需要引入getCurrentInstance并调用,该方法只在setup和生命周期函数中有效,在方法中无效。
  • 获取xx=computed(()=>return {})里面的值需要使用xx.value;
  1. vue异步更新队列
  • vue在更新dom时是异步执行的。当侦听到数据变化,vue不会立即重新渲染。vue会开启一个队列,缓存在同一事件循环中所有数据的变更。
  • 当watcher多次触发时,只会被推入到队列中一次,在内部对异步队列尝试使用原生的Promise.then\MutationObserver\setImmediate,如果环境不支持,会使用setTimeout来实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/579634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试题之二HTTP和RPC的区别?

面试题之二 HTTP和RPC的区别? Ask范围:分布式和微服务 难度指数:4星 考察频率:70-80% 开发年限:3年左右 从三个方面来回答该问题: 一.功能特性 1)HTTP是属于应用层的协议:超文本传输协议…

【SpringCloud】-OpenFeign实战及源码解析、与Ribbon结合

一、背景介绍 二、正文 OpenFeign是什么? OpenFeign(简称Feign)是一个声明式的Web服务客户端,用于简化服务之间的HTTP通信。与Nacos和Ribbon等组件协同,以支持在微服务体系结构中方便地进行服务间的通信&#xff1b…

Linux账号与权限管理

目录 一、账号管理 1. 用户账号 1.1 概述 1.2 用户账号类型 1.3 用户账号区分 2. 组账号 2.1 概述 2.2 区分 3. 用户账号管理 3.1 重要文件存放位置 3.2 基本信息 3.3 添加用户 3.3.1 通式 3.3.2 选项示例 3.4 密码管理 3.4.1 通式 3.4.2 选项示例 3.4.3 免交…

macos Apple开发证书 应用签名p12证书 获取生成方法 codesign 证书获取

在开发macos应用的时候必须要对自己开发的应用进行签名才能使用, 下面介绍个人如何获取Apple开发签名证书. 必备条件, 你需要先安装 xcode , 注册一个苹果开发者账号 免费的就可以, 以下为获取流程 You need to create a cert through xcode. Additionally, you need to have…

深信服技术认证“SCCA-C”划重点:云计算基础

为帮助大家更加系统化地学习云计算知识,高效通过云计算工程师认证,深信服特推出“SCCA-C认证备考秘笈”,共十期内容。“考试重点”内容框架,帮助大家快速get重点知识。 划重点来啦 *点击图片放大展示 深信服云计算认证&#xff08…

[Angular] 笔记 10:服务与依赖注入

什么是 Services & Dependency Injection? chatgpt 回答: 在 Angular 中,Services 是用来提供特定功能或执行特定任务的可重用代码块。它们可以用于处理数据、执行 HTTP 请求、管理应用程序状态等。Dependency Injection(依赖注入&#…

浅谈互联网架构演变

更好的阅读体验 \large{\color{red}{更好的阅读体验}} 更好的阅读体验 前言 可以将某个项目或产品的架构体系按照如下方式分层: 业务层面:项目业务体系技术层面: 数据架构:数据持久层策略应用架构:应用层的实现方式 …

云原生Kubernetes系列 | Kubernetes Secret及ConfigMap

云原生Kubernetes系列 | Kubernetes Secret及Configmap 1. Secret及Configmap使用背景简介2. Secret2.1. Secret创建方式2.1.1. 命令行方式2.1.2. 文件方式2.1.3. 变量方式2.1.4. YAML文件方式2.2. Secret使用方式2.2.1. 用于传递配置文件2.2.3. 用于传递变量3. ConfigMap1. Se…

CPU亲和性和NUMA架构

何为CPU的亲和性 CPU的亲和性,进程要在某个给定的 CPU 上尽量长时间地运行而不被迁移到其他处理器的倾向性,进程迁移的频率小就意味着产生的负载小。亲和性一词是从affinity翻译来的,实际可以称为CPU绑定。 在多核运行的机器上,…

AlignBench:量身打造的中文大语言模型对齐评测

对齐(Alignment),是指大语言模型(LLM)与人类意图的一致性。换言之,就是让LLM生成的结果更加符合人类的预期,包括遵循人类的指令,理解人类的意图,进而能产生有帮助的回答等…

SadTalker数字人增加视频输出mp4质量精度

最近在用数字人简易方案,看到了sadtalker虽然效果差,但是可以作为一个快速方案,没有安装sd的版本,随便找了个一键安装包 设置如上 使用倒是非常简单,但是出现一个问题,就是输出的mp4都出马赛克了 界面上却…

Servlet见解2

4 创建servlet的三种方式 4.1 实现Servlet接口的方式 import javax.servlet.*; import javax.servlet.annotation.WebServlet; import java.io.IOException;WebServlet("/test1") public class Servlet1 implements Servlet {Overridepublic void init(ServletConf…

怎么实现Servlet的自动加载

在实际开发时,有时候会希望某些Servlet程序可以在Tomcat启动时随即启动。但在默认情况下,第一次访问servlet的时候,才创建servlet对象。 如果servlet构造函数里面的代码或者init方法里面的代码比较多,就会导致用户第一次访问serv…

制作一个可以离线安装的Visual Studio安装包

须知 前提条件,需要电脑可以正常上网且网速还行,硬盘可以空间容量足够大,怎么判断容量够用?由组件数量的多少来决定。Visual Studio 频道和发布节奏 https://learn.microsoft.com/zh-cn/visualstudio/productinfo/release-rhythm…

AutoSAR(基础入门篇)3.2-Autosar中RTE的Ports【S/R】与【C/S】

目录 一、RTE的Ports【S/R】 1、特征 1.1、扮演SWCs和BSW的交流途径 1.2、其他特征

简析SoBit 跨链桥图文教程

从BTC网络到Solana网络桥接BRC20 1.打开SoBit平台:在您的网络浏览器中启动SoBit Bridge应用程序。 2.连接您的钱包: 选择SoBit界面右上角的比特币网络来连接您的数字钱包。 3.选择源链、目标链和您想桥接的代币: 从下拉菜单中选择’BTC’作为…

讯飞星火认知大模型智能语音交互调用

随着国内外大模型热度的兴起,依托于大模型的智能化,传统的人机交互已经不能满足人们交互的需求。而结合语音和大模型的交互拜托传统互联网获取知识的文字限制,用语音也可以轻松获取想要的知识和思路。 一、大模型智能语音交互调用实现思路 …

华为ipv6配置之ospf案例

R1 ipv6 ospfv3 1 router-id 1.1.1.1 //必须要手动配置ospf id,它不会自动生成 interface GigabitEthernet0/0/0 ipv6 enable ipv6 address 2000::2/96 ospfv3 1 area 0.0.0.0 interface LoopBack0 ipv6 enable ipv6 address 2001::1/96 ospfv3 1 area 0.0.0.0 R2…

创新科技赋能,易点易动设备管理系统助力企业实现设备管理升级

在当今竞争激烈的商业环境中,企业对设备管理的要求越来越高。高效的设备管理不仅可以提高生产效率,降低成本,还可以确保设备安全和可靠性。然而,传统的手工管理方式已经无法满足企业快速发展的需求。为了解决这一问题,…

electron autoUpdater自动更新使用示例 客户端+服务端

封装好的 update.js 模块 use strict; const { autoUpdater } require(electron) // 更新检测 // https://www.electronjs.org/zh/docs/latest/api/auto-updaterconst checkUpdate (serverUrl) >{const updateUrl ${serverUrl}/update?platform${process.platform}&am…