关于this的理解
什么是this?定义:调用函数时,call后面的第一个值
如何找到this?由定义可知,this就是call后面的第一个值,只要确定了call后面的值,即可找到this。换句话说,只需要把函数调用改成带有call的调用即可
函数调用JS(ES5)里面有三种函数调用形式:
123func(p1, p2) obj.child.method(p1, p2)func.call(context, p1, p2)
一般,初学者都知道前两种形式,而且认为前两种形式「优于」第三种形式。
从看到这篇文章起,你一定要记住,第三种调用形式,才是正常调用形式:
1func.call(context, p1, p2)
其他两种都是语法糖,可以等价地变为 call 形式:
12345func(p1, p2) 等价于func.call(undefined, p1, p2)obj.child.method(p1, p2) 等价于obj.child.method.call(obj.child, p1, p2)
请记下来。(我们称此代码为「转换代码」,方便下文引用)
至此我们的函数调用只有一种形式:
1func.call ...
Sourcetree GIt工作流使用及分支开发模式
一般的企业级开发分支共有5种类型
master,最终发布版本,整个项目中有且只有一个。
develop,项目的开发分支,原则上项目中有且只有一个。
feature,功能分支,用于开发一个新的功能。
release,预发布版本,介于develop和master之间的一个版本,用于测试。
hotfix,修复补丁,用于修复master上的bug,直接作用于master。
SourceTree一般开发模式:1、开发任务都是在develop分支上完成的,当开发中需要增加一个新的功能时,可新建feature分支,用于增加新功能,并且不影响开发中的develop源码,当新功能增加完成后,完成feature分支,将新功能合并到develop中,更新develop上的代码。操作:
①分支选择develop,点击Git工作流,选择“建立新的功能”,以功能命名分支,并把生成的分支推到远程仓库,如下图:
②完成功能开发后,将当前分支指向该分支(如上图“首页”分支),点击“Git工作流”,选择“完成功能”,将新功能合并到develop中,更新develop上的代码,如下图:
2、当开发到一定阶段,可 ...
正则表达式学习
1. 基本匹配正则表达式只是我们用于在文本中检索字母和数字的模式。例如正则表达式 cat,表示: 字母 c 后面跟着一个字母 a,再后面跟着一个字母 t。
1"cat" => The cat sat on the mat
正则表达式 123 会匹配字符串 “123”。通过将正则表达式中的每个字符逐个与要匹配的字符串中的每个字符进行比较,来完成正则匹配。 正则表达式通常区分大小写,因此正则表达式 Cat 与字符串 “cat” 不匹配。
1"Cat" => The cat sat on the Cat
2. 元字符元字符是正则表达式的基本组成元素。元字符在这里跟它通常表达的意思不一样,而是以某种特殊的含义去解释。有些元字符写在方括号内的时候有特殊含义。 元字符如下:
元字符
描述
.
匹配除换行符以外的任意字符。
[ ]
字符类,匹配方括号中包含的任意字符。
否定字符类。匹配方括号中不包含的任意字符
*
匹配前面的子表达式零次或多次
+
匹配前面的子表达式一次或多次
?
匹配前面的子表达式零次或一 ...
vue3常用的API
Vue2每次都把整个Vue导入,例如Vue2的 main.js 文件中的代码
12345678import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({ render: h => h(App)}).$mount('#app')
但很明显我们的项目中不可能用到Vue所有的API,因此很多模块其实是没有用的
那么在Vue3中,对外暴露了很多的API供开发者使用,我们可以根据自己的需求,将所需要的API从Vue中导入。例如 main.js 中的代码
1234import { createApp } from 'vue';import App from './App.vue'createApp(App).mount('#app')
利用了 import 和 export 的导入导出语法,实现了按需打包模块的功 ...
vue3知识整理
Vue3
1.Vue3 简介
2020 年 9 月 18 日,Vue.js 发布 3.0 版本,代号:One Piece(海贼王)
耗时 2 年多、2600+次提交、30+个 RFC、600+次 PR、99 位贡献者
github 上的 tags 地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0
2.Vue3 带来了什么1.性能的提升
打包大小减少 41%
初次渲染快 55%, 更新渲染快 133%
内存减少 54%
…
2.源码的升级
使用 Proxy 代替 defineProperty 实现响应式
重写虚拟 DOM 的实现和 Tree-Shaking
…
3.拥抱 TypeScript
Vue3 可以更好的支持 TypeScript
4.新的特性
Composition API(组合 API)
setup 配置
ref 与 reactive
watch 与 watchEffect
provide 与 inject
…
新的内置组件
Fragment
Teleport
Suspense
其他改变 ...
vue大屏适配方案
在做可视化大屏项目难免会考虑到屏幕适配的难题,如果有一个适配各种屏幕的基础容器组件处理这个事情,我们就可以放心写业务,下面介绍在vue中如何通过锁定宽高比的方式来进行屏幕适配。
组件特点1.自动监听浏览器窗口变化,动态计算出高宽比,无视页面放大缩小
2.适用于各种屏幕,常用作项目最外层基础容器
3.突破浏览器中 font-size 最小 12px 限制
组件实现新增LargeScreenContainer.vue文件,在文件里面创建一个外层包裹容器,根据屏幕的可视区尺寸与设计稿尺寸得到一个宽高缩放比例,根据比例去对外层包裹容器进行缩放,以适应屏幕
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091 ...
vue中使用vue-lazyload实现图片的懒加载
前面在图片懒加载一文中讲到什么是图片懒加载和用js怎么实现懒加载,本文记录一下图片懒加载插件 vue-lazyload的使用。
一、安装依赖包npm1npm i vue-lazyload -S
yarn1yarn add vue-lazyload
二、全局注册插件1234567891011// 引入插件import VueLazyload from 'vue-lazyload'// 注册插件const loadimage = require('./assets/loading.gif')const errorimage = require('./assets/error.gif')Vue.use(VueLazyload, { preLoad: 1.3, error: errorimage, loading: loadimage, attempt: 1})
配置项参数说明:
键
描述
默认值
选项
preLoad
表示lazyload的元素,距离页面底部距离的百分比.计算值为(p ...
JS命名规范
js命名应遵循 简洁、语义化 的原则
一、变量命名方法: 小驼峰式命名法命名规范:前缀为形容词 (函数前缀为动词, 以此来区分函数和变量)
123456//好的命名方式let maxCount = 10;let tableTitle = '啦啦啦';//不好的命名方式let setConut = 10;let getTitle = '啦啦啦';
临时变量1:作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。2:循环变量可以简写,比如:i,j,k等。
s:表示字符串。例如:sName,sHtml;
n:表示数字。例如:nPage,nTotal;
b:表示逻辑。例如:bChecked,bHasLogin;
a:表示数组。例如:aList,aGroup;
r:表示正则表达式。例如:rDomain,rEmail;
f:表示函数。例如:fGetHtml,fInit;
o:表示以上未涉及到的其他对象,例如:oButton,oDate;
g:表示全局变量,例如:gUserName,gLoginTime;
二、常量
某 ...
CSS媒体查询
媒体查询(Media Queries)
媒体查询(Media Queries)是 CSS3 中的一个特性,它允许你根据设备的特性(如宽度、高度、颜色等)来应用不同的 CSS 样式。这使得开发者能够为不同的设备(如桌面电脑、平板电脑、手机等)或同一设备的不同状态(如横屏或竖屏)创建特定的布局和样式。
媒体查询由两部分组成:媒体类型(Media Type)和媒体特性(Media Features)。
媒体类型:描述了设备的一般类别,如 all(所有设备)、screen(电脑屏幕、平板电脑、智能手机等)、print(打印机和打印预览)等。
媒体特性:描述了设备的具体特性,如 width(视口宽度)、height(视口高度)、color(设备颜色位数)等。
媒体查询的基本语法如下:
1234css@media mediaType and (mediaFeature1: value1) and (mediaFeature2: value2) { /* CSS 规则 */ }
例如,如果你想为宽度小于 768px 的设备设置特定的样式,你可以这样写:
12345 ...
uniapp安卓手机无线真机调试
从 Android 11 开始USB调试新增了无线调试功能,需要搭配 adb 30.0.0 及以上版本使用,请确认你的系统和adb是否符合要求。
一、下载adbadb下载地址: SDK Platform Tools版本说明
选择对应的系统版本,我是windows系统,所以选择如下:
下载解压完之后放到HBuilderX的adbs文件夹里 重命名为34.0.0
二、在手机上打开无线调试手机连上wifi,保证手机和电脑在同一局域网,进入开发者选项开启无线调试
三、使用配对码配对1、手机上点击使用配对码配对设备,查看配对码和ip地址:
2、进入34.0.0 文件夹,并打开cmd窗口:
使用adb pair命令和手机配对
继续使用adb connect命令连接设备
四、验证