这两周的课程进度比我原先预计的要快得多,我也在不断的对课程的结构做了一些优化调整。 原先打算将前端和后端的内容先独立分开来讲的,但是在讲课的过程中,发现穿插在一起讲能更好的让同学们理解前端和后端的异同和各自的职责,以及相互间的关系等,可以更好的建立软件开发的大局观,从更高的角度来认识编程 然后,尽量让同学们在了解某个具体技术知识点的同时,也让他们了解这些技术在整个软件开发和部署的体系中所处的角色和位置。 除了这些基础知识,我们也开始引入介绍一些以后需要用到的内容,比如:Nginx、MongoDB的基本用法,微信小程序和网页应用开发的技术关联性,HTTP协议中几个重要方法(GET,POST,PUT, 模拟芝麻信用页面 通过开发这些demo程序,同学们对HTML和CSS在搭建界面方面的使用,以及使用DOM事件进行对用户交互的处理,都有了一个更加形象的认识。
前言 本次解析本套高级前端的Vue面试题的第三问,Vue中是如何检测数组变化的,如果对这一问也有所不熟悉的,请一起学习吧。 ,最后也将Vue从2.x升级到3.x的过程中为何要采用了不同的数据监测原理的原因也一探究竟。 2、数组的操作方法如果是操作已经存在的被监听的元素也是可以触发setter被监听的。 看完源码后,问题a也水落石出了,Vue2.x中并没有实现将已存在的数组元素做监听,而是去监听造成数组变化的方法,触发这个方法的同时去调用挂载好的响应页面方法,达到页面响应式的效果。 总结 在Vue2.x中数组变化监听的问题,其实不是Object.definePropertype方法监听不到,而是为了性能和收益比例综合考虑之下,改变了监听方式,从原本的直接监听结果变化这种思路变换到监听会导致结果变化的方法上
前言 最近拿到一套高级前端的Vue面试题,从头往下看了一遍,居然大部分都是一知半解的,遂准备一道一道的认真学习总结,立志做一位Vue高级开发者! ? 提到MVVM,很多前端开发者都会想到Vue的双向绑定,然而它们并不能划等号,MVVM是一种软件架构模式,而Vue只是一种在前端层面上的实现,其实不单在Vue里,在很多Web 框架应用里都有相关的实现。 因为前端独立开发发布,实际相对原来的MVC模式是少了View这一层,这也让新的概念Restful出现在我们的视野里,很多新的框架又开始支持提供这种前端控制轻量级模式下的适配方案。 随着前端对于控制逻辑的越来越轻量,MVVM模式作为MVC模式的一种补充出现了,万变不离其宗,最终的目的都是将Model里的数据展示在View视图上,而MVVM相比于MVC则将前端开发者所要控制的逻辑做到更加符合轻量级的要求 实现的更友好,更适合开发者开发应用程序。
)打开名为 “window2” 的新窗口的 JavaScript 语法是? A.open.new(“http://www.w3school.com.cn”,“window2”) B.new.window(“http://www.w3school.com.cn”,“window2 “window2”) 【正确答案】D 【答案解析】open() 方法可以查找一个已经存在或者新建的浏览器窗口。 如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。 窗口名称:可选参数,被打开窗口的名称。 1.该名称由字母、数字和下划线字符组成。 2." A说法正确; 2.li标签可以嵌套
在生命周期的每个节点,Vue提供了一些钩子函数,使得开发者的代码能被有机会执行。 这里的钩子函数可以简单理解为,在Vue实例中预先定义了一些像created,mounted等特定名称的函数,函数体的内容开发给开发者填充,当被实例化的时候,会按照确定的先后顺序来执行这些钩子函数,从而将开发者的代码有机会执行 第一,从开发者的代码层面看看,与开发者较为密切的数据模型与页面DOM结构在各个生命周期钩子函数执行时的变化。第二,在源码层面看一下这些生命周期钩子函数它们各自的执行过程。 下面是源码里所列出来的所有可承载开发者代码的钩子函数。 References [1] https://github.com/vuejs/vue/blob/v2.6.11/dist/vue.common.dev.js [2] https://cn.vuejs.org
既然都是前端开发,两者肯定有紧密的联系,移动前端开发和web前端开发其实都属于前端开发的范围,目前前端发展的趋势就是大前端,可以说是包罗万象,当然也就包含PC端和移动端领域,而现在的前端开发人员也已早就不是当年的切图仔了 所以不论是想做移动前端开发还是web前端开发,这三样基础技术都必须熟练掌握。 移动前端开发和web前端开发都属于前端开发,那具体又有什么区别呢? 1、业务的应用场景 web前端开发主要指传统的PC端网页开发,页面主要是运行在PC端浏览器中,移动前端开发出来的页面主要是运行在手机上;直观上会感觉,PC端页面大一些,移动端页面小一些,但是根据开发经验 2、新技术的使用 由于在移动端主要以webkit内核为主,对于HTML5等新技术支持的更好,所以可以更大范围的使用新技术;而PC端开发由于很多场景下要求兼容IE等老版本浏览器,出于浏览器兼容性的考虑,有些情况下限制了新技术的使用 4、页面的性能 PC端的网络情况一般比较稳定,都是通过网线或者Wi-Fi连接网络;但是移动端就比较复杂,除了Wi-Fi,还有2G、3G、4G甚至是在几种不同的网络连接中交替切换也经常发生,不稳定的网络连接对页面性能带来的挑战是移动端的页面资源不能太大
最近面试中碰到了一道关于JS执行顺序的题目,题目比较基础,但是如果对于JS不熟的话,还是容易答不上来。再次记录和分析此次面试题,希望对大家有所帮助。 在这里要记住一句话,微任务的优先级是高于宏任务的。参考面试题解答 前端进阶面试题详细解答程序执行顺序1、主程序因为js是单线程的,同一时间只能有一段代码在执行,所以首先执行的就是JS的主程序。 微任务:空宏任务:空2、主程序 - async async2这里同样也只是定义async函数async2, 所以这一步也没有输出内容微任务:空宏任务:空3、主程序 - console.log程序执行到了 ,下一行和之后的内容会加入到微任务队列,所以又进入到async2里面,并在微任务队列加入一个微任务。 微任务:async1宏任务:setTimeout5.2.1、async2 - console.logconsole.log 是立即执行的,没有异步部分,所以控制台上输出“async2”。
前言 通过前面的文章,我们认识了页面的响应是由Vue实例里的data函数所返回的数据变化而驱动,也重点学习了页面的响应与数据变化之间是是如何来联系起来的,并且分别在Vue2.x与3.x中,从零到一实现了两个版本下的数据变化驱动页面响应原理 dep.notify(); ... } ... } 2、notify函数中,将所有的订阅组件watcher中的update方法执行一遍。 flushSchedulerQueue(); return } // 将页面更新函数放进异步API里执行,同步代码执行完开始执行更新页面函数 nextTick(flushSchedulerQueue); } 在我们的开发代码里 this.dirty = true; } else if (this.sync) { this.run(); } else { queueWatcher(this); } }; 在开发代码中 像下面的写法中,页面会渲染出val为1,而不会渲染出2,最终渲染的结果是3,但是官网未推荐该用法,请慎用。
简述一下背景故事,今天有一个年轻人来我们公司面试前端,主管临时找我充当了一次面试官,个人工作经验尚佳,面试经验一般,随口问了他 8 个问题,小伙子回答的不错,我让他明天来和人事谈薪资。 在我们的面试环节当中,面试官不一定就是前端工作人员,也可能工作经验不如你我丰富,不会说我们公司只用Vue开发项目就只问你Vue传参和封装,涵盖前端各个知识点才能看出一个人的基本功是否扎实。 面试题如下: 1.html中有一个双标记标签可以让文字任意滑动 2.CSS中怎么首行缩进 3.CSS调整文字间距 4.使用过弹性盒子吗?怎么允许换行 5.什么是闭包,优缺点有哪些? 2,text-indent text-indent:2em; 3,letter-spacing letter-spacing:12px 4,flex-wrap:wrap; 5,简述为: 访问一个函数作用域里 9,防抖:多次触发事件后,n秒内函数只能执行一次; 节流:多次触发事件后,函数每n秒执行一次; (本章完) 前端的学习不是一蹴而就,不积跬步无以至千里,不积小流无以成江海。
前端行业其实很少人去深究前端开发工程师中的“工程师”这三个字,究竟是什么意思。其实在我看来,许多所谓的前端开发工程师只是做前端开发的工作而已,远配不上工程师这三个字。 恩,其实我是说,我配得上前端开发工程师中的“工程师”这三个字。不要急着喷我,我有理由的。 举个例子吧,外包公司大家都知道,在那公司里,多数都是只做软件,不做业务。 这也是我说,我是配得上前端工程师这几个字的原因,因为我也能根据业务发展,来解决前端工作范围内的问题。 好吧,我再谦虚一下,在一定程度上。。。 我不仅拥有编写前端程序代码的开发思路,我还有能解决问题的思路。我这种能力比能记住和使用很多函数方法插件框架。。这些东西要强的多。 可能我回答他的答案并不标准,但肯定没有说错。对于一个合格的开发工程师来讲,不管你前端还是后端,给你一个活儿,你最好想想它是干嘛的?谁需要它?它的产出物给谁?
字节 一面: 1,说一下浏览器缓存 2,cookie 与 session 的区别 3,浏览器如何做到 session 的功能的。 2,写一个 es6 的继承过程 3,写一个大数相乘的解决方案。 ,所以没问前端任何知识,主要聊业务相关的,看看我对业务的理解,以及一些想法。 96道前端面试题 下面给大家分享96道前端面试题,如果有需要可以点击这里免费领取! 1,一些开放性题目 自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。 项目介绍 如何看待前端开发? 平时是如何学习前端开发的? 未来三到五年的规划是怎样的? 2,position的值, relative和absolute分别是相对于谁进行定位的?
前端面试题视频讲解实现类的继承类的继承在几年前是重点内容,有n种继承方式各有优劣,es6普及后越来越不重要,那么多种写法有点『回字有四样写法』的意思,如果还想深入理解的去看红宝书即可,我们目前只实现一种最理想的继承方式 不用Child.prototype = new Parent()的原因是会调用2次父类的构造方法(另一次是call),会存在一份多余的父类实例属性3. 3, 4,5]复制代码(2)reduce 函数迭代从上面普通的递归函数中可以看出,其实就是对数组的每一项进行处理,那么其实也可以用reduce 来实现数组的拼接,从而简化第一种方法的代码,改造后的代码如下所示 其实同样也可以设置成 2,也能实现这样的效果。在编程过程中,如果数组的嵌套层数不确定,最好直接使用 Infinity,可以达到扁平化。 当对象的 readyState 变为 4 的时候,代表服务器返回的数据接收完成,这个时候可以通过判断请求的状态,如果状态是 2xx 或者 304 的话则代表返回正常。
上一篇:移动端Web开发学习笔记【1】 ---- meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 设计点2:弹性图片 类似第一点,图片也使用百分比。 总结: 缺点: 根据响应式设计的理念,一个页面包含不同设备的样式和图片。这样就造成了冗余。性能也不是最优。 优点: 减少重复开发。 ---- 移动Web的特别样式处理 高清图片 在retina屏幕上渲染图片,为了避免图片产生模糊,图片的宽高应该用物理像素单位渲染。 即100*100的图片,应该使用100dp*100dp. 例子: width: (w_value/dpr)px; height: (h_value/dpr)px; 1像素边框 在retina屏幕上渲染图片,1px使用2dp或者3dp渲染。
接入 WeexSDK 后,前端开发者编写 Weex 页面时会发现,Weex 页面和以前写的 Web 页面还是有一定区别的,一不注意就踩坑了。 直接当作 CSS 来写,最可能发生的结果就是样式失效白屏。 除了官方文档提到的属性外,还有不少需要留意的地方。 1. 2. 只支持 px 单位,不支持百分比宽高 根据官方文档的描述,我们知道 Weex 内只能使用像素值单位 px。 属性名尽量用全称 在完成本文章时,使用 Weex 版本 v1.3.11 测试以下样式写法的情况如下: .t1 { /* 有效 */ margin: 20px; } .t2 { /* 无效 border-width: 1px; border-style: solid; border-color: blue; border-top-width: 2px
,来实现数组的每一项的连接:let arr = [1, [2, [3, 4, 5]]];function flatten(arr) { let result = []; for(let i = 0; 3, 4,5]复制代码(2)reduce 函数迭代从上面普通的递归函数中可以看出,其实就是对数组的每一项进行处理,那么其实也可以用reduce 来实现数组的拼接,从而简化第一种方法的代码,改造后的代码如下所示 其实同样也可以设置成 2,也能实现这样的效果。在编程过程中,如果数组的嵌套层数不确定,最好直接使用 Infinity,可以达到扁平化。 方法输入字符串s,以及其重复的次数,输出重复的结果,例如输入abc,2,输出abcabc。 第二次取出数据数组第二个元素,随机产生一个除了索引为1的之外的索引值,并将第二个元素与该索引值对应的元素进行交换按照上面的规律执行,直到遍历完成var arr = [1,2,3,4,5,6,7,8,9,10
读完需要10分钟,速读仅需3分钟 这是前端食堂的第 63 篇原创 美味值:????口味:虎皮凤爪 数组在上一篇的专栏,数组回炉重造+6道前端算法面试高频题解中我们进行了回顾和刷题。 ,上面这个仓库在 2021 年写满 100 道前端面试高频题解,目前进度已经完成了 50%。 了解了链表的基础知识后,马上开启我们愉快的刷题之旅,我整理了 6 道高频的 LeetCode 链表题及题解如下。 l1; } else { l2.next = mergeTwoLists(l1, l2.next); return l2; } } 03 两两交换链表中的节点 知乎:童欧巴 掘金:童欧巴 这是一个终身学习的男人,他在坚持自己热爱的事情,欢迎你加入前端食堂,和这个男人一起开心的变胖~ “如果你觉得读了本文有收获的话可以点个在看让我看到。
读完需要9分钟,速读仅需3分钟 这是前端食堂的第 64 篇原创 美味值:????? 口味:酸菜汆白肉 树的相关名词科普 根节点 叶子节点 父节点 子节点 兄弟节点 高度 深度 层 ? 开启刷题 前端食堂的 LeetCode 题解仓库[1] 年初立了一个 flag,上面这个仓库在 2021 年写满 100 道前端面试高频题解,目前进度已经完成了 50%。 如果你也准备刷或者正在刷 LeetCode,不妨加入前端食堂,一起并肩作战,刷个痛快。 了解了树的基础知识后,马上开启我们愉快的刷题之旅,我整理了 8 道高频的 LeetCode 链表题及题解如下。 01 二叉树的中序遍历 原题链接[2] ? 中序遍历:先打印当前节点的左子树,再打印当前节点,最后打印当前节点的右子树 (CBDAFEG),如上图。 / 公众号:前端食堂 知乎:童欧巴 掘金:童欧巴 这是一个终身学习的男人,他在坚持自己热爱的事情,欢迎你加入前端食堂,和这个男人一起开心的变胖~ “如果你觉得读了本文有收获的话可以点个在看让我看到。
行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高;而当设置了绝对定位或者浮动,会生成块级框(即变成块级元素),所以就可以设置宽高了。 2.img标签是行内元素为什么可以设置宽高? 主要有两个影响, (1)浮动的框脱离文档的普通流,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。可参见:CSS 浮动。 (2)在 CSS 中,任何元素都可以浮动。 7.web前端开发相关代码如何注释? (1)JavaScript代码如何注释? 先计算自己内容的高度,再计算容器的高度,算出自己内容的高度占整个容器高度的百分比。100%减去自己内容高度的百分比除以2得出的百分比就是 margin-top:百分比的数值。 (2)或者将当前浮动的div的定位方式设置为relative,absolute,然后使用top:n%的方式。百分比的计算方式如上。
⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅 内容安全策略的主要作用就是尽量降低网站遭受 XSS 跨站脚本攻击的可能。 另一种方法是在 Level 2 的 CSP 策略中计算内联脚本的 SHA 哈希值: <script>alert('Hello, world.') 如果开发者希望管控内嵌浏览器内容和 workers,那么应分别使用 frame-src 和 worker-src 指令,而不是child-src。 详情见 CSP2 文档:https://www.w3.org/TR/CSP2/#directives 事件处理函数 当违反了内容安全策略,浏览器会触发一个名为 securitypolicyviolation 该事件是在 CSP Level 2 中定义的 document.addEventListener("securitypolicyviolation", (e) => { console.dir(
前端开发是创建WEB页面或APP等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1] 。 前端开发从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。 随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。 [2] 前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。 HTML5,Node.js的广泛应用,各类UI框架,JS类库层出不穷,开发难度也在逐步提升。 [1]