edeity

edeity 查看完整档案

珠海编辑山东大学  |  软件工程 编辑金山文档(https://www.kdocs.cn)  |  研发工程师 编辑 blog.edeity.me 编辑
编辑

站住!那只猫!

个人动态

edeity 回答了问题 · 4月15日

无数个小项目,合成一个大项目,每个小项目都有单独的package.json需要进行私有安装

是不是可以考虑,仅保留一个package.json,然后通过不同的entryoutput来构建多个小项目?这种方法只需要更改里面的Import相对路径。package.json本身就是用来描述一个项目的。

关注 4 回答 3

edeity 回答了问题 · 4月15日

解决package.json script里写的命令为什么不能单独提出来执行

某种程度来说,是可以的;

比如你全局安装了webpack-dev-server;因为webpack-dev-server可认为是一个程序,系统会根据默认的搜索链,搜索支持这条命令的的入口,比如,在我的电脑上执行:

$ which webpack-dev-server
> /usr/local/bin/webpack-dev-server

可以看到,直接输入webpack-dev-server,实际就相当于一个快捷方式,实际运行的是/usr/local/bin/webpack-dev-server

当然,假如题主电脑无法运行,那只能证明这条命令没有全局安装(不同的电脑寻找的方式会有差异),而npm run会比在shell运行多一个“搜索”,那就是会多“搜索”当前目录的./node_modules的文件,所以题主可以试试./node_modules/webpack-dev-server --line ...

关注 3 回答 2

edeity 回答了问题 · 4月15日

将v-html中的<>尖括号用转义字符替换掉还有被xss攻击的风险吗?

题主有没有想过,把html格式化变成了字符串,那v-html是不是就没用了,手动滑稽~

关注 2 回答 1

edeity 回答了问题 · 4月15日

关于React属性传递和状态合并的问题。

我来尝试回答一下:

Q: 针对问题一,对象(或数组),作为state时,传递的应用,还是拷贝

A: 回答:是引用

Q: 改变对象(会数组)的值时,是如何触发组件更新的

A: 回答:因为传的是引用,新旧state比较时,是浅比较,所以更改对象(或数组)的值时,不能触发更新(即使有其它原因触发了更新,也会更新不及时),也即是不存在“合并”的问题

写一下代码,就知道答案了,举个栗子:


import React, { useState } from 'react';

function App() {

    const [obj1, setObj1] = useState({ a: 1 });
    const [obj2, setObj2] = useState({ a: 2 });

    // 猜猜看obj1会不会实时更新,obj2呢
    return (
        <div className="App">
            <button onClick={() => {
                ++obj1.a; setObj1(obj1)
            }}>点我暴力+1</button>
            <div>{JSON.stringify(obj1)}</div>
            <button onClick={() => {
                let newObj2 = Object.assign({}, obj2);
                ++newObj2.a;
                setObj2(newObj2);
            }}>
                我创建一个新对象 + 1
            </button>
            <div>{JSON.stringify(obj2)}</div>
        </div>
    );
}

export default App;

那么如何触发对象更新呢,在旧的API中,可以通过shouldComponentUpdate中,比较,比如

shouldComponentUpdate(nextProps, nextState) {
    if (JSON.stringfy(this.state.obj) !== JSON.stringfy(nextState.obj)) {
        return true;
    }
}

当然也可以像栗子中直接new一个新对象,强制改变引用,来触发更新,比如

const {obj} = this.state;
let newObj = Object.assign({}, obj);
// array 就 let newArray = [...array]
newObj.a = 1;
this.setState({
    obj: newObj
})

当然,还可以调用React中的forceUpdate强制触发更新;
当然,也可以用一些Immutable的对象(或许这个才是题主想知道的合并吧),来进行性能优化;

不要将React的diff算法和state的比较弄混哦。

——————————————————————

如有错谬,请指出,一起进步~

关注 2 回答 1

edeity 赞了文章 · 2019-05-31

10个有趣的javascript和css库(2019年5月最新)

我们的使命是让您了解最新和最酷的Web开发趋势。这就是为什么我们每个月都会发布一些精选的资源,这些资源是我们偶然发现并认为值得您关注的。

1.Tessaract.js

clipboard.png

强大的javascript(节点和浏览器)库,用于从图像中提取文本。它能自动检测文本的位置和方向,识别60多种语言,包括中文、阿拉伯语和俄语等。

2.OverlayScrollbars

clipboard.png

强大的javascript库,可以改变滚动条的外观,但不改变浏览器原本的性能。它提供了一个支持大量定制特性、可选jquery依赖性和对所有主流浏览器的支持的API文档。

3.mailgo

clipboard.png

自动替换mailto:链接的小库,提供一个漂亮的弹出窗口,支持打开gmail或outlook的链接,提供一个复制电子邮件地址的按钮,以及垃圾邮件保护。

4.React95

clipboard.png

超过30个React组件的集合,采用Windows95的风格。包括日期选择器、按钮、图标、表单输入和更多的复古组件。

5.Reattempt

clipboard.png

用于node.js和浏览器的轻量级库,使异步函数再次成为可能。通过将函数包装在一个Reattempt块中,可以确保请求或其他异步操作在被放弃之前自动运行N次。

6.Medium Zoom

clipboard.png

很棒的javascript库,创建Medium样式的图像缩放组件。具有许多功能强大的功能,支持鼠标和按键控制、SD到HD质量的缩放、60fps动画,等等。

7.Ink

clipboard.png

基于React并用于构建命令行应用程序的框架。提供了一系列的组件,这些组件可以加快开发CLI应用程序的速度,并使得创建具有更高级的布局或者控件工具成为可能。

8.Ola

clipboard.png

强大的图表库,用于实时数字和数据集的动态展示。提供各种图表类型,所有这些图表类型都可以通过超级平滑的动画动态更新。

9.Octotree

clipboard.png

在Github Repos中显示代码树的浏览器扩展,极大地改进了在代码库和开源项目中浏览文件的方式。支持Chrome、Firefox、Safari和Opera浏览器。

10.Cash

clipboard.png

Cash对于浏览器来说是一个非常小的jquery库,它提供了jquery风格的方法来操作DOM。它的目标不是完整的覆盖jquery所有内容,而是关注更常用的方法。

图片描述

查看原文

赞 43 收藏 27 评论 0

edeity 回答了问题 · 2019-05-16

关于javascript的双精度产生的疑问??

关注 2 回答 1

edeity 回答了问题 · 2019-05-16

触摸显示阴影: 手指触摸的地方为起点生成阴影最后铺满整个容器div

EvE,不知道你应用的场景是什么;

我看到你有两个页签,一个是ios,这个不会
一个是小程序,这个是是前端内容,仅仅用CSS就可以实现这个效果:

参考样式:

.waves {
    position: relative;
    //隐藏溢出的径向渐变背景
    overflow: hidden;
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      //设置径向渐变
      background-image: radial-gradient(circle, @deep-blue 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform .3s, opacity .5s;
    }
    &:active:after {
      transform: scale(0, 0);
      opacity: .3;
      //设置初始状态
      transition: 0s;
    }
  }

只要在最外层容器(沾满整个屏幕)添加class='wave'即可
这样 <div style={width: 100vw; height: 100vh} class="waves"></div>

关注 2 回答 1

edeity 回答了问题 · 2019-05-16

http://localhost:8080/#/ 中#表示什么

善用搜索引擎,参考答案:URL的井号

关注 3 回答 2

edeity 回答了问题 · 2019-05-15

制作hexo主题的详情页时文章显示不全?

  1. 你可以看看HTML源码,到底包不包含你的内容,如果包含,是css的问题,修改即可;
  2. 你可以在ejs模板上console.log你的变量,看看是不是原文全部内容
  3. 其他,比如ejs语法的问题,又看不到代码...

我之前试过用了一些hexo插件,导致当内容过多,后续的内容出现乱码的情况,你可以逐步删除一些hexo插件试试

关注 2 回答 1

edeity 回答了问题 · 2019-05-15

Mac系统安装Hexo报了很多错,想请大佬进来帮我看一下。

sudo chown -R ${whoami} ~/ # ${whoami} 特指你计算机用户名
sudo npm uninstall hexo -g
sudo npm install hexo -g

这样试试?

关注 3 回答 2

认证与成就

  • 获得 13 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 2 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-04-11
个人主页被 227 人浏览