<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[hai_xia的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/hai_xia</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; hai_xia]]></copyright><item><title><![CDATA[小程序]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/97752937</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/97752937</guid><author>hai_xia</author><pubDate>Tue, 30 Jul 2019 10:05:18 +0800</pubDate><description><![CDATA[任何情况下，100rpx = 1rem


小程序的作用

1 一种新的产品运营方式，依赖于微信客户端，基于js可以进行开发，多种传播途径（入口场景）,很容易实现用户裂变



小程序的作用

1 开发者工具
注册小程序账号

2.1小程序管理后台
2.2获取Appid （设置–开发设置）
2.3添加多个开发者（设置不同的开发权限）
2.4发布小程序
2.5小程序运维数据
2.6 注意： 一个邮箱...]]></description><category></category></item><item><title><![CDATA[JS原生]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/97751831</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/97751831</guid><author>hai_xia</author><pubDate>Tue, 30 Jul 2019 09:32:26 +0800</pubDate><description><![CDATA[1.字符串操作

Question:
在开发中，我们经常会碰到将abc-xyz这类格式的字符串转为AbcXyz形式的驼峰字符串进行处理， 例如：hello-world我们希望能够变成驼峰风格的HelloWorld，请编写代码实现这个camelize(str)方法

function camelize(str) {
    //补充代码
  var strArr = str.split('-');
...]]></description><category></category></item><item><title><![CDATA[DOM树在内存中的表示及JSX的遍历]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/97751669</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/97751669</guid><author>hai_xia</author><pubDate>Tue, 30 Jul 2019 09:24:02 +0800</pubDate><description><![CDATA[1. DOM遍历

Question:
请用递归的方式遍历树形数据结构中的每一个节点

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        ch...]]></description><category></category></item><item><title><![CDATA[关于promise]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/97751374</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/97751374</guid><author>hai_xia</author><pubDate>Tue, 30 Jul 2019 09:21:04 +0800</pubDate><description><![CDATA[1.图片加载

Question:
实现图片的依次加载和并行加载

// 封装加载图片的promise
let loadImg = (src)=&gt;{
    return new Promise((resolve, reject)=&gt;{
        let img = new Image();
        img.onload = ()=&gt;{
            re...]]></description><category></category></item><item><title><![CDATA[webpack4的简易配置]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/97676984</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/97676984</guid><author>hai_xia</author><pubDate>Mon, 29 Jul 2019 20:25:20 +0800</pubDate><description><![CDATA[实现功能

自动注入js
开发环境热更新
抽离CSS
压缩JS、CSS、Html
第三方非业务依赖包的抽离
公共代码包的抽离
开发环境线上环境的区分
devServer请求拦截
配置别名
es6、scss、图片、字体的加载

package.json
"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --mode...]]></description><category></category></item><item><title><![CDATA[WEBPACK3和WEBPACK4区别]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/97650928</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/97650928</guid><author>hai_xia</author><pubDate>Mon, 29 Jul 2019 16:56:44 +0800</pubDate><description><![CDATA[mode
webpack增加了一个mode配置，只有两种值development | production。对不同的环境他会启用不同的配置。
比如设置mode等于’development’，会将 process.env.NODE_ENV 的值设为 development，开发环境下启用optimization.nameModules（原nameModulesPlugin已经弃用）。设置mode等...]]></description><category></category></item><item><title><![CDATA[介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/97250148</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/97250148</guid><author>hai_xia</author><pubDate>Thu, 25 Jul 2019 11:59:08 +0800</pubDate><description><![CDATA[1. npm 模块安装机制：


发出npm install命令


查询node_modules目录之中是否已经存在指定模块

若存在，不再重新安装
若不存在
- npm 向 registry 查询模块压缩包的网址
- 下载压缩包，存放在根目录下的.npm目录里
- 解压压缩包到当前项目的node_modules目录



2. npm 实现原理
输入 npm install 命令并敲下回车后，...]]></description><category></category></item><item><title><![CDATA[JavaScript 的事件循环]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/97166828</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/97166828</guid><author>hai_xia</author><pubDate>Wed, 24 Jul 2019 21:09:03 +0800</pubDate><description><![CDATA[任务队列
首先我们需要明白以下几件事情：

JS分为同步任务和异步任务
同步任务都在主线程上执行，形成一个执行栈
主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

根据规范，事件循环是通过任务队列的机制来进行协调的。一个...]]></description><category></category></item><item><title><![CDATA[Set、Map、WeakSet 和 WeakMap 的区别？]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/97131202</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/97131202</guid><author>hai_xia</author><pubDate>Wed, 24 Jul 2019 17:17:56 +0800</pubDate><description><![CDATA[set
Set 本身是一种构造函数，用来生成 Set 数据结构。
(1) 成员不能重复
(2)只有键值对，没有键名，有点类似数组。
(3)可以遍历，方法有add, delete,has.
// 去重数组的重复对象
let arr = [1, 2, 3, 2, 1, 1]
[... new Set(arr)]	// [1, 2, 3]



Map
(1) 成员都是对象
(2)成员都是弱引用，随...]]></description><category></category></item><item><title><![CDATA[防抖和节流]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/97130660</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/97130660</guid><author>hai_xia</author><pubDate>Wed, 24 Jul 2019 14:31:05 +0800</pubDate><description><![CDATA[1.防抖
*触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间*


思路 —— 每次触发事件时都取消之前的延时调用方法

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(tim...]]></description><category></category></item><item><title><![CDATA[使用CSS3制作倒影]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/93908761</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/93908761</guid><author>hai_xia</author><pubDate>Thu, 27 Jun 2019 20:43:44 +0800</pubDate><description><![CDATA[-webkit-box-reflect
-webkit-box-reflect仍然是一个非标准属性,目前仅在Chrome、Safari和Opera浏览器下支持,可惜的是在Firefox下并不支持这个属性，不过值得庆幸的是，在Firefox下可以通过element()+svg的mask来模拟实现.
-webkit-box-reflect：none | &lt;direction&gt; &lt;of...]]></description><category></category></item><item><title><![CDATA[redux]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/93896599</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/93896599</guid><author>hai_xia</author><pubDate>Thu, 27 Jun 2019 18:48:19 +0800</pubDate><description><![CDATA[redux
store
Store 是应用状态 state 的管理者，包含下列五个函数：

Store.getState() // 获取整个 state 树
Store.dispatch(action) // 触发 state 改变的state  进行监听
Store.subscribe(listener)  // 可以理解为 DOM 中的 addEventListener
Store.repla...]]></description><category></category></item><item><title><![CDATA[canvas图片合成]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/93895404</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/93895404</guid><author>hai_xia</author><pubDate>Thu, 27 Jun 2019 18:21:24 +0800</pubDate><description><![CDATA[canvas图片合成问题   解决二维码问题
步骤
1.背景图  画图放在onload里  两个onload嵌套
2.上传一张图片
3.toBaseURL-&gt;base64 再次做图片上传  画布污染
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &l...]]></description><category></category></item><item><title><![CDATA[MobX]]></title><link>https://blog.youkuaiyun.com/hai_xia/article/details/93894515</link><guid>https://blog.youkuaiyun.com/hai_xia/article/details/93894515</guid><author>hai_xia</author><pubDate>Thu, 27 Jun 2019 18:12:25 +0800</pubDate><description><![CDATA[mobx
MobX是一个经过实战测试的库，它通过透明地应用功能反应式编程（TFRP）使状态管理变得简单和可扩展，是一个类组件 通过@修饰一个组件。
步骤
1.下包
2.需要导出 npm run eject
3.再package.json里配置babel,支持装饰器语法
4.和react和语法差不多  需要provider进行
@abservable   模块的数据
@action   模块的行为
...]]></description><category></category></item></channel></rss>