1、Map 结构 –
注意区分 Object 和 Map,只有模拟现实世界的实体对象时,才使用 Object。如果只是需要key: value的数据结构,使用 Map 结构。因为 Map 有内建的遍历机制
2、Module
如果模块默认输出一个函数,函数名的首字母应该小写。
function makeStyleGuide() {
}
export default makeStyleGuide;
如果模块默认输出一个对象,对象名的首字母应该大写。
const StyleGuide = {
es6: {
}
};
export default StyleGuide;
3、ESLint
ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
4、全局常量和线程安全
const优于let有几个原因。
一个是const可以提醒阅读程序的人,这个变量不应该改变;
另一个是const比较符合函数式编程思想,运算不改变值,只是新建值,而且这样也有利于将来的分布式运算;
最后一个原因是 JavaScript 编译器会对const进行优化,所以多使用const,有利于提高程序的运行效率;
也就是说let和const的本质区别,其实是编译器内部的处理不同。
5、Promise
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。
6、创建XHR
const client = new XMLHttpRequest(); //new实例对象
client.open("GET", url); //设置请求方式和url地址
client.onreadystatechange = handler; // 添加请求后的回调方法
client.responseType = "json"; //响应类型
client.setRequestHeader("Accept", "application/json"); //这是请求头
client.send(); //发送
7、常见的请求头类型
application/x-www-form-urlencoded:数据被编码为名称/值对。这是标准的编码格式
application/json:消息主体是序列化后的 JSON 字符串
multipart/form-data: 需要在表单中进行文件上传时,就需要使用该格式。常见的媒体格式是上传文件之时使用的
text/plain:数据以纯文本形式(text/json/xml/html)进行编码,其中不含任何控件或格式字符。
8、ShowDoc是一个非常适合IT团队的在线API文档、技术文档工具,可以用他来写接口文档。
9、JavaScript实现是否支持严格模式:
var hasStrictMode = (function(){"use strict"; return this === undefined})()
console.log(hasStriceMode) // true支持严格模式,false不支持
10、ES6后续新增运算符
1、指数运算符(**) 2 ** 2 == 4 a **= 2; ==> a = a * a;
2、链判断运算符 (?.) iterator.return?.()
3、空值合并:null或undefined判断运算符(??) headerText = response.settings ?? ‘Hello, world!’;
只有运算符左侧的值为null或undefined时,才会返回右侧的值
4、逻辑赋值运算符 (||=、&&=、??=)
三个运算符相当于先进行逻辑运算,然后根据运算结果,再视情况进行赋值运算。
// 老的写法
user.id = user.id || 1;
// 新的写法
user.id ||= 1;
11、js实现事件发射监听(观察-订阅模式)
var events = {};
var eventEmitter = {
emit: function (eventName) {
var callbackArr = events[eventName]
if (callbackArr && callbackArr.length) {
for (var i = 0; i < callbackArr.length; i++) {
callbackArr[i]()
}
}
}
};
var eventListener = {
on: function (eventName, callback) {
if (!events[eventName]) {
events[eventName] = []
}
events[eventName].push(callback)
},
remove: function (eventName, callback) {
var callbackArr = events[eventName]
if (callbackArr && callbackArr.length) {
var index = callbackArr.indexOf(callback);
callbackArr.splice(index, 1);
}
}
};
var clickCallback = function () {
console.log('click callback');
}
eventListener.on('click', clickCallback)
eventEmitter.emit('click');
eventListener.remove('click', clickCallback)
12、‘vue-cli-service’ 不是内部或外部命令,也不是可运行的程序 解决方式:
解决办法1
npm install --global vue-cli
解决办法2
我使用的淘宝的源
nrm ls
切换源
nrm use npm
删除 node_moudles
重新 npm install
优化规则:
1、始终在 v-for 中使用 :key
2、在发出定制事件时,最好使用短横线命名,如this.$emit(‘father-handle’)
3、使用驼峰式声明 props,并在模板中使用短横线命名来访问 props( props:{ title-text: String})
4、data 应始终返回一个函数(data(){ return {};})
5、不要在同个元素上同时使用v-if和v-for指令
6、遍历一个计算属性, 计算属性中根据条件的过滤返回一个只适合模板需要的数据
7、用正确的定义验证我们的 props
props: {
status: {
type: String,
required: true,
validator: function (value) {//自定义验证函数
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
8、基本组件应该相应地加上前缀(如:BaseButton.vue,BaseIcon.vue)
9、单实例组件命名应该带有前缀 The(如:TheButton.vue,TheIcon.vue)
10、模板表达式中只有方法,不含计算逻辑,要分离表达式
11、减少魔数函数的使用;如:fun(1,‘name’,…) 写 let _num = 1, _str = ‘name’
js运算奇葩:
1++; // -> SyntaxError
"x"++; // -> SyntaxError
undefined++; // -> NaN
1/0; // -> Infinity
Math.pow(10, 1000); // -> Infinity
Infinity > Infinity; // -> false
Number(""); // -> 0
[].toString(); // -> ""
"" + ""; // -> ""
let _NaN = NaN;
_NaN++;
isNaN(_NaN); // -> true
_NaN--;
isNaN(_NaN); // -> true
_NaN *= 10;
isNaN(_NaN); // -> true
13、JavaScript介绍
JavaScript 是浏览器的内置脚本语言。也就是说,浏览器内置了 JavaScript 引擎,并且提供各种接口,让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本,浏览器加载网页,就会去执行脚本,从而达到操作浏览器的目的,实现网页的各种动态效果。
14、js下载文件
function runCode(html) {
var newwin = window.open('', '', '');
newwin.opener = null;
newwin.document.write(html);
newwin.document.close();
}
15、js常用判断的工具函数
1.邮箱
export const isEmail = (s) => {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}
2.手机号码
export const isMobile = (s) => {
return /^1[0-9]{10}$/.test(s)
}
3.电话号码
export const isPhone = (s) => {
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}
4.是否url地址
export const isURL = (s) => {
return /^http[s]?:\/\/.*/.test(s)
}
5.是否字符串
export const isString = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'String'
}
6.是否数字
export const isNumber = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
}
7.是否boolean
export const isBoolean = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
}
8.是否函数
export const isFunction = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
}
9.是否为null
export const isNull = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
}
10.是否undefined
export const isUndefined = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
}
11.是否对象
export const isObj = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
}
12.是否数组
export const isArray = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
}
13.是否时间
export const isDate = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
}
14.是否正则
export const isRegExp = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'RegExp'
}
15.是否错误对象
export const isError = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Error'
}
16.是否Symbol函数
export const isSymbol = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Symbol'
}
17.是否Promise对象
export const isPromise = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Promise'
}
18.是否Set对象
export const isSet = (o) => {
return Object.prototype.toString.call(o).slice(8, -1) === 'Set'
}
16、数组的空位介绍
数组的空位指,数组的某一个位置没有任何值。比如,Array构造函数返回的数组都是空位。
Array(3) // [, , ,]
上面代码中,Array(3)返回一个具有 3 个空位的数组。
注意,空位不是undefined,一个位置的值等于undefined,依然是有值的。空位是没有任何值,in运算符可以说明这一点。
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
上面代码说明,第一个数组的 0 号位置是有值的,第二个数组的 0 号位置没有值。
ES5 对空位的处理,已经很不一致了,大多数情况下会忽略空位。
forEach(), filter(), reduce(), every() 和some()都会跳过空位。
map()会跳过空位,但会保留这个值
join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。
17.‘vue-cli-service’ 不是内部或外部命令,也不是可运行的程序 解决方式:
解决办法1
npm install --global vue-cli
解决办法2
我使用的淘宝的源
nrm ls
切换源
nrm use npm
删除 node_moudles
重新 npm install
18.typeScript类几种高级用法之一
给属性添加访问修饰符readonly
各种访问修饰符
使用constructor,属性会在构造函数中自动分配,类会更加简洁
class Person {
readonly name: string; // 不可变
private isCool: boolean; // 类的私有属性、外部访问不到
protected email: string; // 只能从这个类和子类中进行访问和修改
public age: number; // 任何地方都可以访问和修改
constructor(n: string, c: boolean, a: number) {
this.name = n;
this.isCool = c;
this.age = a;
}
sayHello() {
return `Hi,我是 ${this.name} ,我今年 ${this.age} 岁了`;
}
}
const person1 = new Person('ConardLi', true, 'conard@xx.com', 17);
console.log(person1.name); // ConardLi
person1.name = 'Makey'
或写法
class Person {
constructor(
readonly name: string,
private isCool: boolean,
protected email: string,
public age: number
) {}
}