hai_xia-CSDN博客

原创小程序

任何情况下，100rpx = 1rem 小程序的作用 1 一种新的产品运营方式，依赖于微信客户端，基于js可以进行开发，多种传播途径（入口场景）,很容易实现用户裂变小程序的作用 1 开发者工具注册小程序账号 2.1小程序管理后台 2.2获取Appid （设置–开发设置） 2.3添加多个开发者（设置不同的开发权限） 2.4发布小程序 2.5小程序运维数据 2.6 注意：一个邮箱...

2019-07-30 10:05:18 263

原创 JS原生

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

2019-07-30 09:32:26 275

原创 DOM树在内存中的表示及JSX的遍历

1. DOM遍历 Question: 请用递归的方式遍历树形数据结构中的每一个节点 const options = [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', label: 'Hangzhou', ch...

2019-07-30 09:24:02 496

原创关于promise

1.图片加载 Question: 实现图片的依次加载和并行加载 // 封装加载图片的promise let loadImg = (src)=>{ return new Promise((resolve, reject)=>{ let img = new Image(); img.onload = ()=>{ re...

2019-07-30 09:21:04 281

原创 webpack4的简易配置

实现功能自动注入js 开发环境热更新抽离CSS 压缩JS、CSS、Html 第三方非业务依赖包的抽离公共代码包的抽离开发环境线上环境的区分 devServer请求拦截配置别名 es6、scss、图片、字体的加载 package.json "scripts": { "dev": "webpack-dev-server", "build": "webpack --mode...

2019-07-29 20:25:20 261

mode webpack增加了一个mode配置，只有两种值development | production。对不同的环境他会启用不同的配置。比如设置mode等于’development’，会将 process.env.NODE_ENV 的值设为 development，开发环境下启用optimization.nameModules（原nameModulesPlugin已经弃用）。设置mode等...

2019-07-29 16:56:44 1191

原创介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？

1. npm 模块安装机制：发出npm install命令查询node_modules目录之中是否已经存在指定模块若存在，不再重新安装若不存在 - npm 向 registry 查询模块压缩包的网址 - 下载压缩包，存放在根目录下的.npm目录里 - 解压压缩包到当前项目的node_modules目录 2. npm 实现原理输入 npm install 命令并敲下回车后，...

2019-07-25 11:59:08 1700

原创 JavaScript 的事件循环

任务队列首先我们需要明白以下几件事情： JS分为同步任务和异步任务同步任务都在主线程上执行，形成一个执行栈主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。根据规范，事件循环是通过任务队列的机制来进行协调的。一个...

2019-07-24 21:09:03 183

原创 Set、Map、WeakSet 和 WeakMap 的区别？

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)成员都是弱引用，随...

2019-07-24 17:17:56 1380 1

原创防抖和节流

1.防抖 *触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间* 思路 —— 每次触发事件时都取消之前的延时调用方法 function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(tim...

2019-07-24 14:31:05 131

原创使用CSS3制作倒影

-webkit-box-reflect -webkit-box-reflect仍然是一个非标准属性,目前仅在Chrome、Safari和Opera浏览器下支持,可惜的是在Firefox下并不支持这个属性，不过值得庆幸的是，在Firefox下可以通过element()+svg的mask来模拟实现. -webkit-box-reflect：none | <direction> <of...

2019-06-27 20:43:44 349

原创 redux

redux store Store 是应用状态 state 的管理者，包含下列五个函数： Store.getState() // 获取整个 state 树 Store.dispatch(action) // 触发 state 改变的state 进行监听 Store.subscribe(listener) // 可以理解为 DOM 中的 addEventListener Store.repla...

2019-06-27 18:48:19 156

原创 canvas图片合成

canvas图片合成问题解决二维码问题步骤 1.背景图画图放在onload里两个onload嵌套 2.上传一张图片 3.toBaseURL->base64 再次做图片上传画布污染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...

2019-06-27 18:21:24 205

原创 MobX

mobx MobX是一个经过实战测试的库，它通过透明地应用功能反应式编程（TFRP）使状态管理变得简单和可扩展，是一个类组件通过@修饰一个组件。步骤 1.下包 2.需要导出 npm run eject 3.再package.json里配置babel,支持装饰器语法 4.和react和语法差不多需要provider进行 @abservable 模块的数据 @action 模块的行为 ...

2019-06-27 18:12:25 415