前端进阶技巧
前端进阶需要通过工作中的实战积累经验,从而达到节约时间的作用
技术骚气男
全能型选手~无奈技术更新太快~但依旧会每日定时更新技术文章~可以关注我的公众号:弘成IT~会有更多的精彩奉献
展开
-
Node在大前端中的应用场景分析
作者:前端361https://zhuanlan.zhihu.com/p/121055042关于node的使用已经很久了,使用范围也很广,似乎有前端的地方就有node,那么来思考一个问题,node到底是用来干嘛的呢?本文从五个大的方面对该问题进行了解释。我们知道node的出现,让前端开发既ajax之后,有了全新的面貌,在开发效率,性能等层面都有质的提升。归纳一直是知识提升的重要一环,参考了很多内容,本文对node的应用做了一个入门级的总结。读完本文,希望可以清楚地认识到node在大前端中的地位.转载 2020-08-25 10:43:53 · 523 阅读 · 0 评论 -
60 个前端常用的 JavaScript 工具方法
作者:vipbichttps://segmentfault.com/a/11900000227368371.邮箱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}.转载 2020-08-17 09:49:44 · 422 阅读 · 0 评论 -
Vue 开发之 36 技,优化你的项目代码
作者: 火狼https://segmentfault.com/a/1190000020620972前言Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧;后续 Vue 3.x 出来后持续更新.1.require.context()1.场景:如页面需要导入多个组件,原始写法:importtitleComfrom @/components/home/titleComimportbannerComfrom @/comp...转载 2020-07-27 10:23:36 · 205 阅读 · 0 评论 -
2020字节跳动,我总结了以下扎心面试题(含解答)
来源:小草大地https://juejin.im/post/5f086b1bf265da22d26b8f35字节跳动的考查内容: 通用型业务和过往项目经历 价值观和软技能。 看到这里你千万可不要轻视,不然会死的很惨。我的面试历程: 面试是通过视频远程面试,不得不说疫情影响导致远程面试的确省了很多事,但是视频远远没有面对面更让面试者产生代入感。第一次用视频面试,不太会用导致很紧张,很大一部分原因是自己眼高手低,平时写代码的习惯使用编译器提示,但是没有提示...转载 2020-07-16 16:28:07 · 3718 阅读 · 1 评论 -
TypeScript 成为前端圈新宠,原因竟然是这个
TypeScript 的出现很好地弥补了 JavaScript 在静态类型检查方面的缺陷。它为 JavaScript 提供了良好的类型检查支持,而且能够编译成标准的 JavaScript。目前, Angular 已经使用 TypeScript 重构了代码,另一大前端框架 Vue 的新版本也将使用 TypeScript 进行重构。在可预见的未来,TypeScript 将成为前端开发者必须掌握的开发语言之一。今天就和大家聊聊 TypeScript 对象的类型-接口。01什么是接口在 TypeS.原创 2020-07-15 10:16:38 · 440 阅读 · 0 评论 -
面试时写不出排序算法?看这篇就够了(下)
前言递归是一种解决问题的方法,它解决问题的各个小部分,直到解决最初的大问题。通常涉及函数调用自身。能够像下面这样直接调用自身的方法或函数,是递归函数:能够像下面这样间接调用自身的函数,也是递归函数:假设现在必须要执行recursiveFunction,结果是什么?单单就上述情况而言,它会一直 执行下去。因此,每个递归函数都必须要有边界条件,即一个不再递归调用的条件(停止点), 以防止无限递归。JavaScript调用栈大小的限制如果忘记加上用以停止函数递归调用的边界条件,..原创 2020-07-08 16:36:40 · 436 阅读 · 0 评论 -
面试时写不出排序算法?看着篇就够了(上)
前言假设我们有一个没有任何排列顺序的电话号码表(或号码簿)。当需要添加联络人和电话时, 你只能将其写在下一个空位上。假定你的联系人列表上有很多人,某天,你要找某个联系人及其 电话号码。但是由于联系人列表没有按照任何顺序来组织,你只能逐个检查,直到找到那个你想要的联系人为止。这个方法太吓人了,难道你不这么认为?想象一下你要在黄页上搜寻一个联系人,但是那本黄页没有进行任何组织,那得花多久时间啊?!因此(还有其他原因),我们需要组织信息集,比如那些存储在数据结构里的信息。排序和搜索算法广泛地运用.原创 2020-07-06 16:19:59 · 338 阅读 · 0 评论 -
如何优雅处理前端异常?
作者: Jartto's bloghttp://jartto.wang/2018/11/20/js-exception-handling/前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。一、为什么要处理异常?异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事情。 增强用户体验; 远程定位问题; 未雨绸缪,及早发现问题; 无法复线问题,尤其是移动端,机型,系统都是问题; .转载 2020-07-03 16:47:39 · 171 阅读 · 0 评论 -
那些不常见,但却非常实用的 css 属性
作者:寒水寺一禅https://segmentfault.com/a/11900000228515431、-webkit-line-clamp可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示"..."这是正常的展示display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/-webkit-box-orient: vertical; /*值必须为vertical*/-webkit-line.转载 2020-07-01 17:34:09 · 911 阅读 · 1 评论 -
前端进阶手册:全方位解读 JavaScript 中的 this
前言this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字,被自动定义在 所有函数的作用域中。但是即使是非常有经验的 JavaScript 开发者也很难说清它到底指向 什么。任何足够先进的技术都和魔法无异。 实际上,JavaScript 中 this 的机制并没有那么先进,但是开发者往往会把理解过程复杂化, 毫无疑问,在缺乏清晰认识的情况下,this 对你来说完全就是一种魔法。“this”是沟通过程中极其常见的一个代词。所以,在交流过程中很难区分 我们到底...原创 2020-06-29 17:35:24 · 278 阅读 · 1 评论 -
都 2020 年了 Vue 为啥还这么火?
作为由华人程序员尤雨溪开发的前端构架,它的出身就给国人带来了巨大的荣耀。更为重要的是Vue相对于其他前端框架更加易于上手,而且还可以与第三方库或者既有项目整合,同时还可以为单页应用提供驱动。目前行业的黑话:不会Vue的前端不是合格的前端工程师!可能很多小伙伴之前都了解过 Vue.js 实现响应式的核心是利用了 ES5 的 Object.defineProperty,这也是为什么 Vue.js 不能兼容 IE8 及以下浏览器的原因,我们先来对它有个直观的认识。Object.defineProper原创 2020-05-29 15:46:05 · 2357 阅读 · 0 评论 -
我为什么要立刻放弃React而使用Vue?
来源:JavaScript现在,Vue.js 在 Github 上得到的星星数已经超过了 React。这个框架的流行度在不断增长,由于它并没有像 Facebok(React)或 Google(Angular)那样的大公司支持,这种增长让人非常惊讶。我会在这篇文章里说明我对 Vue 流行的一些看法,以及为什么它能超过竞争者。由于 Vue 的设计哲学和特性与 React 十分相似,我会比较这两者,并说明为什么 React(即使它是个好框架)经常很有欺骗性。1.Web 开发的发展在上个世纪九十年.转载 2020-05-28 15:10:41 · 368 阅读 · 0 评论 -
这 10 个技巧让你成为一个更好的 Vue 开发者
来源:大迁世界(ID:qq449245885)简介我比较喜欢使用 Vue 来开发,所以有时会深入研究其功能和特性。通过这篇文章,向你们介绍十个很酷的窍门和技巧,以帮助大家成为更好的 Vue 开发者。插槽语法更漂亮随着Vue 2.6的推出,已经引入了插槽的简写方式,之前简写可用于事件(例如,@click表示v-on:click事件)或冒号表示方式用于绑定(:src)。例如,如果有一个表格组件,则可以按以下方式使用此功能:$on(‘hook:’)如果要在created或mounted转载 2020-05-27 17:00:17 · 255 阅读 · 0 评论 -
一篇平平无奇又低调实用的Vue.js源码开发技巧
Vue.js 的源码都在 src 目录下,其目录结构如下。01compilercompiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成ast 语法树,ast 语法树优化,代码生成等功能。编译的工作可以在构建时做(借助 webpack、vue-loader 等辅助插件);也可以在运行时做,使用包含构建功能的 Vue.js。显然,编译是一项耗性能的工作,所以更推荐前者——离线编译。02corecore 目录包含了 Vue.js 的核心代码,包括内置组件...原创 2020-05-25 10:58:16 · 261 阅读 · 0 评论 -
移动端开发不得不会的技巧
移动端1.1移动端视口问题概述:移动端开发的时候需要加上meta标签。但是除了那一个常用的meta标签以外还有很多形式的meta标签;1.2百分比布局子元素的宽度、补白、外边距的数据参照的是父元素的宽度的百分比;外边框的数据是没有百分比。box-sizing:border-box:让元素向内坍塌【坍塌的数据和外边框、补白有关系,和margin没有关系】1.3flex布局概述:flex布局主要的作用是可以在移动端中快速写布局格式:容器属性:flex-wrap:wrap【换.原创 2020-05-11 10:54:15 · 259 阅读 · 0 评论 -
JavaScript的难点,你不得不会
JavaScript(ES6之前)数组方法总结01数组的创建1、使用 Array 构造函数2、使用数组字面量表示法02数组的原型方法1、join()将数组的元素组起一个字符串,该方法只接收一个参数:分隔符(默认为逗号)2、push()接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度3、pop()删除...原创 2020-04-26 17:29:23 · 357 阅读 · 0 评论 -
前端发展方向指南—Vue源码初始化
Vue 的源码结构比较绕,同时使用了大量的面向对象的高级技巧。重写方法,扩展方法,多态等应用。从 Vue 实例的加载过程就可以看出来,这一节重点看看 Vue 的源码加载流程是什么。前言vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章。在下借这个机会从大家的文章和讨论中汲取了一些营养,...原创 2020-04-24 11:10:55 · 170 阅读 · 0 评论 -
Vue 3.0 Beta来了!你还学的动么?
Vue 3.0 Beta来了4月17日,尤雨溪微博发布Vue 3.0 beta,4 月21日,尤雨溪在B站直播分享了 Vue 3.0 Beta 版本的那些变化。本文是对其分享的简单总结。GitHub 地址:https://github.com/vuejs/vue-next#status-beta官方库的支持状态:六大亮点根据线上会议的 PPT 显示,Vue 3...转载 2020-04-23 15:39:00 · 385 阅读 · 0 评论 -
前端大牛进阶---React必会教程
一、背景介绍01React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web...原创 2020-04-22 11:15:52 · 264 阅读 · 0 评论 -
Vue源码必学指南:flow(语法检查)以及rollup(模板打包)
一、前言虽然 Vue3 已经公开了代码,但是Vue3.0还处于开发阶段,直接上手使用Typescript是不合适的 , 对于前端的老手是不错的选择, 但是如果没有研究源码经验的开发者还是建议使用完善, 成熟的源码进行入手. 而 Vue 2.x 中使用的 flow 是一个类型的校验工具, 可以简单的认为他是一个静态分析工具, 或编译检查工具.而且非破坏式的引入, 完全可以作为我们一般开发任...原创 2020-04-21 14:45:02 · 978 阅读 · 0 评论 -
Node.js进阶基础技能—Koa基本使用
一、简介koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手。二、安装Koa需要 node v7.6...原创 2020-04-20 15:29:22 · 234 阅读 · 0 评论 -
2020年前端三大顶级技术趋势是什么?
2019年的大前端领域虽然并没有出现什么颠覆性技术,但是Flutter、WebAssembly、Serverless的火爆发展还是超乎我们预期,也让我们进一步看到大前端的融合趋势。在已经复工的2020年,大前端领域又有哪些你不能错过的顶级技术趋势呢?今天就跟小编一起来看看吧~TypeScriptTypeScript 是一门基于 JavaScript 基础之上的编程语言,很多时...原创 2020-04-16 10:43:19 · 723 阅读 · 1 评论 -
关于移动端开发,你必须要知道的技巧
移动端1.1移动端视口问题概述:移动端开发的时候需要加上meta标签。但是除了那一个常用的meta标签以外还有很多形式的meta标签;1.2 百分比布局子元素的宽度、补白、外边距的数据参照的是父元素的宽度的百分比;外边框的数据是没有百分比。box-sizing:border-box:让元素向内坍塌【坍塌的数据和外边框、补白有关系,和margin没有关系】1.3 f...原创 2020-04-14 17:14:40 · 312 阅读 · 0 评论 -
开发环境搭建—微信小程序篇
1.小程序概述2018年1月才给个人开发者开放权限。当初用“跳一跳”进入了大家的视野。小程序到底有没有把我们写的js、html、css翻译为ios、android程序呢?答:半翻译。视图层面的都是webview控件,直接呈递网页;功能层面比如震动、定位、陀螺仪xyz、摄像头都被翻译为原生ios和android了。但是,张小龙留了一手,它让我们不能使用HTML标签,只能使用<v...原创 2020-04-13 14:57:12 · 758 阅读 · 0 评论 -
BAT前端面试都问啥!Vue常见热点问题&解决方案
一.解决Vue刷新页面后store数据丢失的问题原来的状态(页面刷新数据会重置)解决后(页面刷新保留store数据)二.Vue项目中自动将px转换为rem1.配置与安装步骤:a.在 Vue 项目的 src 文件夹下创建一个 config 文件夹:b.在 cnfig 文件夹中创建 rem.js:c.将以下代码复制到 rem.js 中:d.在...原创 2020-04-10 17:35:43 · 182 阅读 · 0 评论 -
你不知道的DOM操作
一、DOM事件模型DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window。二、流流的概念,在现今的 JavaScript 中随处可见。比如说React 中的单向数据流,Node 中的流,还有DOM 事件流,都是流的一种生动体现。至于流的具体概念,用术语说流是对输入输出设备的抽象。以程序的角度说,流是具有方向的数据。...原创 2020-04-09 14:00:04 · 175 阅读 · 0 评论 -
身为前端人,你真的会用webpack么?
1.webpack可以解决什么问题概述:在node平台当中我们可以实现模块式开发;模块之间相互独立;如果让多个模块协同工作,需要模块对外暴露数据【公用】模块式开发:多个模块【每一个模块有属于自己功能】协同工作完成一个项目;经过测试:node平台下模块我想移植到静态页面中实现模块式开发。发现不可以,因为浏览器不识别require、exports注意:①webpack最...原创 2020-04-08 11:55:28 · 250 阅读 · 0 评论 -
高效开发小程序,mpvue你该了解一下
1.用Vue写小程序:机理,webpack和相关的loader将vue的程序变为wxml、wxss、js、json比如,你写的:将变为再比如,你写的将变为http://mpvue.com/首先要安装Vue-cli使用vue init命令实际上装的是github上面的包:然后启动项目npm run dev随着运行成功的回显之后,可以看到...原创 2020-04-07 14:45:30 · 481 阅读 · 0 评论