<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[SunShinessx的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/SunShinessx</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; SunShinessx]]></copyright><item><title><![CDATA[从有赞UI组件库看CSS BEM命名规范的好处]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/105891995</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/105891995</guid><author>SunShinessx</author><pubDate>Sat, 02 May 2020 16:41:26 +0800</pubDate><description><![CDATA[1.什么是BEM命名规范？

文字定义不说，看dem0:



解释：

block 代表了更高级别的抽象或组件。
	.block__element 代表.block的后代，用于形成一个完整的.block的整体。
	.block--modifier代表.block的不同状态或不同版本。
用bem命名的好处是：

1.规定。适合前端团队的CSS写法规范化。

2.既然是规范，就特别适合阅读，让CSS...]]></description><category></category></item><item><title><![CDATA[《人性的弱点》阅读心得1]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/105881965</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/105881965</guid><author>SunShinessx</author><pubDate>Fri, 01 May 2020 20:25:37 +0800</pubDate><description><![CDATA[1.人性的弱点一：每个人都希望得到对方的尊重。由于这个弱点，导致与人争论的时候，要尽量避免跟对方争执。要学会先认可对方的观点，先语气平缓，试着站在对方的角度。然后在此基础上再试着表达自己的观点，希望对方可以试着思考一下，表达对对方理解的感谢。



通过这一人性弱点，让我明白，很多时候，争论胜利如果不是目的的话，让对方“赢得”争论反而才是真正的赢。才有可能让对方从心底去思考你的观点，甚至接受你的...]]></description><category></category></item><item><title><![CDATA[编译原理复习第一篇]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/105870793</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/105870793</guid><author>SunShinessx</author><pubDate>Thu, 30 Apr 2020 22:24:03 +0800</pubDate><description><![CDATA[1.编译原理的“前端”和“后端”

“前端”指的是编译器对程序代码的分析和理解过程。它通常只跟语言的语法有关，跟目标机器无关。而与之对应的“后端”则是生成目标代码的过程，跟目标机器有关。整个编译过程简要，如图：



2.
...]]></description><category></category></item><item><title><![CDATA[js防抖和节流]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/101350007</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/101350007</guid><author>SunShinessx</author><pubDate>Wed, 25 Sep 2019 10:37:48 +0800</pubDate><description><![CDATA[这篇文章不错：

https://www.cnblogs.com/momo798/p/9177767.html

https://mp.weixin.qq.com/s/Vkshf-nEDwo2ODUJhxgzVA


]]></description><category></category></item><item><title><![CDATA[Vue 实现的递归组件如何向外传递事件和数据]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/100860419</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/100860419</guid><author>SunShinessx</author><pubDate>Sun, 15 Sep 2019 18:48:44 +0800</pubDate><description><![CDATA[一.递归组件向外传递数据直接用$emit是无法实现的。因为是递归的原因。

2.解决方法：

1方法1：:用provide,inject方法实现。这种实现方法是实现爷爷组件和孙子组件通信的常用方法之一。但是逻辑上，爷爷组件和孙子组件之间是有耦合关系。如果组件封装需要尽量实现解耦，这种方式是有缺点的。



2.方法2：用eventBus实现：这种方法用在兄弟组件之间通信很常见。当然也可以用在爷爷...]]></description><category></category></item><item><title><![CDATA[git stash详解]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/97135452</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/97135452</guid><author>SunShinessx</author><pubDate>Wed, 24 Jul 2019 15:34:41 +0800</pubDate><description><![CDATA[参考：

https://blog.youkuaiyun.com/stone_yw/article/details/80795669
]]></description><category></category></item><item><title><![CDATA[JavaScript shell安装]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/93163883</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/93163883</guid><author>SunShinessx</author><pubDate>Fri, 21 Jun 2019 10:00:12 +0800</pubDate><description><![CDATA[1.

http://ftp.mozilla.org/pub/firefox/nightly/latest-oak/下载需要的安装包并解压；

2.

将jsshell-win64如E:\software\jsshell-win64配置到系统的环境变量下，即可直接打开cmd运行js代码（打开cmd后输入js就可以进行运行了）。




编写一个Js文件。然后用js shell执行




...]]></description><category></category></item><item><title><![CDATA[webpack4 常用配置]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90665103</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90665103</guid><author>SunShinessx</author><pubDate>Wed, 29 May 2019 09:37:34 +0800</pubDate><description><![CDATA[参考：

http://www.imooc.com/article/287156




]]></description><category></category></item><item><title><![CDATA[React 和 Vue的区别]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90579514</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90579514</guid><author>SunShinessx</author><pubDate>Sun, 26 May 2019 20:06:19 +0800</pubDate><description><![CDATA[一.共同点

都是mvvm 框架，都是数据和视图分离，修改视图，不是通过直接修改，而是通过修改数据来驱动视图变化。这是MVVM框架区别于jq直接操作dom的区别。
Vue修改数据：this.data = newVal这种形式就可以修改。而React 需要通过setState来修改



2.两者在模板渲染的实现上都是使用VNode的思想。

Vue的template最终解析成一个render函...]]></description><category></category></item><item><title><![CDATA[对JS深拷贝浅拷贝的理解]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90551045</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90551045</guid><author>SunShinessx</author><pubDate>Sat, 25 May 2019 20:24:00 +0800</pubDate><description><![CDATA[这篇文章写得很好：

https://www.cnblogs.com/echolun/p/7889848.html



总结：1.深拷贝浅拷贝只有在拷贝引用类型的时候才有这个概念。2在实际工作中，深拷贝的考虑是无处不在的，在拷贝对象的时候，一般无论目前是一层引用，还是引用里面还有引用，都直接用深拷贝。3.


JSON.stringify,JSON.parse这种方法使用起来很简单。对比直接写...]]></description><category></category></item><item><title><![CDATA[微信小程序使用echart层级问题（IOS）]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90483277</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90483277</guid><author>SunShinessx</author><pubDate>Thu, 23 May 2019 16:44:05 +0800</pubDate><description><![CDATA[问题场景：

在开发小程序的时候，用到了echart。echart是用canvas画的。在小程序里面层级是最高的。所以出现了这个问题：



而实际图是这样的：



也就是说手指滑动图表的时候。整个图会上滑动。

问题原因：

页面中布局用了fixed。而ios在fixed上的坑就是：层级高的只要触摸滑动，层级低的内容就会跟着滑动。

通常解决方法是：

层级高的加catchtouchmove=...]]></description><category></category></item><item><title><![CDATA[如何理解javascript的原型链]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90481451</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90481451</guid><author>SunShinessx</author><pubDate>Thu, 23 May 2019 15:35:57 +0800</pubDate><description><![CDATA[对于原型链的理解：

1.js实现封装继承的方法。

2.关键点:构造函数生成的实例对象的__proto__指向构造函数的protorype属性。利用这个特点，js实现了构造函数的数据与方法共享给实例对象。 

Instanceof 的原理也是原型链。

ES6的 class只是语法糖，本质还是原型链的实现方式。



原型链的图：



js实现 面向对象编程方式的demo:


functi...]]></description><category></category></item><item><title><![CDATA[前端性能优化之图片]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90342565</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90342565</guid><author>SunShinessx</author><pubDate>Sun, 19 May 2019 15:22:18 +0800</pubDate><description><![CDATA[图片优化既是一门艺术，也是一门科学，图片优化是一门艺术，是因为单个图片的压缩不存在最好的特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。

优化方法总结：

1.能不用图片解决的就不用

备选技术

CSS效果、CSS动画。提供与分辨率无关的效果，在任何分辨率和...]]></description><category></category></item><item><title><![CDATA[Vue源码阅读笔记(三) VNode]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90319368</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90319368</guid><author>SunShinessx</author><pubDate>Sat, 18 May 2019 19:39:42 +0800</pubDate><description><![CDATA[VNode的结构：


export interface VNode {
  tag?: string;
  data?: VNodeData;
  children?: VNode[];
  text?: string;
  elm?: Node;
  ns?: string;
  context?: Vue;
  key?: string | number;
  componentOptio...]]></description><category></category></item><item><title><![CDATA[Vue源码阅读笔记(二) vue实例挂载$mount]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90319166</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90319166</guid><author>SunShinessx</author><pubDate>Sat, 18 May 2019 19:17:13 +0800</pubDate><description><![CDATA[vue实例创建的最后一步是$mount。



$mount的核心是mountComponent。




mountComponent的核心思路：生成一个updateComponent函数，updateComponent用于生成一个虚拟Dom树，然后执行_update函数。mountComponentupdateComponent会传给mountComponent还生成一个Watcher对象，u...]]></description><category></category></item><item><title><![CDATA[Vue源码阅读笔记(一)new Vue 实例]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90318499</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90318499</guid><author>SunShinessx</author><pubDate>Sat, 18 May 2019 18:10:08 +0800</pubDate><description><![CDATA[一.new Vue 发生了什么？

很简单：初始化传入的options,生成一个vue实例

function Vue (options) {

this._init(options)

}



二._init做了什么？


Vue.prototype._init = function (options) {
  var vm = this;
  // a uid
  vm._uid = ...]]></description><category></category></item><item><title><![CDATA[实现一个简单的类 Vue 框架（二） —— 数据的绑定之修改可监听的数据绑定方法]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90298772</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90298772</guid><author>SunShinessx</author><pubDate>Fri, 17 May 2019 19:32:43 +0800</pubDate><description><![CDATA[Vue是MVVM框架，也就是M（数据）的变化能够驱动V（模板）的变化，所以数据修改可响应的实现是一个关键点。实现数据变化可响应的方法很多，事件驱动，广播，订阅等方法，而Vue使用的是js的原生API Object.defineProperty。这种实现方法的优点是：实现简单。缺点是：只能兼容到IE9以上。



针对上一篇文章：https://blog.youkuaiyun.com/SunShinessx...]]></description><category></category></item><item><title><![CDATA[实现一个简单的类 Vue 框架（一） —— 数据的绑定之简单粗暴方法]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90293626</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90293626</guid><author>SunShinessx</author><pubDate>Fri, 17 May 2019 15:12:10 +0800</pubDate><description><![CDATA[Vue框架的核心概念一个是数据绑定，一个是虚拟Dom;先实现数据绑定。本框架命名为Sue。旨在模拟实现一个类Vue

一.最简单粗暴的数据绑定方法

要点：1.call的使用。2.for in

代码：


/* 最简单粗暴的数据绑定 */
function Sue(options) {
    initData(this,options)
    if (typeof options.read...]]></description><category></category></item><item><title><![CDATA[如何debug Vue源码]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90289525</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90289525</guid><author>SunShinessx</author><pubDate>Fri, 17 May 2019 11:16:04 +0800</pubDate><description><![CDATA[1.首先用Vue-cli或者直接构建webpack引入带compile 版本的Vue。让vue项目可以跑起来。项目可以很简单，最主要是跑起来即可

2.其次，查看webpack alias 配置：



这里说明我们在import vue的时候，引入的vue源文件是在哪里：从webpack配置中可以看出，vue是引入node_modules的Vue--&gt;dist--&gt;vue.esm....]]></description><category></category></item><item><title><![CDATA[css实现不占大小的边框]]></title><link>https://blog.youkuaiyun.com/SunShinessx/article/details/90269684</link><guid>https://blog.youkuaiyun.com/SunShinessx/article/details/90269684</guid><author>SunShinessx</author><pubDate>Thu, 16 May 2019 18:47:40 +0800</pubDate><description><![CDATA[问题场景：点击item加边框，加打钩。



出现的问题：点击之前在同一行，点击后变成两行。

这里如果用border来实现边框，最后还是会出现挤下来的情况，因为border会占大小，而且这里不能用box-sizing，因为item的宽度

不固定。所以用box-shadow: 0 0 0 4rpx #03A9F4 来实现。不占大小的边框。
...]]></description><category></category></item></channel></rss>