趁着这波裁员,总结下入职遇到的坑。
栏目: JavaScript · 发布时间: 5年前
内容简介:字面量分为: 对象字面、数组字面量、字符串字面量new Object()则是构造函数new Array()构造数组
字面量分为: 对象字面、数组字面量、字符串字面量
new Object()则是构造函数
new Array()构造数组
先说下优缺点
- 对象字面量的声明比构建函数更加方便
- 空的对象实质上只是满足以下条件的数据结构:
- __proto__属性指向Object.prototype
- 其成员列表指向一个空壳
var obj3 = new Object(); var num = 0; for(var i in obj3){ num++; } console.log(num); //0 复制代码
对象的成员的存取遵循两个规则:1、在读取时,该成员表上的属性和方法将会被优先访问到; 2、如果成员表中没有指定的属性,那么会查询对象的整个原型链,直到找到该属性或者原型链的顶部。 所以存取实例中的属性比存取原型中的属性效率要高。我们应该采用字面量语法创建对象
var Student = function() { this.name = 'default'; this.say = function() { console.log('say hello!'); } } var s1 =new Student(); console.log(window.name) 复制代码
new的话,对于student内部的this便指向了全局对象,没有定义的话.
所以在这里简单总结下构造函数、原型、隐式原型和实例的关系:每个构造函数都有一个原型属性(prototype),该属性指向构造函数的原型对象;而实例对象有一个隐式原型属性(proto),其指向构造函数的原型对象(obj.proto==Object.prototype);同时实例对象的原型对象中有一个constructor属性,其指向构造函数。
this在call与apply与bind中
fn.call(asThis, p1, p2)是函数的正常调用方式,当你不确定参数的个数时,就使用apply fn.apply(asThis, params)
bind call和apply是直接调用函数,而bind则是返回一个新函数(并没用调用原来的函数),这个新函数会call原来的函数,call的参数由你指定。
map
// 使用 Map 来找到对应颜色的水果 const fruitColor = newMap() .set('red', ['apple', 'strawberry']) .set('yellow', ['banana', 'pineapple']) .set('purple', ['grape', 'plum']); function test(color) { return fruitColor.get(color) || []; } 复制代码
typeof 数组或者null 类型值是object
svg的书写方式
<svg class="icon"><use :xlink:href="`#i-${icon}`"></use></svg> 复制代码
debouce与Thorlle
debouce定义:当调用动作n毫秒之后,才会执行该动作,若在这n秒之后又调用此动作则将重新计算执行时间 Thorlle定义: 无视后来产生的回调请求。
function createDebounce (callback, time){ var timer time = time || 300 //默认值 return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(()=>{ callback() }, time) } } 复制代码
// fn是我们需要包装的事件回调, interval是时间间隔的阈值 function throttle(fn, interval) { // last为上一次触发回调的时间 let last = 0 // 将throttle处理结果当作函数返回 return function () { let context = this // 保留调用时传入的参数 let args = arguments // 记录本次触发回调的时间 let now = +new Date() //时间差 if (now - last >= interval) { last = now; fn.apply(context, args); } } } 复制代码
if判断的一些坑
诸如 if 语句之类的条件语句使用 ToBoolean 抽象方法来强制求值它们的表达式,并始终遵循以下简单规则:
- Objects 求值为 true
- Undefined 求值为 false
- Null 求值为 false
- Booleans 求值为 布尔值
- Numbers 如果是 +0、-0、或 NaN 求值为 false , 否则为 true
- Strings 如果是空字符串 '' 求值为 false , 否则为 true
解释一下
if ([0] && []) { // true // 一个数组 (即使是一个空数组) 是一个 object, objects 被求值为 true } 复制代码
深拷贝与浅拷贝
- 深拷贝的
- JSON.stringify与JSON.parse 2.浅拷贝
- assign
var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, 目标改变了 复制代码
- 展开操作符...
Array.some的用法
(function s(){ const value="0"; const arrNo = ["", null, "0", 0, "undefined", undefined]; if(arrNo.some(d => d === value)) return console.log('不是想要的值') })() 复制代码
Array.forEach用法
var arry1 = [1, 2, 3]; arry1.forEach((item, index, arr)=>{ console.log(arr[index]); //1、2、3 }) 复制代码
Array.from
let hours = []; for(let i =0; i<24;i++){ hours.push(i +'时') } //我们可以写成以下形式 let hours = Array.from({length:24}, (value, index) => index + '时') 复制代码
for-in、for-of
for(let i of nums){ of 里面的值是VALUE in 里面的值是key, for...of 语句遍历可迭代对象定义要迭代的数据。 for...in 语句以原始插入顺序迭代对象的可枚举属性。 } 复制代码
扩展运算符简写
const odd = [1, 3, 4]; const nums = [2, 5, 6, ...odd]; console.log(nums) //[2,5,6,1,3,4] 复制代码
乐观与悲观锁(这是不知道哪位大神取的名)
悲观锁 定义:提交表单时,防止多次提交,我们会在请求前加上标志位
var block = false function refesh(){ if(block){ return } block = true return fetch('api') .then(res => { block = false }) .catch(err =>{ block = false }) } 复制代码
乐观锁 定义:用户在资源下载完之前,在点击其他组件,我们就会去下载其他资源,之前的请求照常发起,只是无论如何都会被丢弃。
var id = 0 function loading(resources){ var load_id = ++id PromiseAll(resources) .then(()=>{ if(load_id === id){ //渲染 } else{ //丢弃 } }) .catch(()=>{ if(load_id ===id){ //提示错误 } else{ //丢弃 } }) } 复制代码
Proxy
对象接受两个参数,第一个参数是需要操作的对象,第二个参数是设置对应拦截的属性,这里的属性同样也支持 get,set 等等,也就是劫持了对应元素的读和写,能够在其中进行一些操作,最终返回一个 Proxy 对象。
const proxy = new Proxy({}, { get(target, key) { console.log('proxy get key', key) }, set(target, key, value) { console.log('value', value) } }) proxy.info // 'proxy get key info' proxy.info = 1 // 'value 1' 案例: const me = { name: "小明", like: "小红 ", food: "香菇", musicPlaying: true }; // const meWithProxy = new Proxy(me, { // get(target, prop) { // if (prop === "like") { // return "学习"; // } // return target[prop]; // } // }); const meWithProxy = new Proxy(me, { set(target, prop, value) { if (prop === "musicPlaying" && value !== true) { throw Error("任何妄图停止音乐的行为都是耍流氓!"); } target[prop] = value; } }); //console.log("sale_check mounted", meWithProxy.like); console.log.log("sale_check mounted", meWithProxy.food); console.log("sale_check mounted", meWithProxy.musicPlaying = false); 复制代码
小白的vue入坑之路
1.vue中v-if中用key管理可复用的元素
我们在不要复用的input框加入了相对应的key,而label元素仍然会被高效的复用。
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="emial-input"> </template> 复制代码
动态插入相对应script
computed与watch
计算属性顾名思义就是通过其他变量计算得来的另一个属性,计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
侦听器watch是侦听一个特定的值,当该值变化时执行特定的函数。例如分页组件中,我们可以监听当前页码,当页码变化时执行对应的获取数据的函数
- 从属性名上,computed是计算属性,也就是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化,然后执行相对应的函数。
- 从实现上,computed的值在get执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算。watch在每次监听的值变化时,都会执行回调。 其实从这一点来看,都是在依赖的值变化之后,去执行回调。很多功能本来就很多属性都可以用,只不过有更适合的。
如果一个值依赖多个属性(多对一),用computed肯定是更加方便的。 如果一个值变化后会引起一系列操作,或者一个值变化会引起一系列值的变化(一对多),用watch更加方便一些。
- watch的回调里面会传入监听属性的新旧值,通过这两个值可以做一些特定的操作。computed通常就是简单的计算。 下面是两者之间的互换
<input > watch: { word() { this.$emit("update:keyword", this.word); } } 上面这个data里面定义word computed: { word: { get() { return this.keyword; }, set(val) { this.$emit("update:keyword", val); } } } 复制代码
refs的一些使用注意
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。
关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$ refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。 你应该避免在模板或计算属性中访问 $refs。 还有考虑到他们refs的唯一性,例如:两个表单取同样的话,只会引用到后面那个。
父子组件通信
//父 <Child-one :parentMessage="parentMessage" @childEvent='childtMethod'></Child-one> methods:{ childMethod(){ alert('组件的消息') } } //子 <button @click="childMethod">子组件</button> props:{ parentMessage:{ type: String, default: '子组件' } } methods:{ childMethod(){ this.$emit('childEvent', '组件的信息') } } 复制代码
非父子组件的数据传递可以采用
prop是单向数据流,所以prop接受的数据无法双向绑定,我们可以采用
子组件中通过 on(eventName)来监听事件,
- 定义一个局部变量,并用prop的值初始化它:
props:['initialCounter'], data:function(){ return {counter: this.initialCounter} } 复制代码
- 定义一个计算属性,处理prop的值并返回。
props:['size'], computed:{ normalizedSize:function(){ return this.size.trim().toLowerCase() } } 复制代码
vue.extend
1.使用vue构造器,创建一个子类,参数是包含组件选项的对象. 2.是全局的. 结论: Vue.extend实际是创建一个扩展实例构造器,对应的初始化构造器,并将其挂载到标签上
vue.mixins
结论:
- 1.mixins执行的顺序为mixins>mixinTwo>created(vue实例的生命周期钩子);
- 2.选项中数据属性如data,methods,后面执行的回覆盖前面的,而生命周期钩子都会执行 后面执行created,而我们created里面放着getSum(){console.log(‘这是vue实例的getSum’)}; -3.extends用法和mixins很相似,只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件
结论: 1.extends执行顺序为:extends>mixins>mixinTwo>created 2.定义的属性覆盖规则和mixins一致
vue.install
1.install是开发vue的插件,这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象(可选) 2.vue.use方法可以调用install方法,会自动阻止多次注册相同插件.
上面的也可以简写为
let install = function(Vue){ components.map(component=>{ Vue.component(Vue.component.name, Vue.component) }) } 复制代码
总结下这几个的区别
- vue.extend和vue.use的使用,可以构建自己的UI库
- Vue.extend和Vue.component是为了创建构造器和组件;
- mixins和extends是为了拓展组件;
- install是开发插件;
总的顺序关系: Vue.extend>Vue.component>extends>mixins
组件name的作用
- 当项目使用keep-alive时,可搭配组件name进行缓存过滤
- DOM做递归组件时 比如说detail.vue组件里有个list.vue子组件,递归迭代时需要调用自身name
- 当你用vue-tools时 vue-devtools调试 工具 里显示的组见名称是由vue中组件name决定的
watcher有两个配置
(1)深度 watcher deep: true (2)该回调将会在侦听开始之后被立即调用 immediate: true
beforeDestroy
vue 的beforeDestroy()生命周期钩子是一个解决基于 Vue Router 的应用中的这类问题的好地方。 beforeDestroy: function () { this.choicesSelect.destroy() } 可以配合deactivated 使用,可以去除keep-alive的钩子
keep-alive
当你用keep-alive包裹一个组件后,它的状态就会保留,因此就留在了内存里。
其他
1.diff算法
vue中key的作用主要是为了高效的更新虚拟DOM,其主要的逻辑大概下面这样
2.get和post在缓存方面的区别
get请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存。 post不同,post做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存。 因此get请求适合于请求缓存。
3.setTimeout、process.nextTick、promise
Event Loop队列任务有宏任务、微任务
常见的 macro-task 比如: setTimeout、setInterval、 setImmediate、script(整体代码)、 I/O 操作、UI 渲染等。
常见的 micro-task 比如: process.nextTick、Promise、MutationObserver 等。 macro-task出队时,任务是一个一个执行的,micro-task一队一队执行的。
它们的执行优先顺序是process.nextTick>promise>setTimeout
4.css的min-width和max-width
min-width会继承父元素,min-height不会继承父元素,若无父元素,也就是最外层的body,则默认100%
以上所述就是小编给大家介绍的《趁着这波裁员,总结下入职遇到的坑。》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 2019 大裁员!年关将至,最高裁员比例竟达 90%?
- Oracle 中国研发中心裁员已定,首批裁员 900 人
- WeWork大裁员2400人
- “花式” 裁员套路深,你知道吗?
- 2018 Gartner魔力象限“大裁员”
- 我所经历的三次裁员
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
大型网站技术架构
李智慧 / 电子工业出版社 / 2013-9-1 / 59.00元
《大型网站技术架构:核心原理与案例分析》通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计案例,为读者呈现一幅包括技术选型、架构设计、性能优化、Web 安全、系统发布、运维监控等在内的大型网站开发全景视图。 《大型网站技术架构:核心原理与案例分析》不仅适用于指导网站工程师、架构师进行网站技术架构设计,也可用于指导产品经......一起来看看 《大型网站技术架构》 这本书的介绍吧!