<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[runner_123的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/runner_123</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; runner_123]]></copyright><item><title><![CDATA[vue-cli创建一个vue完整项目以及简单的菜单路由跳转]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/112135847</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/112135847</guid><author>runner_123</author><pubDate>Sun, 03 Jan 2021 18:00:56 +0800</pubDate><description><![CDATA[1、给段落的首字母加样式


.contain p:first-child:first-letter {
color: red;
}
.contain p:first-child:first-line {
color: inherit;
}

2、实现一个不停旋转的地球


.rotate{
    animation-name: rotateme;
    animation-duration: 24s;
    animation-iteration-count: infinite;
    anima]]></description><category></category></item><item><title><![CDATA[项目实际开发中知识点整理]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/109955393</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/109955393</guid><author>runner_123</author><pubDate>Sun, 22 Nov 2020 16:12:13 +0800</pubDate><description><![CDATA[一、css篇

1. 对于text-overflow:ellpisis；在flex布局下不生效；

2. @import '../out.less' 这样引入的样式会作用于全局，尽管是写在当前文件的scoped下的

解决办法：在less文件中的最外面套一层自己自定义的唯一的样式，这样里面重名的样式就不会应用到其他页面组件了



二、js篇

1. for in循环用来遍历对象，可以遍历数组，但最好不要，因为遍历数组时会遍历数组原型链的属性；

2.
...]]></description><category></category></item><item><title><![CDATA[d3简单学习]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/108941208</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/108941208</guid><author>runner_123</author><pubDate>Tue, 06 Oct 2020 17:15:45 +0800</pubDate><description><![CDATA[1、d3读取。csv文件，提示访问方式必须以http,https开头的请求方式。

安装http-server

安装后启动项目



2、点击按钮切换数据源（.csv）

需要先清除数据


 d3.select("#bar-1").selectAll("rect").data([]).exit().transition().delay(100).remove(); 

渲染的时候给柱状图添加动画


 bara.selectAll("rect").data(data).enter()
        .]]></description><category></category></item><item><title><![CDATA[vue购物车项目遇到的知识点]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/108566987</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/108566987</guid><author>runner_123</author><pubDate>Sun, 13 Sep 2020 20:59:57 +0800</pubDate><description><![CDATA[1、vue图片静态路径可以加载成功，但是List里面的src属性动态赋值，图片无法显示

解决：require("@/img/xxx.png")

2、路由跳转传递的参数可以是对象吗

可以；使用params传递参数



3、购物车中，点击增加数量，只对当前物品进行小结计算，vue的v-for循环中item中的对象数据的处理怎么挪入computed中来计算。

因为computed不能携带参数，但是需要把当前Index传递进去，去计算金额，使用methods来代替


   getTotalPrice()]]></description><category></category></item><item><title><![CDATA[canvas实现图片压缩]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/105815597</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/105815597</guid><author>runner_123</author><pubDate>Tue, 28 Apr 2020 19:31:30 +0800</pubDate><description><![CDATA[1、 Canvas 的绘图能力，通过调整图片的分辨率或者绘图质量来达到图片压缩的效果，实现思路如下：

获取上传 Input 中的图片对象 File
	将图片转换成 base64 格式
	base64 编码的图片通过 Canvas 转换压缩，这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api，一个调节图片的分辨率的，一个是调节图片压缩质量并且输出的，后续会...]]></description><category></category></item><item><title><![CDATA[异步编程&promise（一）]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/105766460</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/105766460</guid><author>runner_123</author><pubDate>Sun, 26 Apr 2020 13:47:37 +0800</pubDate><description><![CDATA[一、异步编程

首先函数是一等公民，可以作为函数参数或者函数返回值

1、首先举个函数工厂的例子，顾名思义，用来生产函数,这个例子是判断一个变量的类型


function isType(type){
  return function(param){
     return Object.prototype.toString().call(param)==`[object  ${type}]`;...]]></description><category></category></item><item><title><![CDATA[JavaScript经典案例]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/105579332</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/105579332</guid><author>runner_123</author><pubDate>Fri, 17 Apr 2020 15:51:56 +0800</pubDate><description><![CDATA[一、跨浏览器添加事件\移除


function addEvent(eventObj,tyoe,fn){
   if(eventObj.addEventListener){
       eventObj.addEventListener(type,fn,false)
   }else if(eventObj.attachEvent){
       eventObj.attachEvent('o...]]></description><category></category></item><item><title><![CDATA[CSS知识课堂]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/105555128</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/105555128</guid><author>runner_123</author><pubDate>Thu, 16 Apr 2020 14:09:54 +0800</pubDate><description><![CDATA[1、实现背景图片透明，图片之上的文字正常显示



技术点有二：

1、背景图片透明，其上的文字正常显示

2、文字垂直居中显示

分析：文字显示在背景之上，那么给文字的z-index：99；

     文字是不定宽高的，用absolute+transform来实现

难点：发现将中间内容的元素透明度设为0.5，文字也会继承此特性，变为0.5

因此采用：::before伪类来实现
...]]></description><category></category></item><item><title><![CDATA[.txt文件转为json文件，本地json文件读取]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/105289858</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/105289858</guid><author>runner_123</author><pubDate>Fri, 03 Apr 2020 12:01:45 +0800</pubDate><description><![CDATA[最近遇到一个问题，客户给了一个.txt文件，里面有上万条数据，需要从文件中查询数据并进行计算。

1、首先的思路是.txt文件转为.json文件

用fileReader 来对数据进行处理

2、处理后得到一个json数组对象，但是不能每次用到的时候都去读取.txt文件，毕竟里面的数据可不少，还是本地生成一个json文件


function trans(){
    var _FileData...]]></description><category></category></item><item><title><![CDATA[图书销售系统项目知识点总结]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/105028661</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/105028661</guid><author>runner_123</author><pubDate>Sun, 22 Mar 2020 17:18:51 +0800</pubDate><description><![CDATA[1、实现购物车

问题1：点击物品的加减，需要给当前物品的数目变化；因为物品列表是动态增加的，每次点击增加，数目会增加，但是点击下一物品，还是这个物品的数目增加，最后用了一个本办法

给当前元素span一个唯一的ID，通过i来获取


 div1.innerHTML = '&lt;input  type="button" value="-" onClick="less('+i+')"&gt;&lt...]]></description><category></category></item><item><title><![CDATA[Node.js基础实践问题汇总]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/104586731</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/104586731</guid><author>runner_123</author><pubDate>Sun, 01 Mar 2020 09:35:36 +0800</pubDate><description><![CDATA[引言：最近做了一个非常非常非常小的项目实例，奈何在家太菜，吭哧吭哧写了一天半，把这个实现guo过程中遇到的一些边边角角的小问题都记录一下。

1、写NodeJS服务器端的POST/GET请求

（1）通过reques.method判断客户端的请求方式

（2）通过request.url判断客户端的具体请求接口，返回对应字段


  //post方式=》
    var enddate = {};
...]]></description><category></category></item><item><title><![CDATA[学习笔记(06):Node.js进阶教程第一步(基础篇)-node.js教程16_事件机制]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/104443062</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/104443062</guid><author>runner_123</author><pubDate>Sat, 22 Feb 2020 14:09:07 +0800</pubDate><description><![CDATA[本课程从Node.js的安装配置开始，包括函数调用，模块调用，路由，文件操作，异常处理，参数接收，正则表达式，连接数据库，事件等内容，使学员通过十六课时，学习Node.js的基础知识，掌握JS开发服务端的编写方法，了解Node.js的运行机制，为深入学习后期各类框架打好基础。...]]></description><category></category></item><item><title><![CDATA[学习笔记(05):Node.js进阶教程第一步(基础篇)-node.js教程4_路由初步]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/104409038</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/104409038</guid><author>runner_123</author><pubDate>Thu, 20 Feb 2020 13:12:15 +0800</pubDate><description><![CDATA[本课程从Node.js的安装配置开始，包括函数调用，模块调用，路由，文件操作，异常处理，参数接收，正则表达式，连接数据库，事件等内容，使学员通过十六课时，学习Node.js的基础知识，掌握JS开发服务端的编写方法，了解Node.js的运行机制，为深入学习后期各类框架打好基础。...]]></description><category></category></item><item><title><![CDATA[学习笔记(03):如何学好webpack4.0？-配置文件-入口出口]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/104315555</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/104315555</guid><author>runner_123</author><pubDate>Fri, 14 Feb 2020 17:13:09 +0800</pubDate><description><![CDATA[webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。...]]></description><category></category></item><item><title><![CDATA[迭代器模式]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/104105917</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/104105917</guid><author>runner_123</author><pubDate>Wed, 29 Jan 2020 12:47:18 +0800</pubDate><description><![CDATA[1、概念：迭代器模式是指提供提供一种方法顺序访问一个聚合对象中的各个元素。

比如，JQuery中的$.each()函数，这属于内部迭代器，由于迭代规则已经被提前规定。

外部迭代器必须显式地请求迭代下一个元素。

2、迭代器的应用举例


 //需要上传一个文件，先得看浏览器是否有对应的上传控件，没有则看是否支持flash插件，不支持则使用最原始的浏览器表单上传
        var getU...]]></description><category></category></item><item><title><![CDATA[模板方法模式和职责链模式]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/104075405</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/104075405</guid><author>runner_123</author><pubDate>Thu, 23 Jan 2020 13:34:10 +0800</pubDate><description><![CDATA[一、模板方法模式

1、模板方法模式，基于继承的设计模式，由两部分组成，抽象父类和具体实现子类。

2、例子Coffe 和 Tea


//创建抽象类 -- 饮料
     function Beverage(){}
     Beverage.prototype.boilWater = function(){
         console.log("把水煮沸")
     }
     //...]]></description><category></category></item><item><title><![CDATA[适配器模式和组合模式]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/103988758</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/103988758</guid><author>runner_123</author><pubDate>Wed, 15 Jan 2020 15:21:43 +0800</pubDate><description><![CDATA[一、适配器模式

1、作用：主要解决两个软件实体间接口不兼容的问题

2、实例

（1）地图渲染的适配


//谷歌和百度地图的渲染地图调用的方式不一样
        var googleMap = {
            show: function () {
                console.log('开始渲染谷歌地图')
            }
        }
 ...]]></description><category></category></item><item><title><![CDATA[发布-订阅模式]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/103972751</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/103972751</guid><author>runner_123</author><pubDate>Tue, 14 Jan 2020 16:29:45 +0800</pubDate><description><![CDATA[一、核心概述

发布订阅模式主要包含三大块：缓存数组、订阅、发布

缓存数组
			一个数组[]
		订阅
			往数组里面压入函数fn
		发布
			里面循环遍历数组，然后执行数组中的函数。
		二、简单代码实现及改进

（1）实现


  var subpub = {};
  subpub.cache = [];
  subpub.subscribe = function(fn){
    ...]]></description><category></category></item><item><title><![CDATA[单例模式、策略模式]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/103891289</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/103891289</guid><author>runner_123</author><pubDate>Thu, 09 Jan 2020 12:37:30 +0800</pubDate><description><![CDATA[一、单例模式

1、概念

保证一个类仅有一个实例，并提供一个访问它的全局访问点

2、单例模式的实现 -- 以创建div节点为例


var createDiv = (function(){
    var instance;
    var createDiv = function(html){
        if(instance){
            return instance...]]></description><category></category></item><item><title><![CDATA[layui项目知识点总结]]></title><link>https://blog.youkuaiyun.com/runner_123/article/details/103480575</link><guid>https://blog.youkuaiyun.com/runner_123/article/details/103480575</guid><author>runner_123</author><pubDate>Tue, 10 Dec 2019 21:42:03 +0800</pubDate><description><![CDATA[1、input单选框——获取选中值和设置选中值

需求：修改数据段时候，需要先去取到用户类型，然后让单选框对应的值选中。

原生js获取选中值 &amp; 设置选中值


//获取
if(document.getElementById("reserve_yes").checked){
    reserve=yes;
}
else if(document.getElementById("reser...]]></description><category></category></item></channel></rss>