一切福田,不離方寸,從心而覓,感無不通。

Category Archives: JavaScript

最全的 Vue 面试题+详解答案

前言 本文整理了高频出现的 Vue 相关面试题并且附带详解答案 难度分为简单 中等 困难 三种类型 大家可以先不看答案自测一下自己的 Vue 水平哈 如果对原理感兴趣的同学 欢迎查看小编的手写 Vue 源码系列文章 如果对答案有不一样见解的同学欢迎评论区补充讨论 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可(进群免费领取 Vue2 源码思维导图哈) 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢! 简单 1 MVC 和 MVVM 区别 MVC MVC 全名是 Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范 Model(模型):是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据 View(视图):是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的 Controller(控制器):是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据 MVC 的思想:一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来,换句话说就是在 Controller 里面把 Model 的数据赋值给 View。 MVVM MVVM 新增了 VM 类 ViewModel 层:做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。 MVVM 与 MVC 最大的区别就是:它实现了 View 和 Model 的自动同步,也就是当 Model 的属性改变时,我们不用再自己手动操作 Dom 元素,来改变 View 的显示,而是改变属性后该属性对应 View 层显示会自动改变(对应Vue数据驱动的思想) 整体看来,MVVM 比 MVC 精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作 DOM […]

龙生   03 Dec 2021
View Details

最全的手写JS面试题

本文整理了前端面试高频出现的手写源码相关的题目 其中有小编面试亲自遇到的也有其他同学帮忙补充的 整体采用 es6 语法并且以简单易懂版进行实现。

龙生   03 Dec 2021
View Details

最全的TypeScript学习指南

前言 Hello 大家好 我是鲨鱼哥 这次给大家带来的是我曾经非常嫌弃 如今却爱不释手的 TS 技术 哈哈 大家看往期文章可能已经发现鲨鱼哥之前主要是 Vue 技术栈的 然后因为 Vue2 和 TS 的结合总感觉不是很丝滑 所以我果断就在技术选型的时候去掉了 TS(其实我是觉得用起来很烦 和我之前最讨厌的 eslint 一样 各种报错让人不爽)但是 鲨鱼哥今年换了新公司 开启了全新的 react hook+ts 这一套组合拳 然后在重新认真学习并在项目里用上了 ts 之后 确实真香 哈哈 最直观的感受就是可以帮我们规避很多类型错误 更友好的提示 甚至有些方法我们根据定义的类型大概就知道作用是什么了(去掉了写注释的麻烦)况且如今大火的 Vue3 也是 TS 重构的 然后 react 和 ts 的结合就更不必说了 所以还没有开始 ts 的同学就从现在开始跟着鲨鱼哥一起来学习吧 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢! 1 ts 安装和编译 第一步 新建一个空文件夹用来学习 ts 第二步 全局安装 ts 和 ts-node

  第三步 生成 tsconfig.js 配置文件

  我们就先按照自动生成的 tsconfig 配置项去使用 里面的配置咱们可以先不去管他 后续熟练了再去配置 第四步 在项目下新建一个index.ts 直接写入

[…]

龙生   03 Dec 2021
View Details

TypeScript+Vue实例完全教程

功能 轮播 搜索 列表 懒加载 简单动画 loading vue-router.ts vuex.ts vue-class-component使用 vuex-class使用 xxx.d.ts声明文件 基于类的编写方式 mock数据 tsconfig.json webpack配置 vue-typescript-cli 项目地址:https://github.com/SimonZhangITer/vue-typescript-dpapp-demo 完成后的简单例子 基于类的写法加上静态类型检查,简直不能再嗨

  为什么使用TypeScript JavaScript的超集 支持所有原生JavaScript的语法 强类型语言 现在很多主流语言都是强类型的,而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后,将会在代码调试、重构等步骤节省很多时间。 比如说:函数在返回值的时候可能经过复杂的操作,那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后,直接就可以看到函数的返回值结构,将会非常的方便 强大的IDE支持 现在的主流编辑器如VSCode、WebStorm、Atom、Sublime等都对TypeScript有着非常友好的支持,主要体现在智能提示上,非常的方便 可运行于任何浏览器、计算机、操作系统 强大的编译引擎 迭代更新快 不断更新,提供更加方便友好的Api 微软和Google爸爸 TypeScript是微软开发的语言,而Google的Angular使用的就是TypeScript,所以不用担心会停止维护,至少在近几年内TypeScript都会一门主流开发语言 npm下载量非常高 截止2017.12.17, TypeScript在全球范围内的npm日均下载量在30w左右,这个数字将近是vue下载量的10倍,可见TypeScript还是非常受欢迎的 TypeScript配置 本项目已经配置完毕,这里记录一下当时的踩坑过程 1. Webpack 首先需要安装ts-loader,这是TypeScript为Webpack提供的编译器,类似于babel-loader

  接着在Webpack的module.rules里面添加对ts的支持(我这里的webpack版本是2.x):

  2. tsconfig.json 创建tsconfig.json文件,放在根目录下,和package.json同级 配置内容主要也看个人需求,具体可以去typescript的官网查看,但是有一点需要注意: 在Vue中,你需要引入 strict: true (或者至少 noImplicitThis: true,这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查,否则它会始终被看作 any 类型。 这里列出我的配置,功能在注释中给出

  3. 修改main.js 把项目主文件main.js修改成main.ts,里面的写法基本不变,但是有一点需要注意: 引入Vue文件的时候需要加上.vue后缀,否则编辑器识别不到 把webpack的entry文件也修改成main.ts 4. vue-shims.d.ts TypeScript并不支持Vue文件,所以需要告诉TypeScript*.vue文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件,建议放在src目录下再创建一个typings文件夹,把这个声明文件放进去,如:src/typings/vue-shims.d.ts,文件内容: *.d.ts类型文件不需要手动引入,TypeScript会自动加载

  到这里TypeScript在Vue中配置就完成了,可以愉快的撸代码了~ 第三方插件库 现在Vue官方已经明确提出支持TypeScript,并考虑出一个对应的vue-cli,在这之前,Vue开发团队已经开发出了一些插件库来支持TypeScript,这里简单和大家介绍一下。 Vue-Class-Component vue-class-component是官方维护的TypeScript装饰器,写法比较扁平化。Vue对其做到完美兼容,如果你在声明组件时更喜欢基于类的 API,这个库一定不要错过 ps:用了这个装饰器之后写方法不需要额外加逗号,贼嗨~~~

[…]

龙生   03 Dec 2021
View Details

解决 Nginx 部署 Vue 项目路由出现 404 的问题

代码如下:

  from:https://blog.csdn.net/peng2hui1314/article/details/106690852

龙生   05 Nov 2021
View Details

18 个杀手级 JavaScript 单行代码

1、复制到剪贴板 使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板。

  2、检查日期是否有效 使用以下代码段检查给定日期是否有效。

  3、找出一年中的哪一天 查找给定日期的哪一天。

  4、将首字符串大写 Javascript 没有内置的大写函数,因此我们可以使用以下代码。

  5、找出两日期之间的天数 使用以下代码段查找给定 2 个日期之间的天数。

  6、清除所有 Cookie 你可以通过使用 document.cookie 访问 cookie 并清除它来轻松清除存储在网页中的所有 cookie。

  7、生成随机十六进制 你可以使用 Math.random 和 padEnd 属性生成随机十六进制颜色。

  8、从数组中删除重复项 你可以使用 JavaScript 中的 Set 轻松删除重复项。

  9、从 URL 获取查询参数 你可以通过传递 window.location 或原始 URL goole.com?search=easy&page=3 从 url 轻松检索查询参数

  10、从日期记录时间 我们可以从给定日期以小时::分钟::秒的格式记录时间。

  11、检查数字是偶数还是奇数

  12、求数字的平均值 使用 reduce 方法找到多个数字之间的平均值。

  13、反转字符串 你可以使用 split、reverse 和 join 方法轻松反转字符串。

  14、检查数组是否为空 检查数组是否为空的简单单行程序将返回 true […]

龙生   20 Oct 2021
View Details

还在傻傻分不清ES5、Es6数组方法?各大姿势来袭

前言 初衷: 在面试中,面试官经常问到说一下Es5和Es6的数组方法有哪些,有很多同学老是分不清楚,今天笔者就来分享一下。 适合人群: 前端初级开发 Es5系列 indexOf 用途: 用于查找数组中是否存在某个值,如果存在则返回某个值的下标,否则返回-1

  map 用途: map是一个数组函数方法,接收三个参数,value,index,self,返回值是处理完的结果。

  forEach 用途: 用于遍历一个数组,接收三个参数,value,index,self,返回值为undefined

  splice 用途: 用于数组删除或替换内容,接收三个参数: 第一个参数是,删除或添加的位置 第二个参数是,要删除的几位,如果为0则不删除 第三个参数是,向数组添加内容

  slice 用途: 用于截取数组值,接收两个参数,第一个参数是要获取哪个值的下标,第二个参数是截取到哪个下标的前一位。

  filter 用途: 用于过滤数组内的符合条件的值,返回值为满足条件的数组对象

  every **用途:**用于检测数组所有元素是否都符合指定条件,返回值为Boolean , 该方法是数组中必须全部值元素满足条件返回true,否则false

  some 用途: 用于检测数组中的元素是否满足指定条件,返回值为Boolean , 该方法是只要数组中有一项满足条件就返回true,否则false

  reduce 用途: 该方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。该方法回调函数接收四个参数 第一个参数:初始值, 或者计算结束后的返回值 第二个参数:当前元素 第二个参数:当前元素的索引 第四个参数:当前元素所属的数组对象,本身 我们一般只用前两个就行,reduce第一个参数回调函数,第二个参数是初始值

  reverse 用途: 用于数组反转

  join 用途: 用于数据以什么形式拼接

  sort 用途: 用于将数组排序,排序规则看返回值 返回值为正数,后面的数在前面 返回值为负数,前面的数不变,还在前面 返回值为0,都不动

  concat 用途: 用于合并数组原始

  push 用途: 向数组后面添加元素,返回值为数组的length

  pop 用途: 用于删除数组尾部的元素,返回值为删除的元素

  shift 用途: 用于删除数组的头部,返回值为删除的元素

  unshift 用途: 向数组的头部添加元素,返回值为数组的length

  toString 用途: 用于将数组内容转换为字符串 […]

龙生   14 Sep 2021
View Details

推荐 10 个很“哇塞”的Web“资源”给前端工友,收藏等于学会~

毋庸置疑:善用在线资源和工具可以加速开发,提高质量、让生活更 Chill 😎~ 本篇为前端工友们带来 10 个棒棒哒免费的 Web 资源,收藏⭐等于学会 (๑•̀ㅂ•́)و✧ 1. Undraw 如果你的网站需要免费的 SVG 插图,一定不要错过 Undraw 这个网站! SVG 插图资源是海量的,本瓜下拉了十几、二十次都拉不完(当然,搜索功能也是有的);并且,你还可以自定义插图的配色,简直不要太 NICE~ 海量资源,支持搜索🔍 随意更改配色🌈   2. Error 404 不知道你一般会去哪找 404 页面素材~ 现在你又多了一个选项:Error 404 酷酷酷~ 把本瓜一个切图仔的审美都拉上来了👆 3. Squoosh 压缩图片!! 对比 tinypng 有【更好的】压缩效果: tinypng 压缩 Squoosh 压缩   压缩效果:前者是 80%,后者是 95%;最终效果也不错~👍 Why not try ?   4. DevDocs DevDocs 见名思意,是 Web 开发技术文档,是非常不错的学习手册! 别的不说,就这 UI 本瓜就挺喜欢!还支持添加常用技术文档、更换主题等~   5. iHateRegex 如果你讨厌正则,那么一定不要错过这个网站?(ˉ▽ˉ;)… 不仅如此,还有细节图示!可恶,做的真好啊 ╮(╯▽╰)╭   6. Carbon 经常有人问,“这种好看的代码片段如何生成”,答案就在 Carbon! 你可以生成各种主题、各种语言的代码片段,并导出为图片或复制到其它平台,真滴好用👌 舒服了~~   7. Dribbble 寻找网页设计灵感,认准 Dribbble!!!     看到人家的管理后台设计,就想马上回去把自家的管理后台“撕”了🐶 8. Animista Css 动画,复制代码就能用!免安装,它不香嘛?   9. Shape […]

龙生   03 Sep 2021
View Details

fetch与xhr的对比

㈠fetch的简单介绍 fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。 fetch不是ajax的进一步封装,而是原生js。 Fetch函数就是原生js,没有使用XMLHttpRequest对象。   ㈡XMLHttpRequest   API  的缺点 ⑴ 不符合关注分离(Separation of Concerns)的原则 ⑵ 配置和调用方式非常混乱 ⑶ 基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。   ⑷具体示例:

    ㈢Fetch 的出现就是为了解决 XHR 的问题 ⑴使用fetch做请求后:

    ⑵es6写法:

    ⑶处理text/html响应:

    ⑷获取头信息:

    ⑸设置头信息

    ⑹提交表单

    ⑺提交json数据

    ⑻fetch跨域的处理 fetch中可以设置mode为"no-cors"(不跨域)

    这样之后我们会得到一个type为“opaque”的返回。 需要指出的是,这个请求是真正抵达过后台的, 所以我们可以使用这种方法来进行信息上报,在我们之前的image.src方法中多出了一种选择, 另外,我们在network中可以看到这个请求后台设置跨域头之后的实际返回,有助于我们提前调试接口(当然,通过chrome插件我们也可以做的到)。   ㈣Fetch 优点 ⑴语法简洁,更加语义化 ⑵基于标准 Promise 实现,支持 async/await ⑶同构方便,使用 isomorphic-fetch   ㈤Fetch 的兼容问题: ⒈fetch原生支持性不高,引入下面这些 polyfill 后可以完美支持 IE8+ : ⑴由于 IE8 是 ES3,需要引入 ES5 的 polyfill: es5-shim, es5-sham […]

龙生   03 Sep 2021
View Details

npm 报错:npm ERR! Maximum call stack size exceeded 超过最大栈问题解决方案

  错误的原因,npm版本问题; 解决办法: 1》更新到最新版本:npm install npm -g 要记住全局更新 2》回退版本:npm install -g npm@5.4.0 用cnpm 会快一些   from:https://www.cnblogs.com/hou-yuan-zhen/p/11703722.html

龙生   03 Sep 2021
View Details
1 3 4 5 37