- 博客(96)
- 收藏
- 关注
RSS订阅原创 Webpack原理与实战 --- 如何通过 Loader 实现特殊资源加载
Webpack 不仅是 JavaScript 模块打包工具还是整个前端项目（前端工程）的模块打包工具可以通过 Webpack 去管理前端项目中任意类型的资源文件。
2023-07-18 13:18:45
178
原创 Webpack原理与实战 --- Webpack 核心特性
production 模式下，启动内置优化插件，自动优化打包结果，打包速度偏慢；development 模式下，自动优化打包速度，添加一些调试过程中的辅助插件；整个过程会按照约定将 src/index.js 作为打包入口。Webpack 4 以后的版本支持零配置的方式直接启动打包。webpack.config.js 有配置提示在文件中加入。最终打包的结果会存放到 dist/main.js 中。none 模式下，运行最原始的打包，不做任何额外处理。通过 CLI --mode 参数传入；
2023-07-17 18:49:09
261
原创 职业规划4
你的这个工作，起点是否给了你进入正循环的机会。出卖时间就是原地踏步，原地踏步就是倒退。老板总是缺顶事的人，不缺干活的人。日常给领导留下的印象很重要。能力从困难的复杂的事中来。2、让别人觉得你有潜力。
2023-07-17 14:46:41
108
原创 Webpack原理与实战 --- 背景介绍
具体做法是将每个模块成员都放在一个立即执行函数所形成的私有作用域中，对于需要暴露给外部的成员，通过挂到全局对象上的方式实现。这种方式带来了私有成员的概念，私有成员只能在模块成员内通过闭包的形式访问，这就解决了前面所提到的全局作用域污染和命名冲突的问题。在 IIFE 的基础之上，我们还可以利用 IIFE 参数作为依赖声明使用，这使得每一个模块之间的依赖关系变得更加明显。更为理想的方式应该是在页面中引入一个 JS 入口文件，其余用到的模块可以通过代码控制，按需加载进来。
2023-07-06 17:15:01
511
原创 鸿蒙系统开发
有用的网站鸿蒙官网：https://www.harmonyos.com/鸿蒙系统开发者：https://developer.harmonyos.com/华为开发者：https://developer.huawei.com/在线体验：https://playground.harmonyos.com/Gitee：https://gitee.com/openharmonyJS API：https://developer.harmonyos.com/cn/docs/documentation/doc-r
2021-11-26 16:45:01
2336
原创 前端性能优化
请求和响应优化减少 DNS 查找：每次主机名的解析都需要一次网络往返，从而增加了请求的延迟时间，同时还会阻塞后续的请求。重用 TCP 连接：尽可能的使用持久连接，以消除因 TCP 握手和慢启动导致的延迟。减少 HTTP 重定向：HTTP 冲定向需要额外的 DNS 查询、TCP 握手等非常耗时，最佳的重定向次数为0。压缩传输的资源：比如 Gzip、图片压缩。使用缓存：比如 HTTP 缓存、CDN 缓存、Service Worker 缓存。使用 CDN（内容分发网络）：把数据放在离用户地理位置更近
2021-11-08 16:41:41
1106
原创 数据可视化 -- D3.JS
svg绘制图形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sv
2021-10-27 14:55:21
374
原创 数据可视化 -- 封装自己的 Charts
myCharts 目录结构myCharts 工程化配置webpack.config.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { mode: "development", entry: "./src/index.js", output: { filename: 'chart.js', path: pa
2021-10-26 09:38:40
496
原创 数据可视化 -- canvas基本使用
canvas绘制线条const canvas = document.getElementById('canvas')const ctx = canvas.getContext('2d')ctx.beginPath()ctx.lineWidth = 4ctx.strokeStyle = 'orange'// 起点 终点 中间点ctx.moveTo(100, 100)ctx.lineTo(300, 300)ctx.lineTo(500, 200)ctx.stroke()ctx.clo
2021-10-21 16:31:05
968
原创 数据结构与算法
栈栈的概念栈是一种遵从后进先出原则的有序集合。添加新元素的一端称为栈顶，另一端称为栈底。操作栈的元素时，只能从栈顶操作（添加、移除或取值）。栈的实现我们需要实现以下功能push() 入栈方法pop() 出栈方法top() 获取栈顶值size() 获取栈的元素个数clear() 清空栈class Stack { constructor () { // 存储栈的数据 this.data = {} // 记录栈的数据个数（相当于数组的 length）
2021-09-28 16:52:54
102
原创 基于模块联邦的微前端实现方案
微前端应用案例概述当前案例中包含三个微应用，分别为 Marketing、Authentication 和 DashboardMarketing：营销微应用，包含首页组件和价格组件Authentication：身份验证微应用，包含登录组件Dashboard：仪表盘微应用，包含仪表盘组件容器应用、营销应用、身份验证应用使用 React 框架，仪表盘应用使用 Vue 框架。Marketing - 应用初始化...
2021-09-26 10:40:04
314
原创 微前端基础
如何实现微前端多个微应用如何进行组合 ?在微前端架构中，除了存在多个微应用以外，还存在一个容器应用，每个微应用都需要被注册到容器应用中。微前端中的每个应用在浏览器中都是一个独立的 JavaScript 模块，通过模块化的方式被容器应用启动和运行。使用模块化的方式运行应用可以防止不同的微应用在同时运行时发生冲突。在微应用中如何实现路由 ？在微前端架构中，当路由发生变化时，容器应用首先会拦截路由的变化，根据路由匹配微前端应用，当匹配到微应用以后，再启动微应用路由，匹配具体的页面组件。微应用与微应
2021-09-23 17:00:55
303
原创 Cordova
简介Cordova 是⽤ Web 技术（ HTML，CSS 和 JS ）构建移动应⽤的平台。我们可以认为Cordova 是⼀个容器，⽤于将的 Web 应⽤移植到移动端，同时⽀持移动端的功能（例如：定位、蓝⽛、摄像头等）。资源⽹站官⽹： https://cordova.apache.org/中⽂镜像：http://cordova.axuer.com/Github： https://github.com/apache/cordova环境搭建Node.js 环境搭建Git 安装Andro
2021-09-18 14:52:27
987
原创 Electorn 项目实战
创建 React 应用create-react-app my-app基础配置concurrently: 连接多个命令，中间使用空格分开wait-on：等待某个结果执行之后再去执行后续的命令cross-env : 跨平台的环境变量设置package.json"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test",
2021-09-13 11:29:01
396
原创 Flutter -- 项目实践
导航import 'package:flutter/material.dart';import 'home/Home.dart';import 'study/Study.dart';import 'mine/Mine.dart';class Index extends StatefulWidget { Index({Key key}) : super(key: key); @override _IndexState createState() => _IndexState()
2021-09-09 11:57:53
508
1
原创 Dart 基础
Dart 资源网站官网：英文：https://dart.dev/中文：https://dart.cn/如果想要在线运行 Dart 代码，可以使用 DartPadhttps://dartpad.dartlang.org/https://dartpad.cn/生态：https://pub.dev/Dart 语言概览：https://dart.cn/samplesDart 速查表：https://dart.cn/codelabs/dart-cheatsheet环境搭建Dart
2021-09-01 11:54:14
307
原创 Flutter 之 Mac 环境搭建
目标在 Mac 下，搭建 Flutter 运行的 iOS 开发环境基础环境要安装并运行 Flutter，您的开发环境必须满足以下最低要求:操作系统: macOS (64-bit)磁盘空间: 700 MB (不包括 Xcode 或 Android Studio 的磁盘空间）工具: Flutter 依赖下面这些命令行工具bash, mkdir, rm, git, curl, unzip, which使用镜像由于在国内访问 Flutter 有时可能会受到限制，Flutter 官方为中国开发者
2021-08-31 09:30:28
2297
原创 Flutter 之 Windows 环境搭建
目标在 Windows 下，搭建 Flutter 运行的 Android 的环境。详情参考：https://flutter.dev/基础环境GitFlutter 依赖Git 命令行工具如果未安装 Git for Windows，请先安装； 如果已安装 Git for Windows，请确保命令提示符或 PowerShell中可运行 git 命令VS Code首先安装 VS Code 编辑器。下载地址：https://code.visualstudio.com/在 VS Code 中
2021-08-30 17:31:57
513
原创 React Native项目实战
调试接口API 调试工具是用来对 API 接口进行调试的。比较出名的有 Postman，Insomnia、Postwoman 等。本节以 Insomnia 为例。首先，需要跳转到 Insomnia 官网，下载（Insomnia Core）：https://insomnia.rest/download然后执行安装。然后，配置开发环境。配置完之后，就可以根据接口（例如：和风天气接口）的使用规则，在 Insomnia 中调试接口了。使用效果如下：调用接口React Native 提供了和 web
2021-08-30 11:23:29
3625
原创 React Native 架构原理
为了更好的理解 React Native，我们需要了解 RN 的架构原理。这里主要介绍两个内容现有架构当前 RN 正在使用的架构新架构2018年6月，Facebook推出了 RN 的重构计划。我们需要了解下一代 RN 的架构原理。现有架构架构模型基本架构模型如下：Native 是原生部分，例如：iOS 原生或 Android 原生JS 端主要是 React 语法Bridge 用与 Native 和 JS 的通信因为 Native 和 JS 相对独立。彼此通信是通过桥接器（Brid
2021-08-27 10:31:13
2086
原创 React Native 路由与导航
简介在 React 中实现路由，有两种方案，分别对应两个不同的场景React-RouterReact-Router 适用于 Web 项目。React-NavigationReact Native 没有像浏览器那样的内置导航 API （location对象，history对象）。React Native 中的导航是通过React-Navigation来完成的。React Native 把导航和路由都集中到了 React-Navigation 中。RN 0.44 之前，React-Navi
2021-08-26 17:44:09
1007
原创 React Native 基础
StyleSheetStyleSheet 是 RN 中用来声明样式的语法RN 中的样式与 CSS 的区别RN 中的样式，没有继承性（子组件不能继承父组件的样式）CSS：Cascading Style Sheet（级联样式表）SS：Style Sheet（样式表）样式名称使用小驼峰式命名例如：CSS 中的 font-size，在 RN 中写成 fontSize所有尺寸都是没有单位例如：width: 100这是因为 RN 中尺寸只有一个单位，dp（一种基于屏幕密度的抽象单位，默认
2021-08-26 16:32:50
623
原创 React Native iOS 环境搭建
RN 要进行 iOS 应用开发，只能在 Mac 环境（Windows 不行）。所以，以下安装步骤，都是在 Mac 中进行的。watchmanWatchman 是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。brew install watchman没有 brew 的同学，可以先安装 brewXcodeReactNative 目前需要Xcode 10 或更高版本。你可以通过 App St
2021-08-23 15:37:03
389
原创 React Native 安卓环境搭建
基础环境必须安装的依赖有：Node.js、Yarn 和 React Native 脚手架。这是运行 RN 的基础Node.jsNode.js 的版本应大于等于 12，推荐安装 LTS 版本（去Node.js官网下载安装包）安装之后，（为了提高下载速度）我们将 npm 镜像源，设置为淘宝的#修改npm的镜像源npm config set registry https://registry.npm.taobao.org#验证是否更改成功（查看镜像源）：npm config get re
2021-08-23 14:48:56
1108
原创 uniapp 项目实践
基于 UniAPP 社区论坛项目多端开发实战学习目的： 通过学习，基于 Vue 、微信小程序、uniapp 开发框架，对标企业级「大前端」开发实践标准，从零到一构建社区论坛类客户端应用项目全流程， 输出相关 H5、微信小程序、安卓、IOS 多客户端应用。一、项目准备1.1 项目业务逻辑介绍相关文档API 接口文档，详情查阅《 ThinkSNS 社区服务接口文档.md 》ThinkSNS 综合管理系统，开源代码 git 地址：https://gitee.com/joysapp/t
2021-08-20 14:43:33
14427
9
原创 《 ThinkSNS 社区服务接口文档.md 》
社区服务 API 接口文档基础相关信息服务器请求地址：http://ts.lagou.uieee.com客户端访问统一接口规则 ： /api/v2/gitHub 完整 API 接口服务文档查阅：https://github.com/slimkit/slimkit.github.io/tree/gh-pages/docs体验版前台地址：http://ts.lagou.uieee.com/feeds后台管理系统地址： http://ts.lagou.uieee.com/admin
2021-08-20 14:42:52
2892
原创 uniapp 基础
基于 UniAPP 从入门到社区项目实战课程背景：咱们作为前端开发人员，单纯的Web 端开发已经慢慢无法满足我们的业务需求了，微信小程序、安卓 APP、IOS APP，甚至是 Windows 桌面端开发都成了我们需要掌握的技能。所以呢，市面上各种「跨平台」开发解决方案层出不穷，比较有代表性的就是： UniAPP 、 Flutter、 React Native、Taro、Weex等等。UniAPP 是基于「 Vue + 微信小程序 」语言体系，开发人员学习成本低上手快，同时随着如今 UniAPP
2021-08-17 16:49:38
635
原创 微信小程序
注册小程序账号使用小程序之前，先要注册小程序账号。前往：https://mp.weixin.qq.com/wxopen/waregister?action=step1或参考: 注册微信小程序.md安装微信开发者工具想要开发微信小程序，必须去微信公众平台，先下载微信开发者工具，下载之后，一路 下一步 安装。初始化小程序双击打开微信开发者工具填写项目信息填写小程序名称、存放目录、AppID，填写完成后，点击新建项目名称: 可以任意设置目录: 设置本地空目录AppID: 注册小
2021-08-17 09:54:09
330
原创 Egg.js -- 及案列介绍
快速入门Egg.js 介绍https://eggjs.org/zh-cn/intro/index.htmlhttps://eggjs.org/zh-cn/intro/egg-and-koa.html快速入门https://eggjs.org/zh-cn/intro/quickstart.html目录结构https://eggjs.org/zh-cn/basics/structure.html内置对象https://eggjs.org/zh-cn/basics/objects.
2021-08-13 17:03:24
1008
原创 GraphQL 综合案例
参考链接https://juejin.cn/post/6844903921643683847#heading-27目录结构：index.jsconst express = require('express')const { ApolloServer, gql } = require('apollo-server-express')const schema = require('./schema')const dataSources = require('./data-sources')
2021-08-06 17:22:20
283
原创 Apollo GraphQL
Apollo GraphQLApollo 是一个开源的 GraphQL 开发平台， 提供了符合 GraphQL 规范的服务端和客户端实现。使用 Apollo 可以帮助我们更方便快捷的开发使用 GraphQL。官网：https://www.apollographql.com/GitHub 相关开源仓库：https://github.com/apollographql基本用法1、准备# 创建项目目录mkdir graphql-server-examplecd graphql-server-e
2021-08-06 16:55:46
1037
原创 GraphQL 入门，Scheme和类型
https://www.yuque.com/books/share/ec8980d3-bf8c-4277-a96d-957455adf289?#（密码：xume） 《GraphQL 教程》
2021-08-05 11:51:36
407
原创 Koa基本使用及原理
https://www.yuque.com/books/share/78a0f8da-df9c-4dfc-991a-b52d07b3c3e5?# 《Koa 教程》Koa 基础介绍Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API开发领域中的一个更小、更富有表现力、更健壮的基石。官网：https://koajs.com/GitHub 仓库：https://github.com/koajs/koa一个翻译的中文网：https://koa.
2021-08-04 11:34:35
1064
原创 Express
https://www.yuque.com/books/share/1e287384-5c4d-439a-a4fd-dc8d65cce7b7?# 《Express 教程》基本用法Express 相关链接Express 官网Express GitHub 仓库Express 中文文档（非官方）Awesome Express内置中间件Express 具有以下内置中间件函数：express.json() 解析 Content-Type 为 application/json 格式的请求体
2021-08-03 16:33:29
242
原创 Redis
https://www.yuque.com/books/share/e04c68e0-44b2-4a74-abf7-f110ebf8c423?#（密码：gsz1） 《Redis 教程》Redis 安装关于 Redis 的版本Redis 借鉴了 Linux 操作系统对于版本号的命名规则：版本号第二位如果是奇数，则为非稳定版本（例如2.7、2.9、3.1）如果是偶数，则为稳定版本（例如2.6、2.8、3.0、3.2）当前奇数版本就是下一个稳定版本的开发版本，例如 2.9 版本是 3.0 版本的开
2021-07-29 14:04:29
288
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人