<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[HELLO WORD]]></title><description><![CDATA[to be a better developer]]></description><link>https://blog.youkuaiyun.com/Seven521m</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Seven521m]]></copyright><item><title><![CDATA[如何在scss中巧妙的使用js变量]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/129874314</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/129874314</guid><author>Seven521m</author><pubDate>Fri, 31 Mar 2023 10:39:29 +0800</pubDate><description><![CDATA[随着前端开发技术的不断发展，scss 和 js 之前的壁垒逐渐打破，而双方的变量互用也极大地便利了我们的开发。]]></description><category></category></item><item><title><![CDATA[前端工程化-多维度检测重复代码]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/128776175</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/128776175</guid><author>Seven521m</author><pubDate>Sat, 28 Jan 2023 11:24:36 +0800</pubDate><description><![CDATA[关于前端工程化之如何进行多维度检测重复代码的学习简录]]></description><category></category></item><item><title><![CDATA[纯css实现虚点线渐变效果]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/122684383</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/122684383</guid><author>Seven521m</author><pubDate>Tue, 25 Jan 2022 14:15:14 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

实现思路：
渐变背景色+与背景色相同的边框虚点线+background-origin设置背景图定位
效果图：

代码：
&lt;!--虚点线元素容器--&gt;
body {
    background-color: #636465;
    position: relative;
    height: 100vh;
}

.demo {
    width: 200px;
    height:.]]></description><category></category></item><item><title><![CDATA[Vue组件自我调用，实现递归展示]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/121384280</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/121384280</guid><author>Seven521m</author><pubDate>Wed, 17 Nov 2021 18:35:29 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

相信大家开发过程中都曾遇到过以下这种类型的数据：
dataList:[
    {
        name:'名称1',
        children:[
            {
                name:'名称1-1'
                children:[
                    {
                        name:.]]></description><category></category></item><item><title><![CDATA[分享一个类优惠券样式-带内圆角，带阴影]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/117085764</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/117085764</guid><author>Seven521m</author><pubDate>Thu, 20 May 2021 17:43:42 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

在前端日常开发排版布局过程中，虽然万物都可切图搞定，但是难免会不太灵活，所以针对一些不太常见的设计样式，如下图这种类似优惠券的一种样式，如果能有方式在代码层面搞定，尽量还是不要选择切图了。

乍一看感觉也没什么难度，仔细一看，才发现事情并不简单。
通常想要实现这种内圆角的效果，首先想到的就是使用背景渐变来实现，但这边比较麻烦的点在于，不规则的内圆角下面的阴影。
进过一番尝试，最终使用drop-shad.]]></description><category></category></item><item><title><![CDATA[vue+storybook构建过程及问题记录]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/113516741</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/113516741</guid><author>Seven521m</author><pubDate>Mon, 01 Feb 2021 14:43:28 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

Storybook是一个开源UI开发工具，能够有效的可视化项目组件，便于组件复用，避免重复造轮子。
最近刚接触到这个工具，觉得很有意思，于是决定写个demo实践一下。之前创建过一个关于echarts的实例仓库，要是早些时候接触storybook，也许就可以用这个方法来实现了，之后有机会可以考虑重构一下。
因为目前工作的技术栈多是围绕着Vue，所以这里的记录针对 storybook for vue
创建.]]></description><category></category></item><item><title><![CDATA[关于String.replaceAll()兼容性问题]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/113125641</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/113125641</guid><author>Seven521m</author><pubDate>Mon, 25 Jan 2021 17:29:27 +0800</pubDate><description><![CDATA[之前在项目中维护同事代码，发现部分浏览器及低版本Chrome浏览器都出现报错情况。

排查发现是由于replaceAll()函数兼容性问题所导致

解决方案

利用splite()和join()

let str = '2021.01.25'//要将其转换成2021-01-25
console.log(str.split('.').join('-'))//2021-01-25



使用replace()代替

let str = '2021.01.25'//要将其转换成2021-01-25
console]]></description><category></category></item><item><title><![CDATA[axios跨域问题小记]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/111275088</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/111275088</guid><author>Seven521m</author><pubDate>Wed, 16 Dec 2020 14:58:00 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

问题描述：
后端设置了允许跨域，前端访问接口时依旧提示跨域


原因：
设置axios实例时，设置了withCredentials:true.
let myHttp = axios.create({
    baseURL: env.apiPath,
    timeout: 30000,
    headers: {
        'Content-Type': `application/json.]]></description><category></category></item><item><title><![CDATA[获取渐变色的中间色值]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/111034666</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/111034666</guid><author>Seven521m</author><pubDate>Fri, 11 Dec 2020 14:26:03 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/


需求场景：一个进度条渐变色块，使用标签表明当前进度，标签背景色要与当前位置色值统一。


思路：
根据渐变的两个色值，计算得到两个色值中间100个色值列表，根据百分比，取对应的色值。
代码：
//css
.gradientDiv{
	width: 300px;
	height: 10px;
	background: linear-gradient(90deg,#FAD961,#F76B1C);
	p.]]></description><category></category></item><item><title><![CDATA[echart实例仓库（基于vue）]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/110438827</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/110438827</guid><author>Seven521m</author><pubDate>Tue, 01 Dec 2020 16:36:36 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

对于一个在大数据公司搬砖的前端，这几年除了地图，遇到最多的就是各种图表的需求了。基本上Echart作为一个图表库，已经能满足绝大多数项目中的图表需求了。BUT～常规的配置基本是无法满足产品大大们高端的品味的，So～难免也会遇到一些个性化的配置需求。
可能也是年纪大了，不太好，你们也知道，一些特别个性化的配置频率是很低的，基本也是配完一次就丢在那边了，等到下次突然发现有个类似的配置需求时，作为一个程序员.]]></description><category></category></item><item><title><![CDATA[横向上下交错时间线列表布局]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/109000306</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/109000306</guid><author>Seven521m</author><pubDate>Sat, 10 Oct 2020 16:56:26 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

分享一个横向上下交错时间线列表布局

完整代码
&lt;template&gt;
&lt;div class="timelineBox-wrap"&gt;
    &lt;div class="timelineBox" id="box"&gt;
        &lt;div class="timeline-up"&gt;
            &lt;div
                :cl.]]></description><category></category></item><item><title><![CDATA[JS原生date对象的实际应用，满满的干货！]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/108872246</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/108872246</guid><author>Seven521m</author><pubDate>Tue, 29 Sep 2020 17:19:28 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

Date对象用于处理日期和时间
一、new Date()
默认状态下，new Date()会返回当前日期和时间，格式如下
var date = new Date() //Tue Sep 29 2020 16:38:00 GMT+0800 (中国标准时间)

创建特定的时间，传参如下：

new Date(“month dd,yyyy hh:mm:ss”);
new Date(“month dd,yyy.]]></description><category></category></item><item><title><![CDATA[toLocaleString也太好用了吧！（超方便转千分位，中文数字等）]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/108866881</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/108866881</guid><author>Seven521m</author><pubDate>Tue, 29 Sep 2020 13:42:48 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

基本概念
目前，我查找了一下，下面三种数据类型都可以使用toLocaleString的方法

number.toLocaleString([locales [, options]])：返回这个数字在特定语言环境下的表示字符串
array.toLocaleString([locales [, options]])：返回一个字符串表示数组中的元素
date.toLocaleString([locales .]]></description><category></category></item><item><title><![CDATA[字节跳动笔试之解答篇]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/108848224</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/108848224</guid><author>Seven521m</author><pubDate>Mon, 28 Sep 2020 13:58:47 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

看见一篇博文，列出了博主关于字节跳动的线上面试题：https://blog.youkuaiyun.com/handsomezhanghui/article/details/108691314，针对这些题目，我试着做了以下解答，以供参考。（部分解答参考网上其他资料）
题一
问题：
把下面的纯文整理为3行4列
aaaa "dd"  f g;fd分
1 "2dd"     113 512
   q 'w'  er,-/.]]></description><category></category></item><item><title><![CDATA[关于gitbook构建的第一本书：业务代码干货宝典]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/108357692</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/108357692</guid><author>Seven521m</author><pubDate>Wed, 02 Sep 2020 10:43:13 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

关于为何会构建这本书：
起因是对于开发过程中一些复用率比较高的代码片段，每次遇到都要想着去之前项目中出现的地方，进行参考复用，时间久了，找起来就很麻烦，于是准备在github建一个仓库，用来整理存放一些常用的代码干货。
仓库建完搁置一段时间，想到之前希望自己平时的写作也有像github一样的仓库进行管理，于是去了解到了gitbook，后来写作方面一直也没有什么进展，于是也是搁置。
于是两件事碰撞到一起.]]></description><category></category></item><item><title><![CDATA[关于clientHeight，offsetHeight，scrollHeight ，offsetTop，scrollTop...想要搞清楚，看这一篇就够了！]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/108106182</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/108106182</guid><author>Seven521m</author><pubDate>Wed, 19 Aug 2020 17:37:15 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

网上关于clientHeight， offsetHeight，scrollHeight…的相关文章其实很多，整理这篇文章的主要目的还是在于加深一下自己对于这些元素的记忆，每次用到的时候，总是模棱两可的，需要再去查阅一下，希望自己总结之后，彻底把这几种height搞明白！

以height为例，width相关方法与其相同

详细列举
除了各种height所代表的具体值容易把人搞晕之外，js和jquery.]]></description><category></category></item><item><title><![CDATA[代码大全2——变量名的力量知识点总结！]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/107939995</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/107939995</guid><author>Seven521m</author><pubDate>Tue, 11 Aug 2020 17:18:42 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

前言：
你是否在开发过程中随心所欲的进行变量命名？
作为一个码龄差不多四五年的程序员，在开发过程中常常要面对各种类、变量、函数的命名。
虽然这些年也差不多也逐渐形成了一些个人风格的命名规则，但并没有成一个比较规范的系统，因此很多时候还是比较随心的。
最近看了《代码大全2》中变量名的力量一章，于是把书中的知识点挑出了一些列了出来。
相信，对于有一定经验的程序员，可以帮助重新审视自己的日常编码习惯，从而改.]]></description><category></category></item><item><title><![CDATA[elementUI的cascader级联选择控件使用采坑：设置默认值回显问题解决方案（亲测有效！）]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/107716734</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/107716734</guid><author>Seven521m</author><pubDate>Fri, 31 Jul 2020 16:44:05 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

记录一个刚刚遇到的问题，以及解决方法。希望可以帮助之后遇到同样问题的小伙伴们！
问题描述
使用elementui的级联选择控件，并需要对其设置默认值，以及修改默认值时，发现问题：
先贴出相关核心代码如下：
&lt;el-cascader
    ref="locationCascader"
    v-model="location"
    placeholder="省份/城市/区域"
    :o.]]></description><category></category></item><item><title><![CDATA[Vue多页面+单页应用集合的项目配置开源~]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/107530815</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/107530815</guid><author>Seven521m</author><pubDate>Thu, 23 Jul 2020 10:30:18 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

近两年因为公司的业务主要都是toB的，因此工作内容也都是偏定制，系统化的一些中小型产品，大多也都是一个产品一个仓库。
年前写了一个小项目，当初构建项目的时候也是纯粹把它当成一个独立产品去做的，结果今年被产品告知，年前的那个项目，现在要追加几个子项目，最终集成一个系列项目，并且要求代码放在一起，统一管理。这就比较尴尬了，工期又比较紧，所以重构项目架构也不是太现实，最后权衡之下，也就只能采取配置路由的下策.]]></description><category></category></item><item><title><![CDATA[多node版本控制工具：nvm]]></title><link>https://blog.youkuaiyun.com/Seven521m/article/details/107100765</link><guid>https://blog.youkuaiyun.com/Seven521m/article/details/107100765</guid><author>Seven521m</author><pubDate>Fri, 03 Jul 2020 10:41:49 +0800</pubDate><description><![CDATA[更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

有时候，不同的项目对于node版本的要求不同，如何快捷的控制我们电脑的node版本就成了我们需要考虑的问题
这里记录一下我平常使用的node版本控制工具：nvm

nvm is a version manager for node.js, designed to be installed per-user, and invoked per-shell. nvm works on any POSIX-c.]]></description><category></category></item></channel></rss>