ZhengXingchi commented 4 years ago

html字符串正则判断和匹配

参考关于html字符串正则判断和匹配

/<\/?[a-z][\s\S]*>/i这个其实并不能判断标签闭合的完整性或者顺序等，只是判断字符串中是否有html标签(包含自定义标签)，这对我来说足够了。这给正则里面需要学习的就是[\s\S]可以代表一切字符串。

/<([a-z][\s\S]*)>.*<\/\1>/i这个就更加规范一些可以匹配一个完整闭合的标签，\1代表前面的圆括号内捕获的内容，是正则的比较高级的用法。

str = str.replace(/<title>[\s\S]*?<\/title>/, '<title>' + newTitle + '<\/title>');

最好用一个语义化标签或者自定义标签来做匹配，如果使用div这种一段字符串中可能有好多个的，问题会很多。
[sS]*代表任意字符
*后面的?代表非贪婪模式，因为正则匹配默认都是贪婪模式的

ZhengXingchi commented 4 years ago

JS对象根据Key排序

const unordered = {
  'b': 'foo',
  'c': 'bar',
  'a': 'baz'
 };

 console.log(JSON.stringify(unordered));
 // → '{"b":"foo","c":"bar","a":"baz"}'

 const ordered = {};

 Object.keys(unordered).sort().forEach(function(key) {
  ordered[key] = unordered[key];
 });

 console.log(JSON.stringify(ordered));
 // → '{"a":"baz","b":"foo","c":"bar"}'

ZhengXingchi commented 4 years ago

Range Selection

看看Selection的API

var range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

学习js在线html(富文本)编辑器 JS range之保存光标位置,为光标位置添加内容 JS向光标指定位置插入内容前端实现文本框在光标后插入图片 JS Range 对象的使用 Range对象详解 JS Range 对象的使用 js设置光标位置问题 javascript获取以及设置光标位置

ZhengXingchi commented 4 years ago

dom滚动

原生js使dom自动滚动到最底部

react-scroll

ZhengXingchi commented 4 years ago

图片不变形

background

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #imgbox {
                margin: calc(50vh - 250px) auto;
                width: 500px;
                height: 500px;
                background-image: url(https://img-blog.csdnimg.cn/20191113174018452.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
            }
        </style>
    </head>
    <body>
        <div id="imgbox">

        </div>
    </body>
</html>

img居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 50%;
                margin: 50px auto;
            }

            .img-box {
                width: 300px;
                height: 200px;
                overflow: hidden;
                position: relative;
                z-index: 1;
                border: 1px solid red;
            }

            .img-box img {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                margin: auto;
                z-index: -1;
                *zoom: 1;
            }

            .img-box:before {
                content: "";
                display: inline-block;
                padding-bottom: 100%;
                width: 0.1px;
                /*必须要有数值，否则无法把高度撑起来*/
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span>行内元素垂直居中</span>
            <div class="img-box">
                <img src="../images/1555658617201.png" />
            </div>
        </div>
    </body>
</html>

ZhengXingchi commented 4 years ago

颜文字后端识别不了

网上说的解决办法有两种，一是自己转换，而是将数据库编码全部改成utf8mb4。这里介绍的是第二种办法。使用插件：emoji-java

package com.kuyuntech.util;

import com.kuyuntech.aop.ServiceLogAspect;
import com.vdurmont.emoji.EmojiParser;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

public class EmojiConvertUtil {
    private final static Logger log = LoggerFactory.getLogger(ServiceLogAspect.class);

    /**
     * 将emoji字符串转换为数据库中可存储的字符串
     * @param emojiStr
     * @return
     */
    public static String emojiToStr(String emojiStr){
        return EmojiParser.parseToAliases(emojiStr);
    }

    /**
     * 将数据库中的字符串转换为emoji字符串
     * @param str
     * @return
     */
    public static String strToEmoji(String str){
        return EmojiParser.parseToUnicode(str);
    }
}

ZhengXingchi commented 4 years ago

等比例图片缩放

 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>padding-bottom</title>
 6   <style type="text/css" rel="stylesheet">
 7     .wrapper{
 8       width: 100%;
 9       height: 0;
10       /*padding-bottom的值是基于父元素的width来计算的,则padding-bottom=100%/3.75=26.66% */
11       padding-bottom: 26.66%;
12       overflow: hidden;
13     }
14     .content{
15         position: relative;
16         width: 100%;
17     }
18   </style>
19 </head>
20 <body>
21 <div class="wrapper">
22   <!-- 子元素的图片的宽为375px,高为100px,则算出来的宽高比为375/100=3.75 -->
23   <img class="content" src="http://img1.qunarzz.com/piao/fusion/1806/1c/4847ea66072c7b02.jpg_750x200_c32457fb.jpg" alt="图片">
24 </div>
25 </body>
26 </html>

ZhengXingchi commented 4 years ago

正则常用方法

js 正则常用方法

ZhengXingchi commented 4 years ago

egg上传文件file

egg文件上传接收总结

HttpClient

ZhengXingchi commented 4 years ago

react-animation

发现一个不错的库react-spring

ZhengXingchi commented 4 years ago

手势

react-with-gesture

ZhengXingchi commented 4 years ago

查看端口有没有被占用

sudo lsof -i:端口号

ZhengXingchi commented 4 years ago

关于jenkins持续集成

参考jenkins 实现PHP持续集成部署

其中的build.xml可以使用通配符匹配文件

[ERROR: Exception when publishing, exception message [Exec timed out or was interrupted after XXX ms](https://blog.csdn.net/u013066244/article/details/52788407)

ZhengXingchi commented 4 years ago

判断字符串是否为数字

当然可以用正则
除了正则也可以使用isNaN() isNaN() 函数用于检查其参数是否是非数字值。如isNaN("test");返回的是true，而isNaN("123")，则返回false；

ZhengXingchi commented 4 years ago

react-router url参数更新但是页面不更新的解决办法

参考react-router url参数更新但是页面不更新的解决办法

先跳转到一个与当前页面不仅仅是路由参数不同的页面，然后再跳转回来，这样路由跳转了两次。如下所示:

this.props.history.push('/empty'); // 空白页面
setTimeout(() => {
this.props.history.replace(`/hello/${id}`); // 要跳转的页面，其中id为参数
});

第二种方法是使用 componentWillReceiveProps(newProps) 函数，当 props 改变时，我们就可以在该函数中通过 newProps.match.params.id 拿到新的url参数，进而进行更新。如下
```
componentWillReceiveProps(newProps) {
const id = newProps.match.params.id;
// 一些操作
}
```
我个人比较喜欢这种方法但是如果使用这种方法的话，需要注意的一点是：我们可能在react中使用的的组件不止一个，需要执行 componentWillReceiveProps 方法的组件可能是作为子组件存在的。也就是说react-router直接作用的组件是使用 componentWillReceiveProps 组件的父组件这个时候路由参数的改变是监测不到的，为了能够监测到，需要在父组件中把 props 传给子组件,就像这样
```
<Route path="/hello/:id" component={MyHome} />
```

export default class MyHome extends React.Component { constructor(props) { super(props); this.state = { }; }

render() { return ( // react-router当url参数改变时不能自动更新页面，为了url参数改变时能够自动更新 // 在子组件中使用componentWillReceiveProps()，当props改变时会自动调用该函数 // 但是现在url的参数是直接作用在page(当前页面组件)上的，为了让子组件监测到props // 的变化，将props全部传给子组件 <UserInfo {...this.props} /> ); } }

export default class UserInfo extends React.Component { constructor(props) { super(props); this.state = {}; }

componentWillReceiveProps(newProps) { const id = newProps.match.params.id; //一些操作 }

render() { return (

);

} }

ZhengXingchi commented 4 years ago

npm发布

$ nrm ls
* npm ---- https://registry.npmjs.org
  cnpm --- http://r.cnpmjs.org/
  taobao -http://registry.npm.taobao.org/
  eu ----- http://registry.npmjs.eu/
  au -----  http://registry.npmjs.org.au/
  sl ----- http://npm.strongloop.com/
  nj -----  https://registry.nodejitsu.com/
带*的是当前使用的源，上面的输出表明当前源是官方源。

首先需要切换到npm官方源https://registry.npmjs.org，切记不是http://www.npmjs.org/ 如果使用http://www.npmjs.org/ ，npm login的时候会报

Unexpected end of JSON input while parsing near ''

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxx/.npm/_logs/2020-08-24T11_27_44_259Z-debug.log

Unexpected token < in JSON at position 1 while parsing near '
npm ERR! <!doctype html>
npm ERR! <htm...'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxx/.npm/_logs/2020-08-24T11_31_55_283Z-debug.log

npm config get registry npm config set registry https://registry.npmjs.org npm login npm publish npm whoami npm logout 参考npm中文文档

本地生成插件npm包

插件目录执行 npm i npm run build npm pack 就会在本地生成一个 npm 包。回到工程根目录，执行 tnpm i ~/tmp.729/umi-plugin-hello/umi-plugin-hello-0.0.2.tgz 安装上一步产出的 umi 插件 npm 包。（注意：npm 包路径使用全路径。）umi-plugin-hello为插件名称

ZhengXingchi commented 4 years ago

兼容ie

插件dva antd是否添加一个属性targets:ie11就可以了?

ZhengXingchi commented 3 years ago

chrome浏览器调试

参考使用chrome开发者工具中的network面板测量网站网络性能使用chrome开发者工具中的performance面板解决性能瓶颈

ZhengXingchi / ZhengXingchi.github.io

格物院 #96

html字符串正则判断和匹配

JS对象根据Key排序

Range Selection

dom滚动

图片不变形

颜文字后端识别不了

等比例图片缩放

正则常用方法

egg上传文件file

react-animation

手势

查看端口有没有被占用

关于jenkins持续集成

判断字符串是否为数字

react-router url参数更新但是页面不更新的解决办法

npm发布

本地生成插件npm包

兼容ie

chrome浏览器调试

ZhengXingchi / ZhengXingchi.github.io

格物院 #96

html字符串正则判断和匹配

JS对象根据Key排序

Range Selection

dom滚动

图片不变形

颜文字后端识别不了

等比例图片缩放

正则常用方法

egg上传文件file

react-animation

手势

查看端口有没有被占用

关于jenkins持续集成

判断字符串是否为数字

react-router url参数更新 但是页面不更新的解决办法

npm发布

本地生成插件npm包

兼容ie

chrome浏览器调试

react-router url参数更新但是页面不更新的解决办法