web

js 对象展开运算符

state.obj = { ...state.obj, newProp: 123 }

typescript 模块解析

typescript 模块解析

使用 nvm 管理 nodejs

网址: https://github.com/nvm-sh/nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm install --lts

npm config set registry https://registry.npm.taobao.org
npm config get registry

npm install -g yarn
yarn config set registry 'https://registry.npm.taobao.org'

生成tsconfig.json文件

yarn add -D typescript
yarn tsc --init

使用npm安装cordova, 执行cordova create报错

npm ERR! not a package.........@cordova-app-hello-world\index.js
卸载cordova, 使用yarm重新安装即可:
    sudo npm uninstall -g cordova
    sudo npm install -g yarn
    sudo yarn config set registry https://registry.npm.taobao.org
    sudo yarn global add cordova

package.json 版本约定号

~version

大概匹配某个版本

如果minor版本号指定了, 那么minor版本号不变, 而patch版本号任意

如果minor和patch版本号未指定, 那么minor和patch版本号任意

如:~1.1.2, 表示>=1.1.2 <1.2.0, 可以是1.1.2, 1.1.3, 1.1.4, ....., 1.1.n

如:~1.1, 表示>=1.1.0 <1.2.0, 可以是同上

如:~1, 表示>=1.0.0 <2.0.0, 可以是1.0.0, 1.0.1, 1.0.2, ....., 1.0.n, 1.1.n, 1.2.n, ....., 1.n.n


^version

兼容某个版本

版本号中最左边的非0数字的右侧可以任意

如果缺少某个版本号, 则这个版本号的位置可以任意

如:^1.1.2 , 表示>=1.1.2 <2.0.0, 可以是1.1.2, 1.1.3, ....., 1.1.n, 1.2.n, ....., 1.n.n

如:^0.2.3 , 表示>=0.2.3 <0.3.0, 可以是0.2.3, 0.2.4, ....., 0.2.n

如:^0.0, 表示 >=0.0.0 <0.1.0, 可以是0.0.0, 0.0.1, ....., 0.0.n

jquery

prop attr的区别:
    在这里, 我们可以将attribute理解为“特性”, property理解为为“属性”从而来区分俩者的差异。
    举个例子, option当做一个对象:
    var option = {
        selected:false,
        disabled:false,
        attributes:[],
        ...
    }
    attributes是自定义的键值对, property是对象自身的属性:selected、disabled、attributes...

## 报错:sh: 1: tsc: not found

需要安装typescript, 执行:sudo npm install -g typescript

chrome插件开发

[an example](https://developer.chrome.com/extensions/getstarted/ "略略")

div层调整zindex属性无效原因分析及解决方法

这种情况发生的条件有三个:

1、父标签 position属性为relative

2、问题标签无position属性(不包括static)

3、问题标签含有浮动(float)属性

eg:z-index层级不起作用, 浮动会让z-index失效


子元素浮动,父div没有自适应
clear:both 不管用?
给父元素添加: overflow:hidden

一个div内的多个同级div, 同级的div在同一行, 怎么保证它们高度一致?
margin-bottom


1,在当前窗口中跳转:
    window.location.href('url') 存在兼容问题,火狐不支持,可以使用 window.location='url';

    history.back();返回

2,学会使用data*属性,这是属于html5的标签属性, 传递参数时可以在路径中加上?key1=value1&key2=value2的形式

3,onbar事件
    使用taglib prefix ="c", 循环

4,使用锚点:
    <a name="anchor1"/>.........<a target="#anchor1"/>


软件 Artisteer firework ps 美图秀秀

textContent与innerHTNL的区别:textContent返回元素及其后代的文本内容,而innerHTML则返回HTML

ie和火狐遍历子节点chileNodes的区别:ie没有空格,火狐带空格

ul中的li居中:li的默认display为block,设置li为inline


对于浮动元素的高度为0,可以通过设置:如下:
    ul:after {
    content: "";
    display: table;
    clear: both;
    }


动画滚动:
$msg_container.animate({ scrollTop: $msg_container.prop("scrollHeight") });


/**
* 禁用右键菜单
*/
document.oncontextmenu = function(){
    event.returnValue = false;
};

/**
* 禁用选中功能
*/
document.onselectstart = function(){
    event.returnValue = false;
};

/**
* 禁用复制功能
*/
document.oncopy = function(){
    event.returnValue = false;
};

/**
* 禁用鼠标的左右键
*/
document.onmousedown = function(){
    if(event.which==1){//鼠标左键
        return false;
    }

    if(event.which==3){//鼠标右键
        return false;
    }
};

/**
* 获取键盘上的输入值
*/
document.onkeydown = function(){
    console.info(event.which);
    if(event.which==13){
        console.info("回车键");
    }
};

设置页面居中

background:url(\${sb.imageUrl }) no-repeat; background-size:150px 100px; background-position: center;

div居中:
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); // 偏移自身的50%

指定宽度 剩余铺满

<div style="display: flex;">
    <div style="flex-grow: 1;"></div>
    <div style="width: 300px;"></div>
</div>