<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[sk_yi的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/sk_yi</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; sk_yi]]></copyright><item><title><![CDATA[简单安装一个自己的脚手架]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/108413075</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/108413075</guid><author>sk_yi</author><pubDate>Fri, 04 Sep 2020 23:16:47 +0800</pubDate><description><![CDATA[yo命令
官网地址：https://yeoman.io/yo
yeoman 制作脚手架命令
安装
npm install -g yo
yo  命令的作用是制作脚手架命令
yo --version 查看版本号

制作脚手架
*generater-generator 可以制作脚手架工具
npm install -g generator-generator

生成脚手架工具
yo gennerator-脚手架名称

制作中配置项目解释

脚手架创建成功

将自己的工程代码放入到脚手架中
1更改pack.json文]]></description><category></category></item><item><title><![CDATA[vue中的钩子函数]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107802997</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107802997</guid><author>sk_yi</author><pubDate>Tue, 04 Aug 2020 23:00:29 +0800</pubDate><description><![CDATA[钩子函数 定义
    每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做**生命周期钩子**的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期图示

钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在]]></description><category></category></item><item><title><![CDATA[前端能力中台化之路—Fusion Design 成长史(下)]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107646048</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107646048</guid><author>sk_yi</author><pubDate>Tue, 28 Jul 2020 21:42:54 +0800</pubDate><description><![CDATA[4.FusionCool的诞生
新的问题
在完成Fusion Next + 配置平台体系之后,逐渐开始接入实际的项目中使用。前端工程师很开心,因为不用去投入开发组件库和调整还原度。可是业务方的设计师用的不开心了。凭空增加他们的工作量却没有帮他们提效。
下图是设计领域很受欢迎的软件 Sketch。左边是默认样式的设计素材,一般由组件开发团队对外提供。右边是修改过样式后的组件。虽然在配置平台可以很方便的调整组件样式。可是在Sketch中,设计师要把左边样式的 Button 调整为橙色圆角 Button ,至少需]]></description><category></category></item><item><title><![CDATA[前端能力中台化之路—Fusion Design 成长史(中)]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107419171</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107419171</guid><author>sk_yi</author><pubDate>Fri, 17 Jul 2020 22:21:12 +0800</pubDate><description><![CDATA[3.Fusion Design 成长历程
Fusion Next &amp; 样式配置平台
为了解决多业务多样式的问题,我们自己独立维护了一套组件库 Fusion Next。然后为这套组件库打造了一个配置平台。二者结合就是一个组件库工厂,可以生产出各种样式的组件库。
效果如图所示:

实现Fusion Next &amp; 样式配置平台的核心技术点有三个。


变量抽取


规则实现


动态渲染


接下来一一讲述。
变量抽取
变量抽取就是决定一个组件哪些量是可以配置,那些量不可以配置,可以配置的量抽离出]]></description><category></category></item><item><title><![CDATA[前端能力中台化之路—Fusion Design 成长史(上)]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107396834</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107396834</guid><author>sk_yi</author><pubDate>Thu, 16 Jul 2020 23:05:26 +0800</pubDate><description><![CDATA[1.浅谈中台
在开始正文内容之前,先简单聊聊“中台”这个词。
首要要说的是“中台”这个词中台非常火,从去年下半年到现在,互联网届多家知名大公司都公布组织架构调整,纷纷表示要建立各种中台。
另一方面,“中台”这个词暂时还没有一个很学术很权威的定义。笔者在知网搜索“中台”,前8页都没有看到任何一家商学院或者经管学院发表和“中台”有关的论文。
所以这里只能基于笔者自己的理解简单聊聊“中台”。

以战争做一个比喻。上图是《红海行动》中的一张剧照。其中黄景瑜饰演的狙击手和恐怖分子对狙的那场现在还是印象深刻。那么我方狙]]></description><category></category></item><item><title><![CDATA[微前端]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107349939</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107349939</guid><author>sk_yi</author><pubDate>Tue, 14 Jul 2020 23:12:09 +0800</pubDate><description><![CDATA[在 toB 的前端开发工作中，我们往往就会遇到如下困境：

工程越来越大，打包越来越慢
团队人员多，产品功能复杂，代码冲突频繁、影响面大
内心想做 SaaS 产品，但客户总是要做定制化

不同的团队可能有不同的方法去解决这些问题。在前端开发日新月异、前端工程化蓬勃发展的今天，我想给大家介绍下另一种尝试——微前端。
微前端是什么
那什么是微前端？微前端主要是借鉴后端微服务的概念。简单地说，就是将一个巨无霸（Monolith）的前端工程拆分成一个一个的小工程。别小看这些小工程，它们也是“麻雀虽小，五脏俱全”，完]]></description><category></category></item><item><title><![CDATA[js中冒泡和捕获/阻止冒泡和捕获事件]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107326653</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107326653</guid><author>sk_yi</author><pubDate>Mon, 13 Jul 2020 22:44:54 +0800</pubDate><description><![CDATA[JavaScript中捕获/阻止捕获、冒泡/阻止冒泡
　　事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape，但是前者提出的是我们常用的事件冒泡流，而后者提出的是事件捕获流。
第一部分：事件冒泡
　　即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。
　　下面举一个简单的例子：
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt]]></description><category></category></item><item><title><![CDATA[js轮播图的切换]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107239642</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107239642</guid><author>sk_yi</author><pubDate>Thu, 09 Jul 2020 22:46:38 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        *{
            pad]]></description><category></category></item><item><title><![CDATA[原生js实现按钮改变颜色其他颜色不变的操作]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107215832</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107215832</guid><author>sk_yi</author><pubDate>Wed, 08 Jul 2020 22:02:13 +0800</pubDate><description><![CDATA[这个使用预设置类名再添加
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
            .]]></description><category></category></item><item><title><![CDATA[js 闭包与垃圾回收机制的理解]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107116773</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107116773</guid><author>sk_yi</author><pubDate>Fri, 03 Jul 2020 22:37:33 +0800</pubDate><description><![CDATA[一.垃圾回收机制

JavaScript自动回收不再使用的变量,释放其所占的内存,开发人员不需要手动的做垃圾回收的处理.
垃圾回收机制只会回收局部变量.全局变量并不会被回收(全局变量在浏览器关闭之后会回收),所有当我们定义了一个全局对象时,使用完毕之后,最好给它重新复制为null,以便释放其所占的内存(这个变量并没有被回收,只是改变了他的志向,减少内存占用)
目前浏览器基本都使用标记清除(介绍…)的方式,还有一种不常见的引用计数(介绍…)方式

1.标记清除:
　　当某个变量不再被使用时,该变量就会被回收.]]></description><category></category></item><item><title><![CDATA[js常见的错误抛出信息]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107113445</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107113445</guid><author>sk_yi</author><pubDate>Fri, 03 Jul 2020 19:42:16 +0800</pubDate><description><![CDATA[1.  SyntaxError：语法错误
// 1.1 变量名不符合规范
var 1                          // Uncaught SyntaxError: Unexpected number
var 1a                         // Uncaught SyntaxError: Invalid or unexpected token

// 1.2 给关键字赋值
function = 5                   // Uncaught Syn]]></description><category></category></item><item><title><![CDATA[js中的回调函数的简单理解]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107070810</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107070810</guid><author>sk_yi</author><pubDate>Wed, 01 Jul 2020 19:53:55 +0800</pubDate><description><![CDATA[一、前奏
在谈回调函数之前，先看下下面两段代码：
不妨猜测一下代码的结果。
function say (value) {
    alert(value);
}
alert(say);
alert(say('hi js.'));

如果你测试了，就会发现：

1、只写变量名  say   返回的将会是 say方法本身，以字符串的形式表现出来。
2、而在变量名后加()如say()返回的就会使say方法调用后的结果，这里是弹出value的值。

二、js中函数可以作为参数传递
再看下面的两段代码：
functi]]></description><category></category></item><item><title><![CDATA[js的预编译解析]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107028665</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107028665</guid><author>sk_yi</author><pubDate>Mon, 29 Jun 2020 21:09:58 +0800</pubDate><description><![CDATA[一、js运行三部曲：
1.语法分析（通篇扫描看有没有语法错误）
2.预编译
3.解释执行
二、预编译前奏
1、imply global 暗示全局变量：任何变量如果未经声明就赋值，此变量为全局对象所有
eg: a = 123;
var a = b =123;
2、一切声明的全局变量，全是window的属性，一切定义在全局上的变量，都归window所有（window等价于全局）
eg:    console.log(a)   等价于  console.log(window.a);
举个例子：
&lt;scrip]]></description><category></category></item><item><title><![CDATA[js的数组排序方法]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/107028444</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/107028444</guid><author>sk_yi</author><pubDate>Mon, 29 Jun 2020 20:58:18 +0800</pubDate><description><![CDATA[1. JavaScript的sort()方法
var array = [1,4,-8,-3,6,12,9,8];
function compare(val1,val2){
    return val1-val2;
};
array.sort(compare);
document.write(array);


sort()方法按照升序排列数组项，会调用每个数组项的toString()转型方法，然后比较得到的字符串。
toString()方法是把布尔值或BooleanObject转换为字符串，并返回结果。
]]></description><category></category></item><item><title><![CDATA[JavaScript字符串常用api]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/106932931</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/106932931</guid><author>sk_yi</author><pubDate>Tue, 23 Jun 2020 21:57:14 +0800</pubDate><description><![CDATA[常用的一些字符串操作 API 整理
1.str.charAt(index)、str.charCodeAt(index) - 返回指定位置的字符 / 字符编码(0~65535)
　　index - 必须，表示字符串中某个位置的数字，即字符在字符串中的下标，从 0 开始。
　　charAt(index)，如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。
　　charCodeAt(index)，如果 index 是负数，或大于等于字符串的长度，则 charCodeA]]></description><category></category></item><item><title><![CDATA[JavaScript数组常用的api方法]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/106932631</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/106932631</guid><author>sk_yi</author><pubDate>Tue, 23 Jun 2020 21:40:17 +0800</pubDate><description><![CDATA[在此对js中数组常用的api进行汇总。
1.检测数组：判断value是否为数组类型
Array.isArray(arr);

2.转换方法：将数组colors转化成以逗号分隔的字符串
alert(colors.toString());

3.栈、队列方法：分别实现先进先出、后进先出的效果。
var a=[1,2,3,4];
a.push(5);//[1, 2, 3, 4, 5]
a.shift();//[2, 3, 4, 5]
a.pop();//[2, 3, 4]
a.unshift(0);//[0, 2]]></description><category></category></item><item><title><![CDATA[css如何实现三角形的方法]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/106872118</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/106872118</guid><author>sk_yi</author><pubDate>Sat, 20 Jun 2020 14:41:39 +0800</pubDate><description><![CDATA[在开发页面的时候，遇到很多的列表都需要用到箭头，可以直接用图片作背景铺垫，纯CSS也能实现，并且没有兼容性顾虑，不用CSS3,相比而言，比图片更好用。
原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了
梯形代码：

 div{
            width: 50px;
            height: 50px;
            border: 50px solid transparent;
        ]]></description><category></category></item><item><title><![CDATA[js中数据类型的判断的方法]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/106864018</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/106864018</guid><author>sk_yi</author><pubDate>Fri, 19 Jun 2020 21:35:16 +0800</pubDate><description><![CDATA[1: typeof
返回数据类型，包含这7种： number、boolean、symbol、string、object、undefined、function。
typeof null   返回类型错误，返回object
引用类型，除了function返回function类型外，其他均返回object。
其中，null 有属于自己的数据类型 Null ， 引用类型中的 数组、日期、正则 也都有属于自己的具体类型，而 typeof 对于这些类型的处理，只返回了处于其原型链最顶端的 Object 类型，没有错，但]]></description><category></category></item><item><title><![CDATA[js运算符的使用]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/106841363</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/106841363</guid><author>sk_yi</author><pubDate>Thu, 18 Jun 2020 19:15:17 +0800</pubDate><description><![CDATA[一、算术运算符（+、-、*、/、%）
1、“+”分为字符相加和数值相加

2、“-”、“*”、“/”、“%”都是隐式转换为数值运算，

二、赋值运算（+=、-=、*=、/=、%=）
赋值运算就是在原数据的基础上进行累加，累减等操作。

三、一元运算符
a++和++a 的区别：运算以后a 的值没有区别。
a++的结果是a的值，++a的结果是a+1以后的值。
s=i++是把i给s然后i再+1；
s=++i是把i+1以后的值给s;
四、关系运算（&gt;、&gt;=、&lt;、&lt;=、==、===）
隐式转为]]></description><category></category></item><item><title><![CDATA[github命令操作]]></title><link>https://blog.youkuaiyun.com/sk_yi/article/details/106769605</link><guid>https://blog.youkuaiyun.com/sk_yi/article/details/106769605</guid><author>sk_yi</author><pubDate>Mon, 15 Jun 2020 19:36:01 +0800</pubDate><description><![CDATA[1.创建一个新的repository：
先在github上创建并写好相关名字，描述。
$cd ~/hello-world        //到hello-world目录,本地目录名与repository的名字不一定相同
$git init                    //初始化
$git add .                  //把所有文件加入到索引（不想把所有文件加入，可以用gitignore或add 具体文件)
gitcommit//提交到本地仓库，然后会填写更新日志(−m“更新日志”]]></description><category></category></item></channel></rss>