笔记
文章平均质量分 86
christian-dong
这个作者很懒,什么都没留下…
展开
-
鸿蒙系统开发
有用的网站鸿蒙官网: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 · 2379 阅读 · 0 评论 -
前端性能优化
请求和响应优化减少 DNS 查找:每次主机名的解析都需要一次网络往返,从而增加了请求的延迟时间,同时还会阻塞后续的请求。重用 TCP 连接:尽可能的使用持久连接,以消除因 TCP 握手和慢启动导致的延迟。减少 HTTP 重定向:HTTP 冲定向需要额外的 DNS 查询、TCP 握手等非常耗时,最佳的重定向次数为0。压缩传输的资源:比如 Gzip、图片压缩。使用缓存:比如 HTTP 缓存、CDN 缓存、Service Worker 缓存。使用 CDN(内容分发网络):把数据放在离用户地理位置更近原创 2021-11-08 16:41:41 · 1164 阅读 · 0 评论 -
数据可视化 -- ThreeJS
绘制立方体原创 2021-11-03 09:18:02 · 1013 阅读 · 1 评论 -
数据可视化 -- 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 · 428 阅读 · 0 评论 -
数据可视化 -- 封装自己的 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 · 515 阅读 · 0 评论 -
数据可视化 -- 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 · 1041 阅读 · 0 评论 -
数据结构与算法
栈栈的概念栈是一种遵从后进先出原则的有序集合。添加新元素的一端称为栈顶,另一端称为栈底。操作栈的元素时,只能从栈顶操作(添加、移除或取值)。栈的实现我们需要实现以下功能push() 入栈方法pop() 出栈方法top() 获取栈顶值size() 获取栈的元素个数clear() 清空栈class Stack { constructor () { // 存储栈的数据 this.data = {} // 记录栈的数据个数(相当于数组的 length)原创 2021-09-28 16:52:54 · 103 阅读 · 0 评论 -
基于模块联邦的微前端实现方案
微前端应用案例概述当前案例中包含三个微应用,分别为 Marketing、Authentication 和 DashboardMarketing:营销微应用,包含首页组件和价格组件Authentication:身份验证微应用,包含登录组件Dashboard:仪表盘微应用,包含仪表盘组件容器应用、营销应用、身份验证应用使用 React 框架,仪表盘应用使用 Vue 框架。Marketing - 应用初始化...原创 2021-09-26 10:40:04 · 380 阅读 · 0 评论 -
微前端 -- 模块联邦
前期原创 2021-09-24 09:37:00 · 441 阅读 · 0 评论 -
微前端基础
如何实现微前端多个微应用如何进行组合 ?在微前端架构中,除了存在多个微应用以外,还存在一个容器应用,每个微应用都需要被注册到容器应用中。微前端中的每个应用在浏览器中都是一个独立的 JavaScript 模块,通过模块化的方式被容器应用启动和运行。使用模块化的方式运行应用可以防止不同的微应用在同时运行时发生冲突。在微应用中如何实现路由 ?在微前端架构中,当路由发生变化时,容器应用首先会拦截路由的变化,根据路由匹配微前端应用,当匹配到微应用以后,再启动微应用路由,匹配具体的页面组件。微应用与微应原创 2021-09-23 17:00:55 · 326 阅读 · 0 评论 -
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 · 1094 阅读 · 0 评论 -
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 · 406 阅读 · 0 评论 -
Electron基础
桌面应用原创 2021-09-09 15:26:05 · 2351 阅读 · 0 评论 -
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 · 563 阅读 · 1 评论 -
Flutter 基础
初始化项目项目目录原创 2021-09-07 11:19:39 · 266 阅读 · 0 评论 -
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 · 315 阅读 · 0 评论 -
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 · 2318 阅读 · 0 评论 -
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 · 550 阅读 · 0 评论 -
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 · 3669 阅读 · 0 评论 -
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 · 2141 阅读 · 0 评论 -
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 · 1021 阅读 · 0 评论 -
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 · 654 阅读 · 0 评论 -
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 · 411 阅读 · 0 评论 -
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 · 1136 阅读 · 0 评论 -
uniapp 项目实践
基于 UniAPP 社区论坛项目多端开发实战学习目的: 通过学习,基于 Vue 、微信小程序、uniapp 开发框架,对标企业级「大前端」开发实践标准,从零到一构建社区论坛类客户端应用项目全流程, 输出相关 H5、微信小程序、安卓、IOS 多客户端应用。一、项目准备1.1 项目业务逻辑介绍相关文档API 接口文档,详情查阅《 ThinkSNS 社区服务接口文档.md 》ThinkSNS 综合管理系统,开源代码 git 地址:https://gitee.com/joysapp/t原创 2021-08-20 14:43:33 · 14699 阅读 · 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 · 2943 阅读 · 0 评论 -
uniapp 基础
基于 UniAPP 从入门到社区项目实战课程背景:咱们作为前端开发人员,单纯的Web 端开发已经慢慢无法满足我们的业务需求了,微信小程序、安卓 APP、IOS APP,甚至是 Windows 桌面端开发都成了我们需要掌握的技能。所以呢,市面上各种「跨平台」开发解决方案层出不穷,比较有代表性的就是: UniAPP 、 Flutter、 React Native、Taro、Weex等等。UniAPP 是基于「 Vue + 微信小程序 」语言体系,开发人员学习成本低上手快,同时随着如今 UniAPP原创 2021-08-17 16:49:38 · 646 阅读 · 0 评论 -
微信小程序
注册小程序账号使用小程序之前,先要注册小程序账号。前往:https://mp.weixin.qq.com/wxopen/waregister?action=step1或参考: 注册微信小程序.md安装微信开发者工具想要开发微信小程序,必须去微信公众平台,先下载微信开发者工具,下载之后,一路 下一步 安装。初始化小程序双击打开微信开发者工具填写项目信息填写小程序名称、存放目录、AppID,填写完成后,点击新建项目名称: 可以任意设置目录: 设置本地空目录AppID: 注册小原创 2021-08-17 09:54:09 · 359 阅读 · 0 评论 -
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 · 1034 阅读 · 0 评论 -
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 · 292 阅读 · 0 评论 -
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 · 1051 阅读 · 0 评论 -
GraphQL 入门,Scheme和类型
https://www.yuque.com/books/share/ec8980d3-bf8c-4277-a96d-957455adf289?#(密码:xume) 《GraphQL 教程》原创 2021-08-05 11:51:36 · 415 阅读 · 0 评论 -
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 · 1123 阅读 · 0 评论 -
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 · 261 阅读 · 0 评论 -
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 · 293 阅读 · 0 评论 -
MongoDB
https://www.yuque.com/books/share/27406466-0fb6-48da-88db-0270fbeecb8b/zg9z0cMongoDB 简介NoSQL 简介2008 年左右,网站 、 论坛、社交网络开始高速发展,传统的关系型数据库在存储及处理数据的时候受到了很大的挑战 ,其中主要体现在以下几点:难以应付每秒上万次的高并发数据写入 。查询上亿量级数据的速度极其缓慢 。分库、分表形成的子库到达一定规模后难以进一步扩展 。分库、分表 的规则可能会因为需求变更而发生原创 2021-07-16 11:15:02 · 253 阅读 · 0 评论 -
Node 核心编程 -- 网络通信
网络通信的基本原理原创 2021-07-01 09:22:23 · 139 阅读 · 0 评论 -
Node 核心编程 -- 核心模块二
核心模块之 EventsEventEmitter 常见 APIon:添加当事件被触发时调用的回调函数emit:触发事件,按照注册的顺序同步调用每个事件监听器once:添加当事件在注册之后首次被触发时调用的回调函数off:移除特定的监听器发布订阅模式class PubSub{ constructor() { this._events = {} } // 注册 subscribe(event, callback) { if (this._events[eve原创 2021-06-28 16:27:53 · 102 阅读 · 0 评论 -
Node 核心编程 -- 核心模块一
process资源: cpu 内存console.log(process.memoryUsage())console.log(process.cpuUsage())运行环境:运行目录、node环境、cpu架构、用户环境、系统平台console.log(process.cwd())console.log(process.version)console.log(process.versions)console.log(process.arch)console.log(process.原创 2021-06-22 11:05:29 · 134 阅读 · 0 评论 -
Angular 企业实战开发 --- Angular 高级 -- 动画
16. 动画16.1 状态16.6.1 什么是状态状态表示的是要进行运动的元素在运动的不同时期所呈现的样式。16.6.2 状态的种类在 Angular 中,有三种类型的状态,分别为:void、*、customvoid:当元素在内存中创建好但尚未被添加到 DOM 中或将元素从 DOM 中删除时会发生此状态*:元素被插入到 DOM 树之后的状态,或者是已经在DOM树中的元素的状态,也叫默认状态custom:自定义状态,元素默认就在页面之中,从一个状态运动到另一个状态,比如面板的折叠和展开。原创 2021-06-10 16:20:27 · 480 阅读 · 0 评论