image frame

Doreen's Blog

redux配合react的简单使用

react

简介

javascript状态容器，提供可预测化的状态管理。（类似于vuex）

redux的工作流程

store 是数据的存放地，组件从store中获取数据
action 存放着组件(view)对数据(data)的操作
reducer 根据传来的action的类型来更新state

流程详解

  1. 用户操作视图数据发出action

    store.dispatch(action)

  2. store自动调用reducer，并传入两个参数state和action。reducer根据action返回新的state

    (state=defaultState,action)=>{ if(action.type===’…’){ return newState}… }

  3. state发生变化，store调用监听函数

    store.subscribe(listener)

  4. listener可以通过store.getState()得到当前状态，重新渲染页面

    function(){
    let newState = store.getState()
    component.setState(newState)
    }

    三大原则

  5. 单一数据源
    整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

  6. state是只读的
    唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

  7. 使用纯函数来执行修改
    为了描述 action 如何改变 state tree ，需要编写 reducers。它接收先前的 state 和 action，并返回新的 state。

    安装

    npm i redux –save

    使用

    一般会创建一个单独的文件夹来存放这些数据

    1
    2
    3
    4
    5
    src
     └── store
           ├── index.js
           ├── reducer.js
           └── actions.js

    index (state)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /*
    createStore()：
    创建一个store来存放所有的state
    应用中有且仅有一个store
    参数
    1：reducer(Function)
    2：[preloadeState](any): 初始的state
    3：enhancer(Function): 强化的store creator ？？
    */
    import { createStore } from 'redux' // 引入方法
    import reducer from './reducer'     // 引入reducer
    const store = createStore(          // 创建存储仓库
        reducer, 
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
    export default store        // 把创建好的数据仓库暴露出去

在组件中获取数据

1
2
3
4
5
6
7
8
9
import store from './store';
...
class App extends Component {
    constructor(props){
        super(props)
        this.state = store.getState()   //获取state
  }
}
export default App;

actions

1
2
3
4
5
6
7
8
// actions.js
export function addAction = ()=> ({
    type: 'add'
})
export function changeInputAction = (value)=>({
    type: 'changeInput',
    value
})

在组件内使用action

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import {changeInputAction,addAction} from './store/actions'

class App extends Component {
  // 触发事件就会触发action
  changeInputValue(e){
    const action = changeInputAction(e.target.value)
    store.dispatch(action)  // 更新state
  }
  add(){
    const action = addAction()
    store.dispatch(action)
  }
  storeChange(){
    this.setState(store.getState())
  }
}

export default App;

reducer

它没有直接改变state的数据，而是返回新的对象

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
// 创建初始的state数据
const defaultState = {
    list:['hehe','enen'],
    inputValue:'write somthing'
}
export default (state=defaultState,action)=>{
    if(action.type==='changeInput'){
        let newState = JSON.parse(JSON.stringify(state))    // 深拷贝
        newState.inputValue = action.value  // 更新数据
        return newState // 返回新的state
    }
    if(action.type==='add'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    return state
}

// 官方文档给出的代码段 是用switch-case进行对action类型的判断，assign进行拷贝和更新：
function todoApp(state = defaultState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case ADD_TODO:
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    default:
      return state
  }
}

参考

redux中文文档
技术胖博客

【react】开发环境搭建

react

首先安装 Node 和 npm

我的版本 

1
2
node v10.15
npm v6.4.1

创建应用程序

  1. 针对于npm 5.2+

    npx create-react-app xxx

  2. 针对于npm 6+

    npm init react-app xxx

  3. 针对于yarn 0.25+

    yarn create react-app xxx

输出

进入到xxx目录中，应该生成的目录格式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
xxx
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

安装完成后，即可进入到项目目录：

cd xxx

运行

  1. 运行：

    npm start

  2. 打包：

    npm run build

遇到的问题

按照文档的方式安装运行脚手架工具报错,并且生成的文件缺失
报错信息如下：

A template was not provided. This is likely because you’re using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.

（大概意思是 官方不支持 create-react-app 这个 cli 脚手架，版本已经过时，不支持全局安装）
因为我之前也有看过react的相关视频 可能安装的有之前的脚手架版本

解决方法

卸载全局安装的脚手架

npm uninstall -g create-react-app
然后在重新按照之前的步骤在运行一次

ES2020新特性

JavaScript

不是所有的都会记录 只记录一些我目前能理解的和我觉得比较有用的

类的私有变量和方法

通过 # 代表私有变量和方法，在class外部无法访问 （相当于private）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Num{
    #privateNum = 0     //私有变量
    static #privateStaticNum = 0        //静态私有变量
    add(){
        this.#privateNum++
        Num.#privateStaticNum++
    }
    print(){
        console.log(this.#privateNum,Num.#privateStaticNum)
    }
}
var a = new Num()
a.add()
a.print()   // 1 1
console.log(a.#privateNum)     // SyntaxError
console.log(Num.#privateStaticNum)       // SyntaxError

在MDN和其他的一些大佬的总结里面也写了可以定义私有方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 
  类似于以这种形式
  不知道是什么原因会报错 unexpected token
*/
class Method(){
    #privateStaticMethod(){
        return 'hello world'
    }
    publicStaticMethod(){
        return #privateStaticMethod()
    }

    /* 
       另外看到有人总结是用这种形式
       可以正常运行 但是我感觉这种形式就是私有变量的定义赋给一个函数而已？
    */
    #privateStaticMethod = ()=>{ ... }
}

空值合并运算符（Nullish coalescing Operator）

和 || 的作用类似，但是 || 会将空字符串、0、false等直接覆盖，可能会造成一些问题，
?? 运算符只针对 null、undefined 进行覆盖

1
2
const b = '' || 123     // 123
const a = '' ?? 123     // ''

可选链（Optional chaining）

简化繁琐重复的前置校验操作

1
2
3
4
5
6
7
8
9
10
11
const user = {
    info: {
        name: {
            getName: function () {
                return 'doreen'
            }
        }
    }
}
let names = user && user.info && user.info.name && user.info.name.getName &&  user.info.name.getName()
let name = user?.info?.name?.getName?.()    // =>  user?.info?.name?.getName()

dynamic-import

之前的按需引入是静态import、目前更新的是动态的import() 

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
// 用法区别：static import没有括号，dynamic import() 带有括号
// static import : 有声明提升、一般放在头部位置
import name from 'url'

// dynamic import : 放在任意位置
const name = import('url')

/*
 test.js:

export {xxx}    引入的时候 import {xxx} from 'xxx' 可以有多个
export default function(){...}  / export default { a(){...},b(){...} }  
引入的时候 import xxx from 'xxx'  只能写一次
*/
const add = (n,m)=>{
    return n+m
}
export { add }


// a.js:
// import()相当于一个promise的实例对象
const doAdd = async (n,m)=>{
    const foo = await import('./test.js')
    console.log(foo.add(n,m))
} 
const doAdd = (n,m)=>{
    import('./test.js').then(res=>{
        console.log(res.add(n,m))
    })
}
doAdd(1,2)

globalThis

提供了一个标准的方式去获取不同环境下的全局对象(gloabl、window)
在web下能正常打印，但是在node下还是不能正常输出？

参考：

https://blog.csdn.net/duyujian706709149/article/details/104014127
https://segmentfault.com/a/1190000022006869
https://www.jb51.net/article/178289.htm
MDN

JavaScript实现文本编辑器 【table相关操作】

JavaScript 
  我自己写的基本操作可以实现
  就是table结构改变了之后 在操作会出现一些问题
  目前没想通要怎么处理 
  查了下看到一个大佬用jQuery写的合并拆分
  基本把我的一些bug解决了 但是我没有看懂他的逻辑QAQ

页面结构

table的底部和侧边有一个 + 号标记可以添加行/列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
	<div>
		<button onclick="delTable()">delete</button>
		<button onclick="addCell()">addCell</button>
		<button onclick="addRow()">addRow</button>
		<button onclick="mergeTable()">合并单元格</button>
		<button onclick="mergeDown()">向下合并单元格</button>
		<button onclick="mergeRight()">向右合并单元格</button>
		<button onclick="splitTable()">拆分单元格</button>
	</div>
	<br>
	<div class="container">
		<div class="table"  contentEditable='true' >
			<table border="1" id="table">
				...
			</table>
		</div>
		<div id="addCell" onclick="addCell()">+</div>
		<div id='addRow' onclick="addRow()">+</div>
	</div>
</body>

删除功能

1
2
3
  delTable: function () {
	this.table.remove() //dom自带方法
},

添加列功能

trObject.insertCell( index )

insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。
新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。

1
2
3
4
5
6
7
8
9
10
11
12
13
  /**
   *  insertCell( index ) table的原生方法,参数传的是添加的位置
   * 需要注意的是添加之后要重新给列表宽度赋值
  */
  addCell: function () {
	for (let i = 0; i < table.rows.length; i++) {
		var newCell = table.rows[i].insertCell(this.table.colspan)
		newCell.innerHTML = 'new add'
		for (let j = 0; j < table.rows[i].cells.length; j++) {
			this.table.rows[i].cells[j].style.width = 900 / this.table.rows[0].cells.length + 1 + 'px'
		}
	}
},

添加行功能

tableObject.insertRow( index )

insertRow() 方法用于在表格中的指定位置插入一个新行。
index : 指定插入新行的位置 (以 0 开始)。

1
2
3
4
5
6
7
8
9
  /**
   * 被注释的那一段的想法是 在哪点击了就以点击的那一行为模板 在那行下面添加该行内容
   * 但是右侧的添加行功能 不能实现这一操作 就直接获取的第一行的内容来添加 
   * 应该是有bug的
  */
  addRow: function () {
	var newRow = this.table.insertRow(this.table.rowspan)
	newRow.innerHTML = this.table.rows[0].innerHTML //document.getSelection().getRangeAt(0).startContainer.parentNode.innerHTML
},

合并功能

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
  /**
   * 这个是我写的 直接获取选中的td 然后替换删除
   * 没有考虑到已经合并的情况 是有问题的
 * 我的想法是获取带有选中类的节点，创建一个新的节点 去替换
 * 其余的选中的节点自己删除
  */
  mergeTable: function () {
	var nodes = this.table.getElementsByClassName('ui-selected')
	var newNode = document.createElement('td')
	var parent = nodes[0].parentNode
	newNode.rowSpan = this.table.rowspan
	newNode.colSpan = this.table.colspan
	parent.replaceChild(newNode, nodes[0])
	while (nodes[0]) {
		nodes[0].remove()
    }
  }
  /**
   * 这个是CSDN某大佬借助jquery写的 我没看懂QAQ
   * 原文地址 2楼： https://bbs.csdn.net/topics/391807641 
  */
  mergeTable: function () {
	var $t = $("#" + this.tableId);
	if ($("table", $t).length > 0) {
		alert("不支持嵌套表格！");
		return;
	}

	var sigDel = "sign4delete"; // 删除标记，用作类名
	var sigSel = "ui-selected"; // 选中标记，用作类名

	// 补充单元格以便后继正确计算坐标
	$("th,td", $t).each(function () {
		// 坐标要实时计算，因会实时补充
		var ridx = $("tr", $t).index($(this).parent("tr"));
		var cidx = $(this).parent().children("th,td").index(this);

		var rowspan = Number($(this).attr("rowspan")) || 1;
		var colspan = Number($(this).attr("colspan")) || 1;
		var isSel = $(this).hasClass(sigSel);
		// 非选单元格拆出的单元格要加删除标记
		if (rowspan <= 1 && colspan <= 1)
			return;
		// 跨格开插
		$("tr", $t).each(function () {
			var idx = $("tr", $t).index(this);
			var arr, $td = $("<td>").addClass(isSel ? sigSel : sigDel);

			if (idx == ridx) {
				// 本行在 [cidx] 后插入 colspan-1 个

				arr = $(); // 准备待插单元格
				for (var i = 0; i < colspan - 1; i++)
					arr = arr.add($td.clone());
				// 插入
				$("th,td", this).eq(cidx).after(arr);

			} else if (ridx < idx && idx < ridx + rowspan) {
				// 以下行在 [cidx] 前插入 colspan 个

				arr = $(); // 准备待插单元格
				for (var i = 0; i < colspan; i++)
					arr = arr.add($td.clone());
				// 插入
				if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
					$("th,td", this).eq(cidx - 1).after(arr);
				else if ($("th,td", this).eq(cidx).length > 0)
					$("th,td", this).eq(cidx).before(arr);
				else
					$(this).prepend(arr);
			}
		});
	});

	var rmin = 10000,
		cmin = 10000;
	var rmax = 0,
		cmax = 0;
	var rnum, cnum;
	// 计算起始和跨距
	$("th,td", $t).filter("." + sigSel).each(function () {
		var ridx = $("tr", $t).index($(this).parent("tr"));
		rmin = ridx < rmin ? ridx : rmin;
		rmax = ridx > rmax ? ridx : rmax;
		var cidx = $(this).parent().children("th,td").index(this);
		cmin = cidx < cmin ? cidx : cmin;
		cmax = cidx > cmax ? cidx : cmax;
	});
	rnum = rmax - rmin + 1;
	cnum = cmax - cmin + 1;

	// 合并单元格
	$("th,td", $t).each(function () {
		var ridx = $("tr", $t).index($(this).parent("tr"));
		var cidx = $(this).parent().children("th,td").index(this);
		// 标记单元格待删
		if (rmin <= ridx && ridx <= rmax &&
			cmin <= cidx && cidx <= cmax)
			$(this).addClass(sigDel);
		// 处理被选左上角单元格
		if (ridx == rmin && cidx == cmin)
			$(this).removeClass(sigDel).attr({
				rowspan: rnum,
				colspan: cnum
			});
		// 清理残余
		if ($(this).attr("rowspan") == 1) $(this).removeAttr("rowspan");
		if ($(this).attr("colspan") == 1) $(this).removeAttr("colspan");
	}).remove("." + sigDel);
},

向下合并功能

1
2
3
4
5
6
7
8
9
  mergeDown: function () {
	var row = document.getSelection().anchorNode.parentNode.rowIndex
	var cell = document.getSelection().anchorNode.cellIndex
	var node = document.getSelection().anchorNode
	if (row != this.table.rows.length - 1 && node.rowSpan == 1) {
		node.rowSpan = 2
		this.table.rows[row + 1].cells[cell].remove()
	}
},

向右合并功能

1
2
3
4
5
6
7
8
  mergeRight: function () {
	var cell = document.getSelection().anchorNode.cellIndex
	var node = document.getSelection().anchorNode
	if (cell != 0 && node.colSpan == 1) {
		node.previousElementSibling.remove()
		node.colSpan = 2
	}
},

拆分功能

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
  /**
   * 我实现的 因为在ueditor里面是只可以拆分两格的
   * 我就按照它的写的 只能拆分两格的
   * 但是多格拆分应该也差不多
  */
 splitTable: function () {
	var node = document.getSelection().anchorNode
	var td = document.createElement('td')
	if (node.rowSpan == 2 && node.colSpan == 1) {
		node.rowSpan = 1
		node.parentNode.nextElementSibling.appendChild(td)
	} else if (node.colSpan == 2 && node.rowSpan == 1) {
		node.colSpan = 1
		node.parentNode.appendChild(td)
	}
},

  /**
   * 也是那个大佬的代码 可以拆分多个单元格
  */
  splitTable: function(){
	var $t = $("#"+this.tableId);
		
		if ($("table", $t).length > 0) {
			alert("不支持嵌套表格！");
			return;
		}
		
		var sigDel = "sign4delete";  // 删除标记，类名，自定义
		var sigSel = "ui-selected";  // 选中标记，类名，jQuery UI 定义
		
		// 补充单元格以便后继正确计算坐标
		$("th,td", $t).each(function(){
			// 坐标要实时计算，因会实时补充
			var ridx = $("tr", $t).index($(this).parent("tr"));
			var cidx = $(this).parent().children("th,td").index(this);
			var rowspan = Number($(this).attr("rowspan")) || 1;
			var colspan = Number($(this).attr("colspan")) || 1;
			var isSel = $(this).hasClass(sigSel);
			// 非选单元格拆出的单元格要加删除标记
			
			if (rowspan <= 1 && colspan <= 1)
				return;
			
			if (isSel)
				$(this).removeAttr("colspan").removeAttr("rowspan");
			
			// 跨格开插
			$("tr", $t).each(function(){
				var idx = $("tr", $t).index(this);
				var arr, $td = $("<td>");
				
				if (!isSel)
					$td.addClass(sigDel);
				
				if (idx == ridx) {
					// 本行在 [cidx] 后插入 colspan-1 个
					
					arr = $();  // 准备待插单元格
					for (var i=0; i < colspan-1; i++)
						arr = arr.add($td.clone());
					
					$("th,td", this).eq(cidx).after(arr);
					
				} else if (ridx < idx && idx < ridx + rowspan) {
					// 以下行在 [cidx] 前插入 colspan 个
					
					arr = $();  // 准备待插单元格
					for (var i=0; i < colspan; i++)
						arr = arr.add($td.clone());
					
					if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
						$("th,td", this).eq(cidx - 1).after(arr);
					else if ($("th,td", this).eq(cidx).length > 0)
						$("th,td", this).eq(cidx).before(arr);
					else
						$(this).prepend(arr);
				}
			});
		});
		
		// 重新获取以取到删者并删之
		$("th,td", $t).remove("." + sigDel);
},

鼠标长按选中事件

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
   /**
    * 点击选取范围那还是有问题的不知道怎么解决
    * 主要是针对已经合并的单元格 怎么遍历的问题
   */
   this.table.onmousedown = function (e) {
	// 鼠标按下的时候获取所在单元格的坐标，和鼠标按下的时间
	this.startRow = e.target.parentNode.rowIndex
	this.startCell = e.target.cellIndex
	this.startDate = new Date()
   }
   
   this.table.onmouseup = function () {
	// 通过和鼠标抬起事件所获取的时间进行对比 判断是否是长按鼠标事件
	var isClick = new Date() - this.startDate < 500 ? true : false;

	// 获取鼠标抬起时 鼠标所在单元格的坐标点
	var endCell = event.target.cellIndex
	var endRow = event.target.parentNode.rowIndex

	if (!isClick) {
		for (let i = Math.min(endRow, this.startRow); i <= Math.max(endRow, this.startRow); i++) {
			for (let j = Math.min(endCell, this.startCell); j <= Math.max(endCell, this.startCell); j++) {
				// 以获取对角坐标 填充选中的区域  只能针对结构未改变的table
				//this.rows[i].cells[j].className = 'ui-selected'

				if (this.rows[i].cells[j]) {
					if (this.rows[i].cells[j].rowSpan > 1) {
						if (j == Math.max(endCell, this.startCell)) {
							for (let a = 1; a < this.rows[i].cells[j].rowSpan; a++) {
								if(this.rows[i + a].cells[j]){
									this.rows[i + a].cells[j].className = 'del'
								}
							}
						}else if((j + table.rows[i].cells[j].colSpan - 1 )== Math.max(endCell, this.startCell)){
							for (let a = 1; a < this.rows[i].cells[j].rowSpan; a++) {
								for (let b = 0; b < this.rows[i].cells[j].colSpan; b++) {
									if (this.rows[i + a].cells[j+b]) {
										this.rows[i + a].cells[j+b].className = 'del'
									}
								}
							}
						} else {
							 var maxJ = Math.max(endCell, this.startCell)
							for (let a = 0; a < this.rows[i].cells[j].rowSpan; a++) {
								if (table.rows[i + a].cells[maxJ]) {
									this.rows[i + a].cells[maxJ].className = 'del'
								}
							} 
						}
					}

					if (this.rows[i].cells[j].colSpan > 1) {
						if (j !== endCell && j !== this.startCell) {
							for (let b = 1; b < this.rows[i].cells[j].colSpan; b++) {
								if(this.rows[i].cells[j + b]){
									this.rows[i].cells[j + b].className = 'del'
								}			
							}
						}else if((j + table.rows[i].cells[j].colSpan - 1 )== Math.max(endCell, this.startCell)){
							for (let a = 0; a < this.rows[i].cells[j].rowSpan; a++) {
								for (let b = 1; b < this.rows[i].cells[j].colSpan; b++) {
									if (this.rows[i + a].cells[j+b]) {
										this.rows[i + a].cells[j+b].className = 'del'
									}
								}
							}	
						} 
						else {
							this.rows[i].cells[j].className = ''
						}
					}
					this.rows[i].cells[j].className += 'ui-selected'
				}
			}
		}
		// 在table中增加两个属性 获取到跨的行和列 供合并单元格
		this.rowspan = Math.abs(endRow - this.startRow) + 1
		this.colspan = Math.abs(endCell - this.startCell) + 1

	} else {
		// 清空样式
		this.rowspan = endRow
		this.colspan = endCell
		for (let i = 0; i < table.rows.length; i++) {
			for (let j = 0; j < table.rows[i].cells.length; j++) {
				this.rows[i].cells[j].className = ''
			}
		}
	}
}

鼠标进入离开显示添加行列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
   /**
    * offset值好像是按照鼠标离每个td的位置不是离tr的位置
    * 所以需要利用client来处理下距离的判断
   */
   this.table.onmouseleave = function () {
	setTimeout(() => {
		addCellBtn.style.display = 'none'
		addRowBtn.style.display = 'none'
	}, 3000);

}
this.table.onmousemove = function () {
	if (event.clientX - this.offsetLeft >= 8 && event.clientX - this.offsetLeft <= 20) {
		this.style.cursor = "url('img/right.png') , auto"
		this.colspan = this.rows.length
	} else if (event.clientY - this.offsetTop >= 52 && event.clientY - this.offsetTop <= 60) {
		this.style.cursor = "url('img/down.png') , auto"
	} else {
		this.style.cursor = 'auto'
	}
}

鼠标点击选中一行一列事件

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

  /**
   * 判断鼠标的指针状态然后执行点击事件 选中一行/列
  */
   this.table.onclick = function (e) {
		if (this.style.cursor !== 'auto') {
			if (this.style.cursor.includes('down')) {
				for (let i = 0; i < this.rows.length; i++) {
					this.rows[i].cells[e.target.cellIndex].className = 'ui-selected'
				}
				this.rowspan = this.rows.length
			} else {
				for (let i = 0; i < this.rows[e.target.parentNode.rowIndex].cells.length; i++) {
					this.rows[e.target.parentNode.rowIndex].cells[i].className = 'ui-selected'
				}
				this.colspan = this.rows[e.target.parentNode.rowIndex].cells.length
				this.rowspan = 1
			}
		}
	}
	return this;
}

JavaScript封装成类的完整代码

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
(function (win) {
	var win_ = win;
	var kclass = function (tableId) {
		this._init.call(this, arguments);
	}
	kclass.fn = {

		tableId: "table",
		table: null,
		delTable: function () {
			this.table.remove()
		},
		addCell: function () {
			for (let i = 0; i < table.rows.length; i++) {
				var newCell = table.rows[i].insertCell(this.table.colspan)
				newCell.innerHTML = 'new add'
				for (let j = 0; j < table.rows[i].cells.length; j++) {
					this.table.rows[i].cells[j].style.width = 900 / this.table.rows[0].cells.length + 1 + 'px'
				}
			}
		},
		addRow: function () {
			var newRow = this.table.insertRow(this.table.rowspan)
			newRow.innerHTML = this.table.rows[0].innerHTML //document.getSelection().getRangeAt(0).startContainer.parentNode.innerHTML
		},
		mergeTable: function () {
			var $t = $("#" + this.tableId);
			if ($("table", $t).length > 0) {
				alert("不支持嵌套表格！");
				return;
			}

			var sigDel = "sign4delete"; // 删除标记，用作类名
			var sigSel = "ui-selected"; // 选中标记，用作类名

			// 补充单元格以便后继正确计算坐标
			$("th,td", $t).each(function () {
				// 坐标要实时计算，因会实时补充
				var ridx = $("tr", $t).index($(this).parent("tr"));
				var cidx = $(this).parent().children("th,td").index(this);

				var rowspan = Number($(this).attr("rowspan")) || 1;
				var colspan = Number($(this).attr("colspan")) || 1;
				var isSel = $(this).hasClass(sigSel);
				// 非选单元格拆出的单元格要加删除标记
				if (rowspan <= 1 && colspan <= 1)
					return;
				// 跨格开插
				$("tr", $t).each(function () {
					var idx = $("tr", $t).index(this);
					var arr, $td = $("<td>").addClass(isSel ? sigSel : sigDel);

					if (idx == ridx) {
						// 本行在 [cidx] 后插入 colspan-1 个

						arr = $(); // 准备待插单元格
						for (var i = 0; i < colspan - 1; i++)
							arr = arr.add($td.clone());
						// 插入
						$("th,td", this).eq(cidx).after(arr);

					} else if (ridx < idx && idx < ridx + rowspan) {
						// 以下行在 [cidx] 前插入 colspan 个

						arr = $(); // 准备待插单元格
						for (var i = 0; i < colspan; i++)
							arr = arr.add($td.clone());
						// 插入
						if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
							$("th,td", this).eq(cidx - 1).after(arr);
						else if ($("th,td", this).eq(cidx).length > 0)
							$("th,td", this).eq(cidx).before(arr);
						else
							$(this).prepend(arr);
					}
				});
			});

			var rmin = 10000,
				cmin = 10000;
			var rmax = 0,
				cmax = 0;
			var rnum, cnum;
			// 计算起始和跨距
			$("th,td", $t).filter("." + sigSel).each(function () {
				var ridx = $("tr", $t).index($(this).parent("tr"));
				rmin = ridx < rmin ? ridx : rmin;
				rmax = ridx > rmax ? ridx : rmax;
				var cidx = $(this).parent().children("th,td").index(this);
				cmin = cidx < cmin ? cidx : cmin;
				cmax = cidx > cmax ? cidx : cmax;
			});
			rnum = rmax - rmin + 1;
			cnum = cmax - cmin + 1;

			// 合并单元格
			$("th,td", $t).each(function () {
				var ridx = $("tr", $t).index($(this).parent("tr"));
				var cidx = $(this).parent().children("th,td").index(this);
				// 标记单元格待删
				if (rmin <= ridx && ridx <= rmax &&
					cmin <= cidx && cidx <= cmax)
					$(this).addClass(sigDel);
				// 处理被选左上角单元格
				if (ridx == rmin && cidx == cmin)
					$(this).removeClass(sigDel).attr({
						rowspan: rnum,
						colspan: cnum
					});
				// 清理残余
				if ($(this).attr("rowspan") == 1) $(this).removeAttr("rowspan");
				if ($(this).attr("colspan") == 1) $(this).removeAttr("colspan");
			}).remove("." + sigDel);
		},
		/*
		mergeTable: function () {
			var nodes = this.table.getElementsByClassName('ui-selected')
			var newNode = document.createElement('td')
			var parent = nodes[0].parentNode
			newNode.rowSpan = this.table.rowspan
			newNode.colSpan = this.table.colspan
			parent.replaceChild(newNode, nodes[0])
			while (nodes[0]) {
				nodes[0].remove()
			}
		},*/
		mergeDown: function () {
			var row = document.getSelection().anchorNode.parentNode.rowIndex
			var cell = document.getSelection().anchorNode.cellIndex
			var node = document.getSelection().anchorNode
			if (row != this.table.rows.length - 1 && node.rowSpan == 1) {
				node.rowSpan = 2
				this.table.rows[row + 1].cells[cell].remove()
			}
		},
		mergeRight: function () {
			var cell = document.getSelection().anchorNode.cellIndex
			var node = document.getSelection().anchorNode
			if (cell != 0 && node.colSpan == 1) {
				node.previousElementSibling.remove()
				node.colSpan = 2
			}
		},
		splitTable: function () {
			var $t = $("#" + this.tableId);

			if ($("table", $t).length > 0) {
				alert("不支持嵌套表格！");
				return;
			}

			var sigDel = "sign4delete"; // 删除标记，类名，自定义
			var sigSel = "ui-selected"; // 选中标记，类名，jQuery UI 定义

			// 补充单元格以便后继正确计算坐标
			$("th,td", $t).each(function () {
				// 坐标要实时计算，因会实时补充
				var ridx = $("tr", $t).index($(this).parent("tr"));
				var cidx = $(this).parent().children("th,td").index(this);
				var rowspan = Number($(this).attr("rowspan")) || 1;
				var colspan = Number($(this).attr("colspan")) || 1;
				var isSel = $(this).hasClass(sigSel);
				// 非选单元格拆出的单元格要加删除标记

				if (rowspan <= 1 && colspan <= 1)
					return;

				if (isSel)
					$(this).removeAttr("colspan").removeAttr("rowspan");

				// 跨格开插
				$("tr", $t).each(function () {
					var idx = $("tr", $t).index(this);
					var arr, $td = $("<td>");

					if (!isSel)
						$td.addClass(sigDel);

					if (idx == ridx) {
						// 本行在 [cidx] 后插入 colspan-1 个

						arr = $(); // 准备待插单元格
						for (var i = 0; i < colspan - 1; i++)
							arr = arr.add($td.clone());

						$("th,td", this).eq(cidx).after(arr);

					} else if (ridx < idx && idx < ridx + rowspan) {
						// 以下行在 [cidx] 前插入 colspan 个

						arr = $(); // 准备待插单元格
						for (var i = 0; i < colspan; i++)
							arr = arr.add($td.clone());

						if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
							$("th,td", this).eq(cidx - 1).after(arr);
						else if ($("th,td", this).eq(cidx).length > 0)
							$("th,td", this).eq(cidx).before(arr);
						else
							$(this).prepend(arr);
					}
				});
			});

			// 重新获取以取到删者并删之
			$("th,td", $t).remove("." + sigDel);
		},
		/*
		splitTable: function () {
			var node = document.getSelection().anchorNode
			var td = document.createElement('td')
			if (node.rowSpan == 2 && node.colSpan == 1) {
				node.rowSpan = 1
				node.parentNode.nextElementSibling.appendChild(td)
			} else if (node.colSpan == 2 && node.rowSpan == 1) {
				node.colSpan = 1
				node.parentNode.appendChild(td)
			}
		},*/
		addEvent: function () {
			document.body.onmouseup = function () {}
		},
		_init: function () {
			var tableId = arguments[0][0];
			if (!tableId)
				throw new Error("table id cannot be null");
			var table = document.getElementById(tableId);
			if (!table || table.nodeName.toUpperCase() != 'TABLE') {
				throw new Error("canot find the table,please enter the right id");
			}
			// 侧边和底部的新增按钮
			var addCellBtn = document.getElementById('addCell')
			var addRowBtn = document.getElementById('addRow')
			this.tableId = tableId;
			this.table = table;

			//使表格可选
			this.table.onmousedown = function (e) {
				// 鼠标按下的时候获取所在单元格的坐标，和鼠标按下的时间
				this.startRow = e.target.parentNode.rowIndex
				this.startCell = e.target.cellIndex
				this.startDate = new Date()
			}
			this.table.onmouseup = function () {
				// 通过和鼠标抬起事件所获取的时间进行对比 判断是否是长按鼠标事件
				var isClick = new Date() - this.startDate < 500 ? true : false;

				// 获取鼠标抬起时 鼠标所在单元格的坐标点
				var endCell = event.target.cellIndex
				var endRow = event.target.parentNode.rowIndex

				if (!isClick) {
					for (let i = Math.min(endRow, this.startRow); i <= Math.max(endRow, this.startRow); i++) {
						for (let j = Math.min(endCell, this.startCell); j <= Math.max(endCell, this.startCell); j++) {
							// 以获取对角坐标 填充选中的区域
							//this.rows[i].cells[j].className = 'ui-selected'

							if (this.rows[i].cells[j]) {
								if (this.rows[i].cells[j].rowSpan > 1) {
									if (j == Math.max(endCell, this.startCell)) {
										for (let a = 1; a < this.rows[i].cells[j].rowSpan; a++) {
											if(this.rows[i + a].cells[j]){
												this.rows[i + a].cells[j].className = 'del'
											}
										}
									}else if((j + table.rows[i].cells[j].colSpan - 1 )== Math.max(endCell, this.startCell)){
										for (let a = 1; a < this.rows[i].cells[j].rowSpan; a++) {
											for (let b = 0; b < this.rows[i].cells[j].colSpan; b++) {
												if (this.rows[i + a].cells[j+b]) {
													this.rows[i + a].cells[j+b].className = 'del'
												}
											}
										}
									} else {
										 var maxJ = Math.max(endCell, this.startCell)
										for (let a = 0; a < this.rows[i].cells[j].rowSpan; a++) {
											if (table.rows[i + a].cells[maxJ]) {
												this.rows[i + a].cells[maxJ].className = 'del'
											}
										} 

									}
								}

								if (this.rows[i].cells[j].colSpan > 1) {
									if (j !== endCell && j !== this.startCell) {
										for (let b = 1; b < this.rows[i].cells[j].colSpan; b++) {
											if(this.rows[i].cells[j + b]){
												this.rows[i].cells[j + b].className = 'del'
											}			
										}
									}else if((j + table.rows[i].cells[j].colSpan - 1 )== Math.max(endCell, this.startCell)){
										for (let a = 0; a < this.rows[i].cells[j].rowSpan; a++) {
											for (let b = 1; b < this.rows[i].cells[j].colSpan; b++) {
												if (this.rows[i + a].cells[j+b]) {
													this.rows[i + a].cells[j+b].className = 'del'
												}
											}
										}	
									} 
									else {
										this.rows[i].cells[j].className = ''
									}
								}
								this.rows[i].cells[j].className += 'ui-selected'
							}
						}
					}
					// 在table中增加两个属性 获取到跨的行和列 供合并单元格
					this.rowspan = Math.abs(endRow - this.startRow) + 1
					this.colspan = Math.abs(endCell - this.startCell) + 1

				} else {
					// 清空样式
					this.rowspan = endRow
					this.colspan = endCell
					for (let i = 0; i < table.rows.length; i++) {
						for (let j = 0; j < table.rows[i].cells.length; j++) {
							this.rows[i].cells[j].className = ''
						}
					}
				}
			}

			this.table.onmouseenter = function () {
				addCellBtn.style.display = 'inline-block'
				addRowBtn.style.display = 'block'
			}
			this.table.onmouseleave = function () {
				setTimeout(() => {
					addCellBtn.style.display = 'none'
					addRowBtn.style.display = 'none'
				}, 3000);

			}
			this.table.onmousemove = function () {
				if (event.clientX - this.offsetLeft >= 8 && event.clientX - this.offsetLeft <= 20) {
					this.style.cursor = "url('img/right.png') , auto"
					this.colspan = this.rows.length
				} else if (event.clientY - this.offsetTop >= 52 && event.clientY - this.offsetTop <= 60) {
					this.style.cursor = "url('img/down.png') , auto"
				} else {
					this.style.cursor = 'auto'
				}
			}
			this.table.onclick = function (e) {
				if (this.style.cursor !== 'auto') {
					if (this.style.cursor.includes('down')) {
						for (let i = 0; i < this.rows.length; i++) {
							this.rows[i].cells[e.target.cellIndex].className = 'ui-selected'
						}
						this.rowspan = this.rows.length
					} else {
						for (let i = 0; i < this.rows[e.target.parentNode.rowIndex].cells.length; i++) {
							this.rows[e.target.parentNode.rowIndex].cells[i].className = 'ui-selected'
						}
						this.colspan = this.rows[e.target.parentNode.rowIndex].cells.length
						this.rowspan = 1
					}
				}
			}
			return this;
		}
	}
	kclass.prototype = kclass.fn;
	win_.ytable = (win_.ytable || kclass);
})(window);

JavaScript实现简单文本编辑器

JavaScript

百度富文本编辑器的文件结构

核心属性 / 方法 / 接口

contentEditable

html属性 用来设置 或 返回元素的内容是否可以被编辑

语法：

1
2
3
4
5
6
<p contentEditable = 'true | false' >...</p>

<script>
    HTMLElementObject.contentEditable  = true | false 
    HTMLElementObject.isContentEditable()  // 获取元素是否是可编辑状态
</script>

document.execCommand()

操作可编辑元素的语法糖 大多数文本编辑命令都可执行

语法：

1
2
3
4
5
6
7
bool = document.execCommand( aCommandName,ashowDefaultUI,aValueArgument )

/**
 * aCommandName : 命令的名称，可用命令参考mdn
 * aShowDefaultUI : 是否展示用户界面  | false
 * aValueArgument : 一些命令需要的额外参数如字体颜色/大小  | null
*/

借用语法糖实现的编辑器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
    <button data-command='bold' onclick="changeStyle(this.dataset)">B</button>
    <button data-command="italic" onclick="changeStyle(this.dataset)">I</button>
    <button data-command="fontSize" data-value="7" onclick="changeStyle(this.dataset)">fontSize</button>
    <button data-command="foreColor" data-value="red" onclick="changeStyle(this.dataset)">color</button>
    <button data-command="justifyCenter" onclick="changeStyle(this.dataset)">居中对齐</button>
    <button data-command="justifyLeft" onclick="changeStyle(this.dataset)">左对齐</button>
    <button data-command="justifyRight" onclick="changeStyle(this.dataset)">右对齐</button>
    <br />
    <p contentEditable='true'>犹豫就会败北</p>
    <p contentEditable='true'>果断就会白给</p>


    <script>
        function changeStyle(data) {
            var attr = data.command
            var value = data.value
            value ? document.execCommand(attr, false, value) : document.execCommand(attr, false, null)
        }  
    </script>
</body>

Selection

Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var selObj = document.getSelection()  // window | document 获取Selection对象
var selStr = selObj.toString() // 获取选中区域的 ‘纯文本’

document.onselectionchange = function(){  // 监听鼠标锚点的变化
    console.log( document.getSelection() )
    /**
     * Selection = {
     *  anchorNode: node 选取起点所在节点，
     *  anchorOffset: num 起点偏移量,
     *  focusNode: node 选取终点所在节点,
     *  focusOffset: num 终点偏移量,
     *  isCollapsed: bool 起始点是否在同一位置,
     *  rangeCount: 返回该选区所包含的连续范围的数量
     * 
     * }
    */
}

Range

表示一个包含节点与文本节点的一部分的文档片段

语法: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 创建一个文档范围
var range = document.createRange()
var range = new Range()

// 获取选中的文档范围
var range = document.getSelection().getRangeAt(0)  

/**
 * Range = {
 *  collapsed : 起始点位置是否相同,
 *  commonAncetorContainer : 选中区域所在的完整节点,  eg: <b> hhh<i>5[5</i>6]6</b> -> <b> hhh<i>55</i>66</b>
 *  endContainer : 包含range的终点节点,  -> 66
 *  endOffset : 返回一个表示 Range 终点在 endContainer 中的位置的数字。 -> 1 （选中的6在66中排位第几）
 * }
 * 
 * Range.cloneContents()    返回一个包含 Range 中所有节点的文档片段
 * Range.deleteContents()    移除range包含的内容
 * Range.extractContents()    把 Range 的内容从文档树移动到一个文档片段中
 * Range.insertNode(Node)    在range起点处插入一个节点
 * Range.surroundContents(newNode)     将range内容移动到一个新的节点中
*/

利用 range & selection 接口实现的简易编辑器

有bug 

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
<body>
    <button data-command="b" onclick="changeStyle(dataset)"> B </button>
    <button data-command="i" onclick="changeStyle(dataset)"> I </button>
    <button data-command="h1" onclick="changeStyle(dataset)"> h1 </button>
    <button data-value="textAlign:center" onclick="changeStyle(dataset)"> 居中</button>
    <button data-value="textAlign:right" onclick="changeStyle(dataset)"> 居右</button>
    <button data-value="textAlign:left" onclick="changeStyle(dataset)"> 居左</button>
    <button id='btn'>
        测试按钮
    </button>
    <p contentEditable='true'>犹豫<b>就会败北<i>52</i>墨菲</b>定律</p>
    <p contentEditable='true'>薛定谔的猫🐱</p>

    <script>
        // 1.surrounContents(Node) 在原有内容 的基础上包裹一层node节点
        // 不能判断是否已经有该元素
        function changeStyle(data) {
            var tagName = data.command || null
            var value = data.value || null
            var selobj = document.getSelection()
            var Node = document.createElement(tagName)
            var range = selobj.getRangeAt(0)
            if(value){
                var attr = value.split(':')[0].trim(),
                 cssStyle = value.split(':')[1].trim() 
                 range.commonAncestorContainer.parentElement.style[attr] = cssStyle
            }else{
                range.surroundContents(Node)
            }
        }

        // 2.把选择的范围节点删除 在字符串外重新添加标签，只能一种标签存在
        btn.onclick = function(){
            var range =  document.getSelection().getRangeAt(0)
            var oB = document.createElement('b')
            oB.innerHTML = range.toString()
            range.deleteContents()
            range.insertNode(oB)
        }
    </script>
</body>

一些废话

日常 
虽然2020才过了一个多月，但已经充分展示出他的不平凡
这还得从一只🦇说起。。。
资本家犯下的罪恶买单的还是广大群众
1.22 我从长沙回凤凰的时候湖南还没有一例
到现在 2.13 一个月还没到累积病例已经900多了
从回家到现在我就出过两次门 
本来和朋友约的电影、饭局也泡汤
现在靠我一月底买的50个口罩苟活
（虽然没有这次肺炎我放假的状态也差不太多）
但还是闹得人心惶惶的 交通也瘫痪 娱乐场所被迫关门
很多企业应该是损失惨重 人也被迫"禁足"
整天无所事事 刷微博、微信、QQ等沙雕网友的新段子

实习的公司也响应号召实施远程办公，换了一个正常的项目组长，美滋滋
因为前期没有接触过项目 现在远程也说不清楚 这两个星期基本没我什么事
就把源码看了下，给了份报告，把自己简单实现效果的源码提交过去 
组长也没找过我了 换做之前那个 没事也会专门给我找点不归我做的事情做

刚好借疫情的原因给老板说了辞职 也算是给了我一个充分的借口
但就是月底之前怎么赶回去还不清楚 说是下周一复工的 目前还没确定
昨天跟合租的说我可能下周一会回去 他可能不想我在3月之前回去（好继续分担租金？）
还骗我说我们小区感染了几个？
然后我就去看了下，周边五公里都没有被感染案例 也是醉了

现在的人为了自己的利益什么谎都能撒 什么事都敢做 脑子都不动

翻篇---------

可能是因为闲的 在B站首页看到塔罗牌测试的，进去了两个测试看了下
第一个是关于未来的
第二个是关于学业事业的
两个都说到了未来会朝着好的方向发展 （不是很信这些 但也希望能实现）

没怎么了解过塔罗牌 唯一一次是在初二同学给测过一次
说来也巧 那次也是和这次说的差不多
原话大概是 
“
    虽然之前做了很多努力 但是都没有什么收获
    但在后期 关键时候的都会朝着一个好的方向发展 有个好的运势
”
还算被预言到了
初三那年的考试排名都还靠前
高中招提前批 本来说给分到B班的
后面因为竞赛成绩比较高又给调到A班了 我都不知道我怎么考的
我当时的状态就是 我何德何能？ 后面班级比我优秀的太多了

从小到大 我一直的成绩都是中等 或者中等偏下
也不知道为什么 到初三 、 高三的时候成绩总会慢慢提上来 稳定到10几
但是我自己没有觉得我突然奋发图强 然后变强了
我一直没怎么变啊？ 我也没觉得自己学会了什么
自己也想过原因 可能是我比较有韧性 能一直坚持
所以会慢慢累积 然后提升
但是我自己真的没有觉得我的知识丰富了QAQ
特别是高中除了数学外的科目
我都没什么把握 分数听天由命的那种

我真的不是聪明的人 要加倍的努力才能和别人到一个水平线

刚去文科班那会儿 历史基本是30-40分 倒数行列的
我的几个同班同学都跟我说过我不适合文科
好在没有放弃 在努力之后到达了平均线、超过了平均线
可能效果不是显而易见的以至于我自己有没有感觉到变化
直到高三我才意识到，我的成绩慢慢稳定在水平线以内

现在又将面临一个人生的转折点
从一个文科生 转为一个程序员
我们的专业课 就是杂而不精 老师基本都是混子
只能靠自己自学 学的时候也感觉到了自己对于代码逻辑底层的东西真的看不进去
真的很羡慕天赋型的人 我花了很长的时间去看、学这些东西
好像没有什么用 就是记不住 理解不了 没有能交流的人 
我不知道自己还有没有足够的运气让我能朝着好的方向继续走

说到这里 我也不知道自己想要表达什么 也大概是闲的

CSS3 立体轮播

CSS

CSS3 立体轮播

最近比较迷css，可能是JavaScript看的头疼
可以用作图片轮播，换成小的立方体还可以当做是缓冲动画
效果很好看 就是每次弄 旋转角度、移动位置的时候头疼
没有找到方法 就是我空间感不行





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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<style>
    .cubeCover{
        width: 100px;
        height: 300px;
        margin-top: 150px;
        margin-left: 200px;
    }
    .cubeCover .cube{
        transform-style: preserve-3d;
        width: 100%;
        height: 100%;
        position: relative;
        transform: rotateY(20deg) rotateX(-20deg) ;
        animation: move1 6s linear infinite .75s;
    }
    .cubeCover .cube div{
        border: 1px solid #ccc;
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .cubeCover .cube div:nth-child(1){
        transform:translateZ(-150px);
        background: url('/images/bottom.jpg');
        background-position: 0 0;
    }
    .cubeCover .cube div:nth-child(2){
        transform: rotateX(90deg) translateZ(150px);
        background: url('/images/side.jpg');
        background-position: 0 0;
    }
    .cubeCover .cube div:nth-child(3){
        transform:rotateX(90deg) translateZ(-150px)  ;
        background: url('/images/top.jpg');
    }
    .cubeCover .cube div:nth-child(4){
        width: 300px;
        transform: rotateY(90deg) translateZ(-150px);
        background: lightblue;
    }
    .cubeCover .cube div:nth-child(5){
        width: 300px;
        transform: rotateY(90deg) translateZ(-50px);
        background: lightblue;
    }
    .cubeCover .cube div:nth-child(6){
        transform: translateZ(150px);
        background: url('/images/avatar.jpg');
        background-position: 0 0;
    }
    .cubeCover .cube2{
        margin-top: -300px;
        margin-left: 90px;
        z-index: -1;
        animation: move1 6s linear infinite .5s;
    }
    .cubeCover .cube2 div:nth-child(1),.cubeCover .cube2 div:nth-child(2),.cubeCover .cube2 div:nth-child(3),.cubeCover .cube2 div:nth-child(6){
        background-position: -100px 0;
    }
    .cubeCover .cube3{
        margin-top: -300px;
        margin-left: 180px;
        z-index: -2;
        animation: move1 6s linear infinite .25s;
    }
    .cubeCover .cube3 div:nth-child(1),.cubeCover .cube3 div:nth-child(2),.cubeCover .cube3 div:nth-child(3),.cubeCover .cube3 div:nth-child(6){
        background-position: -200px 0;
    }
    .cubeCover .cube4{
        margin-top: -300px;
        margin-left: 270px;
        z-index: -3;
        animation: move1 6s linear infinite ;
    }
    .cubeCover .cube4 div:nth-child(1),.cubeCover .cube4 div:nth-child(2),.cubeCover .cube4 div:nth-child(3),.cubeCover .cube4 div:nth-child(6){
        background-position: -300px 0;
    }
    @keyframes move1 {
        12.5%,25%{
            transform:rotateY(20deg) rotateX(70deg);
        }
        42.5%,55%{
            transform:rotateY(20deg) rotateX(160deg);
        }
        62.5%,75%{
            transform:rotateY(20deg) rotateX(250deg);
        }
        92.5%,100%{
            transform:rotateY(20deg) rotateX(340deg);
        }
    }
</style>
<body>
    <div class="cubeCover">
        <div class="cube">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="cube cube2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="cube cube3">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="cube cube4">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

【第九章】 命令模式

设计模式

命令模式的用途

一个执行某些特定事情的指令
常见的应用场景 : 有时候需要向某些对象发送请求，但并不知道请求的接受者是谁，也不知道被请求的操作是什么。此时希望用一种耦合的方式来设计程序，使得请求发送者和请求接受者能够消除彼此之间的耦合关系

命令模式实例

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
43
44
45
46
47
48
49
50
51
52
53
54
// 请求发送者 和 请求接受者 解耦开
var oBtn1 = document.getElementById('btn1')
var oBtn2 = document.getElementById('btn2')
var oBtn3 = document.getElementById('btn3')

// 执行命令的函数 
var setCommand = function (button, command) {
    button.onclick = function () {
        command.execute();
    }
};
// 提供的功能菜单
var MenuBar = {
    refresh: function () {
        console.log('刷新菜单目录');
    }
};
var SubMenu = {
    add: function () {
        console.log('增加子菜单');
    },
    del: function () {
        console.log('删除子菜单');
    }
};
// 封装命令类
var RefreshMenuBarCommand = function (receiver) {
    this.receiver = receiver
}
RefreshMenuBarCommand.prototype.execute = function () {
    this.receiver.refresh();
}

var AddSubMenuCommand = function (receiver) {
    this.receiver = receiver;
}
AddSubMenuCommand.prototype.execute = function () {
    this.receiver.add();
};

var DelSubMenuCommand = function (receiver) {
    this.receiver = receiver;
};
DelSubMenuCommand.prototype.execute = function () {
    this.receiver.del()
};

//最后就是把命令接收者传入到 command 对象中，并且把 command 对象安装到 button 上面
var refreshMenuBarCommand = new RefreshMenuBarCommand( MenuBar );
var addSubMenuCommand = new AddSubMenuCommand(SubMenu);
var delSubMenuCommand = new DelSubMenuCommand(SubMenu);
setCommand(btn1, refreshMenuBarCommand);    // 刷新菜单目录
setCommand(btn2, addSubMenuCommand);        // 增加子菜单
setCommand(btn3, delSubMenuCommand);        // 删除子菜单

JavaScript中的命令模式

1
2
3
4
5
6
7
8
9
10
11
// ...
var RefreshMenuBarCommand = function (receiver) {
   return {
       execute: function(){
           receiver.refresh()
        }
    }
}
// ....
var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar ); 
setCommand( btn1, refreshMenuBarCommand ); // 刷新菜单目录

宏命令

是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令

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
//下面我们看看如何逐步创建一个宏命令。首先，我们依然要创建好各种 Command：
var closeDoorCommand = { 
 execute: function(){ 
 console.log( '关门' ); 
 } 
}; 
var openPcCommand = { 
 execute: function(){ 
 console.log( '开电脑' ); 
 } 
};
/*接下来定义宏命令 MacroCommand，它的结构也很简单。macroCommand.add 方法表示把子命令添加进宏命令对象，当调用宏命令对象的 execute 方法时，会迭代这一组子命令对象，并且依次执行它们的 execute 方法：*/
var MacroCommand = function(){ 
 return { 
    commandsList: [], 
    add: function( command ){ 
        this.commandsList.push( command ); 
    }, 
    execute: function(){ 
        for ( var i = 0, command; command = this.commandsList[ i++ ]; ){ 
            command.execute(); 
        } 
    } 
 } 
}; 
var macroCommand = MacroCommand(); 
macroCommand.add( closeDoorCommand ); 
macroCommand.add( openPcCommand ); 
macroCommand.add( openQQCommand ); 
macroCommand.execute();

智能命令与傻瓜命令

1
2
3
4
5
var closeDoorCommand = { 
    execute: function(){ 
        console.log( '关门' ); 
    } 
};

closeDoorCommand 中没有包含任何 receiver 的信息，它本身就包揽了执行请求的行为，这跟我们之前看到的命令对象都包含了一个 receiver 是矛盾的。 一般来说，命令模式都会在 command 对象中保存一个接收者来负责真正执行客户的请求，这种情况下命令对象是“傻瓜式”的，它只负责把客户的请求转交给接收者来执行，这种模式的好处是请求发起者和请求接收者之间尽可能地得到了解耦。

但是我们也可以定义一些更“聪明”的命令对象，“聪明”的命令对象可以直接实现请求，这样一来就不再需要接收者的存在，这种“聪明”的命令对象也叫作智能命令。没有接收者的智能命令，退化到和策略模式非常相近，从代码结构上已经无法分辨它们，能分辨的只有它们意图的不同。策略模式指向的问题域更小，所有策略对象的目标总是一致的，它们只是达到这个目标的不同手段，它们的内部实现是针对“算法”而言的。而智能命令模式指向的问题域更广，command对象解决的目标更具发散性。命令模式还可以完成撤销、排队等功能。

clip-path

CSS

发现了一个有意思的CSS属性

属性详情
clip-path生成器

clip-path ： 创建一个只有元素的部分区域可以显示的剪切区域

1
2
3
4
5
/* 我没有接触过svg 所以只写了几个我觉得能常用的属性*/
clip-path: circle( 50% at 50% 50%);     /* 剪裁成 【圆形】 第一个参数是 圆半径 at 圆心坐标*/
clip-path: ellipse( 50% 25% at 50% 50%);    /*剪裁成 【椭圆】 第一个参数是 横向半径 第二个是 纵向半径 at 圆心坐标  当半径一致 相当于圆*/
clip-path: polygon( 50% 0,0 100%,100% 100%);    /* 剪裁成任意形状 后跟每个点坐标  这是个三角形 注意点连接的顺序！ 如下：*/

可以实现的效果

我感觉比伪类方便 可以代替圆角之类的 也可以结合动画之类的

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
<style>
.clipPath{
    width:150px;
    height: 150px;
    background-image: url('/images/avatar.jpg'); 
    background-size:100% 100%;
    display:inline-block;  
}
.clipPath.dv1{
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.clipPath.dv2{
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.clipPath.dv3{
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
.clipPath.dv4{
    /* clip-path: ellipse(100% 100% at 0% 0%); 效果一致*/
    clip-path: circle(100% at 0% 0%);
}
.clipPath.dv5{
  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}
</style>
<div class="clipPath dv1"></div>
<div class="clipPath dv2"></div>
<div class="clipPath dv3"></div>
<div class="clipPath dv4"></div>
<div class="clipPath dv5"></div>

【第八章】 发布-订阅模式

设计模式

优点：

  1. 时间上的解耦
  2. 对象之间的解耦

缺点: 消耗时间和内存

自定义事件

如何实现发布-订阅模式:

  1. 指定发布者
  2. 给发布者添加一个缓存列表，用于存放回调函数 以便通知 订阅者
  3. 发布消息的时候，发布者会遍历这个缓存列表，依次触发存放的订阅者回调函数
    (还可以在回调函数中填入一些参数，订阅者可以接收这些参数。eg：售楼处可以在给订阅者短信内加上房子的单价、面积等信息)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var salesOffices = {}   // 售楼处
salesOffices.clientList = []    // 缓存列表，存放订阅者的回调函数
salesOffices.listen = function(fn){     // 增加订阅者
    this.clientList.push(fn)
}
salesOffices.trigger = function(){      // 发布消息
    for(var i=0;i<this.clientList.length;i++){
        var fn = this.clientList[i]
        fn.apply(this,arguments)
    }
}

salesOffices.listen(function(price,squareMeter){    // 小明订阅消息
    console.log('m 价格= '+price)
    console.log('m 平方= '+squareMeter)
})

salesOffices.listen(function(price,squareMeter){    // 小红订阅消息
    console.log('h 价格= '+price)
    console.log('h 平方= '+squareMeter)
})

salesOffices.trigger(20000,22)      // m/h 价格= 20000  m/h 平方= 22

我们看到订阅者接收到了发布者发布的每个消息，虽然小明只想买 88 平方米的房子，但是发布者把 122 平方米的信息也推送给了小明，这对小明来说是不必要的困扰。所以我们有必要增加一个标示 key，让订阅者只订阅自己感兴趣的消息。改写后的代码如下：

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
var salesOffices = {}   // 售楼处
salesOffices.clientList = []    // 缓存列表，存放订阅者的回调函数
salesOffices.listen = function(key,fn){     // 增加订阅者
    if(!this.clientList[key]){      // 如果没有订阅此类消息，给该类创建一个缓存列表
        this.clientList[key] = []
    }
    this.clientList[key].push(fn)
}
salesOffices.trigger = function(){      // 发布消息
    var key = Array.prototype.shift.call(arguments)     // 取出消息类型 <=> arguments[0]
    var fns = this.clientList[key]      // 取出该消息对应的回调函数集合
    for(var i=0;i<fns.length;i++){
        var fn = fns[i]
        fn.apply(this,arguments)
    }
}

salesOffices.listen('squareMeter88',function(price){
    console.log('m 价格= '+price)
})
salesOffices.listen('squareMeter88',function(price){
    console.log('w 价格= '+price)
})
salesOffices.listen('squareMeter122',function(price){
    console.log('h 价格= '+price)
})

salesOffices.trigger('squareMeter88',2200)  // m/w 价格= 2200
salesOffices.trigger('squareMeter122',122000)   // h 价格= 122000

发布-订阅模式的通用实现

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
// 把发布-订阅功能提取出来，放在一个单独的对象内
var event = {
    clientList : [],
    listen : function(key,fn){
        if(!this.clientList[key]){
            this.clientList[key] = []
        }
        this.clientList[key].push(fn)
    },
    trigger: function(){
        var key = Array.prototype.shift.call(arguments)
        var fns = this.clientList[key]
        if(!fns || fns.length===0){
            return false
        }
        for(var i=0;i<fns.length;i++){
            var fn = fns[i]
            fn.apply(this,arguments)
        }
    }
}
// installEvent 函数，给所有对象动态安装 发布-订阅功能：
// 浅拷贝 (我感觉 没什么用。。)
function installEvent(obj){
    for(var i in event){
        obj[i] = event[i]
    }
}
var salesOffices = {}
installEvent(salesOffices)
salesOffices.listen('squareMeter88',function(price){
    console.log('price= '+ price)
})
salesOffices.trigger('squareMeter88',122)

取消订阅事件

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
var event = {
    ...
    remove: function(key,fn){
        var fns = this.clientList[key]
        if(!fns){
            return false
        }
        if(!fn){  // 如果没有传入具体的回调函数，表示需要取消 key 对应消息的所有订阅
            fns && (fns.length = 0)
        }else{
            for(var i=fns.length-1;i>=0;i--){   // 倒序删除
                var _fn = fns[i]
                if(_fn===fn){
                    fns.splice(i,1)
                } 
            }
        }
    }
}
...
salesOffices.listen('squareMeter88',fn1 = function(price){
    console.log('f1 price= '+ price)
})
salesOffices.listen('squareMeter88',fn2 = function(price){
    console.log('f2 price= '+ price)
})
salesOffices.listen('squareMeter88',fn1 = function(price){
    console.log('f3 price= '+ price)
})
salesOffices.remove('squareMeter88',fn1)  // 删除的是最后一个叫f1的订阅者
salesOffices.trigger('squareMeter88',122) // f1/f2 price= 122

  • Copyrights © 2019-2023 John Doe
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信