大前端【细节】知识
文章平均质量分 75
本专栏主要为“大前端【进阶】之路”的细节描述版本,我会梳理一些【进阶】中的重点细节部分。
5coder
有道无术,术尚可求。有术无道,止于术!
展开
-
正确安装node-saas npm包
在项目根目录新建.npmrc 文件,把下面代码拷进去,然后就不用管了,npm install 完事。另:node-sass的性能比dart-sass要好几倍,在大型项目上还是有可观的性能收益。还有这么多不会正确安装npm包姿势的。原创 2022-11-21 23:15:20 · 1213 阅读 · 0 评论 -
Webpack 4
模块化确实很好的解决了在复杂应用开发过程当中的代码组织问题,但是随着引入模块化,Web应用又会产生一些新的问题:对于整个过程而言模块化肯定是有必要的,不过需要在原有的基础之上去引入更好的方案或者工具去解决上面这样几个问题或者是需求,让开发者在应用的开发阶段,可以继续享受模块化带来的优势,又不必担心模块化对生产环境所产生的一些影响。我们就先对这个所谓的更好的方案或者工具去提出一些设想,我们希望它们能够满足我们的这些设想:针对前两个需求,完全可以借助于之前所了解过的一些构建系统,去配合一些编译工具就可以实现。但原创 2022-11-09 09:50:00 · 307 阅读 · 0 评论 -
一文搞清楚前端 polyfill
polyfill 在英文中有垫片的意思,意为兜底的东西。在计算机科学中,指的是对未能实现的客户端上进行的"兜底"操作。打补丁在前端er是件习以为常的事情,结合笔者日常工作经验,总结出3种打补丁方式。涉及、、、以及core-js。权当抛砖引玉,如有纰漏,不令赐教。三种方法又可以相互借鉴进行组合,来完成业务所需的补丁。原创 2022-11-09 09:48:32 · 1369 阅读 · 1 评论 -
vue基础难点总结
{data(){},focus: { // 自定义指令名inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数}},},}复制代码目标: 使用自定义指令, 传入一个值需求: 定义color指令-传入一个颜色, 给标签设置文字颜色main.js定义处修改一下"color":{inserted(el, binding){ // 插入时触发此函数},update(el, binding){ // 更新绑定的变量时触发此函数=》手动更新}}}复制代码。...原创 2022-08-31 12:45:00 · 129 阅读 · 0 评论 -
JavaScript-堆栈问题
浏览器默认情况下都会有自己的监听事件间隔( 4~6ms),如果检测到多次事件的监听执行,那么就会造成不必要的资源浪费。节流:对于高频操作,我们可以自己来设置频率,让本来会执行很多次的事件触发,按着我们定义的频率减少触发的次数。// 如果我们想要执行最后一次,那就意味着无论我们当前点击了多少次,前面的N-1次都无用。...原创 2022-08-30 11:00:00 · 346 阅读 · 0 评论 -
hexo-theme-matery主题使用
选项中的所有内容均为非必填的。但我仍然建议至少填写title和date的值。配置选项默认值描述titleMarkdown的文件标题文章标题,强烈建议填写此选项date文件创建时的日期时间发布时间,强烈建议填写此选项,且最好保证全局唯一author根中的author文章作者img中的某个值文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如:toptrue推荐文章(文章是否置顶),如果top值为true,则会作为首页推荐文章coverfalsev1.0.2。...原创 2022-08-29 10:30:00 · 801 阅读 · 0 评论 -
函数式编程-review
函数式编程是一种编程范式,和面向对象编程是并列关系(编程范式:思想 + 实现的方式)重点掌握:纯函数在程序设计中,若一个函数符合以下要求,则它可能被认为是柯里化函数组合 lodash/fp compose(fn, n1) —> flowRightArray.of()arr.map()柯里化概念意义和用法柯里化:把多个参数的函数转换可以具有任意个参数的函数,可以给函数组合提供细粒度的函数应用:Vue.js 源码中使用柯里化的位置固定不常变化的参数${}${}函子在开发中的实际使用场景。...原创 2022-08-28 15:19:10 · 265 阅读 · 0 评论 -
JavaScript去除字符串中所有的标点符号
JavaScript去除字符串中所有的标点符号,只保留中文、英文和数字原创 2021-12-16 13:49:48 · 6926 阅读 · 1 评论 -
JavaScript数组去重(12种方法,史上最全)
数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看。在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重。虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到。注:写的匆忙,加上这几天有点忙,还没有非常认真核对过,不过思路是没有问题,可能一些小细节出错而已。数组去重的方法一、利用ES6 Set去重(ES6中最常用)function unique原创 2021-08-27 09:08:07 · 445 阅读 · 1 评论 -
JavaScript防抖和节流
JavaScript防抖和节流基础示例:模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>没有防抖</title> <script type="text/javascript"> window.onload = function () {原创 2021-08-12 10:27:56 · 103 阅读 · 0 评论 -
10 分钟理解 BFC 原理
10 分钟理解 BFC 原理一、常见定位方案在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:普通流 (normal flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float)在浮动布局中,元素首先按照转载 2021-08-04 15:21:46 · 66 阅读 · 0 评论 -
五大主流浏览器及四大内核
只是用户看到仅仅只是浏览器本身,却很少能看到浏览器最核心的部分—浏览器内核。从第一款libwww(Library WorldWideWeb)浏览器发展至今已经经历了无数竞争与淘汰了。现在国内常见的浏览器有:IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。但目前最为主流浏览器有五大款,分别是IE、Firefox、Google Chrome、Safari、Opera。浏览器最重要转载 2021-08-04 08:39:33 · 808 阅读 · 0 评论 -
Vue-js-源码剖析-响应式原理、虚拟-DOM、模板编译和组件化(23)
1.请简述Vue首次渲染过程1.实例创建完成后,调用$mount()方法完整版中会先调用src/platforms/web/entry-runtime-with-compiler.js中重写的$mount()(即进行模板编译),其中:先判断options中是否有render,如果没有传递render,调用compileToFunctions(),生成render()函数然后设置options.render = render然后调用原来的$mount()(在src/platform/web/ru原创 2021-07-18 21:51:31 · 330 阅读 · 2 评论 -
Vue-js-源码剖析-响应式原理-随堂测试(20)
Vue.js 源码剖析-响应式原理-随堂测试Part3-2任务一:Vue.js 源码剖析-响应式原理随堂测试1. 单选题下面关于 Vue 的相关版本说法错误的是:(20分)A完整版的 Vue 同时包含编译器和运行时,编译后的文件名如果是 vue.js,模块化采用的是 UMDB运行时版的 Vue 只包含运行时,编译后的文件名如果是 vue.runtime.js,模块化采用的是 CommonJSC运行时版本的 Vue 体积比编译器版本的 Vue 要小 30% 左右,并且运行时版本的 Vue 的原创 2021-07-18 21:46:11 · 284 阅读 · 1 评论 -
nrm报错 [ERR_INVALID_ARG_TYPE] 解决方法
nrm报错 [ERR_INVALID_ARG_TYPE] 解决方法nrm 1.2.1报错:[TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at validateString (internal/validators.js:122:11) at Object.join (path.js:375:7) at Object.<anonymous&转载 2021-04-05 13:38:38 · 1421 阅读 · 0 评论 -
ES6扩展运算符
es6之扩展运算符 三个点(…)对象的扩展运算符理解对象的扩展运算符其实很简单,只要记住一句话就可以:对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }12上述方法实际上等价于:let bar = { a: 1, b: 2 };let baz = Object.assign({}, bar); // { a: 1, b: 2原创 2021-01-08 09:32:35 · 215 阅读 · 0 评论 -
混子前端24个ES6代码片段
这篇文章基于实际使用场景总结了24个ES6代码片段,可用来解决项目中遇到的一系列问题1、如何隐藏所有指定元素?const hide = (...el) => [...el].forEach(e => (e.style.display = "none"));// Examplehide(document.querySelectorAll("img")); // 隐藏页面上所有<img />元素2、如何确认元素是否具有指定的类?const hasClass = (el,原创 2021-01-08 09:31:30 · 168 阅读 · 0 评论 -
通过js代码控制浏览器视频倍速播放
个人笔记:如标题,打开开发者工具,点击Element,找到并点击播放的视频标签,发现标签最后有一个$0的灰色标志。切换至console,输入$0.playbackRate=10后面的数字就是你要播放的倍速!!!随后,播放的速度就会以你设定的速度播放!...原创 2020-12-20 21:48:33 · 5594 阅读 · 3 评论 -
npm发布包
一、发布一个新包第一步:进入要发布的项目根目录,初始化为npm包:npm init依次按提示填入包名、版本、描述、github地址、关键字、license等这步完成之后会生成一个package.json文件,上面输入的这些信息可以在该文件中修改注意:如果你的包引用了第三方包,则需要在package.json文件种增加dependencies节点,写入依赖的包及版本 "dependencies": { "colors": "^1.3.2", "on-.转载 2020-11-25 09:08:58 · 164 阅读 · 0 评论 -
安装gulp-sass或者node-sass失败解决方法
使用Yarn安装gulp-sass或者node-sass失败解决方法为sass设置淘宝镜像吗,亲测有效yarn config set sass-binary-site http://cdn.npm.taobao.org/dist/node-sass -g设置成功后,启动命令:yarn add gulp-sass --devOK!!!等待片刻,成功安装!!!感谢拉勾大前端训练营6期大佬【苏*】分享,具体名字就不暴露了,多谢大佬!...原创 2020-11-20 15:24:14 · 425 阅读 · 0 评论 -
强类型和弱类型的语言、动态类型和静态类型语言各有什么区别
强类型语言 强类型语言也称为强类型定义语言。是一种总是强制类型定义的语言,要求变量的使用要严格符合定义,所有变量都必须先定义后使用。 java、.NET、C++等都是强制类型定义的。也就是说,一旦一个变量被指定了某个数据类型,如果不经过强制转换,那么它就永远是这个数据类型了。例如你有一个整数,如果不显式地进行转换,你不能将其视为一个字符串。 与其相对应的是弱类型语言:数据类型可以被忽略的语言。它与强类型定义语言相反, 一个变量可以赋不同数据类型的值。 弱类型语言 弱转载 2020-11-09 23:23:49 · 446 阅读 · 0 评论