- 博客(124)
- 资源 (1)
- 收藏
- 关注
原创 webpack 打包原理及流程解析,超详细!
友情提示:a.前面会稍微有些枯燥,文字居多(建议还是过一遍),后面就劲爆了!!!b.本文干货满满,非常详细,整理资料到发布文章耗时5个小时+,请大家耐心看本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。
2023-07-21 15:35:06 2675 12
原创 猿创征文|Mock.js概述及模块化开发实践(一文足矣)
一文搞定Mock.js。缩短项目的研发周期,前端开发者可以不用等待后台接口再进行联调。
2022-09-01 12:20:34 5001 14
原创 深入Vue底层,手写一个vuex
深入底层,手把手教你写一个Vuex1. Vuex是什么?什么场景下使用?2. Vuex的基本使用3. 手写一个vuex1. Vuex是什么?什么场景下使用?Vuex是vue的一个插件,叫做状态管理模式,全局共享某一些状态通俗来讲,当各组件需要共享某一组状态的时候,会用到Vuex,兄弟组件及跨级组件传值也可以派上用场(如果数据量不大,或者组件状态不需要共享也可以用中央信息插件event-bus)2. Vuex的基本使用vue-cli 4.0 以上,在搭建脚手架的时候选择此项就可以项目搭建完
2021-11-15 10:41:22 11510 10
原创 超级实用的vue小技巧,用了之后直呼好棒~
实用的vue小技巧,来源于真实企业实战1. 原型注入2. 对象冻结3.img 加载失败4. 递归组件1. 原型注入全局属性和方法可以这么定义方便调用和获取一般不定义很多(会污染原型,每次实例Vue都会带上)// main.js入口文件内import Vue from "vue";import router from "./router";import store from "./store";import dayjs from "dayjs";import App from "./
2021-07-15 08:42:07 10450 50
原创 如何让你的代码变得更优雅?这些代码规范和技巧必须知道(进阶必备,建议收藏)
如何做一名优秀的程序猿?从改善每一行代码开始1. 看你的代码就知道你几斤几两2. 编程标准3. 命名规范4. 松耦合,高复用1. 看你的代码就知道你几斤几两1.1 面试常会犯的错????♂️:面试者????⚖️:面试官面试前????♂️:先把简历写好,机构老师特别交代:一出去就要说三年工作经验????????♂️:面试题要背,工资不能要低了~????♂️:包装一下????♂️:…面试中????⚖️:问题回答的不错,可以看看你最近做的项目么?????♂️:
2021-07-12 08:51:40 27355 90
原创 什么样的程序员才算得上优秀,把导师曾对我说的话送给大家(比代码更重要的事)
优秀程序员的定义是什么?那些比写代码更重要的事情1. 说在前面2. 为什么选择了这行呢?:whale: (导师),:tropical_fish:(我)3. 如何才能成为一名优秀的程序猿呢?4. 大佬的代码层分享(通用)1. 说在前面为什么忽然想起这个话题呢?起因是最近不少人问到我,大都是对这个职业心存疑惑或是不太清楚,如何成长?如何突破?未来的路在哪里?很多人以为,程序猿的任务就是把需求实现,bug修好(这也是我几年前的思想)把之前导师(某大厂P7级别的大佬,现在已是P8)和我说的分享给大家,觉得
2021-06-28 08:21:09 22066 544
原创 Vue+element ui遇到的一些疑难问题总结(一)
Vue+element ui遇到的一些疑难问题总结:el-tree,el-cascader等等
2023-02-22 12:25:59 330
原创 后端一次性传了10w条数据,前端该如何处理?—— 面试高频
前端处理后端传的10w条数据1. 这道题在考什么?2.先用 node.js 整个10w条数据3. 基础代码环境4. 常规处理方案5. 优化的第一种方式 —— 前端分页6. 再次优化7. 极致优化(最佳方案)8. 知识点补充1. 这道题在考什么?对于性能优化的处理方案对于前端渲染机制的了解极端情况下的处理及知识领域的广度2.先用 node.js 整个10w条数据const http = require('http')const PORT = 8000
2022-03-23 08:51:38 19364 10
原创 Vue底层原理之变化侦测 —— 让对象每一个属性都变得“可侦测”(一)
Vue底层原理之变化侦测1. 说在前面2. 使Object数据“可侦测”3. 让对象所有属性都变成“可观测”4.测试及使用1. 说在前面1.1 Vue的两大特性组件系统:把页面抽象成多个相对独立的模块,实现代码重用,提高开发效率和代码质量,便于代码维护。数据驱动:宗旨是以数据驱动,减少dom操作。数据可以理解为状态,视图即是用户所见页面,它是动态变化的,根据用户的操作或者后台数据变化来,状态变化视图(也就是页面)也会随之改变,所以我们得到了这样一个公式:state是状态输入,页面UI是
2022-01-10 18:30:48 15942
原创 Vue3.0+Vant ui配置按需引入(非vue-cli3.0)
Vue3.0+Vant ui配置按需引入 —— 架构搭建1. 说在前面2. Vant ui安装3. 配置按需引入4. 配置main.js(官网上说的估计小白看不懂)5. 页面中使用按需引入的组件1. 说在前面1.1 这是一件令我比较无语的事情最近使用 Vue3.0 + vant开发项目,官网上的配置,按需引入其实不太好理解于是想着“面向百度编程”,百度下看看,结果网上有很多人连Vue3.0和vue-cli3.0都分不清楚,找了半天都是vue-cli3.0的(有同感的可以评论区扣个1)我人都傻
2021-11-29 10:50:41 2265
原创 vsCode设置背景图,全网最简单粗暴教程
vsCode设置背景图1. 下载插件 (background-cover)2. 选择图片1. 下载插件 (background-cover)这个插件是最简单粗暴的,其它的都还要配置,麻烦的很2. 选择图片vscode右下角,找到这个,点击就会弹出选择图片(如果没有这个按钮,可能需要重启一下vscode)接下来看到这个图,花样还不少,自己玩就行- 我是直接选择第一项,从本地选取图片,把我老婆的照片放到了这里也可以选择目录,更改透明度啥的(不建议超过0.5)1. 希望本文能对大家
2021-09-20 16:11:32 12799 14
原创 前端涨薪必读,node.js入门保姆级教程
Node.js保姆级教程1. Node基本概念2. 第一个node.js程序3. node创建get请求4. node创建post请求1. Node基本概念1.1 node.js是什么?平常的js代码只能在浏览器运行,浏览器一关,就完犊子Node.js 就是运行在服务端的 JavaScript。1.2 客户端与服务端交互流程node是运行在服务端的,所以必须了解这玩意客户端向服务端发送请求服务端去数据库查询数据服务端返回给前端使用I/O: input(输入), 往磁
2021-09-15 10:26:23 21242 2
原创 重学JavaScript,推翻你的固有认知 —— 数据类型和数据结构
重学JavaScript,数据类型和数据结构1. 什么叫动态类型2. 数据类型3. 原始值1. 什么叫动态类型JavaScript 是一种弱类型或者说动态语言。我们不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据let a; // 初始不给任何类型a = 11; // a此时是number类型a = "二大爷"; // a 变成了字符串类型a = true; // a 变成了布尔类型实际应用过程中并不推荐这
2021-08-25 14:41:11 2171 22
原创 敲黑板,划重点!!!Vue3.0响应式实现原理 —— proxy()
Vue3.0响应式实现原理1. 先来回顾一下Vue2.0的响应式原理2. Vue3.0原理实现 —— Proxy()3. 重点说明 —— Reflect1. 先来回顾一下Vue2.0的响应式原理通过 Object.defineProperty() 实现数据劫持存在的问题针对对象:新增属性,删除属性,界面不更新针对数组:通过下标修改数组,界面不会自动更新<!DOCTYPE html><html> <head> <titl
2021-08-11 09:22:29 15910 2
原创 重磅知识,Vue3.0 生命周期(变化不止一点)
Vue3.0生命周期1. 与 2.x 版本生命周期相对应的组合式 API2. 新增的钩子函数1. 与 2.x 版本生命周期相对应的组合式 APIbeforeCreate -> 使用 setup()created -> 使用 setup()beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestr
2021-08-11 09:17:47 1073 14
原创 初探Vue3,几个常用的重要特性抢先看(建议收藏)
Vue3.0重磅来袭1. Vue3.0项目创建(脚手架方式)2. 拉开序幕 —— setup()3. 基本数据的响应式实现 —— ref()4. 引用数据的响应式实现 —— reactive()5. FAQ(需要注意的地方)1. Vue3.0项目创建(脚手架方式)## 安装或者升级npm install -g @vue/cli## 保证 vue cli 版本在 4.5.0 以上vue --version## 创建项目vue create my-project接下来按步骤走即可Plea
2021-08-09 11:34:43 17447 36
原创 经典面试题分析——原生JS如何实现事件委托
原生JS实现事件委托1. 什么是事件委托2. 实现事件委托(第一步,基本结构)3. 编写一个添加节点的方法先4. 实现事件委托1. 什么是事件委托官方文档事件委托就是利用事件冒泡,指定一个事件处理程序,就可以管理某一类型的所有事件。———— JS高程举个例子我们将快递寄到公司,但是可能快递到的时候,我们人却没在,便可以委托前台小姐姐代收。第一:现在委托前台的同事是可以代为签收的,即程序中的现有的dom节点是有事件的第二,新员工也是可以被前台MM代为签收的,可能人还没到,快递先到了,即程序
2021-08-07 10:19:32 955 5
原创 在JS中,new关键字做了什么
new关键字1. 先看代码2. 内部具体实现如下1. 先看代码 function Person(){ this.name = '朱小明'; this.fn = function(){ console.log('名字是:' + this.name) } } let person1 = new Person(); // person1 拥有Person的属性和方法 person1.fn()在这
2021-08-06 19:48:32 662 2
原创 javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离
1. 坐标(鼠标/触摸)event.screenX 鼠标/触摸,相对于显示屏的X坐标event.screenY 鼠标/触摸,相对于显示屏的Y坐标event.clientX 鼠标/触摸,相对于浏览器视口的X坐标event.clientY 鼠标/触摸,相对于浏览器视口的Y坐标event.pageX.
2021-07-23 09:40:17 805 2
原创 react-native 加载动画 loading效果
react-native loading动画(加载动画)1. 组件代码(demo.js)2. 调用1. 组件代码(demo.js)import Taro, { PureComponent } from '@tarojs/taro'import { StyleSheet, View, Text, ActivityIndicator,} from 'react-native';export default class ActivityIndicatorDemo ext
2021-07-21 16:50:08 1745 2
原创 react-native注意事项,开发前必读文档
react-native各种不同点总结1. 平台区别2. 样式处理及不同点3. 特殊注意点1. 平台区别组件文件区别index.js -> index.rn.jsindex.scss -> index.rn.scss路由页面区别 <请避免使用>index.js -> index.android.js index.ios.jsindex.scss -> index.android.scss index.ios.scsss
2021-07-19 12:05:42 609 10
原创 javascript 代码技巧 (三) —— 史上最全类型判断
1. typeof(不能区分复杂类型)console.log(typeof bool); //booleanconsole.log(typeof num); //numberconsole.log(typeof str); //stringconsole.log(typeof und); //undefinedconsole.log(typeof nul); //objectconsole.log(typeof arr); //objectconsole.log(typeof obj); .
2021-07-14 17:58:17 452 1
原创 javascript 代码技巧 (二) —— 运算符
1. 拓展运算符// 对象合并let obj = { a: 0 };let obj1 = { a1: 1 };let obj2 = { a2: 2 };// 方式一(繁琐)obj.a1 = obj1.a1;obj.a2 = obj2.a2;// 方式二(简洁)obj = { ...obj1, ...obj2 };// 数组合并let arr = [];let arr1 = [1, 2];let arr2 = [3, 4];// 方式一(繁琐)arr = arr.co.
2021-07-13 08:30:43 300 5
原创 javascript 代码技巧 (一) —— 操作符
1. && 操作符// 繁琐if (this.isTrue) { this.test();}// 简洁this.isTrue && this.test();2. || 操作符// 繁琐let num;if (this.value) { num = this.value;} else { num = 2;}// 繁琐let num = this.value ? this.value : 2;// 简洁let num = .
2021-07-12 17:07:08 344 11
原创 JavaScript经典算法(一)—— 排序类
1. 冒泡排序1.1 概述一般用于数组的排序比较相邻两个元素的大小,大的放在小的后面1.2 原理与实现需要两个for循环外层循环控制比较几轮,内层循环控制每轮比较几个元素let arr = [11,8,7,18,56,35,41,9]; for(let i = 0; i <= arr.length - 1; i++){ // 外层循环控制比较几轮 for(let j = 0; j <= arr.len.
2021-07-07 09:23:46 836 20
原创 react-native踩坑合集,来源于真实企业开发(建议收藏)
react-native踩坑合集1. 常见错误2. 注意事项1. 常见错误1. 1 call3,call7…错误接口出问题(后台)接口调用错误(前端)1. 2 代码未执行,效果不刷新代码中有错误,服务自动断掉了检查带有红色线的代码1.3 图标未找到(阿里字体图标库)出现这种情况一般是:项目的其他开发者加入了新图标,你只更新了代码,未更新图标解决方案关闭所有服务删除 rn_temp 文件运行 npm run dev:rn(此时不要执行node命令,让程序生成新的
2021-07-06 21:14:27 378 1
原创 JS基本功修炼,一文搞懂JavaScript数组
JavaScript 数组的全方位解析1. 数组概述2. 访问数组3. 二维及多维数组4. 数组的常用操作1. 数组概述1. 1 数组是什么?数组可以看成是一个容器,用来存放值举个例子:一整栋楼可以看成一个数组里面的每一个房间都是数组的元素,它们一起组成了整个数组1.2 数组的定义以下两种方式定义的数组是一样的:// 字面向量let arr = [1, 2, 3, 4];// new 关键字创建一个实例,继承至基类Arraylet arr2 = new Arra
2021-07-05 10:06:27 3542 78
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人