## 简介

> 本文用于记录一些`js`代码，包括函数、语法等等。
> 
> 目前包括：获取浏览器/系统参数 | 页面加载后自动执行 | 禁止div显示 | 设置滚动条固定在底部
> 
> 持续更新中。。。



## 获取浏览器/系统参数

```javascript
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线和滚动条的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)

网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft

网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

你的屏幕设置是：window.screen.colorDepth 位彩色
你的屏幕设置：window.screen.deviceXDPI 像素/英寸
```

## 页面加载后自动执行

```javascript
    window.onload = function () {
        console.log("auto run")
    }
```

## 禁止div显示

1. 利用css的display属性

```js
var doc = document.getElementById('test'); //选取id为test的div元素

doc.style.display = 'none'; // 隐藏元素

doc.style.display = 'block'; // 显示元素
```

2. 利用css的visibility属性

```js
var doc = document.getElementById('test'); //选取id为test的div元素

doc.style.visibility = 'hidden'; // 隐藏元素

doc.style.visibility = 'visible'; // 显示元素
```

## 设置滚动条固定在底部

```js
var div = document.getElementById("div");
// 当一个div有滚动条时
// scrollHeight为其div真实高度
// scrollTop为已向下滚动的距离
// clientHeight为div可见区域的高度(一般是固定高度)
div.scrollTop=div.scrollHeight;
```

## 观察器

使用观察器（MutationObserver）可以监听页面元素变化，详情可参考：[MutationObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver)

```js
/**
 * 监听body变化
 */
function listener_body() {

    // 选择要观察的目标节点
    const body = document.body;

    // 观察器的配置（需要观察什么变动）
    var config = { childList: true };

    // 当观察到变动时执行的回调函数
    var callback = function (mutationsList, observer) {
        console.log("body发生变化");
    };

    // 创建一个观察器实例并传入回调函数
    var observer = new MutationObserver(callback);

    // 用配置文件初始化观察器实例
    observer.observe(body, config);
}
```

JS笔记

## 简介

> 本文用于记录工作中遇到的，或道听途说的，奇奇怪怪的注解。主要包括但不限于`springboot`相关注解。
> 
> 记录内容主要包括：记录日期、所属依赖包、官方说明、源码、个人理解、用法示例。 如果个人理解有误，欢迎评论指出。



## @ConditionalOnProperty

- 记录日期：`2023-02-27`

- 所属依赖包：`org.springframework.boot.autoconfigure.condition`

- 官方说明：详见：[property-conditions](https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#features.developing-auto-configuration.condition-annotations.property-conditions)

> The @ConditionalOnProperty annotation lets configuration be included based on a Spring Environment property. Use the prefix and name attributes to specify the property that should be checked. By default, any property that exists and is not equal to false is matched. You can also create more advanced checks by using the havingValue and matchIfMissing attributes.

- 源码：根据源码可知，该注解可用于类、方法，由于类注释较长，此处不贴出。

```java
@Retention(RetentionPolicy.RUNTIME)
@Target({ ElementType.TYPE, ElementType.METHOD })
@Documented
@Conditional(OnPropertyCondition.class)
public @interface ConditionalOnProperty {

	/**
	 * Alias for {@link #name()}.
	 * @return the names
	 */
	String[] value() default {};

	/**
	 * A prefix that should be applied to each property. The prefix automatically ends
	 * with a dot if not specified. A valid prefix is defined by one or more words
	 * separated with dots (e.g. {@code "acme.system.feature"}).
	 * @return the prefix
	 */
	String prefix() default "";

	/**
	 * The name of the properties to test. If a prefix has been defined, it is applied to
	 * compute the full key of each property. For instance if the prefix is
	 * {@code app.config} and one value is {@code my-value}, the full key would be
	 * {@code app.config.my-value}
	 * <p>
	 * Use the dashed notation to specify each property, that is all lower case with a "-"
	 * to separate words (e.g. {@code my-long-property}).
	 * @return the names
	 */
	String[] name() default {};

	/**
	 * The string representation of the expected value for the properties. If not
	 * specified, the property must <strong>not</strong> be equal to {@code false}.
	 * @return the expected value
	 */
	String havingValue() default "";

	/**
	 * Specify if the condition should match if the property is not set. Defaults to
	 * {@code false}.
	 * @return if the condition should match if the property is missing
	 */
	boolean matchIfMissing() default false;

}

```

- 个人理解

> `@ConditionalOnProperty`可以与`@Bean`结合使用，当配置项符合`@ConditionalOnProperty`限制条件时，`@Bean`才会生效。

- 用法示例：用在方法上，作用可以理解为当`spring.datasource.druid.slave.enabled`属性的值为`true`时，该方法才能够生效。

```java
@Bean
@ConfigurationProperties("spring.datasource.druid.slave")
@ConditionalOnProperty(prefix = "spring.datasource.druid.slave", name = "enabled", havingValue = "true")
public DataSource slaveDataSource(DruidProperties druidProperties)
{
    DruidDataSource dataSource = DruidDataSourceBuilder.create().build();
    return druidProperties.dataSource(dataSource);
}
```

## @CrossOrigin

- 记录日期：`2023-02-27`

- 所属依赖包：`org.springframework.web.bind.annotation`

- 官方说明：详见：[CrossOrigin](https://docs.spring.io/spring-framework/docs/6.0.5/javadoc-api/org/springframework/web/bind/annotation/CrossOrigin.html)

> Cross-origin resource sharing (CORS) is a W3C specification implemented by most browsers that lets you specify in a flexible way what kind of cross-domain requests are authorized, instead of using some less secure and less powerful approaches such as IFRAME or JSONP.
> 
> As of version 4.2, Spring MVC supports CORS. Using controller method CORS configuration with @CrossOrigin annotations in your Spring Boot application does not require any specific configuration. Global CORS configuration can be defined by registering a WebMvcConfigurer bean with a customized addCorsMappings(CorsRegistry) method, as shown in the following example:
> ```java
> @Configuration(proxyBeanMethods = false)
> public class MyCorsConfiguration {
> 
>     @Bean
>     public WebMvcConfigurer corsConfigurer() {
>         return new WebMvcConfigurer() {
> 
>             @Override
>             public void addCorsMappings(CorsRegistry registry) {
>                 registry.addMapping("/api/**");
>             }
> 
>         };
>     }
> 
> }
> ```

- 源码：可用于类、方法。源码都是英文注释，太长，有兴趣自行查看吧，要不然太水了。。。

- 个人理解

> 使用`@CrossOrigin`注解，可以解决部分因前后端分离出现的跨域问题，现在处理跨域问题的方法有很多，例如我工作中常用的处理方式是，前端在http工具类中处理。还有nginx代理处理等等，可视情况自行选用。

- 使用示例：用在类上

```java
@RestController
@CrossOrigin
@RequestMapping("/api")
public class ApiController {
//……此处具体省略代码
}
```

## @ComponentScan

> 配置Springboot自动扫描包，`@SpringbootApplication`有相同功能，所以一般无需适用，剔除某个想要的包时使用。

```java
// 剔除com.hlkj.core.*报下类的自动扫描
@ComponentScan(excludeFilters = @ComponentScan.Filter(type = FilterType.REGEX, pattern = "com.hlkj.core.*"))
```

奇奇怪怪的注解

## 简介

> 前端开发使用的包管理工具`yarn`安装。




## 安装

官方文档：[Installation | Yarn](https://yarnpkg.com/getting-started/install)

### Node.js >= 16.10

如果安装的node版本大于等于`16.10`。

使用管理员权限运行以下命令，开启核心包管理工具，cmd | powershell 均可。

> corepack enable

验证yarn，输出yarn版本：

> yarn -v

### Node.js <16.10

手动安装`corepack`相关工具

> npm i -g corepack


**其他情况安装可参考官方文档**

## Powershell开启yarn

参考文章：[解决PowerShell或vscode无法启动yarn的问题](https://blog.csdn.net/weixin_40136189/article/details/128834086)

因为在windows上，vscode使用的命令终端是powershell，但默认powershell的配置执行yarn是会报错的，如下错误信息：

```
yarn : 无法加载文件 D:\Program Files\nodejs\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micros
oft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ yarn -v
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
```

解决以上错误需要更改一个策略，修改方式如下：

- 方法一：
    - 打开设置 ——> 更新和安全 ——> 开发者选项，找到PowerShell
    - 勾选上“更改执行策略，以允许本地PowerShell脚本在未签名的情况下运行。”，
    - 点击应用，更改成功

- 方法二：
    - 管理员身份打开 PowerShell
    - 执行命令 set-ExecutionPolicy RemoteSigned
    - 如果提示询问是否要更改执行策略?，则选择 A 或 Y
    - 执行完毕后即可更改成功

Windows10安装yarn

```bash
# 查看当前镜像源
npm config get registry
```

```bash
# 设置淘宝镜像源
npm config set registry https://registry.npm.taobao.org
```

```
# 官方仓库
https://registry.npmjs.org/

# 淘宝仓库
https://registry.npm.taobao.org/

# cnpm
https://r.cnpmjs.org/
```

npm切换源

## 前言

> 本地克隆github仓库，出现以下报错的解决办法记录。
> ```
> Failed to connect to github.com port 443 after 21114 ms: Timed out
> ```
> 参考文章：https://blog.csdn.net/Hodors/article/details/103226958



## 解决

```sh
git config --global --unset http.proxy

git config --global --unset https.proxy
```

> 我只有拉取github的代码才出现错误，所以只执行https那一行即可。


## 后续

一个新的仓库又出现该问题，上面方法失效，目前还未解决。

### 猜测

可能因为我本地配置了`ssh`连接`github`，导致使用`https`克隆`github`代码超时？

改用`ssh`克隆代码一次就成功了。。。

配置`ssh`连接`github`可参考我的另一篇博客：[GitHub使用SSH连接](https://oldmoon.top/post/9)

## 再次后续

Github用户可以下载官方客户端`GitHub Desktop`，在网络不畅的情况下，推送成功率更高一些。

Github clone/pull 报错Timeout

twitter:card

twitter:title

https://images.oldmoon.top/images/dingdangdog/oldmoon.png

twitter:image

努力做一只帅气、有才、豁达的老狗！

twitter:description