庚中

原创 JS数据结构之队列(Queue)

特点:先进先出（也叫FIFO：First In First Out）结构图:这跟我们生活中的排队吃饭很像:谁先排在前面,谁享受吃饭 !

原创 flutter封装自定义打印信息

创建log.dart文件,里面代码如下:void myLog(Object message, StackTrace current) { CustomTrace programInfo = CustomTrace(current); print("所在文件: ${programInfo.fileName}, 所在行: ${programInfo.lineNumber}, 打印信息: $message");}class CustomTrace { final StackTrace _tra

原创 Vue函数式组件来防抖

前言看过源码发现,我们常用的和就是一个高阶（抽象）组件。export default { name: 'keep-alive', abstract: true, ...}所有的高阶（抽象）组件是通过定义abstract选项来声明的。高阶（抽象）组件不渲染真实DOM。 一个常规的抽象组件是这么写的：import { xxx } from 'xxx'const A = () => { .....}export default { name: 'xxx',

原创 优化:一次性全局组件注册

需要使用组件的场景：<template> <BaseInput v-model="searchText" @keydown.enter="search"/> <BaseButton @click="search"> <BaseIcon name="search"/> </BaseButton></template><script> import BaseButton

原创 项目中优雅的使用svg

搭建环境获取图标我们使用vue-cli3搭建项目,怎么样才算优雅?首先我们在src目录下新建icons/文件夹，在icons/文件夹下建svg/文件夹，将来我们项目中的svg图标都会统一放在这里,去阿里图标库下载svg图标点击svg下载到icons/svg目录下修改文件名为qq.svg，或者是在icons/svg目录下新建一个qq.svg文件，把复制的svg代码放进去也可以,这样就获取到了一个图标，很easy.处理svg图标ue-cli对svg文件有默认的url-loader 处理，我们要使用s

原创 JS数据结构之栈(Stack)

Stack特点:先进后出（也叫LIFO：last in first out）结构图:栈常见的操作：push（element）：添加一个新元素到栈顶位置；pop（）：移除栈顶的元素，同时返回被移除的元素；peek（）：返回栈顶的元素，不对栈做任何修改（该方法不会移除栈顶的元素，仅仅返回它）；isEmpty（）：如果栈里没有任何元素就返回true，否则返回false；size（）：返回栈里的元素个数。这个方法和数组的length属性类似；toString（）：将栈结构的内容以字符串的形式返

原创 优雅的导出请求接口

不知道大伙是如何定义请求接口的，就我目前这个项目而言，是这么做的：// api.jsimport http from './config/httpServer.js' /* 登入页面获取公钥 */export const getPublicKey = (data) => { return http({ url: '/userGateway/user/getPublicKey' }, data)}// 用户登录export const login = data => {

原创 Vue自定义全部插件

在某些情况下，我们封装的内容可能不需要使用者对其内部代码结构进行了解，其只需要熟悉我们提供出来的相应方法和 api 即可，这需要我们更系统性的将公用部分逻辑封装成插件，来为项目添加全局功能，比如常见的 loading 功能、弹框功能等。开发 Vue 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。可以通过如下4种方式来自定义插件：MyPlugin.install = function (Vue, options) { // 1. 添加

原创 前端设计模式

工厂模式工厂模式是 js 中最常用的一种用于创建对象的设计模式，其核心就是将逻辑封装在一个函数中不暴露创建对象的具体逻辑.es5写法 const Person = function () { const [name, age, sex] = [...arguments]; this.name = name; this.age = age; this.sex = sex; this.sayName = () => { console.log(`

原创 前端排序算法

冒泡排序 function bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) {//只需要循环length-1次即可 for (var j = 0; j < arr.length - i - 1; j++) {//优化:去除外循环第二轮开始后面已经排好的序 if (arr[j] > arr[j + 1]) { [arr[j + 1], arr[j]] = [arr

原创 超实用的全局Vue自定义指令

Vue 自定义指令在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。批量注册的方法新建 directives/index.js 文件import cop

原创 前端查找算法

查找算法顺序搜索 // 顺序搜索 let arr = [5, 4, 3, 2, 1] let target = 3 function sequentialSearch(arr, target) { for (let i = 0; i < arr.length; i++) { if (arr[i] === target) { return i } } return -1 } console.log(sequen

原创 dart原生请求

系统内置库请求方式:import 'dart:io'; //内含HttpClient函数import 'dart:convert'; //带utf-8内置对象void main() async { var result = await getDataFromZhihuAPI(); print("$result 请求结果");}//api接口： http://news-at.zhihu.com/api/3/stories/latestgetDataFromZhihuAPI() asy

原创 hooks中useEffect()使用总结

常见使用:获取数据案例:import React, { useState, useEffect } from 'react';import axios from 'axios';function App() { const [data, setData] = useState({ hits: [] }); useEffect(() => { const fetchData = async () => { const result = await axios

原创 在项目中全局自动加载默认图的技巧

1.在main.js中引入@/utils/event.js2.在event.js中,添加error事件// error 事件window.addEventListener( 'error', (e) => { if (e.target.tagName && e.target.tagName.toUpperCase() === 'IMG') { e.target.src = require('@/images/global_default_org.pn

原创 dart总结(四.泛型详解)

前言没有泛型时:不同的类型检查要写多个方法String getDetail(String value){ return value;}int getDetail2(int value){ return value;}void main (){ print(getDetail("aa"));//aa print(getDetail2(22));//22}使用泛型// 好处:可以复用,减少冗余T getData (T value){//3个T依次表示:返回类型,运行时类

原创 dart总结(三.类,接口,继承,多态,mixins和枚举详解)

ObjectDart中所有的东西都是对象，所有的对象都继承自Object类.普通类的声明特点:用new关键字实例化 class Class01{ //变量 int a; String b; var c=3; //函数 void fun01(int d){ } String fun2(){ return b; } }void main(){//记住练习类要在main函数外面创建,里面会报错 var cla

原创 dart总结(二.函数,闭包和递归详解)

main函数特殊的函数,是程序的入口.void main(){ .....}函数的声明 //指定返回值 函数名 参数 函数体 void test11(){ print('aa'); } //不指定返回值 也可以 test12(num a){ print('bb $a'); } //不指定返回值 也可以 test15(String c){ return c+c; } //如果函数体 只有一个表达式 可以用箭头函数形式 t

原创 dart总结(一.List,Set,Map集合类型详解)

List(声明,属性和方法)List声明初始时没有赋值情况var list1=List();//不限长度,类型和可添加任意类型的数组print(list1);//[]var list2=List(2);//限定了长度为2print(list2);//[null,null]print(list2.length);//2初始时直接赋值情况// 同类型赋值:限定类型和长度var list3=[1,2,3];//限定了类型int,并且长度为3// list3[2]='7';//报错,初始

原创 wecha支付流程

原创 flutter从零开发完整好客租房App(已完结)

好客租房实现效果:项目完整地址(已开源)https://github.com/huanggengzhong/GoodHouse中间经历过96次commit记录,根据commit可以回退到各个阶段,以便查看那时的代码.练习 dart 语言的插件下载安装dart sdk(网址:http://www.cndartlang.com/920.html),下载vscode插件(code runner),dart 文件右键运行即可.开始项目创建项目【菜单】— 【查看】—【命令面板】— 【Flutte

原创 日期的处理

new Date转化为yyyy-MM-dd HH:mm:ss方法一:将Fri Mar 23 2018 12:19:48 GMT+0800 (国际时间)转化为dd-MM-yyyy HH:mm:ssexport const dateToFormat=(date)=>{ date.toLocaleString("en-US", { hour12: false }).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')}

原创 Flutter学习总结(一):Flutter介绍,环境安装和创建第一个项目

一.认识FlutterFlutter是谷歌的移动端UI框架,可以快速在IOS和Android平台上构建高质量的原生用户界面.总结有三个重点:1.跨平台比如Linux,Android,IOS,甚至可以跑在MacOS和Windows上.2.原生用户界面它是原生的,让我们体验更好,性能更好.(Flutter采用GPU渲染技术,可以达到120fps)3.开源免费只要学会使用,这些都是免费的...

原创 electron开发计算器

electron完成一个简易的桌面应用程序学习目标什么是electron,它能做什么使用electron展示一个桌面应用程序的界面(简单的窗口展示)electron中菜单的添加和配置electron中的主进程electron中的渲染进程electron中主进程和渲染进程之间的通信electron中系统托盘的简单实现electron应用程序的打包(w...

原创 set-cookie认证的方式

原创 H5移动端大转盘抽奖插件, 简单、易用、无依赖

#Lottery.js#H5移动端大转盘抽奖插件, 简单、易用、无依赖。效果:##step 1: 引入资源<canvas id="lottery" width="300" height="300"></canvas><button id="handler">开始抽奖</button><!-- Lottery Javascript...

原创 依次执行方法1,方法2的技巧

采用Promis结合async await即可,代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...

原创 ES6编程风格

块级作用域用let全面取代var全局使用常量 // bad var a=2,b=2,c=3 //best const [a,b,c]=[1,2,3]字符串多用模板字符串// badconst a = "foobar";const b = 'foo' + a + 'bar';//bestconst a="foobar"const b=`foo${a}bar`//foof...

原创 工作工具之-函数封装-type篇

typeclass TypeFn { isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } isNumber (o) { //是否数字 return Object.prototype.toString.call...

原创 工作工具之-函数封装-string篇

stringclass StringFn { /** * 去除空格 * @param {str} * @param {type} * type: 1-所有空格 2-前后空格 3-前空格 4-后空格 * @return {String} */ trim (str, type) { t...

原创 工作工具之-函数封装-storage篇

storageclass StorageFn { constructor () { this.ls = window.localStorage; this.ss = window.sessionStorage; } /*-----------------cookie---------------------*/ /*设置cooki...

原创 工作工具之-函数封装-继续补充篇

继续补充class OtherFn { /** * [deepClone 深度克隆] * @param {[type]} obj [克隆对象] * @return {[type]} [返回深度克隆后的对象] */ deepClone (obj) { if (obj === null || typeof obj !...

原创 工作工具之-函数封装-number篇

numberclass NumberFn { /*随机数范围*/ random (min, max) { if (arguments.length === 2) { return Math.floor(min + Math.random() * ( (max+1) - min )) }else{ r...

原创 工作工具之-函数封装-补充篇

补充/* //////////////////////////////判断操作///////////////////////////////////*/class TypeFn { isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' }...

原创 工作工具之-函数封装-http篇

http/* let url = 'http://demo.com/api' 例: ajax({ url: url, success: function(data) { } })*/function ajax(setting){ //设置参数的初始值 ...

原创 工作工具之-函数封装-dom篇

DOMclass DomFn { $ (selector){ var type = selector.substring(0, 1); if (type === '#') { if (document.querySelecotor) return document.querySelector(selector) ...

原创 工作工具之-函数封装-date篇

dateclass DateFn { /** * 格式化时间 * * @param {time} 时间 * @param {cFormat} 格式 * @return {String} 字符串 * * @example formatTime('2018-1-29', '{y}/{m}/{d} {h}:{i}:{s...

原创 工作工具之-函数封装-base64篇

base64function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; // public method for encoding this.encode ...

原创 工作工具之-函数封装-array篇

数组class ArrayFn { /*判断一个元素是否在数组中*/ contains (arr, val) { return arr.indexOf(val) != -1 ? true : false; } /** * @param {arr} 数组 * @param {fn} 回调函数 * @return ...

原创 工作工具之--CSS封装

function/* 禁止选中文本 */.usn{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none;}/* 浮动 */.fl { float: left; }.fr { floa...