Jinrong

原创 js的一些概念（一）

事件循环的基本原理是不断地从任务队列（Task Queue）中取出任务执行，直到任务队列为空。当访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端（即 Object.prototype）。**原型链（Prototype Chain）**是由一系列对象组成的链式结构，用于实现对象之间的继承关系。原型链的形成是因为每个对象都有一个指向其原型对象的引用，通过这种引用关系，形成了对象之间的继承关系。

原创 js设计模式（二）

六、命令模式1. 定义用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系命令（command）指的是一个执行某些特定事情的指令2. 核心命令中带有execute执行、undo撤销、redo重做等相关命令方法，建议显示地指示这些方法名3. 实现简单的命令模式实现可以直接使用对象字面量的形式定义一个命令七、组合模式1. 定义是用小的子对象来构建更大的 对象，而这些小的子对象本身也许是由更小 的“孙对象”构成的。2. 核心可以用树形结构来表示这种“部分- 整

原创 js设计模式（一）

一、单例模式1. 定义保证一个类仅有一个实例，并提供一个访问它的全局访问点2. 核心确保只有一个实例，并提供全局访问3. 实现假设要设置一个管理员，多次调用也仅设置一次，我们可以使用闭包缓存一个内部变量来实现这个单例二、策略模式1. 定义定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。2. 核心将算法的使用和算法的实现分离开来。一个基于策略模式的程序至少由两部分组成：第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Conte

原创 vue session

原创 持续集成与持续部署

原创 pipeline流水线

语法字符串插值Jenkins Pipeline使用与Groovy相同的语法进行字符串插值。Groovy的字符串插值支持可能会让很多语言新手感到困惑。虽然Groovy支持使用单引号或双引号来声明一个字符串，例如：def singlyQuoted = ‘Hello’def doublyQuoted = “World”只有后一个字符串将支持基于美元符号（$）的字符串插值，例如：def username = ‘Jenkins’echo ‘Hello Mr. ${username}’echo ..

原创 Jenkins安装与使用

- 安装Docker下载 jenkinsci/blueocean 镜像并使用以下docker run 命令将其作为Docker中的容器运行 ：docker run \ -u root \ --rm \ -d \ -p 8080:8080 \ -p 50000:50000 \ -v jenkins-data:/var/jenkins_home \ -v /var/run/docker.sock:/var/run/docker.sock \ jenkinsci

原创 持续集成及jenkins介绍

持续集成及jenkins介绍软件开发生命周期（SDLC）需求分析设计实现测试敏捷开发核心为迭代开发和增量开发迭代开发对于大型软件项目，传统的开发方式是采用一个大周期（比如一年）进行开发，整个过程就是一次"大开发"；迭代开发的方式则不一样，它将开发过程拆分成多个小周期，即一次"大开发"变成多次"小开发"，每次小开发都是同样的流程，所以看上去就好像重复在做同样的步骤。**迭代开发将一个大任务，分解成多次连续的开发，本质就是逐步改进。**开发者先快速发布一个有效但不完美的最简版本，然后

原创 uniapp 小程序真机隐藏滚动条

scroll-view ::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent;}

原创 webpack生产、开发环境的拆分合并

webpack.base.config.js里面写公共的配置const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: { main: './src/index.js' }, output: { filename: '[name].js', path: path.re..

原创 uniapp 小程序自定义tabbar

小程序自定义四件套（根目录下创建custom-tab-bar)index.jsComponent({ data: { selected: 0, color: "#909090", selectedColor: "#4B2B23", list: [ { pagePath: '/pages/home/index', text: '首页', iconPath: '../static/tab-bar/icon_home_unsele..

原创 Vuex

Vuex1. state在store中定义数据，在组件中直接使用export default new Vuex.Store({ state: { num: 0 }})<template> <h1> {{$store.state.num}} </h1> </template>或者<template> <h1> {{num}} </h1> </templ

原创 memo、useMemo和useCallback

memomemo用来优化函数组件的重复渲染行为，当传入属性值都不变的情况下不会触发组件的重新渲染，否则就会触发组件的重新渲染const Product = memo(({ products, brands, keyWord }: any) => { return ( <View className={styles.product}> {products.map((product) => ( <SearchProductDetail

原创 useRef

如果不涉及修改的state保存可以用useRef“跨渲染周期”保存数据，而且对它修改也不会引起组件渲染

原创 @reduxjs:toolkit

configureStoreconfigureStore是对标准的Redux的createStore函数的抽象封装，添加了默认值，方便用户获得更好的开发体验。传统的Redux，需要配置reducer、middleware、devTools、enhancers等，使用configureStore直接封装了这些默认值。const store = configureStore({ reducer: rootReducer, enhancers: enhancer,})createActio

原创 less and sass

Less变量@width: 10px;@height: @width + 10px;#header { width: @width; height: @height;}Mixin.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { color: #111; .bordered();}.post a { color: red;

原创 axios简单学习

创建实例import axios from 'axios';import {getTokenIfSessionNotExpired} from '../shared/utils/token.js';const instance = axios.create({ baseURL: '/api', headers: { 'Content-type': 'application/json', }, timeout: 5000,});export default asyn.

原创 promise

异步编程文件操作数据库操作AJAX定时器promise支持链式调用，解决回调地狱问题（回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件）Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。const promise = new Promise(function(resolve, reject) { // ... some code if (/..

原创 Set & Map

Set它类似于数组，但是成员的值都是唯一的，没有重复的值。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4去除数组重复成员function dedupe(array) { return Array.from(new Set(array));}dedupe([1, 1, 2, 3]) /..

原创 ts的类型与配置

function sum(s:number,b:number):number{ return a+b;}let c:boolean = false类型// 字面量类型声明 |连接多个类型（联合类型）let b:'male' |'female';// any表示任意类型 可以给任意变量复制let d: any;c=d;//类型断言let e= 'hello'let s = e as strings =<string>e;// void表示空 ne

原创 JS正则

/abc/ 这个模式就能且仅能匹配 “abc” 字符按照顺序同时出现的情况。\ 转义^ 匹配输入的开始。例如，/^A/ 并不会匹配 “an A” 中的 ‘A’，但是会匹配 “An E” 中的 ‘A’。$ 匹配输入的结束。例如，/t$/ 并不会匹配 “eater” 中的 ‘t’，但是会匹配 “eat” 中的 ‘t’。*匹配前一个表达式 0 次或多次。等价于 {0,}。例如，/bo*/ 会匹配 “A ghost boooooed” 中的 ‘booooo’ 和 “A bird warb..

原创 formik

import {useFormik} from 'formik';const formik = useFormik({ initialValues: { name, age, }, validationSchema: validationSchema, onSubmit: values => { set.... }, });import {Field, Form, Formik} from 'formik';&l

原创 React 学习

React主要内容1. 简介1.1 什么是react (DOM和虚拟DOM)React 是一个开源前端 JavaScript 库，一个框架，用于构建用户界面，尤其是单页应用程序。它用于处理网页和移动应用程序的视图层。React 是由 Facebook 的软件工程师 Jordan Walke 创建的。在 2011 年 React 应用首次被部署到 Facebook 的信息流中，之后于 2012 年被应用到 Instagram 上。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上

原创 Jtest测试

RNrenderimport {render} from '@testing-library/react-native';describe('...', () => { test('.....', () => { const {getAllByTestId} = render(<组件名 />); const a = getAllByTestId('testID'); expect(a).toHaveLength(4);// 长度 expec

原创 Boyer-Moore 投票算法

算法原理解决的问题是如何在任意多的候选人中，选出票数超过一半的那个人。注意，是超出一半票数的那个人。维护一个候选众数 candidate 和它出现的次数 count。初始时 candidate 可以为任意值，count 为 0遍历数组 nums 中的所有元素，对于每个元素 x，在判断 x 之前，如果 count 的值为 0，我们先将 x 的值赋予 candidate，随后我们判断 x：如果 x 与 candidate 相等，那么计数器 count 的值增加 1；如果 x 与

原创 material-ui使用makeStyles

const useStyles = makeStyles(() => ({ root: { '& .MuiSwitch-colorSecondary': { color: colors.grey200, }, '& .MuiSwitch-colorSecondary.Mui-checked': { color: colors.red, }, '& .MuiSwitch-colorSecondary.Mui-ch

原创 查看进程占用

查看进程占用lsof -i tcp:3001该命令会显示占用8080端口的进程，有其 pid ,可以通过pid关掉该进程杀死进程kill pid

原创 React Hooks

一、前言react hooks 是2018年，facebook react官方团队提出的一个react 新特性。1. 1 引入hooksreact特点： 组件化和虚拟Dom函数组件：1. 无法存储任何状态 2. 没有自己的生命周期类组件：1. 可以通过setState设置一个或多个状态 2.但是复用时候会有一定成本facebook react 推崇函数式编程提出react hooks方案，使函数组件能够拓展一下能力二、useState2.1 例子import React, {

原创 js遍历方式！！！！

字符串遍历for…of --ES6语法，可以遍历Array、Set、Map、String、TypedArray、arguments等可迭代对象，可以使用break、continuefor(let char of string){ console.log("字符："+char); }数组遍历for和for/in，可以访问数组的下标，而不是实际的数组元素值。使用for/of，则可以直接访问数组的元素值。使用for/of获取数组索引，可以这样写：for (const [i, v] ..

原创 indexOf() && splice()

JavaScript indexOf() 方法indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。indexOf() 方法对大小写敏感！<script type="text/javascript">var str="Hello world!"document.write(str.indexOf("Hello") + "<br />")document.write(str.indexOf("Worl

原创 Jest（基础，函数测试）

简单函数的单元测试待测函数：function add(x, y) { return x + y;}测试文件：describe('Util', () => { test('should return 3', () => { const x = 1; const y = 2; const output = 3; expect(add(x, y)).toBe(output); });});又例如：describe('a', () =&

原创 Package Managers & Build Tools

Package Managers & Build ToolsBabel可以转化成浏览器支持的JavaScript代码Browserify将js文件自动化打包进一个单独的文件Webpack/parcelweb应用打包工具，将各种资源文件打包Npm/yarn包管理工具Npm/scripts定义并运行任务的工具包管理器npm & yarn(安装包时可以使用本地缓存，速度快一点）通过npm和parcel创建一个基于React工程的脚手架npx

原创 lodash 中的_.flow()

lodash 中的函数组合的方法_.flow()与 _.flowRight()_.flow([funcs])创建一个函数。 返回的结果是调用提供函数的结果，this 会绑定到创建函数。 每一个连续调用，传入的参数都是前一个函数返回的结果。_.flowRight()类似 _.flow，除了它调用函数的顺序是从右往左的。Eg:const reverse = arr => arr.reverse() // 倒叙const first = arr => arr[0] // 选取第一个con

原创 最近项目上遇到的问题～

使用git注意在push之前，git pull -r origin main不要使用git add . ，使用git add -ppush前查看commit 信息reat-native android启动问题[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aYi9QRpR-1606282603899)(https://ftp.bmp.ovh/imgs/2020/11/9fb0d5e3aeee9483.jpeg)]显示没有 installDebug 这个任..

原创 react-native学习二（navigator例子）

StackNavigatorimport React from 'react';import { View, Text, Button } from 'react-native';import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.14const HomeScreen = ({ navigation }) => ( <View style={{ flex: 1, alignItems: 'center.

原创 react-native学习一（引入styled-components:native样式）

styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样，通过 js 赋能解决了原生 css 所不具备的能力，比如变量、循环、函数等。最简单的用法：import styled from 'styled-components'const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred;`;// 相当于 const T..

原创 mac配置SSH（大致命令）

git config --global user.name "HelloJinrong"git config --global user.email "hjr2027@163.com"cd ~/.sshssh-keygen -t rsa -C "hjr2027@163.com"open /Users/jinronghe/.ssh

原创 recoil

RecoilRoot组件使用 Recoil 状态之前需要在它的外面包裹一层 RecoilRoot 组件。可以直接短平快地放在根组件外面：import React from 'react';import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue,} from 'recoil';function App() { return ( <RecoilRoot> <C

原创 react-intl

React IntlReact Intl 用于国际化 React 组件，提供 React 组件和 API 来格式化日期，数字，字符串（包括单复数和翻译） 。这次只用它实现文本翻译。用法安装npm install react-intl --save载入语言环境数据。React Intl 依赖这些数据来支持单复数和相对时间格式化的功能。// Main.jsimport { addLocaleData } from 'react-intl'; /* react-intl imports *

原创 react-router-dom路由简单学习

通过函数跳转import React from 'react';import {HashRouter, Route, Switch, hashHistory} from 'react-router-dom';import Home from '../home';import Detail from '../detail';<HashRouter history={hashHistory}> const BasicRoute = () => ( <HashRo