大前端学习
文章平均质量分 84
lagpu平台学习记录
yanling.zhang
这个作者很懒,什么都没留下…
展开
-
react-redux-源码解析
返回值是:返回一个对象:{getState, dispatch, sunscribe}1.reducer函数,根据action的类型,对状态进行更改。redux的最核心api:createStore。3.enhancer:对store的功能进行增强。createStore用来创建store对象,原创 2023-01-05 22:58:54 · 216 阅读 · 0 评论 -
koa - 洋葱模型浅析
,它的核心工作包括下面两个方面:如下图:如下是洋葱代码的案例:4.源码解析use方法listen方法compose方法compose方法是洋葱模型的核心,compose方法中有一个dispatch方法,第一次调用的时候,执行的是第一个中间件函数,中间件函数执行的时候就是再次调用dispatch函数,也就说形成了一个递归,这就是next函数执行的时候会执行下一个中间件的原因,因此形成了一个洋葱模型。5.为什么需要洋葱模型?因为很多时候,在一个app里面有很多中间件,,用葱模型可原创 2022-06-29 08:34:50 · 977 阅读 · 0 评论 -
大前端 - 泛客户端 - Electron
Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。使用 Web 前端技术来开发一个桌面 GUI 程序是一件多么炫酷的事情,你可以使用 HTML、CSS 来绘制界面和控制布局,使用 JavaScript 来控制用户行为和业务逻辑,使用 Node.js 来通信、处理音频视频等,几乎所有的 Web 前端技术和框架(jQuery、Vue、React、Angular 等)都可以应用到桌面 GUI 开发中。至此,JavaScript 这门神奇的语言除了能开发 Web 前端、Web原创 2022-06-27 10:47:57 · 1243 阅读 · 0 评论 -
大前端 - 泛客户端开发 - UniAPP项目实战
index.vue原创 2022-06-26 22:55:22 · 2305 阅读 · 2 评论 -
大前端 - 泛客户端开发 - UniAPP快速入门
(2)应用配置 manifest.json(3)编译配置 vue.config.js(4)全局配置 page.json属性类型必填描述globalStyleObject否设置默认页面的窗口表现pagesObject Array是设置页面路径及窗口表现easycomObject否组件自动引入规则tabBarObject否设置底部 tab 的表现conditionObject否启动模式配置subPackagesOb原创 2022-06-26 20:58:22 · 1307 阅读 · 0 评论 -
大前端 - 微信小程序
目标:1.小程序简介2.微信小程序基础3.解读初始化项目4.项目实践5.项目发布小程序:移动端的开发。传统App(Android/Ios)的开发和运营成本很高。最早推出小程序的是微信团队。相对原声App而言,小程序无需单独下载。只需要搜-搜,或扫一扫,就能直接使用小程序。小程序寄生在app中,app自带流量,小程序营销成本低。小程序简单易学。小程序开发和网页开发的区别:1.小程序中不能使用HTML,小程序展现内容由自己的语法。2.小程序中可以使用css3.小程序的主要开发语言是javasc原创 2022-06-23 20:58:18 · 541 阅读 · 0 评论 -
大前端 - react - VirtualDOM 及 Diff 算法
Virtual DOM 及 Diff 算法1. JSX 到底是什么使用 React 就一定会写 JSX,JSX 到底是什么呢?它是一种 JavaScript 语法的扩展,React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML,但它确实是 JavaScript 。在 React 代码执行之前,Babel 会对将 JSX 编译为 React API.<div className="container"> <h3>Hello React</h3>原创 2022-05-09 22:06:12 · 464 阅读 · 1 评论 -
大前端 - 算法与数据结构 (leet code)
为什么要学习数据结构和算法?但我们通过框架和工具进行开发的时候,如何做到优化程序呢?那么数据结构和算法就起到了一定的作用。程序 = 数据结构 + 算法。在解决一些特殊的问题时候,如果用到特定的数据结构 ,算法相结合,对我们写的代码就可以做到:1.化繁为简。2:提高代码的性能。3.提交面试通过率。栈1.基础概念2.栈的实现3.leetcode题目。1.基础概念。后进先出只能操作顶部元素,从栈定添加元素。(添加,移除,取值)。添加新元素的一端称为栈定,另一段称为栈底。原创 2022-04-10 16:21:44 · 545 阅读 · 0 评论 -
大前端 - nodejs -egg实战 - web端(vue3.0)
项目介绍npm i -g @vue/clivue create youtube-frontend导入写好的前端模板页面封装请求模块配置接口服务地址:.env.development# npm run serve 加载的环境变量配置文件VUE_APP_API_BASE_URL=http://127.0.0.1:7001/.env.production# npm run build 加载的这个配置文件VUE_APP_API_BASE_URL=http://youtubeclone.li原创 2022-04-09 21:23:22 · 1535 阅读 · 0 评论 -
大前端 - nodejs - 发布部署
发布部署 - 环境配置 - node准备linux系统服务器域名待部署的node应用服务器环境配置1.Nodejs2.MongoDB3.nginx首先更新软件包apt updateapt upgrade建议将ubuntu镜像切换为国内镜像地址。安装nodeapt install nodejs 安装单一版本的nodejs安装画多个版本的node,可以随意的切换。建议使用nvm安装和管理node服务。nvmcurl -o- https://raw原创 2022-04-09 18:17:09 · 4199 阅读 · 0 评论 -
大前端 - nodejs - egg.js 企业级框架实战 - eggJS综合案例
案例介绍模仿实现 youTube clone项目。在线体验地址:https://utubeclone.netlify.app后端:https://github.com/manikandanraji/youtubeclone-frontend客户端:https://github.com/manikandanraji/youtubeclone-backend前后端架构分离先做服务接口,再做客户端应用后端技术选型:web框架:eggjs数据库:MongoDBORM框架:mongoo原创 2022-04-08 09:25:17 · 3192 阅读 · 0 评论 -
大前端 - nodejs - egg.js 企业级框架实战 -基础
eggjs介绍:原创 2022-04-07 10:10:48 · 1531 阅读 · 0 评论 -
大前端 - nodejs - koa
koa介绍koa是一个新的web框架,由express幕后的原班人马打造,致力于web应用和api开发领域中的一个更小,更富有表现力的更健壮的基石。官网:https://koajs.comgithub仓库:https://github.com/koajs/koa一个翻译的中文网:https://koa.bootcss.comkoa的内部原理和express很像,但是语法和内部结构结构进行了升级。 koa使用es6编写,它的主要特点是:通过async函数,帮你丢掉了回调函数。koa1是基于es原创 2022-04-06 22:06:51 · 1077 阅读 · 0 评论 -
大前端 - nodejs - express - 使用express开发接口服务案例(realword)
接口案例-RESTful接口规范介绍接口域名:https: //example.org/v1/apiv1:版本号状态码规范:创建项目mkdir realworld-api-expresscd realworld-api-expressnpm init -ynpm i expressapp.jsconst express = require('express')const app = express()const PORT = process.ENV.PORT || 3原创 2022-04-01 21:42:56 · 1561 阅读 · 0 评论 -
大前端 - nodejs - 框架 - express - 基础使用
Express介绍express是什么?express是一个简单,快速的,及简的nodejs web应用开发框架,通过它,可以很轻松的构建各种web应用。例如:1.接口服务2.传统的web网站3.开发工具的集成express本身是极简的,仅仅提供了web开的基础能力,但是它通过中间件的方式继承了许许多多的外部插件来处理http请求。body-parser:解析http请求体compression:压缩http相应。cookie-parser:解析cookie数据cors:处理跨域原创 2022-03-28 21:46:28 · 3106 阅读 · 1 评论 -
大前端 - nodejs 基础(核心模块、模块加载机制)
nodejs是为了实现高性能的web服务器,后来经过长时间的发展nodejs就变成了一门服务端语言。这样就jsavascript在浏览器场景工作之外的场景。数据的读写操作,总归是有消耗的。IO是计算机操作过程中最缓慢的环节。并发服务端解决思路:1.多线程,2.多进程。reactor模式(应答者模式):单线程完成多线程工作,并且是非阻塞。多线程的消耗:1. 状态保存,2.时间消耗 3.状态锁reactor模式下实现异步io,事件驱动。nodejs更适用io密集型高并发请求。原创 2022-03-19 20:00:43 · 2208 阅读 · 0 评论 -
大前端- vue - 服务端渲染基础
概述同构应用:通过服务端渲染首屏直出,解决SPA应用首屏渲染慢以及不利于SEO问题通过客户端渲染接管页面内容交互得到更好的用户体验这种方式通常称之为:现代化的服务端渲染,也叫同构渲染。这种方式构建的应用于称为服务端渲染应用,或者是同构应用。什么是渲染?渲染: 把 【数据】+ 【模版】 拼接到一起。传统的服务端渲染早期的web页面渲染都是在服务端完成的。最重要的是第4步。通过nodejs演示传统的服务端渲染。客户端渲染现代化的服务端渲染(同构渲染)...原创 2022-02-07 21:40:43 · 549 阅读 · 0 评论 -
大前端- vue - vuex状态管理
一:组件间通信方式state:驱动应用的数据源。view:以声明方式将state映射到视图。actions:响应在view上的用户输入导致的状态变化。状态管理:组件间的通信方式:父组件给子之间的传值(父子组件)1. 子组件中通过props接收数据。2. 父组件中给子组件通过相应属性传值子组件<template> <div> <h1>Props Down Child</h1> <h2>{{ title }}原创 2022-02-06 19:56:06 · 1147 阅读 · 0 评论 -
js - 排序 (4种)
讲解 + 动态图演示:https://www.runoob.com/w3cnote/bubble-sort.html1. 冒泡排序思路:比较相邻的元素。如果第一个比第二个大,就交换他们两个。对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。这步做完后,最后的元素会是最大的数。var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];function bubbleSort(arr) { for (let i = 0; i < ar原创 2022-01-17 14:38:07 · 984 阅读 · 0 评论 -
大前端 -vue - vue3.0 - Composition API
Composition APIcreateApp:创建一个vue对象。setup: composition api的入口。reactive: 把一个对象变成响应式对象,并且把该对象的嵌套属性也变成响应式对象。vue3.0 响应式对象不能解构案例:获取鼠标位置import { createApp, reactive } from 'vue' // setup:第一个参数:props // 第二个参数:context,attrs,emit,slots createApp({原创 2022-01-05 09:56:56 · 226 阅读 · 0 评论 -
大前端 - vue - Vue.js 源码分- 模板编译和组件化
1:模板编译介绍原创 2021-12-15 16:15:31 · 968 阅读 · 0 评论 -
大前端 - vue - Vue.js 源码剖析-虚拟 DOM
一:原创 2021-12-14 09:53:55 · 1170 阅读 · 0 评论 -
大前-vue -Vue.js 源码分析 - 响应式
vscode:查看【方法函数】快捷键:alt + 鼠标左键h:创建虚拟dompatch: 把虚拟dom转换为真实dom,最终挂载到$el目标:vuejs的静态成员和实例成员初始化过程。( vue.set, vue.delete,vm.$el,vm.data…这些全局成员的创建过程)首次渲染的过程.(创建完vue实例把数据传递给vue之后,vue内部是如何把数据渲染到页面的。)数据响应式原理。(vue最核心的机制之一。)二:准备看源码的工作源码的获取vue2.6:项目地址:ht原创 2021-12-09 11:55:57 · 1079 阅读 · 0 评论 -
读书笔记 - 深入浅出vuejs - 虚拟dom篇
一:什么是vnode二:patch原创 2021-11-16 18:09:43 · 728 阅读 · 0 评论 -
大前端 - vue - 模板编译和组件化
一:模板编译介绍模版编译的作用:vue2.x使用VNode描述视图以及各种交互,用户自己编写 VNode比较复杂用户只需要原创 2021-11-16 18:08:26 · 591 阅读 · 0 评论 -
大前端 - vue - Vue-Router 原理实现 - history模式
Hash 模式和 History 模式的区别2种方式都是客户端路由的实现方式,也就是当路径发生变化,不会向服务器发生请求。使用js监视路径的变化,不同的地址渲染不同的内容,如果需要服务端内容发送ajax。表现形式的区别:Hash:携带#,#之后是路由地址,可以通过?携带参数。很丑。 https://music.163.com/#/paylist?id=3102977778History: 一个正常的url. https://music.163.com/paylist/3102977778.原原创 2021-11-11 11:44:26 · 4546 阅读 · 1 评论 -
大前端 -vue - 模拟 Vue.js 响应式原理
目标:模拟一个最小版本的vue响应式原理在面试常常问到的问题学习别人优秀的经验,转换成自己的经验实际项目中出问题的原理层面的解决为学习vue源码做铺垫原创 2021-11-11 10:51:08 · 1132 阅读 · 0 评论 -
大前端 - vue - 基础回顾 + Vue-Router使用 + 路由守卫
一: 基础回顾1.1阶段内容原创 2021-11-08 22:22:08 · 951 阅读 · 0 评论 -
大前端 - react- 服务端渲染 - Gatsby
1.什么是Gatsby以及静态应用的优势Gatsby是一个基于react的静态站点html生成器官网: https://www.gatsbyjs.cn/解决单页应用的2大问题。静态应用的优势访问速度快更利于 SEO 搜索引擎的内容抓取部署简单Gatsby 总览基于 React 和 GraphQL, 结合了 webpack, babel, react-router 等前端领域中最先进工具,开发人员开发体验好;采用数据层和UI层分离而不失 SEO 的现代前端开发模式.对SEO非原创 2021-10-19 21:52:48 · 641 阅读 · 0 评论 -
大前端 - react - 服务端渲染 - Next.js
1.原创 2021-10-05 18:58:34 · 2021 阅读 · 0 评论 -
大前端 - react - 服务端渲染- ReactSSR
1.ReactSSR相关观念回顾1.1. 什么是客户端渲染(CSR)CSR: Client Side Rendering服务器端仅返回json数据就可以了,data(数据)和html的在客户端进行渲染。数据和html 的拼接是在客户端完成的,是在浏览器当中使用javascript来完成的,对服务器端来说,只需要返回json数据就可以了。1.2. 什么是服务端渲染(SSR)SSR: Server Side Rendering服务端返回html,data和html的拼接过程在服务器端进行渲染。就原创 2021-10-05 15:18:13 · 690 阅读 · 1 评论 -
大前端 - react - React组件性能优化
1.原创 2021-09-30 21:19:27 · 251 阅读 · 0 评论 -
大前端 - react - ChakraUI
1.ChakraUI组件库介绍2.原创 2021-09-30 21:18:51 · 273 阅读 · 1 评论 -
大前端 - react - CSS-IN-JS
1. 为什么会有CSS-IN-JS2. CSS-IN-JS介绍3. Emotion 库原创 2021-09-29 20:53:12 · 205 阅读 · 0 评论 -
raect - 受控组件与非受控组件的选用标准
1.非受控组件表单数据交由dom节点管理,特点是表单数据在需要时进行获取,代码实现相对简单。function App() {const userInput = useRef()function handleSubmit(){ const username = userInput.current.value}return ( <form onSubmit={handleSubmit}> <input type="text" ref={userInput}/> &原创 2021-09-29 20:49:08 · 176 阅读 · 0 评论 -
react - formik
1.formik:简介增强表单的处理能力,简单表单处理流程官网:https://jaredpalmer.com/formik下载:npm install formik --save2.formik基本使用使用formik进行表单数据绑定以及表单提交处理import { useFormik } from 'formik'function App() { const formik = useFormik({initialValues: {username: '章三', password:'1原创 2021-09-27 11:54:32 · 276 阅读 · 0 评论 -
大前端 - react - hooks
1.react hooks介绍react hooks是用来做什么的?对函数组件进行增强,让函数组件可以存储状态,可以拥有处理副作用的能力,让开发者在不使用类组件的情况下,实现相同的功能。2.类组件的不足(hooks要解决的问题)缺少逻辑复用机制为了复用逻辑增加无实际渲染效果的组件,增加了组件层级,显的十分臃肿,增加了调试的难度以及运行效率的降低类组件经常变的复杂难以维护将一组相干的业务逻辑拆分到了多个生命周期函数中在一个生命周期函数内存在多个不相干的业务逻辑类成员方法不能保证t原创 2021-09-23 09:40:46 · 198 阅读 · 0 评论 -
大前端 - react - mobx6更新
MobX61. MobX 概述MobX 是一个简单的可扩展的状态管理库,无样板代码风格简约。目前最新版本为 6,版本 4 和版本 5 已不再支持。在 MobX 6 中不推荐使用装饰器语法,因为它不是 ES 标准,并且标准化过程要花费很长时间,但是通过配置仍然可以启用装饰器语法。MobX 可以运行在任何支持 ES5 的环境中,包含浏览器和 Node。MobX 通常和 React 配合使用,但是在 Angular 和 Vue 中也可以使用 MobX。2. MobX 光速入门2.1 下载mob原创 2021-09-22 20:07:56 · 506 阅读 · 0 评论 -
大前端 - react - mobx5
1.mobx简介mobx简单,可扩展的状态管理库。react和mobx是一对强有力组合,react负责渲染应用的状态,mobx负责管理应用状态供react使用。mobx5版本要求浏览器支持es6 proxy,不支持ie11,nodejs6mobx4可以运行在任何支持es5的浏览器上mobx4和5的api是相同的2.开发前的准备2.1 启用装饰器语法支持(方式一)1.弹射项目底层配置:npm run eject2.下载装饰器语法babel插件:npm install @babel/plugi原创 2021-09-21 20:50:48 · 404 阅读 · 1 评论 -
大前端 - react -Mobx6(数据流)
1.mobx概述mobx是什么?mobox是状态管理库。和redux做的事情一样,但是比redux简单。没有那么多的模版代码。目前最新版本为 6,版本 4 和版本 5 已不再支持。在 MobX 6 中不推荐使用装饰器语法,因为它不是 ES 标准,并且标准化过程要花费很长时间,但是通过配置仍然可以启用装饰器语法。MobX 可以运行在任何支持 ES5 的环境中,包含浏览器和 Node。MobX 通常和 React 配合使用,但是在 Angular 和 Vue 中也可以使用 MobX。02-mobx原创 2021-09-16 23:04:09 · 1317 阅读 · 0 评论