编程鹿子-CSDN博客

原创 web与DSL联系

最近一直在想前端与 DSL 的一些联系与发展，DSL 的概念在后端工程师中可能会更加熟悉，但在前端领域中也是充斥着 DSL 的身影。DSL 简介DSL（Domain Specific Language）中文翻译为领域特定语言，例如 SQL、JSON、正则表达式等。与之形成对比的是 GPL（General Purpose Language），中文翻译为通用编程语言，我们熟悉的C、C++、JavaScript、Java 语言等就是。特点DSL 的特点，在《领域特定语言》这本书中的描述，按照我自己

2020-08-11 13:40:01 406

原创教你如何快速解决后台服务重启后，前端webSocketz中断的问题

后端服务器宕机或重启时，前端Vue 不断重连webSocket的解决办法：问题重现：后台服务重启时，前端连接的webScoket就断了，需要刷新页面才能重新建立连接，这样用户体验的效果不好，而且有些业务场景，比如硬件监控系统大屏这些是不允许刷新页面的，所以需要前端发现webSocket断了，然后自己不断去发起连接。解决思路：在webSocket的生命周期onclose和onerror时调用重连函数，增加心跳检测。解决方案：1.创建变量data() { return {

2020-08-10 19:31:01 2068 1

原创「web前端」将Canvas绘制过程转为视频

如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas可以直接通过现代浏览器支持的Media Streams API来转成视频。Canvas对象支持captureStream方法，这个方法会返回一个MediaStream对象。然后，我们可以通过这个对象创建一个MediaRecorder来录屏。我们看一个简单的例子。录制视频首先我们写一个非常简单的Canvas动画效果，代码如下：const canvas =..

2020-08-10 14:06:06 1164 1

原创前端必会Linux常用命令

本文并不是一份完整的 Linux 实用命令列表，如果你的预期是这样的，那这篇文章可能就要让你失望了。本文主要针对于 FEer 们。作为前端，一开始我们总是和 HTML/JavaScript/CSS 三大块打交道，但是久而久之，我们就会接触更多的内容，比如服务的部署。而这一块对于我们的要求会更全面，其中对 Linux 指令就有很多要求。如果你想要部署服务，而又没有成熟的工具或平台可以借助，需要完全自己来操作的话，你就需要准备好部署服务需要的所有文件、登录指定的服务器、发布指定文件、启动服务、服务器启动不

2020-08-08 19:14:25 268

原创前端算法入门之【数据结构】

前端算法入门 -- 数据结构基础知识篇1）什么叫算法？算法就是计算或解决问题的步骤。2）算法和程序有什么区别？区别在于，程序是以计算机能够理解的编程语言编写的，可以在计算机上运行，而算法是以人类能够理解的数学方式来描述的，用于编程之前。但，算法和编程没有具体边界。3）如何选择算法？同样的问题，不同的开发者解法不同，不同的编程语言，写法不同，为算法设立评判标准的目的在于选择最优标准的算法。评判算法的优劣有两个标准：一是从运行到计算出结果需要耗费空间的大小，另一个是从运行到计算出结果

2020-08-08 14:04:19 200

原创总结前端H5 Video常见场景

1.原生H5 video标签<video id="mse" autoplay=true playsinline controls="controls"> <source src="实机视频地址" type="video/mp4"> 你的浏览器不支持Video标签</video>复制代码2.第三方插件video.js_this.player = videojs( _this.videoNode, { autop

2020-08-07 19:55:39 476

原创如何使用React-Router实现前端路由鉴权

Reacr-Router 是React生态里面很重要的一环，现在React的单页应用的路由由基本都是前端自已管理的，而不像以前是后端路由，React管理路由的库常用的就是 React-Router。本文想写一下 React-Router的使用，但是光介绍API又太平淡了。而且官方文档已经写的很好了，我这里就用一个常见的开发场景来看看React-Router是怎么用的吧。我们一般的系统都会有用户访问权限的限制，某些页面可能需要用户具有一定的权限才能访问。本文就是用React-Router来实现一个前端鉴权模型

2020-08-07 13:47:10 1491

原创前端十九种兼容性

第一种兼容在设置宽度的时候，子级的宽度大于父级的宽度时。标准浏览器下，子级的宽度不会撑开父级IE浏览器下会撑开对应的宽度第二种兼容IE6中不能用margin的方法让元素显示在一行，必须使用float的方法，让内容显示在一行。第三种兼容嵌套问题：P标签不能包div就是说P标签不能包含块标签第四种兼容元素的最小高度IE6中会自动给高度添加为19。因为IE6认为最小高度为19px，如果不足，自动补全如果想要设置高度小于19px的，做到浏览器兼容，必须添加ov

2020-08-06 21:33:19 496

原创国际化前端项目之「用vue-cli3从0开始搭建一个多入口」

大家好，我是鹿子。最近公司准备开发一个功能，由于功能复杂，且需要多端协同开发，所以，单拎出来新建了一个git项目。项目中用到的技术也是大家耳熟能详的，比如，vue-cli3、vie-router、vue-i18n、element-ui、dayjs、eslint、stylelint等等。下面带大家一起看一下整个过程。项目简介该项目是一个大项目单拎出来的一个大的模块功能，因为涉及多端协作同步开发。项目目录遇到的问题多入口因为项目需要多端协同开发，所以设置了多入口，这样大家就可以在一个项目上共

2020-08-06 15:42:30 239

原创你肯定不知道的冷知识点「web前端」

生成随机字符串利用Math.random和toString生成随机字符串，这里的技巧是利用了toString方法可以接收一个基数作为参数的原理，这个基数从2到36封顶。如果不指定，默认基数是10进制。略屌！整数的操作JavaScript中是没有整型概念的，但利用好位操作符可以轻松处理，同时获得效率上的提升。|0和~~是很好的一个例子，使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。性能比较见此。.

2020-08-05 22:21:52 194

原创怎么就算是一个好的前端工程师

设问如何做好前端工程师？如果做合格的前端工程师？如何做优秀的前端工程师？前端能做什么早年间：前端被称作网页工程师、web工程师，集美工、样式布局于一身。那时候是web1.0时代到后来：随着javascript的流行，web进入了2.0的时代，慢慢的各种框架、解决方案层出不穷，backbone、seajs、react、vue、nodejs等等，对于前端来说能做的东西越来越多，称呼也随之改变，称为前端工程师，javascript工程师、H5工程师、小程序工程师等等对于现在的前端来说，

2020-08-05 19:48:29 541

原创 Web前端之「知识结构框架图」

所谓知识架构，可以理解为知识的“目录”或者索引，它能够帮助我们把零散的知识组织起来，更轻松地记忆一些原本难以记住的点。也能够帮助我们发现一些知识上的盲区。当然，知识的架构是有优劣之分的，最重要的就是逻辑性和完备性。前端的基础知识在总体上可以分成基础部分和实践部分。基础部分包含了 JavaScript 语言（模块一）、CSS 和 HTML（模块二）以及浏览器的实现原理和 API（模块三），这三个模块涵盖了一个前端工程师所需要掌握的全部知识。实践部分包含了性能、工具链、持续集成、搭建系统、架构与

2020-08-05 14:58:27 1556

原创前端算法之动态规划

动态规划整体思路是用递归问题求解，然后对递归过程中存在的大量重叠子问题进行优化，自顶向下的求解的思路为记忆化搜索，自底向上的解决问题的思想就是动态规划，自顶向下的求解通常更好理解，我们理解后在改成自底向上的动态规划求解；剑指 Offer 10- I. 斐波那契数列写一个函数，输入 n ，求斐波那契（Fibonacci）数列的第 n 项。斐波那契数列的定义如下：F(0) = 0, F(1) = 1F(N) = F(N - 1) + F(N - 2), 其中 N > 1.斐波那契数列

2020-08-04 19:35:23 467

原创总结函数式编程与前端

工作五年，市面上听说过的互联网公司几乎都面试了一遍，函数式编程似乎是一个面试官很感兴趣的话题，几乎有一半的面试官都会问到对函数式编程的理解，尤其是许多粉丝反映每每遇到这个问题，他们总是只能简单的说几句自己的看法，然后快速转移话题企图掩盖对函数式编程的无知。所以本篇文章就好好总结一下对函数式编程的理解。什么是函数式编程我们常见的编程范式有两种：命令式和声明式，比如我们熟悉的面向对象思想就属于命令式，而函数式编程属于声明式。而且顺带说一句，函数式编程里面提到的“函数”不是我们理解的编程中的“func

2020-08-04 15:00:10 235

原创前端登录【超全】

登录是每个网站中都经常用到的一个功能，在页面上我们输入账号密码，敲一下回车键，就登录了，但这背后的登录原理你是否清楚呢？今天我们就来介绍几种常用的登录方式。Cookie + Session 登录 Token 登录 SSO 单点登录 OAuth 第三方登录Cookie + Session 登录HTTP 是一种无状态的协议，客户端每次发送请求时，首先要和服务器端建立一个连接，在请求完成后又会断开这个连接。这种方式可以节省传输时占用的连接资源，但同时也存在一个问题：每次请求都是独立的，服务器端无法

2020-08-03 20:02:58 660

原创 low-code【前端】

一.low-code 是什么？A low-code development platform (LCDP) is software that provides a development environment used to create application software through graphical user interfaces and configuration instead of traditional hand-coded computer programming. A l

2020-08-03 13:17:13 2610

原创总结JavaScript执行机制

hello大家好，本次分享一下关于JavaScript执行机制的知识点。那么废话不多说，直接上结论，首先我们知道JavaScript是一门单线程语言，决定JavaScript执行顺序的并不是代码顺序，而是event loop顺序。我们先来讲解一下什么是同步任务，什么是异步任务。同步任务就是按照代码写的顺序一步一步执行下去，而异步代码呢，会先将要执行的代码放入异步队列里，然后执行同步代码，等同步代码全部执行完毕之后，再去异步队列里去查看是否有待执行的代码，如果有的话，就会执行。用setTimeout演

2020-08-01 19:38:36 101

原创变量以及函数提升【JS】

　在了解这个知识点之前，我们先来看看下面的代码，控制台都会输出什么 1 2 3 4 5 6 7 8 varfoo = 1; functionbar() { if(!foo) { varfoo = 10; } alert(foo); } bar(); 　　小白理解：foo是一个全局变量，值为1，当执行bar函...

2020-08-01 15:26:15 157

原创快速修改 node_modules 里的文件

有时候使用 npm 上的包，发现有 bug ，我们知道如何修改，但是别人可能一时半会没法更新，或者是我们特殊需求，别人不愿意修改，这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢？首先，直接修改 node_modules 里面的文件是不太行的，重新安装依赖就没有了。一般常用办法有两个：srcfork这两个办法的缺陷就是：更新麻烦，我们每次都需要手动去更新代码，无法与插件同步更新。如果我们要修改的代码仅仅是别人的一个小模块，其他大部分代码都不动，这时候有一个很投机的操作：利用 w

2020-07-31 18:51:26 964

原创最全18个webpack插件

何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。Plugin 的特点是一个独立的模块模块对外暴露一个 js 函数 (prototype) compiler apply apply compiler web.

2020-07-31 13:14:41 556

原创源码解析【KOA】

基于 Node.js 平台的下一代 web 开发框架koa 的源码位于 lib 目录，结构非常简单和清晰，只有四个文件：application.jscontext.jsrequest.jsresponse.jsApplication类Application 类定义继承自 Emitter.prototype ，这样在实例化Koa后，可以很方便的在实例对象中调用 Emitter.prototype 的原型方法。/** * Expose `Application` cl...

2020-07-30 18:54:12 358

原创响应式网页设计【腾讯出品超实用】

响应式网页设计 (Responsive web design) 虽然早已被提出，不过因为国内开发习惯和APP设计优先，日常工作使用这种布局方式的机会不多。国外网站使用这种布局方式较多，经过调研，结合尝试后，本文梳理了响应式设计的方法流程，记录问题与思考，帮助以后类似的项目开展更快。什么是响应式布局响应式布局常常和自适应布局搞混。其实通过下面的动图我们很容易能理解两者的区别。△ 响应式和自适应的区别，来源网上资料响应式布局：容器大小随窗口大小而变化。自适应布局：容器大小不随窗.

2020-07-30 16:41:09 320

原创【WEB】抽屉式网页特效

我们在浏览网页时或者翻转页面时，经常会看到很多精美的效果的效果。其中，抽屉式网页效果比较常见，它主要由图片和文字通过添加浪js 来实现。抽屉式网页通过移动鼠标来实现页面的切换，通过改变文字和图片而展现不同的界面，它非常实用而且实现简单。解决方案制作抽屉式页面时，主要会用倒忙HTML ， CSS 和 JavaScript 。（1）通过 div 来规定主要内容部分占据的大小，并通过 CSS 来修正。（2）使用 overflow 标签，使得多余的图片部分隐藏。（3）通过 js 来实现图片的移动

2020-07-30 13:54:25 1922

原创 webpack完整指南【初学者必看】

我们应该学习 webpack 吗 ?如今，CLI工具(如create-react-app或Vue -cli)已经为我们抽象了大部分配置，并提供了合理的默认设置。即使那样，了解幕后工作原理还是有好处的，因为我们迟早需要对默认值进行一些调整。在本文中中，我们会知道 webpack可以做什么，以及如何配置它以满足我们的日常需求。什么是 webpack?作为前端开发人员，我们应该熟悉 module 概念。你可能听说过 AMD模块，UMD，Common JS还有ES模块。webpack是一个模

2020-07-29 22:30:26 353

原创四大问题之腾讯面试

一朋友刚面了腾讯音乐（TME）前端开发岗位（两年经验），本瓜撰文记之。以期同各面试人分享交流~自评面试难度：:full_moon::full_moon::full_moon::full_moon::new_moon:话不多说，直接看题！我相信一定有你想要的！注：好的面试流程通常以聊天的方式进行，题目是连续的。此处抽出核心四问，其间附带的小问题一笔带过，不做赘述。页面通信❝问题一：从页面 A 打开一个新页面 B，B 页面关闭（包括意外崩溃），如何通知 A 页面？炸看这一题，以

2020-07-29 20:28:21 521

原创 Webpack原理

Webpack 迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的 Webpack 。开发者视角假设某一天，我们接到了需求，需要开发一个 react 单页面应用,页面中包含一行文字和一个按钮，需要支持每次点击按钮的时候让文字发生变化。于是我们新建了一个项目，并且在 [根目录]/src 下新建 JS 文件。为了模拟 Webpack 追踪模块依赖进行

2020-07-29 13:36:13 695

原创 web components的重要性

先看一看未来的 WebComponent 标准，再简单了解怎么写 WebComponents，最后说说它的重要性。简介这篇文章简单介绍 WebComponent 标准，介绍哪些浏览器已经开始支持 WebComponents，讨论 WebComponents 能解决什么问题，以及它对 web 开发的重要性。你可以了解到如何利用 Vanilla javascript 编写一个简单的 WebComponent，我还会针对它的潜在优势分享我自己的一些拙见。什么是 web components ?近年

2020-07-28 22:08:32 379

原创一些HTML常用标签【码住！】

1. web标准1.1 web标准的构成主要包括结构、表现和行为三个方面。标准说明结构用于对网页元素进行整理和分类（HTML）表现用于设置网页元素的外观样式（CSS）行为网页模型的定义及交互的编写（JavaScript）如果将web标准比喻为一只鸟，则结构=身体表现=羽毛行为=动作（飞行、站立等）1.2 标签关系双标签关系分为：包含关系（父子）并列关系（兄弟）(1)包含关系<!--head标签包含title标签--&g...

2020-07-28 19:05:20 108

原创 Web前端开发的思考与经验----五年工作经验

最近几年对于web前端的传闻很多，比如人才稀缺，简单易学，待遇丰厚，整体势头发展良好等等。遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容，也听说过一个搞IOS开发准备自学前端半个月然后要去找前端工作，也曾看到过有人对前端市场人才的稀缺这样吹捧过：现在，几乎整个互联网行业都缺前端工程师，不仅在刚起步的创业公司，对上市公司乃至巨头这个问题也一样存在。没错，优秀的前端工程师简直比大熊猫还稀少。… …不仅在国内的互联网行业，在国外，前端工程师一样是需求旺盛、供不应求的香饽饽。对..

2020-07-27 22:22:11 1960 2

原创 HTML5 SEO优化【前端必会的！】

<title>淘宝网 - 淘！我喜欢</title>使用description以及keyword标签（不超过300个字符最优）<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" /><meta name="ap.

2020-07-27 18:57:00 466

原创全栈面试题总结-十四道大厂

防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖文本编辑器实时保存，当无任何更改操作一秒后进行保存代码如下，可以看出来防抖重在清零clearTimeout(timer)function debou..

2020-07-27 15:01:09 2321 2

原创如何有效进行Nodejs搭建环境

Node.js：是一个用Chrome's V8 JavaScript engine构建的JavaScript运行时框架。Node.js使用事件驱动、非阻塞式I/O模块使得它非常的轻量级和非常的高效。Node.js生态系统，npm是世界上最大的开源库生态系统。NPM是什么？NPM的全称是Node Package Manager，是Nodejs的包管理器。Node.js本身身提供了基本的模块，但是我们利用这些基本模块开发实际应用需要编写大量的代码，做较多的工作。NPM...

2020-07-25 18:49:57 196 1

原创进阶成高级前端的四大方法

经常有读者问我这问题，表示前端要学的实在太多了，然后给我列举了一大堆技术栈：什么三大框架、各种全家桶、小程序、umi、flutter、SSR、Node 等等，反正是把前端技术栈列举了一遍~前端东西确实蛮多，但也没必要什么都想学。一旦你有这个想法，多半会像个无头苍蝇乱飞。这个看看，那个学点，到头来啥东西都没学好。这样的例子其实我在读者里看到好些了，学习确实看起来是在学习，啥资料都收藏了，今天看会这个技术的视频，明天拿上另一个技术的书读起来，但是这种学习方式相当低效，另外啥资料都收集还会造成一个时间完全

2020-07-25 13:21:25 1941

原创 VUE开启利用nginx和webpack来使用gzip压缩功能

在你的项目使用了Vue的路由懒加载、Vue使用CDN引用项目组件，减少项目体积后，还是觉得项目加载速度慢，效果不尽如人意的时候，还有一个“瘦身项目”可以完成，那就是利用nginx和webpack来使用gzip压缩功能。通常来讲更小的体积就意味着更快的加载速度，也就对应着更好用户体验。整个过程大体分为两步，废话不多讲，开始一、 webpack插件 compression-webpack-plugin　　Vue压缩功能的实现主要依赖于webpack的一个插件compression-webpack..

2020-07-24 20:48:52 984

原创 10个vue快捷开发技巧帮你变大神

今天分享10个vue快捷开发技巧助你成为大神级前端工程师！1.路由参数解耦export default { methods: { getParamsId() { return this.$route.params.id } }}在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。正确的做法是通过 props 解耦const router = n

2020-07-24 16:14:52 756

原创 JavaScript中for循环的利用

我们都知道JavaScript 语言中的 for 循环用于多次执行代码块，它是 JavaScript 中最常用的一个循环工具，还可用于数组的遍历循环等。那我们为什么要使用 for 循环呢？打个比方，我们想要控制台输出1到1000之间的所有数字，如果单写输出语句，要写1000句代码，但是如果使用 for 循环，几句代码就能实现。总之，使用 for 循环能够让我们写代码更方便快捷（当然啦，否则要它干嘛）。for 循环语法语法如下所示：for(变量初始化; 条件表达式; 变量更新) {

2020-07-24 13:36:47 243

原创如何在网络变更时快速恢复websocket的可用

在一个即时通讯应用中，websocket是极其关键的一环，它为web应用的客户端和服务端提供了一种全双工的通信机制，但由于它本身以及其底层依赖的TCP连接的不稳定性，开发者不得不为其设计一套完整的保活、验活、重连方案，才能在实际应用中保证应用的即时性和高可用性。就重连而言，其速度严重影响了上层应用的“即时性”和用户体验，试想打开网络一分钟后，微信还不能收发消息的话，是不是要抓狂？所以，如何在网络变更时快速恢复websocket的可用，就变得尤为重要。一 Websocket诞生于2008年，在2011年.

2020-07-22 22:01:55 831

空空如也

空空如也