H5

环境搭建

vue+vscode+nodejs 开发环境搭建

https://www.cnblogs.com/warmsmile/p/9860527.html
https://www.cnblogs.com/huxiaocong/p/11410054.html

查看配置 npm config list

npm下载全局模块默认安装到{%USERDATA%}C:\Users\username\AppData\下的Roaming\npm

运行 npm config set cache "缓存文件夹路径" 设置缓存文件夹；

运行 npm config set prefix "全局模块存放路径" 设置全局模块存放路径；

安装cnpm代理

npm install -g cnpm --registry=https://registry.npm.taobao.org

也可以按如下方式直接在命令行设置不用更换成cnpm

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

查看源，可以看到设置过的所有的源

npm config get registry

安装依赖 npm install

强烈建议不要用直接使用 cnpm 安装, 可以使用
npm install --registry=https://registry.npm.taobao.org

VUE

vue遍历

<!-- vue对象遍历 -->
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} - {{ value }}
</div>

<!-- vue数组对象遍历 -->
<div v-for="(value, index) in objectArray">
姓名：{{value.name}}
年龄:{{value.age}}
</div>

JS

for...of...数组

for(var i of arr) {
//do something
};

for...in..对象

for(var i in arr) {
//do something
};

JS获取对象内可枚举属性以及方法名称

var keys= Object.keys(testObj); //Object.getOwnPropertyNames(testObj); 包括不可枚举属性但不包括Symbol值
console.log(keys); // 输出 keys ["name", "age", "action"]

json是否为空

!json || json.length == 0

筛选

let selectedOptionList = optionList.filter(obj => selectedList.indexOf(obj.id) > -1);

映射(提取某些字段)

let selectedNameList = this.selectedOptionList .map((it) => it.name);

字符编码

encodeURI, encodeURIComponent-范围更大

trim

function trim(str){
　　return str.replace(/(^\s)|(\s$)/g, "");
}

select获取值与文本

1:拿到select对象： var myselect=document.getElementById("select");
2:拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value： myselect.options[index].value;
4:拿到选中项options的text： myselect.options[index].text;
5:拿到选中项的其他值，比如这里的url： myselect.options[index].getAttribute('url');

时长计算

console.time("time1");
console.timeEnd("time1");

json和字符串

let str = JSON.stringify(json)
let json= JSON.parse(str) 或者 let json= eval('(' + str + ')') // 哪怕是多次转换还是JSON对象

屏蔽鼠标右键

document.oncontextmenu = function (evt) {
evt = evt || window.event;
evt.returnValue = false;
}

屏蔽鼠标选择

document.onselectstart = function (evt) {
evt = evt || window.event;
evt.returnValue = false;
}

JQuery

select操作

1:var options=$(“#select option:selected”); //获取选中的项
2:alert(options.val()); //拿到选中项的值
3:alert(options.text()); //拿到选中项的文本
4:alert(options.attr('url')); //拿到选中项的url值
获取select 选中的 text :
$("#ddlregtype").find("option:selected").text();

CSS

css多行省略

.line-one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.line-three { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; 
		-webkit-line-clamp:3; -webkit-box-orient: vertical; }

滚动条样式

::-webkit-scrollbar {
  width: 4px;    
  height: 6px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
  border-radius: 0;
  background: rgba(0,0,0,0.01);
}

插件

视频播放器插件

https://muiplayer.gitee.io/zh/