分类
未分类

flex布局常用属性

写组件的时候常常遇到这种情况

设计给的一个设计图 头是固定高度的 底下是自适应的

一般情况下

div{
display:flex;
flex-direction: column;
height:100%;
}

header{
height:50px;
}

body{
height:100%;
}

对一些要求不高的已经可以实现了,但是当下面组件高度很高的时候,flex会进行缩放,导致实际的header高度与预期的不一致,这个时候显式的给header 加上这两个属性就可以让他不缩放了

header{
flex-grow:0;
flex-shrink:0;
height:50px;
}

顺带一提 flex:1 flex: 1; !== flex: 1 1 auto;

  • 第一个参数表示: flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
  • 第二个参数表示: flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
  • 第三个参数表示: flex-basis 给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

分类
未分类

下一阶段预告

接下来半年内要做的事情

1.重构一个v-viewer-vue3版本的

2.开源一个可配置页面的前后端版本

欢迎加群催更 交流技术 秋秋群号:768901972

分类
未分类

git设置导致的血案-jenkins 编译 vue项目

可以看到前面报错了两次,查看报错信息 报的是

其实代码里是有这个文件的

后来想了一下 这个文件的名字我改过 之前是 user.js 后来改成了 User.js

但是我是windows git 默认不区分大小写 这边打包的是在docker里打包的 区分大小写 所以导致了这个结果

为了避免这样的惨剧 请瞧上这个设置

git config core.ignorecase false

这样windows 下 git就区分大小写了

如果你有ci/cd,或者前端方向的想法,欢迎加群交流 球球群:768901972

分类
未分类

typescript 给ws添加属性类型报错怎么解决?类型“WebSocket”上不存在属性xxx

其实很简单 我以我这边使用的ws库为例子 新建一个 shims.d.ts 文件

import ws from "ws";

declare module "ws" {
  export interface WebSocket extends ws {
    $id: string;
  }
}

这样就可以实现扩展了,成功的在ws 上扩展了$id属性

另外注意一点 d.ts文件不要和.ts文件一样命名 不推荐通过后缀区分文件

还有疑问可以加群讨论 秋秋群:768901972

分类
未分类

leetcode刷题记录

随缘更新,记录下自己的刷题记录

刷题要有思路的刷题,这轮刷题的目的就是熟悉题型,没事造造火箭。所以我选择的刷题思路是按照tag进行刷题。每个tag刷一个月。刷题的频率暂定是每个工作日刷一题,不论简单或难,总之要有一题,纯粹当爱好。

更新-2020-06-09

//这题是考常见的排序,冒泡,快排,插入排序等常见的排序都可以
// https://leetcode-cn.com/problems/kth-largest-element-in-an-array/submissions/
/**
 * @param {number[]} nums
 * @param {number} k
 * @return {number}
 */
var findKthLargest = function(nums, k) {
    return nums.sort(compareNumbers)[nums.length - k]
};

function compareNumbers(a, b) {
  return a - b;
}

sort 的源码实现目前有新旧两版 旧版的是根据数组的长度,内部调用的不同的算法来实现的,数组小于10的时候调用的是插入排序 数组大于10的时候 使用的是快排

具体可以看这里https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js

新版的看这里 https://github.com/v8/v8/blob/master/third_party/v8/builtins/array-sort.tq

更新-2020-06-08

// 这题是leetcode第一题 https://leetcode-cn.com/problems/two-sum/
// 可以使用暴力穷举法进行,也可以采用HashMap,这里采用的是HashMap来实现
/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */
var twoSum = function (nums, target) {
    let myMap = Object.create({});
    var index = 0;
    for (var value of nums) {
        if (myMap[target - value] !== undefined) {
            return [myMap[target - value], index]
        }
        myMap[value] = index;
        index += 1;
    }
};

执行用时 :60 ms, 在所有 JavaScript 提交中击败了97.56%的用户

内存消耗 :37.9 MB, 在所有 JavaScript 提交中击败了5.08%的用户

分类
未分类

GIS基础科普1-坐标系与地图投影

北京54坐标系 是参心坐标系 因为原点离国内太远,所以国内使用实际误差较大

西安80坐标系 是参心坐标系 换了一个大地基准面,大地原点设在陕西省泾阳县永乐镇 基准面采用的是青岛验潮站1952年到1979年确定的黄海平均海水面 也叫85高程

国家CGCS2000的坐标系原点 是整个地球的质量中心  也叫地心坐标系  参考椭球参数基本与WGS84椭球体差不多 两个坐标系的坐标精度要求不高的情况下可以直接使用

两个不同的三维空间直角坐标系之间转换时,通常使用七参数模型,需要知道7个未知参数

3个坐标的平移量 3个坐标轴的旋转角度 加上一个尺度因子K 一共七个参数

分类
未分类

deno的初体验-环境安装与第一个程序

denoDeno 的目标是为现代程序员提供一个高效、安全的脚本环境。

它始终以单个可执行文件形态,作为分发文件,并且该可执行文件,足够运行任何 deno 程序。

给定一个 deno 程序的 URL,您应该能够用不超过 50MB 的 Deno 可执行文件,来执行它。

Deno 明确承担运行时,和包管理器的角色。它用标准的浏览器兼容协议,来加载模块:URLs。

Deno 为提供了程序访问系统的安全保证,默认情况下,它是最严格的安全沙盒。Deno 提供一套经过评审(审核)的标准模块这保证了与 Deno 的合作。
windows 下安装Deno 在 OSX、Linux 和 Windows 上工作。deno 是单个二进制可执行文件。它没有外部依赖关系。deno_install提供方便的脚本,来下载和安装二进制文件。

使用 Shell:

$ curl -fsSL https://deno.land/x/install/install.sh | sh

使用 PowerShell:

> iwr https://deno.land/x/install/install.ps1 | iex

使用Scoop(Windows):

scoop install deno


也可以通过github.com/denoland/deno/releases下载 tarball 或 zip 文件,手动安装 deno。这些包只包含一个可执行文件。您必须在 Mac 和 Linux 上,设置可执行的环境变量(PATH)。

安装完成之后初体验
新建一个 helloworld.ts在里面写下

console.log("hello world");

终端中运行

deno run .\helloworld.ts

新建一个 a.ts

export const a = {  name: "i am a",};

在helloworld.ts中引入

import { a } from "./a.ts";
console.log("hello world",a.name);

注意a.ts 的后缀目前版本并不能省略,需要明确写出

先体验到这里,后续在更新

分类
未分类

学习网站记录

项目模板:https://github.com/gothinkster/realworld

博客:V8: https://v8.dev/

Chromium:https://blog.chromium.org/

Google:https://web.dev/blog/

React Dan:https://overreacted.io/

Chrome Manager:https://medium.com/@addyosmani

Google Chrome Developer: https://jakearchibald.com/
Vue: https://zhuanlan.zhihu.com/evanyou

设计模式:https://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

司徒正美:https://www.cnblogs.com/rubylouvre/
Egg:https://www.yuque.com/egg

Taobao: https://fed.taobao.org/blogs/?spm=taofed.homepage.header.3.7eab5ac8VeGZCx

腾讯:http://www.alloyteam.com/page/0/

网易:https://zhuanlan.zhihu.com/musicfe

编码规范 https://github.com/ecomfe/spec
JavaScript权威指南pdf版 http://rjxz7.gds.name/2015/JavaScriptqwzn6.pdf
git 简易指南 http://rogerdudler.github.io/git-guide/index.zh.html
svn 手册 http://svnbook.red-bean.com/nightly/zh/index.html
史上最全设计模式导学目录 https://blog.csdn.net/lovelion/article/details/17517213
koa实战项目教程 https://github.com/ikcamp/koa2-tutorial
博客工具
git book http://www.chengweiyang.cn/gitbook/index.html
vuepress https://www.vuepress.cn/

《CSS选择器》作者 张鑫旭:https://www.zhangxinxu.com/

木易杨前端进阶 https://muyiy.cn/blog/

冴羽 https://github.com/mqyqingfeng/Blog

cesium介绍 http://cesium.marsgis.cn/go.html?id=cesium-started


Vue 相关源码地址:

vue2.0         https://github.com/vuejs/vue

Vue3.0         https://github.com/vuejs/vue-next

Vuex            https://github.com/vuejs/vuex

Vue-Router  https://github.com/vuejs/vue-router

Nuxt             https://github.com/nuxt

LRU缓存机制:

介绍:https://baike.baidu.com/item/LRU

LeetCode:  https://leetcode-cn.com/problems/lru-cache/solution/lru-huan-cun-ji-zhi-by-leetcode/

最佳实践: https://github.com/isaacs/node-lru-cache

Canvas学习 https://827652549.github.io/CanvasStudy/

分类
未分类

JS 排序方法总结

正序排序:

function campare(value1,value2){

if(value1>value2){

return 1;

}else if(value1 == value2){

return 0;}else{

return -1;

}}

降序排序:

function campare(value1,value2){

if(value1<value2){

return 1;}else if(value1 == value2){

return 0;

}else{

return -1;

}}

冒泡排序:

function sort(arr) {

for (let i = 0; i < arr.length – 1; i++) {

for (let j = 0; j < arr.length – 1; j++) {

if (arr[j] > arr[j + 1]) {

let temp = arr[j];

arr[j] = arr[j + 1];

arr[j + 1] = temp;

}

}

}

return arr;

}

分类
未分类

教浏览器说话

function say(text, lang) {
    var synth = speechSynthesis;

    var utter = new SpeechSynthesisUtterance(text);
    utter.voice = synth.getVoices().find(v => v.lang === lang);

    synth.speak(utter)
}

用法示例

say(‘你好’,’zh-CN’);