JS

Set

Set本身是一个构造函数，用来生成 Set 数据结构

Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 可用来排除重复的内容

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
    console.log(i);
}
// 2 3 5 4

// 去除数组的重复成员
[...new Set(array)]
// 可以用于，去除字符串里面的重复字符
[...new Set('ababbc')].join('')
// "abc"

上面代码通过add()方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。

Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56

// 类似于
const set = new Set();
document
 .querySelectorAll('div')
 .forEach(div => set.add(div));
set.size // 56

函数防抖

这个 debounce 函数在给定的时间间隔内只允许你提供的回调函数执行一次，以此降低它的执行频率。
当遇到高频触发的事件时，这样的限制显得尤为重要。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};

    // 用法
    var myEfficientFn = debounce(function() {
	// 频繁执行的函数
    console.log(1);
    }, 250);
    window.addEventListener('resize', myEfficientFn);

};

禁止重复调用、只允许执行一次的once 函数

很多时候，我们只希望某种动作只能执行一次，就像是我们使用 onload 来限定只在加载完成时执行一次。
下面这个函数就能让你的操作执行一次后就不会再重复执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    function once(fn, context) { 
	var result;

	return function() { 
		if(fn) {
			result = fn.apply(context || this, arguments);
			fn = null;
		}
		return result;
	};
}

// 用法
var canOnlyFireOnce = once(function() {
	console.log('Fired!');
});

canOnlyFireOnce(); // "Fired!"
canOnlyFireOnce(); // nada

console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 声明
console.log(['%c轩', '%c时间: 2020-12', '%c主页: wuruixuan.com', '%cgithub: www.github.com/wuruixuan2464', '%c座右铭: I am just a ordinary people 😊'].join('\n').toString(),
    `
            background:url(http://www.wellyyss.cn/images/logo.png) no-repeat left center;
            background-size:30px 40px;
            padding-left:40px;
            line-height:50px;
            font-size: 18px;
            font-weight:bold;
            color:#00D4FF
            `,
    `
            background:none;
            line-height:30px;
            font-size: 18px;
            font-weight:bold;
            color:#00D4FF
            `,
    `
             padding-left:40px;
            background:none;
            line-height:30px;
            font-size: 18px;
            font-weight:bold;
            color:#00D4FF
            `,
    `
            background:none;
            line-height:30px;
            font-size: 18px;
            font-weight:bold;
            color:#00D4FF
            `,
    `
            padding-left:40px;
            background:none;
            line-height:30px;
            font-size: 18px;
            font-weight:bold;
            color:#00D4FF
            `
)

cookie

Cookie 用于存储 web 页面的用户信息。

设置cookie

1
2
3
4
5
6
7
8
9
// cname  cookie 键名
// cvalue cookie 值
// exdays 设置到期时间
    function setCookie(cname,cvalue,exdays){
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }

获取cookie

cookie 名的参数为 cname。
创建一个文本变量用于检索指定 cookie :cname + “=”。
使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(‘;’))。
循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。
如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。
如果没有找到 cookie, 返回 “”。

1
2
3
4
5
6
7
8
9
    function getCookie(cname){
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++){
          var c = ca[i].trim();
          if (c.indexOf(name)==0) return c.substring(name.length,c.length);
        }
    return "";
}

Css

input

禁止输入

1
2
3
4
5
6
1: disabled   被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type="hidden"> 一起使用
<input type="text" value="哈哈哈" disabled="disabled">

2: readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。
<input type="text" value="哈哈哈" readonly="readonly">

CSS3中新增了[resize]缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple safari都支持。
而textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。textarea右下角有一个可以控制缩放的按钮。
一般情况下，textarea是被固定宽度和高度的，如果你不愿意让其任意缩放，你可以为textarea添加resize:none的css属性。这样就可以去除Webkit内核的浏览器的默认显示。

以下是resize属性的的各个取值:

1
2
3
4
5
resize:none; 用户不能操纵机制调节元素的尺寸
resize:both; 用户可以调节元素的宽度和高度
resize:horizontal;用户可以调节元素的宽度
resize:vertical;让用户可以调节元素的高度
resize:inherit;默认继承。

验证数字

1
2
限制input只能输入数字
<input type="number" onkeyup="this.value=this.value.replace(/\D/g,'')">

text

1
2
3
4
5
6
7
8
9
10
/* 单行溢出变点 */
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

/* 多行 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

常用方法

request 网络请求

/*
*参数项说明
*
*@param c 参数项
**param data 发送数据项，一般为shiyu2参数，如果没有可不传。 JSON
**param containFile 发送的数据是否包含文件，如果为真则数据会有不同的处理
**param loadTxt loading提示词。 string。 加载中。
**param debug 是否开启调试模式。 number。 0。 0 - 随全局调试走 | 1 - 强制开启调试
**param success 请求成功即 state==success 时回调。 function
**param fail 请求失败即 state==fail 时回调。 function
**param complete 请求完成回调，无论请求成功还是失败。 function
*/

/*
*发起请求处理
*
*@param c 参数项。 JSON
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

sl_request({
    url:'',
    data:'',
    loading:true,
    loadTxt:'加载中'
    json:true,

    // // 成功回调
    // success(res){
    //     console.log(res);
    // $sy.tip.change({
    //     state: "success",
    //     txt: "查询成功",
    //     hide: true,
    //     time: 1024,
    // });
    // },

    // // 失败回调
    // fail(err){
    //     console.log(err)
    // },

    // 无论成功还是失败都会回调
    complete(){
        if(res.code == '1000'){

        }else if(res.code == '1003'){
        
        }
    }
})

Tips 弹窗

参数说明：
第一个参数为对象，type为下方按钮数量 可选项 one/two string
txt为弹窗内容 string
hide为显示隐藏 可选项 true/false bool
time为弹窗消失时间
第二个参数为点击确认的回调函数
第三个参数为点击取消的回调函数

1
2
3
4
5
6
7
8
var c = new $sy.notice({
    type: 'two',
    txt: '是否确认删除',
    hide: true,
    time: 1024
}, function () {
    c.hide();
}, function () {});

改变弹窗内容

1
2
3
4
5
6
7
$sy.tip.change({
    state: "success",
    txt: "查询成功",
    hide: true,
    time: 1024,
});

代码规范

2020/11/23/18:14

无论有多少人共同参与同一项目，一定要确保每一行代码都像是唯一个人编写的。

HTML

嵌套元素应当缩进一次（即四个空格）。

元素属性顺序（尽量）
HTML属性应按照以下给出的顺序依次排列，确保易读性

  1. class
  2. id , name
  3. data-*
  4. src , for , type , href , value
  5. title , alt
  6. aria-* , role

对于属性的定义，确保全部使用双引号，不要使用单引号

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的
标签并保持最小的复杂度。

class元素命名，前缀为样式所在文件名称的缩写，便于 查找该元素的样式位于哪个css文
件
如一个元素样式加载于某一个css文件中
若css文件的文件名只有一个单词，则前缀取首字母和末字母，如 index.css -> ix_
若css文件的文件名有两个或以上，取每个词的首字母，如 shiyu.css -> sy_
如元素样式加载与当前页面的 style 标签中，则前缀为 p_
上述命名规则适用于大部分开发情况，前端文件交错情况比较复杂，所以特殊情况可忽略此
规则

Javascript

js函数命名，参考 class 元素命名

命名时采用小驼峰命名法，就是第一个单词的首字母小写，后面的单词的首字母全部大写。
如： 规则列表的英文释义为 rule list 则用于命名时应该为 ruleList ，rule 是第一个单词，
所以首字母不大写，而 list 就不是了，所以首字母 L 就是要大写的。

JS事件应用于元素之上时，需把事件放到元素的最后面。

例 :

1
<div class="shiyu" id="myDiv" title="这是一个按钮" onclick="p_checkInfo()"></div>

每一个方法前都要加上注释，注释内容为这个方法的主要作用。如果有传入参数，也要写出
参数的名称、代表了什么、预计传入的参数的数据类型、默认值、可选值。可选值之间用 |
隔开
如： @param 参数名 代表意义。数据类型。默认值。可选值

例:

1
2
3
4
5
6
 /*
2 *判断数据是否为 null
3 *
4 *@param data 要被判断的数据。all
5 *@param flag 严格判断，若开启则需数据必须严格相等。bool。true。true | false
6 */

CSS

对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格

尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

以组件为单位组织代码段
按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动

其他

所有文件的命名，如html、css、js、图片资源文件等不可以采用中文名称或中文输入法状态下的字符

Hello World

如何搭建hexo 博客?推荐一个不错的方法！请查看hexo个人博客

git 推送代码到github

1
2
3
4
5
6
7
8
9
10
11
12
# 第一次提交
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/wuruixuan2464/personal.git
git push -u origin main

# 推送
git add .
git commit -m '提交说明'
git push

一般报错

1
2
3
4
5
6
7
8
9
10
这是服务器的SSL证书没有经过第三方机构的签署，所以报错。
OpenSSL SSL_read: Connection was reset, errno 10054

OpenSSL SSL_connect: Connection was reset in connection to github.com:443

解决方法

git config --global http.sslVerify false
git config --global --add remote.origin.proxy ""