lllllxt_in_sf

lllllxt_in_sf 查看完整档案

珠海编辑  |  填写毕业院校远光软件  |  前端工程师 编辑填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

lllllxt_in_sf 赞了文章 · 2月25日

实时最新中国省市区县街道级geoJSON格式地图数据Echarts地图数据联动数据下载

发现个可以免费下载全国 geojson 数据的网站,推荐一下。支持全国、省级、市级、区/县级、街道/乡镇级以及各级的联动数据

geojson 数据下载地址:https://hxkj.vip/demo/echartsMap/

该项目 github 地址:https://github.com/TangSY/echarts-map-demo,喜欢的话,可以给个star哦

一、通过API接口,实时获取最新中国省市区县街道级乡镇级geoJSON格式地图数据,可用于Echarts地图展示

image
image

二、通过获取到的数据整理了一系列联动数据,每天自动更新,免费下载

image

查看原文

赞 2 收藏 0 评论 0

lllllxt_in_sf 关注了问题 · 2020-11-09

benchmark是什么东西?

benchmark是什么东西? 看到好多项目里面都有一个benchmark

关注 4 回答 2

lllllxt_in_sf 关注了问题 · 2020-10-22

vue+less 页面和系统自定义主题怎么样做?

@import './theme.less';

.theme();
@background-color:#373e41;

.theme-blue{
.theme(#3355aa, #4371e2, #ebebeb, #e5e5e5, rgba(0,0,0,0.1), rgba(67,113,226,0.1), rgba(67,113,226,0.3));//默认的样式
@background-color:#000
}
像这样可以切换,但是组件内也有样式,就不好改,
如果改配置文件的话,体验就差点了

关注 3 回答 0

lllllxt_in_sf 回答了问题 · 2020-10-21

vue中 如何让data里面的一个对象失去响应式,都有哪些方法?

为什么会有这么另类的需求?

关注 3 回答 2

lllllxt_in_sf 发布了文章 · 2020-09-27

浏览器标签页之间通信之 -- Localstorage+IndexedDB

推荐一个最近写的工具 @lllllxt/storage-idb-message,用于同源下浏览器标签之间的通讯, 相比纯用Localstorage做通讯,这个插件可以传递更大的数据。

文档:

storage-idb-message

基于 LocalStorage + IndexedDB 封装的消息传递的模块,在同源(不跨域)的前提下,用于同一页面多个 iframe、跨 tab 页面、移动端不同 webview 页面之间的消息传递

做这玩意的初衷

本来我是只用 LocalStorage 做消息传递的, 但后来某次在 Chrome 上传递的数据>5M 导致数据丢失,于是乎就有了用 LocalStorage 做指令,IndexedDB 做数据存储这个想法了

参考:

LocalStorage 储存空间在 2.5MB 到 10MB 之间(各家浏览器不同),而 IndexedDB 比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。

通过 npm 安装

npm i @lllllxt/storage-idb-message
import StorageIdbMessage from '@lllllxt/storage-idb-message'

const StorageIdbMessage = request('@lllllxt/storage-idb-message')

const _SIM = new StorageIdbMessage(opts: Opts)

// 监听指令
_SIM.response = (orderName, data) => {
    console.log(orderName, data)
})

// 发送指令
_SIM.send(YourOrder, AnyData)

通过<script>标签引用

storage-idb-message.min.js

此方法是向 window 对象中注册一个 StorageIdbMessage 对象

参数(Opts)

参数描述
storageKey指令的 LocalStorage key 名称
clearIdb默认 true,是否在 response 后清除 IndexedDB 的数据
force默认 false,调用 clearCache 清除缓存

方法

方法描述
send(order: String, data: any)发送
response(order: String, data: any)响应其他页面传过来的指令

静态方法

方法描述
clearCache(successFn?: Function, errFn?: Function)清除 indexedDB 缓存

BTW ------------------------------------

由于开发初衷是为了在vue工程上使用, 于是同时也写了基于这个工具开发的vue插件 @lllllxt/vue-storage-idb-message

查看原文

赞 0 收藏 0 评论 0

lllllxt_in_sf 发布了文章 · 2020-09-17

webpack4 + babel7 配置ie兼容

有一说一, IE真是让人头大?‍♂️?‍♂️
以下只给出如何配置, 如果想了解更多请查看文末传送门

安装:
npm i @babel/polyfill -S
npm i @babel/preset-env @babel/plugin-transform-runtime -D

// 根据babel.config.json中corejs 2 / 3, 自行选择安装 @babel/runtime-corejs2 或 @babel/runtime-corejs3
npm i @babel/runtime-corejs3 -D
webpack.config.js
 entry: {
  main: ['@babel/polyfill', './main.js']
 }
babel.config.json
"presets": ["@babel/preset-env"],
"plugins": [
    [
        "@babel/plugin-transform-runtime",
        {
            "corejs": 3
        }
    ] 
]

----------------------- 顺便说一下 ------------------------

开发环境下, 在ie上可能一片空白, 有以下三种方案

  1. build后在ie上调试 [ 可行, 但太麻烦了 ]
  2. devServer inline设置成false [ 可行, 但是iframe模式下, HRM会失效, 需要手动刷新页面 ]
  3. 降低devServer版本到@2.11.1 [ 没试过 ]

再说一遍, IE真真真是让人头大 ???

相关资料转送:
@babel/polyfill
@babel/plugin-transform-runtime
preset-env与plugin-transform-runtime 使用及场景区别

查看原文

赞 1 收藏 1 评论 0

lllllxt_in_sf 赞了文章 · 2020-09-17

@babel/preset-env 与@babel/plugin-transform-runtime 使用及场景区别

之前在用babel 的时候有个地方一直挺晕的,@babel/preset-env@babel/plugin-transform-runtime都具有转换语法的能力, 并且都能实现按需 polyfill ,但是网上又找不到比较明确的答案, 趁这次尝试 roullp 的时候试了试.

如果我们什么都不做, 没有为babel 编写参数及配置, 那babel 并没有那么大的威力, 它什么都不会做, 正是因为各个预设插件的灵活组合、赋能, 让 babel 充满魅力, 创造奇迹

首先是 @babel/preset-env

@babel/preset-env

这是一个我们很常用的预设, 几乎所有的教程和框架里都会让你配置它, 它的出现取代了 preset-es20** 系列的babel 预设, 你再也不需要繁杂的兼容配置了。 每出一个新提案就加一个? 太蠢了。

有了它, 我们就可以拥有全部, 并且! 它还可以做到按需加载我们需要的 polyfill。 就是这么神奇。
但是吧, 它也不是那么自动化的, 如果你要是不会配置,很有可能就没有用起它的功能

不管怎么养, 首先试一下,眼见为实

首先创建一个 index.js ,内容如下, 很简单

function test() {
  new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
console.log(arr)

然后我们在根目录下创建一个 .babelrc文件, 帮我们刚刚说的预设加进去

{
  "presets": [
    ["@babel/preset-env"]
  ]
}

然后我我们打包一下(这里我用的是roullup)

看一下产出的结果
2019-12-03-21-00-52

我们可以看到, 它babel帮我们做了这几件事情:

  1. 转换箭头函数
  2. const 变为 var

奇怪, 为什么 babel 不帮我们转换 map ? 还有 promise 这些也都是es6的特性呀

嗯~,会不会是我们的目标浏览器不对, babel 觉得不需要转换了, 会不会是这样, 那我们加一个 .browserslistrc 试一下

那就。让我们在根目录下创建一个 .browserslistrc
2019-12-03-21-06-54

好。现在让我们再打包一次.
2019-12-03-21-07-43

咦, 没什么效果。 跟刚刚一样啊。 说明不是目标浏览器配置的问题, 是babel 做不了这个事。

因为默认 @babel/preset-env 只会转换语法,也就是我们看到的箭头函数、const一类。
如果进一步需要转换内置对象、实例方法,那就得用polyfill, 这就需要你做一点配置了,

这里有一个至关重要的参数 "useBuiltIns",他是控制 @babel/preset-env 使用何种方式帮我们导入 polyfill 的核心, 它有三个值可以选

entry

这是一种入口导入方式, 只要我们在打包配置入口 或者 文件入口写入 import "core-js" 这样一串代码, babel 就会替我们根据当前你所配置的目标浏览器(browserslist)来引入所需要的polyfill 。

像这样, 我们在 index.js 文件中加入试一下core-js

// src/index.js
import "core-js";
function test() {
  new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
console.log(arr)

babel配置如下

[
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

当前 .browserslistrc 文件(更改目标浏览器为 Chrome 是为了此处演示更直观,简洁), 我们只要求兼容 chrome 50版本以上即可(当下最新版本为78)

Chrome > 50

那打包后如何呢?
2019-12-03-21-46-14

恐怖如斯啊,babel把我们填写的 import "core-js"替换掉, 转而导入了一大片的polyfill, 而且都是一些我没有用到的东西。

那我们提升一下目标浏览器呢? 它还会导入这么多吗?
此时, 我们把目标浏览器调整为比较接近最新版本的 75(当下最新版本为78)

// .browserslistrc

Chrome > 75

此刻打包后引入的 polyfill 明显少了好多。
2019-12-03-21-51-46

但同样是我们没用过的。
这也就是印证了上面所说的, 当 useBuiltIns 的值为 entry 时, @babel/preset-env 会按照你所设置的目标浏览器在入口处来引入所需的 polyfill,
不管你需不需要。

如此,我们可以知道, useBuiltIns = entry 的优点是覆盖面积就比较广, 一股脑全部搞定, 但是缺点就是打出来的包就大了多了很多没有用到的 polyfill, 并且还会污染全局

useage

这个就比较神奇了, useBuiltIns = useage 时,会参考目标浏览器(browserslist) 和 代码中所使用到的特性来按需加入 polyfill

当然, 使用 useBuiltIns = useage, 还需要填写另一个参数 corejs 的版本号,

core-js 支持两个版本, 2 或 3, 很多新特性已经不会加入到 2 里面了, 比如: flat 等等最新的方法, 2 这个版本里面都是没有的, 所以建议大家用3

此时的 .babelrc

{
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

此时的 index.js


function test() {
  new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
const hasNumber = (num) => [4, 5, 6, 7, 8].includes(num)
console.log(arr)
console.log( hasNumber(2) )

此时的 .browserslistrc

> 1%
last 10 versions
not ie <= 8

打包后:
2019-12-03-22-59-03

nice ,够神奇, 我们用的几个新特性真的通通都加上了

这种方式打包体积不大,但是如果我们排除node_modules/目录,遇上没有经过转译的第三方包,就检测不到第三方包内部的 ‘hello‘.includes(‘h‘)这种句法,这时候我们就会遇到bug

false

剩下最后一个 useBuiltIns = false , 那就简单了, 这也是默认值 , 使用这个值时不引入 polyfill

@babel/runtime

这种方式会借助 helper function 来实现特性的兼容,
并且利用 @babel/plugin-transform-runtime 插件还能以沙箱垫片的方式防止污染全局, 并抽离公共的 helper function , 以节省代码的冗余

也就是说 @babel/runtime 是一个核心, 一种实现方式, 而 @babel/plugin-transform-runtime 就是一个管家, 负责更好的重复使用 @babel/runtime

@babel/plugin-transform-runtime 插件也有一个 corejs 参数需要填写

版本2 不支持内置对象 , 但自从Babel 7.4.0 之后,拥有了 @babel/runtime-corejs3 , 我们可以放心使用 corejs: 3 对实例方法做支持

当前的 .babelrc

{
  "presets": [
    ["@babel/preset-env"]
  ],
  "plugins": [
    [ 
      "@babel/plugin-transform-runtime", {
        "corejs": 3
      }
    ]
  ]
}

当前的 index.js

function test() {
  new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
const hasNumber = (num) => [4, 5, 6, 7, 8].includes(num)
console.log(arr)
console.log( hasNumber(2) )

打包后如下:
2019-12-04-00-01-39

我们看到使用 @babel/plugin-transform-runtime 编译后的代码和之前的 @babel/preset-env 编译结果大不一样了,
它使用了帮助函数, 并且赋予了别名 , 抽出为公共方法, 实现复用。 比如它用了 _Promise 代替了 new Promise , 从而避免了创建全局对象

上面两种方式一起用会怎么样

useage 和 @babel/runtime

useage 和 @babel/runtime 同时使用的情况下比较智能, 并没有引入重复的 polyfill

个人分析原因应该是: babel 的 plugin 比 prset 要先执行, 所以preset-env 得到了 @babel/runtime 使用帮助函数包装后的代码,而 useage 又是检测代码使用哪些新特性来判断的, 所以它拿到手的只是一堆 帮助函数, 自然没有效果了

实验过程如下:

当前index.js


function test() {
  new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
const hasNumber = (num) => [4, 5, 6, 7, 8].includes(num)
const hasNumber2 = (num) => [4, 5, 6, 7, 8, 9].includes(num)
console.log(arr)
console.log( hasNumber(2))
console.log( hasNumber2(3) )

当前 .babelrc

{
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    [ 
      "@babel/plugin-transform-runtime", {
        "corejs": 3
      }
    ]
  ]
}

打包结果:

2019-12-04-00-23-24

entry 和 @babel/runtime

跟 useage 的情况不一样, entry 模式下, 在经过 @babel/runtime 处理后不但有了各种帮助函数还引入了许多polyfill, 这就会导致打包体积无情的增大

个人分析: entry 模式下遭遇到入口的 import "core-js" 及就立即替换为当前目标浏览器下所需的所有 polyfill, 所以也就跟 @babel/runtime 互不冲突了, 导致了重复引入代码的问题, 所以这两种方式千万不要一起使用, 二选一即可

实现过程如下:

当前 index.js:

import "core-js"
function test() {
  new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
const hasNumber = (num) => [4, 5, 6, 7, 8].includes(num)
const hasNumber2 = (num) => [4, 5, 6, 7, 8, 9].includes(num)
console.log(arr)
console.log( hasNumber(2))
console.log( hasNumber2(3) )

当前 .babelrc

{
  "presets": [
    ["@babel/preset-env", 
      {
        "useBuiltIns": "entry"
      }
    ]
  ],
  "plugins": [
    [ 
      "@babel/plugin-transform-runtime", {
        "corejs": 3
      }
    ]
  ]
}

当前 .browserslistrc 的目标版本(为了减少打包后的文件行数为又改为chrome 了, 懂那个意思就行)

Chrome > 70

打包结果:

2019

总结

  1. @babel/preset-env 拥有根据 useBuiltIns 参数的多种polyfill实现,优点是覆盖面比较全(entry), 缺点是会污染全局, 推荐在业务项目中使用

    • entry 的覆盖面积全, 但是打包体积自然就大,
    • useage 可以按需引入 polyfill, 打包体积就小, 但如果打包忽略node_modules 时如果第三方包未转译则会出现兼容问题
  2. @babel/runtime 在 babel 7.4 之后大放异彩, 利用 corejs 3 也实现了各种内置对象的支持, 并且依靠 @babel/plugin-transform-runtime 的能力,沙箱垫片和代码复用, 避免帮助函数重复 inject 过多的问题, 该方式的优点是不会污染全局, 适合在类库开发中使用

    上面 1, 2 两种方式取其一即可, 同时使用没有意义, 还可能造成重复的 polyfill 文件

查看原文

赞 38 收藏 17 评论 15

lllllxt_in_sf 赞了回答 · 2020-04-08

iview Date-picker 点击报“$attrs is readonly”错误

iview实际使用的vue版本和你项目实际的vue版本不同造成的问题, 解决办法是安装相同版本的vue. 另外: vue-template-compiler 这个插件也安装和vue相同版本的.

关注 9 回答 5

lllllxt_in_sf 赞了回答 · 2020-04-01

echarts是否支持添加图标(图片图标)

echarts中可以用rich自定义富文本样式如果没用下载最新echarts 4
富文本标签
实例


为啥两年过去了还有人踩我。。
不对吗?
更加准确的例子

image.png

关注 4 回答 1

lllllxt_in_sf 关注了问题 · 2020-03-16

echarts是否支持添加图标(图片图标)

以echart雷达图为例,设置如下:

indicator: [{
        name: '消费信息',
        max: 1000,
        color: '#7be3ff'
    },
    {
        name: '社交信息',
        max: 1000,
        color: '#7be3ff'
    },
    {
        name: '通讯信息',
        max: 1000,
        color: '#7be3ff'
    },
    {
        name: '身份信息',
        max: 1000,
        color: '#7be3ff'
    },
    {
        name: '信用历史',
        max: 1000,
        color: '#7be3ff'
    }
]

效果如图:
图片描述

现想增加自定义图标像下图这样,是否echarts有支持?
图片描述

关注 4 回答 1

lllllxt_in_sf 回答了问题 · 2020-02-07

vue模糊查询

你的写法只查了第一层
应先递归重组成一维数组(提高性能), 再使用你的方法就好

模拟代码:

function rebuildData(data){
  const result = []
  function 递归(data){
    for (const item of data) {
      if(item.name)result.push({id:item.id,name:item.name});
      if(item.child && item.child.length>0) {递归(item.child)}
    }
  }
  递归(data)
  return result
}

var rData = rebuildData(datas)
var kw = '蕉'
console.log('=====debug=====',rData.filter(v=>v.name.includes(kw)));

关注 4 回答 3

lllllxt_in_sf 发布了文章 · 2020-02-05

解决windows下安装electron 8.0.0 在node install.js卡住的问题

编辑器: VS Code

问题

npm i electron -D 的时候一直卡在 node install.js 这一步, 搜索引擎找了许多方案都无法解决,比如:修改镜像源、修改.npmrc文件、修改host等,在 electron@8.0.0 中均不适用, 唯一能用的是文章中第四个解决方案,但感觉还是太麻烦了,于是撸了下electron@8.0.0中install.js的源码,找到如下两个办法

方案一

  • 卡在 node install.js 时 ctrl+c 退出进程
  • cd node_modules/electron && code install.js (打开install.js)
  • 修改代码如下图,下方附代码image.png
  • 最后 cd node_modules/electron && node install.js (手动安装electron)
mirrorOptions:{
  mirror:'https://npm.taobao.org/mirrors/electron/',
  customDir:'8.0.0',
  // customFilename:'electron-8.0.0-win32-x64.zip'
}

这个方案在其他文章中也有所提及,只是版本不同,修改的参数不同了

方案二

  • 使用命令行工具修改环境变量(每次打开命令行工具都要重新赋值环境变量)
#添加/修改环境变量
#cmd
set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
set ELECTRON_CUSTOM_DIR=8.0.0
#powershell
$env:ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
$env:ELECTRON_CUSTOM_DIR="8.0.0"
#删除环境变量
#cmd
set ELECTRON_MIRRO=
set ELECTRON_CUSTOM_DIR=
#powershell
del env:ELECTRON_MIRROR
del env:ELECTRON_CUSTOM_DIR
  • 不想敲命令行就: 右键(此电脑) -> 属性 -> 高级系统设置 -> 环境变量...(永久的,但vscode中的命令行工具可能会获取不到)
  • 然后直接安装即可 npm i electron -D

方案三

在vscode的setting.json中添加如下设置

"terminal.integrated.env.windows":{
    "ELECTRON_MIRROR":"https://npm.taobao.org/mirrors/electron/",
    "ELECTRON_CUSTOM_DIR":"8.0.0"
}

使用vscode的朋友,建议使用”方案三“~

(方案二、三适用于 electron-packager 打包卡住的问题)
timg - 副本.jpg

查看原文

赞 2 收藏 1 评论 0

lllllxt_in_sf 提出了问题 · 2019-08-27

ie11在打开开发者工具状态下无法加载flash, activeX等

操作系统: win10
浏览器: ie11 ( 注册表: HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main "TabProcGrowth"=0 )

在没打开f12(开发者工具)时, 可以正常加载flash, avtiveX64等插件,
一打开f12, 刷新页面, 就不正常了, 报错如图, 已装最新版Flash Player

clipboard.png

关注 2 回答 1

lllllxt_in_sf 提出了问题 · 2019-08-27

ie11在打开开发者工具状态下无法加载flash, activeX等

操作系统: win10
浏览器: ie11 ( 注册表: HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main "TabProcGrowth"=0 )

在没打开f12(开发者工具)时, 可以正常加载flash, avtiveX64等插件,
一打开f12, 刷新页面, 就不正常了, 报错如图, 已装最新版Flash Player

clipboard.png

关注 2 回答 1

lllllxt_in_sf 回答了问题 · 2019-01-30

axios使用拦截器设置Authorization字段不生效怎么回事?

确定state.token是true的?

关注 2 回答 1

lllllxt_in_sf 回答了问题 · 2019-01-07

解决关于vue自定义事件的命名问题

自定义事件用kebab-case, 自定义属性用camelCased

关注 6 回答 4

lllllxt_in_sf 关注了问题 · 2019-01-07

vue 组件发布到npm后,Failed to mount component

问题描述

用vue-cli 3创建了组件,发布到npm,后引用时报错:
Failed to mount component: template or render function not defined.

相关代码

hellocomp.js

export default {
  name: 'HelloComp',

  render(h) {
    return (
      <div class="h-comp">
        Hello from Component
      </div>
    )
  }
}

index.js

import HelloComp from './hellocomp.js'

HelloComp.install = function(Vue, options = {}) {
  Vue.component(HelloComp.name, HelloComp)
}

if (typeof window !== 'undefined' && window.Vue) {
  Vue.component(HelloComp.name, HelloComp)
}

export default HelloComp

webpack.config.js

module.exports = {
  entry: './src/index.js',
  ...

然后npm publish,
在项目中引用Test.vue

<template>
    <div>
      <hello-comp />
    </div>
</template>

import HelloComp from 'hello-comp'

@Component({
  components: {
    HelloComp 
  }
})
export default class Test extends Vue {
  ...

启动后,就在console看到如下错误

[Vue warn]: Failed to mount component: template or render function not defined.

具体是哪里出了问题吗?
如果不发布到npm,直接放在项目中,是正常的

关注 2 回答 0

lllllxt_in_sf 回答了问题 · 2018-12-27

解决将两组数组连接,将各剩余的数组元素放入一个新的数组中?

var _a = a.flat();
var c = b.map((v,k) => [[_a[k]],v])
var d = [_a.splice(b.length)]

关注 4 回答 4

lllllxt_in_sf 赞了回答 · 2018-12-27

解决将两组数组连接,将各剩余的数组元素放入一个新的数组中?

var c = [];
var _a = c.concat.apply(c, a);
var length = b.length;
for (var i = length; i--;) c.unshift([[_a[i]], b[i]]);
var d = [_a.slice(length)];
console.log(c, d);

关注 4 回答 4

lllllxt_in_sf 回答了问题 · 2018-12-27

解决websocket用原生写可以,但是用socket.io-client会报错?

socket.io和WebSocket 有点不一样, 要用socket.io后端也要用socket.io

关注 2 回答 2