# front

**Repository Path**: littleboyck/front

## Basic Information

- **Project Name**: front
- **Description**: js基础实现
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2020-08-12
- **Last Updated**: 2026-01-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

分组方案

第一种：

当前用户只能在一个所属分组中。
但在分组管理中：每个分组中都可以有当前用户。
管理者可以看见当前用户的数据，但是当前用户只能看见，所属的分组的数据

第二种
通过获取角色中关联的部门ID，再关联查询出，被查询表中与当前用户部门ID相同数据。前提是被查询的表中必须要有 部门ID 的字段。


```js
const scrollTop = document.documentELement.scrollTop || document.body.scrollTop;
const scrollLeft = document.documentELement.scrollLeft || document.body.scrollLeft;
const clientWidth = Math.min.apply(null, [document.documentELement.clientWidth, window.innerWidth]);
```

> js中的`副作用函数`
指在函数中对  
* 修改全局变量或对象的属性
* 发起网络请求
* 修改本地存储
* 修改DOM元素
* 控制台输出
* 定时器操作
* 异步操作（如 Promise、回调函数等）

```js
let i = 0;
function sum(a, b){
    i = 1;
    return a+b;
}
sum(1, 9);
// 当调用sum函数时，导致i被设置为了1，这就是一个副作用
```

> vue3中的副作用
```js
当响应式依赖发生变化时，所触发的函数。

const user = reactive({
    name: 'ck',
    age:18
});

watchEffect(() => {
    console.log('副作用函数，监听到响应式依赖变化：',user.name)
});
/**
 * 当set user.name时，响应式数据发生变化，会产生一个副作用。而这个副作用会触发watchEffect的callback函数
 *  */ 
user.name = '陈康'
```

```js
import { effectScope } from 'vue'

// 创建一个副作用域
const effectIns = effectScope();
const user = reactive({
    name: 'ck',
    age:18
});
effectIns.run(() => {
    // 当响应式依赖user.name发生变化时，会触发此回调
    const name = user.name;
});
user.name = '陈康'
```

```js 
const rect = document.querySelector('#item1').getBoundingClientRect();
// getBoundingClientRect获取的数据是当前元素相对于html网页的可视化容器的数据
// 主要这里用的是html网页，而不是浏览器的可视化
const clientWidth = document.documentELement.clientWidth;

offsetLeft用于获取一个元素相对于其最近的已定位父元素的左边缘的水平偏移量
因此，如果元素不是一个定位元素，那么，offsetLeft值为0
如何获取鼠标相对event.target元素左边缘的偏移量，请不要使用event.offsetX，因为存在浏览器兼容问题
const offsetX = event.clientX - rect.left;
```

> for ... of 优点
* 每次遍历的值: item, 而不是 index
```js
for(const item of ['name', 'age']) {
    console.log(item)
}
// name
// age
```
> 可以同步的执行多个异步任务
* 当与async/await结合使用时，可以按顺序执行异步任务
* 如果是一个异步任务，for...of会暂停循环的执行，直到异步任务执行完成
```js
const p1 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p1');
        }, 1000);
    })
}

const p2 = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('p2')
        }, 1000);
    })
}

const tasks = [p1, () => { return '同步任务' }, p2];

async function run(){
    for(const task of tasks) {
        try{
           const res = await task();
           console.log(res)
        }catch(e){
            console.log('e')
        }
    }
}
run()
// p1
// 同步任务
// p2
```

## 让对象支持通过for of 循环遍历值**
```js
// 方案一
Object.assign(Object.prototype, {
    [Symbol.iterator]() {
        const keys = Object.keys(this);
        let index = 0;
        
        return {
            next: () => {
                if (index < keys.length) {
                    const key = keys[index++];
                    return { 
                        value: this[key], // 返回值
                        done: false 
                    };
                } else {
                    return { done: true };
                }
            }
        };
    }
})
var obj = {name: 'ck', age: 18};
for(let val of obj) {
    console.log(val)
}
// ck
// 18
```

**方案二：只适用于对象是一个伪数组**
```js
const arrayLike = {
    0: 'JavaScript',
    1: 'Python',
    2: 'Java',
    length: 3, // 必须的
    [Symbol.iterator]: Array.prototype[Symbol.iterator]
};

for (const lang of arrayLike) {
    console.log(lang); // 正常输出
}
```


### 跨组件插槽传递
> https://blog.csdn.net/qq_41646185/article/details/127183412


## 导入文件
导入文件通常使用post

## 多个v-model
> https://blog.csdn.net/to_the_Future/article/details/130887415


## 安全区
> padding-bottom: calc(10px + constant(safe-area-inset-bottom));
> padding-bottom: calc(10px + env(safe-area-inset-bottom));

### 测试reset

### 图片嵌入链接
#### 链接语法 [百度一下](https://baidu.com)
[![](http://attachmentgw.trinasolar.com/fs/ts/65b757fc65c7a70006446e32/20241102/644BAEB5BD944AAC9E102BDB9F5D995D.jpg)](http://mp.weixin.qq.com/s?__biz=MzA4OTM0MDQzNQ==&amp;mid=2658984764&amp;idx=2&amp;sn=9854021a44325c769664acc8e9106dbc&amp;chksm=8b942c40bce3a55637e3bc2912de80763f85ca3947138f9edac0e7ad3b9e21693c9bf7b72446&amp;scene=21#wechat_redirect)

-------

## 单点登录流程
登录流程
1. 如果storage中没有token, 则重新跳转至iam公共登录页面
2. 输入用户名密码，点击登录成功后，会重定向至redect_uri，并在url中携带code参数
3. 根据code参数，向iam服务器请求token
4. 成功获取token后，将token存储至storage中，并跳转至path参数指定的页面

## 前端几种模块规范
1. cjs commonjs 模块规范  .cjs
2，esm es6 模块规范 .mjs文件
3. amd amd 模块规范 .js文件
4. umd universal 模块规范 (兼容cjs，amd, 浏览器环境)