Webpack 5 配置手册（从0开始）
针对新手入门搭建项目，Webpack5 配置手册（从0开始）
webpack安装顺序
1. `npm init -y`，初始化包管理文件 package.json
2. 新建src源代码目录
3. 新建index.html
4. `yarn add webpack webpack-cl...[2021/3/29]
从0实现一个vuex
大家知道，在开发大型vue项目时，使用vuex时不可避免的，vuex能够帮助我们在错综复杂的数据流中快速拿到自己想要的数据，提高开发效率，尽管vuex无法持久化数据，但也可以通过插件来解决该问题，总之vuex是大型项目中百利无一害的插件。
在上文我们实现了一...[2021/3/29]
如何使用Javascript开发sliding-nav带滑动条效果的导航插件?
本文介绍如何使用纯Javascript来开发一款简单的JS插件，本插件可以实现鼠标悬停在导航上时，下方的滑动条自动从当前菜单滑动到所选菜单当中去。
本项目的源代码寄宿于GitHub，记得点小星星哦：
https: github.com/dosboy0716 liding-nav
一、前言
...[2021/3/29]
使用Webpack构建多页面程序
使用webpack搭建单页面程序十分常见，但在实际开发中我们可能还会有开发多页面程序的需求，因此我研究了一下如何使用webpack搭建多页面程序。
原理
将每个页面所在的文件夹都看作是一个单独的单页面程序目录，配置多个entry以及html-webpack-plugin即可实现多页面打包。
...[2021/3/24]
Typescript开发学习总结（附大量代码）
如果评定前端在最近五年的重大突破，Typescript肯定能名列其中，重大到各大技术论坛、大厂面试都认为Typescript应当是前端的一项必会技能。作为一名消息闭塞到被同事调侃成“新石器时代码农”的我，也终于在2019年底上车了Typescript。使用的一年间整理了许多的笔记和代码片段，花了...[2021/3/8]
前端进阶-手写Vue2.0源码（三）｜技术点评前端进阶-手写Vue2.0源码（三）｜技术点评
前言
今天是个特别的日子 祝各位女神女神节快乐哈 封面我就放一张杀殿的帅照表达我的祝福 哈哈
此篇主要手写 Vue2.0 源码-初始渲染原理
上一篇咱们主要介绍了 Vue 模板编译原理 它是 Vue 生成虚拟 dom 的基础 模板编译最后转化成了 render 函数 之后又如何能生成真实的 ...[2021/3/8]
JS异步的执行原理和回调详解JS异步的执行原理和回调详解
一、JS异步的执行原理
我们知道JavaScript是单线程的，而浏览器是多线程的。单线程执行任务需要一个个排队进行，假如一个任务需要很长时间执行（像ajax需要较长时间），会直接导致无响应，后面的任务一直在等待执行。这时候就需要用到异步。
&#...[2021/3/8]
Vue.js 多选列表（Multi-Select）组件
搬运公众号早前文章
多选列表 （Multi-Select） 是一种将所有选项列出，并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素。这是一种常见的设计元素。有时候为了节省空间，我们会将选项折叠于 Combo Box 中。为了方便用户操作，这个组件还将添加 Select All 和...[2021/3/8]
赋值、浅拷贝和深拷贝
三种方法的形式存在一定的类似，但是也存在各个之间不相同的地方。
浅拷贝和深拷贝是用在对象（Object）或者数组（Array）这样的数据类型拷贝赋值时候的说法，而赋值操作也可以用在基础的数据类型，如Number、String等；
赋值（对于对象类型数据的影响）：赋于该值在栈中的地址，而不是堆中...[2021/3/8]
es6 快速入门 系列 —— 解构
其他章节请看：
es6 快速入门 系列
解构
我们经常使用数组或对象存储数据，然后从中提取出相关数据信息
试图解决的问题
以前开发者为了从对象或数组中提取出特定数据并赋值给变量，编写了很多重复的代码，就像这样：
function demo1(obj){
let key1 = ...[2021/3/8]
字符串的常用方法split
今天我们来聊一下字符串的常用方法：split
返回值：一个新数组。
1、该方法可以直接调用不传任何值，则会直接将字符串转化成数组。
var str = ''I love Javascript'';
console.log(str.split()); ["I","lo...[2021/3/8]
Vue.js 可排序表格 (Sortable & Searchable Table) 组件
可排序表格 (Sortable & Searchable Tables) 在网页和表单设计中非常常用。用户可以通过点击表头对将表格以该列做顺序或降序排列，也可以利用 Search Box 对表格内容进行筛选。这个组件曾被运用于 X-Ray Diffraction Analysis App...[2021/3/8]
ReactElement源码笔记ReactElement源码笔记
ReactElement 源码笔记
ReactElement通过 createElement创建，调用该方法需要 传入三个参数：
type
config
children
type指代这个ReactElement 的类型
config指代这个ReactElement 的属性对象
chi...[2021/3/8]
2021年前端还好找工作吗？
前两天在朋友圈看到朋友发的一则前端工程师的招聘信息，就找她聊了几句。我说：“现在前端工程师这么不好招聘呢吗？像你们这样的公司，每天收到的简历应该特别多吧？”她说：“每天收到简历是很多，只不过项目经验简单，技能描述含糊不清，没什么闪光点，无奈公司着急用人，我也是顶着招聘压力，只能在朋友圈发。”
...[2021/3/8]
Vue 4.0及以上修改默认8080端口号
详细过程见：Vue 4.0及以上修改默认8080端口号
Vue4.0中修改默认端口号较之前几个版本有较大变化，修改方法如下：
找到修改端口的对应文件
目录为：
项目文件夹/node_module @vue/cli-service/lib/options.js
? 2.打开options...[2021/3/8]
原生js日历选择器，学习js面向对象开发日历插件原生js日历选择器，学习js面向对象开发日历插件
在web开发过程中经常会碰到需要选择日期的功能，一般的操作都是在文本框点击，然后弹出日历选择框，直接选择日期就可以在文本框显示选择的日期。开发好之后给用户使用是很方便，但如果每一个日历选择器都要临时开发的话，会严重影响项目进度。所以网上有很多日历插件提供下载使用。
在实际工作中，日历选择器功能...[2021/3/8]
Js BOM中用定时器实现简单运动会遇到的一些小问题及解决
简单运动
简单运动：是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个运动的效果，人眼的视觉残留的时间0.1~0.4 s
可以通过定时器，实现每隔一个极短时间（50~100毫秒左右），执行函数，函数内部让运动的属性值发生变化
定时器常见问题1
将定时器...[2021/3/8]
【面试说】Javascript 中的 CJS, AMD, UMD 和 ESM是什么？
最初，Javascript 没有导入/导出模块的方法， 这是让人头疼的问题。 想象一下，只用一个文件编写应用程序——这简直是噩梦！
然后，很多比我聪明得多的人试图给 Javascript 添加模块化。其中就有 CJS、AMD、UMD 和 ESM。你可能听说过其中的一些方法(还有其他方法，但这...[2021/3/8]
【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 （一）【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 （一）
背景介绍和环境搭建
背景
crudapi增删改查接口系统的后台Java API服务已经全部可用，需要一套后台管理UI，主要用户为开发人员或者对计算机有一定了解的工作人员，通过UI配置元数据和处理业务数据，经过调研最终决定通过Vue实现SPA单页面Web应用，打开浏览器就可以很方便使用。
技术选型...[2021/3/8]
JavaScript对象的两类属性（数据属性与访问器属性）
对JavaScript来说，属性并非只是简单的名称和值，JavaScript用一组特征（attribute）来描述属性 （property）。
第一类属性数据属性具有四个特征。
value：就是属性的值。
writable：决定属性能否被赋值。
enumerable：决定for in...[2021/3/8]
es6 快速入门 系列 —— 类 （class）
其他章节请看：
es6 快速入门 系列
类
类（cla ）是 javascript 新特性的一个重要组成部分，这一特性提供了一种更简洁的语法和更好的功能，可以让你通过一个安全、一致的方式来自定义对象类型。
试图解决的问题
es5 及早期版本中没有类的概念，通常会编写类似下面这样的代码来...[2021/3/8]
BOM 中的location对象和history对象
location 对象
location 对象是window对象下的一个属性，使用时可以省略window对象
location可以获取或者设置浏览地址栏的URL
<body>
<input type="button" value="点击显示" ...[2021/3/8]
前端甘特图dhtmx-gantt
一、背景
公司业务需要，管理层做项目管理就会制定项目计划，为了更好的的做好项目计划就需要用到做计划常用的工具甘特图，而且做好计划管理对项目的风险管控也有很大的好处。
二、甘特图官网以及文档地址
https: docs.dhtmlx....[2021/3/8]
新石器时代码农的Typescript开发总结新石器时代码农的Typescript开发总结
如果评定前端在最近五年的重大突破，Typescript肯定能名列其中，重大到各大技术论坛、大厂面试都认为Typescript应当是前端的一项必会技能。作为一名消息闭塞到被同事调侃成“新石器时代码农”的我，也终于在2019年底上车了Typescript。使用的一年间整理了许多的笔记和代码片段，花了...[2021/3/8]
js实现调用网络摄像头及常见错误处理
最近由于业务的原因，需要在Web端页面接入调试各类的网络摄像头，遇到了很多匪夷所思的问题（说的就是读得出摄像头的品牌，读不出摄像头的分辨率）。于是整理了这篇文章作为备忘录，也希望能帮到有类似的小伙伴们。
基础代码
navigator.mediaDevices.getUserM...[2021/3/8]
JS实现一个秒表计时器
本文实例为大家分享了JS实现秒表计时器的具体代码，供大家参考，具体内容如下
秒表计时器的实现：
效果图如下：
附代码，已调试运行
<!DOCTYPE html>
<html lang="en">
<head>
<...[2021/3/8]
JS实现购物车中商品总价计算
JS计算购物车中商品总价，供大家参考，具体内容如下
题目要求：
购物车中有若干商品信息，其中包括商品的名称、单价、数量，计算购物车中商品的总价。
具体思路：
商品信息通过创建商品对象来实现，若干商品的加和通过创建数组来放置若干商品，再通过遍历数组读取指定属性对价格进行计算。
具体代码...[2021/3/8]
webuploader批量导入文件
第一步：
引入文件
<!--引入CSS--> <link href="~/Content/JS/webuploader.c " rel="stylesheet" /> <!--引入JS--> <script src="~/Content/JS/web...[2021/3/1]
Web性能优化之瘦身秘笈Web性能优化之瘦身秘笈
Web 传输的内容当然是越少越好，最近一段时间的工作一直致力于 Web 性能优化，这是我近期使用过的一些缩减 Web 体积的手段
这些手段主要是为了减少 Web 传输的内容大小，只有干货
CSS
??删除无用的样式
在使用 UI 库的时候，UI 库提供的样式并不是所有的都会使用到
例如一个...[2021/3/1]
JS实现点击图片放大、关闭效果
实现效果：
点击图片在弹出层显示大图，点击大图或空白区域关闭大图，图片高度宽度根据窗口大小判断
html代码
<td width="350">
<img cla ="pimg" height="100" width="100" src="http: or7y3w...[2021/3/1]
详解js创建对象的几种方式和对象方法
这篇文章是看js红宝书第8章，记的关于对象的笔记（第二篇）。
创建对象的几种模式：
工厂模式：
工厂是函数的意思。工厂模式核心是定义一个返回全新对象的函数。
function getObj(name, age) {
let obj = {}
obj.nam...[2021/3/1]
three.js 实现露珠滴落动画效果的示例代码
前言
大家好，这里是 CSS 魔法使——alphardex。
本文我们将用three.js来实现一种很酷的光学效果——露珠滴落。我们知道，在露珠从一个物体表面滴落的时候，会产生一种粘着的效果。2D平面中，这种粘着效果其实用c 滤镜就可以轻松实现。但是到了3D世界，就没那么简单了，这时我们就得...[2021/3/1]
Layui 源码浅读（模块加载原理）
经典开场
Layui
;! function (win) {
var Lay = function () {
this.v = ''2.5.5'';
};
win.layui = new Lay();
}(window);
Jquery
(func...[2021/3/1]
getter和setter以及defineProperty的用法
getter 和 setter 和 defineProperty
getter:将对象属性绑定到查询该属性时将被调用的函数
说人话就是，当你调用一个getter属性时会调用定义好的get函数，这个函数会返回一些运算结果的值（一般是用其他属性作为运算值），这个值就作为你调用的这个属性的值。
...[2021/3/1]
一个巧合，我把文档写进了代码里
最近因为公司业务的调整，项目需要开发大量的业务组件、高复用逻辑提供给客户使用。当各类组件、代码多了以后，加上团队内几个成员书写习惯、开发思想的不同，出现了好多问题。尤其两个问题最严重：
大量的业务组件/业务逻辑需要通过查源代码的方式，或者问写组件的人，才能知道组件是否有自己需要的属性/钩子方法...[2021/3/1]
vue 中 用showdown预览markdown文件，并用highlight.js 实现代码高亮
showdownGithub地址： https: github.com howdownj howdown
在vue项目中，通过showdown 实现markdown文件的预览，highlight.js实现代码块的高亮。
1.安装showdown
npm install showdown -...[2021/3/1]
《深入浅出React和Redux》(4) - 服务器通信、单元测试
与服务器通信
与服务器通信的时长不可控，需要采用异步的形式，可以使用js的fetch函数来调用api。
fetch函数
fetch函数的基本使用形式为：
fetch(apiUrl).then((response) => {
if (response.status !== 200) ...[2021/3/1]
JavaScript连载38-编写评论界面 - 心悦君兮君不知-睿
一、编写评论页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...[2021/3/1]
vue项目配置 webpack-obfuscator 进行代码加密混淆
背景
公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。
安装
webp...[2021/3/1]
WEB前端第六十四课——H5新特性：数据持久化cookie、localStorage、sessionStorageWEB前端第六十四课——H5新特性：数据持久化cookie、localStorage、sessionStorage
1.数据持久化操作对象
本地存储，是相对于数据库存储而言的，是指将数据存储在个人设备上。
存储的操作方式有三种：
⑴ cookie
⑵ localStorage
⑶ se ionStorage
2.cookie
可以通过前台或后...[2021/3/1]
01-mac flutter环境搭建
mac flutter环境搭建
安装国内镜像
export PUB_HOSTED_URL=https: pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https: torage.flutter-io.cn
下载flutter
下载flut...[2021/3/1]
Virtual DOM 简直就是挥霍
彻底澄清“Virtual DOM 飞快”的神话。
注意：原文发表于2018-12-27，随着框架不断演进，部分内容可能已不适用。
近年来，如果你有使用过 JavaScript 框架，那么你可能听说过“Virtual DOM 飞快”，甚至认为比真实的 DOM 还要快。
令人震惊的是，这种...[2021/3/1]
JavaScriptBOM操作
BOM（浏览器对象模型）主要用于管理浏览器窗口，它提供了大量独立的、可以与浏览器窗口进行互动的功能，这些功能与任何网页内容无关。浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
1.1使用window对象
win...[2021/3/1]
js实现element中可清空的输入框（2）
接着上一篇的：js实现element中可清空的输入框（1）继续优化，感兴趣的可以去看看哟，直通车链接：https: www.cnblogs.com/qcq0703/p/14450001.html
实现效果如下图：https: element.eleme.cn/#/zh-CN/component...[2021/3/1]
Svelte 码半功倍
你未注意到的最重要的指标。
注意：原文发表于2019-04-20，随着框架不断演进，部分内容可能已不适用。
所有代码都有 BUG，你写的越多，BUG 越多，这很合情合理。
同时，写的越多，费时越多，留给其他事情的就更少，比如代码优化、功能完善或者去户外潇洒而不是蜷缩在笔记本面前。
...[2021/3/1]
Coposition 详解
LifeCycle Hooks
在新版的生命周期函数，可以按需导入到组件中，且只能在setup()函数中使用.
import { onMounted, onUnmounted } from ''vue'';
export default {
setup () {
...[2021/3/1]
前端面试遇到的问题
最近一场面试，发现了自己很多的问题，为此做个总结。非常感谢此次的面试。嘿嘿!
一、闭包中的问题
下列代码存在几个变量没有被回收？
var i = 0;
var i = 1;
var add = function () {
var i = 3;
return function...[2021/3/1]
Svelte 3：反思响应式编程
注意：原文发表于2019-4-22，随着框架不断演进，部分内容可能已不适用。
原文：Svelte 3: Rethinking reactivity
作者：Rich Harris
翻译：前端子鱼
声明：转载请指明本文出处。
终于，尘埃落定。
历经数月之后，这几天来我们喜不...[2021/3/1]
es6 快速入门 系列 —— 迭代器 (Iterator) 和 生成器 (Generator)
其他章节请看：
es6 快速入门 系列
迭代器 (Iterator) 和 生成器 (Generator)
试图解决的问题
let colors = [''red'', ''blue'', ''green'', ''yellow'']
for(let i = 0, len = colors...[2021/3/1]
Nest.js 授权验证的方法示例
0x0 前言
系统授权指的是登录用户执行操作过程，比如管理员可以对系统进行用户操作、网站帖子管理操作，非管理员可以进行授权阅读帖子等操作，所以实现需要对系统的授权需要身份验证机制，下面来实现最基本的基于角色的访问控制系统。
0x1 RBAC 实现
基于角色的访问控制（RBAC）是围...[2021/2/22]
经验首页