在实习过程中遇到的一些问题。

npm相关问题

[1] npm命令无反应
解决方案：删除 C:\Users\ [账号] \ .npmrc 文件


[2] npm install 过程中出现 cb() never called或unexpected end of line
解决方案：输入以下命令

1
2
3

npm cache clean -f
npm install -g angular-cli
npm install --no-package-lock

这个问题困扰了我整整一天，因为mentor和我用的是相同的node(v8.11.3)和npm版本(v5.6.0)，但是他那边就可以install而我不可以，我将npm升级降级到各种版本都不可以。查阅了大量资料后才发现一个可用的解决方案。

Typescript相关问题

[1] Typescript React Starter
非常方便快速的启动Typescript+Reaact项目的教程：https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter


[2] 创建Array方法

1
2

let list = new Array // 不指定类型
let list = Array<T>() //指定类型，并初始化list为空

[3] 泛型
举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function sortByName<T extends { name: string }>(array: T[]): T[] {
    array.sort((d1: T, d2: T) => {
        if (d1.name.localeCompare) {
            return d1.name.localeCompare(d2.name);
        } else {
            if (d1.name < d2.name) {
                return -1;
            } else if (d1.name > d2.name) {
                return 1;
            }
            return 0;
        }
    });
    return array;
}

[4] Object.assign({}, props, {a: b}
js中使用Object.assign({}, props, {a: b}
ts可以直接改为{ ...props, a: b }

React相关问题

[1] 获得表单输入
对于<input type='text' ref='myInput'>，可以通过this.refs.myInput.value获得文本框的值。但是在实际操作过程中有可能会遇到浏览器报错，内容为：Property ‘value’ does not exist on type ‘Element’，这是由于缺少类型断言造成的。
解决方案：

1
2

let input = this.refs.myInput as HTMLDivElement
console.log(input.value)

这对于其他类型的表单组件（如select）也适用。

[2] Promise.resolve()
创建一个空Promise，适用于方法f返回值可能为Promise | undefines，
例如：

1
2
3

((f && f()) || Promise.resolve()).then(() => {
    …
}

CSS相关问题

[1] 当div子元素均为width: auto时，display: inline-block会失效
解决方案：如果不想给这个div设置固定的width，可以将这个div设置为width: max-content。
为了不影响其他(如text-align: right)等样式，可以添加min-width: 100%。
——
但是max-content在Edge中不支持：
子节点使用display: table-cell。

[2] >
> 表示只对第一个子节点生效

[3] 比较好看的shadow样式
text-shadow: 0 0 0.125rem #ffffff;
box-shadow: inset 0 -1px #ebebeb;

[4] 在css中引入新字体
引入：

1
2
3
4
5
6

@font-face {
	font-family: “72”;
	src: url(...);
	font-weight: 400;
	font-style: normal
}

使用：font-family: “72”, ...;

[5] 改变svg颜色
一般的颜色可以使用fill，如：fill: green;
使用https://codepen.io/sosuke/pen/Pjoqqp 可以将任意HEX颜色code转化为filter，例如#00EE00可转化为：
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

Jquery与原生js转换

[1] Jquery: $(…)
原生js：document.querySelectorAll(…)

[2] Jquery：hasClass
原生js：

1
2
3
4
5
6
7
8
9
10

function hasClass(obj: any, cls: string) {
            const obj_class = obj.className;
            const obj_class_lst = obj_class.split(/\s+/);
            for (const x in obj_class_lst) {
                if (obj_class_lst[x] === cls) {
                    return true;
                }
            }
            return false;
        }

[3] Jquery：:contains
如 $('.title:contains("Delete")'
原生js：

1
2
3
4
5
6

function contains(selector: any, text: string) {
            const elements = document.querySelectorAll(selector);
            return [].filter.call(elements, function (element: any) {
                return RegExp(text).test(element.textContent);
            });
        }

如contains('.title', "Delete")[0]

[4] Jquery：.text()
原生js：.innerHTML.replace(/<.*?>/g, "")

[5] Jquery：.parent()
原生js：.parentNode

[6] Jquery：.find('…')
原生js：.querySelectorAll('…')[0]

其他问题

[1] 将下载的代码部署到本地服务器上
解决方案：

1
2

npm i lite-server -g
lite-server

[2] chrome检查中断点失效
可能是因为断点打在了错误的chunk。
解决方案：可以通过在本地文件中加debugger;语句，来判断正确的chunk。

[3] 编写测试用例，创建假的节点

1
2
3

let oFakeChildContainer = document.createElement("div");
let oFakeParentContainer = document.createElement("div");
oFakeParentContainer.appendChild(oFakeChildContainer);

[4]Drag and drop测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const dragSource = document.querySelectorAll(…)[0];
const dropTarget = document.querySelectorAll(…)[0];
expect(dragSource.getAttribute('draggable')).toBeTruthy();
const createBubbledEvent = (type: string, props = {}) => {
    const event = new Event(type, { bubbles: true });
    Object.assign(event, props);
    return event;
};

dragSource.dispatchEvent(
    createBubbledEvent("dragstart", { clientX: 0, clientY: 0 })
);
dropTarget.dispatchEvent(
    createBubbledEvent("drop", { clientX: 0, clientY: 1 })
);
expect(…);
done();

[5] scrollIntoView
… .scrollIntoView({ behavior: “smooth”, block: “nearest” });
参数：behavior，block，inline

[6] 异步方法的使用

1
2
3
4

const handler = async () => {
            await f();
	…
        };

参考资料

[1] https://stackoverflow.com/questions/15393821/npm-err-cb-never-called
[2] https://github.com/Microsoft/TypeScript/issues/10453
[3] https://medium.freecodecamp.org/how-to-write-better-tests-for-drag-and-drop-operations-in-the-browser-f9a131f0b281
[4] https://stackoverflow.com/questions/22252472/change-svg-color