pengyaoli-优快云博客

原创 webpack打包

概述webpack是前端打包工具，默认只能打包js，可通过loader打包其他模块，可使用plugin实现自动化，如自动压缩代码等const path = require('path')module.exports = { entry: './src/main.js', output: { filename: 'bundle.js', path: path.join(__dirname, 'dist'), publicPath: 'dist/' }}工作模式

2020-11-02 22:22:07 177

原创模块化开发

概述是一种思想，是目前前端必备的Commonjsnodejs使用的模块加载策略，是同步加载的AMDrequirejs实现了AMD的规范，AMD是异步的模块化规范在浏览器使用ES Modules（目前大多数浏览器均支持）nodejs使用commonJS规范ES Modules给script标签设置type为module，即设置了模块其中使用了严格模式，this不指向window，而是undefined每个ES Module均有单独作用域ESM 是通过 CORS 的方式请求外部 JS

2020-10-31 17:53:52 203

原创前端工程化

解决的问题传统语言或语法的弊端无法使用模块化/组件化重复的机械性工作代码风格统一、质量保证依赖后端接口支持整体依赖后端项目内容脚手架工具开发自动化构建系统模块化开发项目代码规范化自动化部署plop用法在项目中安装根目录创建plopfile.js文件，输入入参为plop的函数在plopfile.js中自定义脚手架编写模板通过Plop提供的cli运行脚手架的工作过程：通过命令行交互询问用户问题根据用户回答的结果生成文件...

2020-10-31 17:08:33 155

原创 js性能优化-GC

垃圾回收机制（GC）js的垃圾回收是自动的，全局变量不可回收，GC可以找到内存中的垃圾，释放和回收空间GC算法GC回收时，查找和回收所依靠的规则常用的有：引用计数，标记清除，标记整理，分代回收等引用计数工作原理：定义变量函数等时计数为0，每次引用后会加1，结束引用会减1，当归0时，会被回收优点：发现垃圾会立即回收，可以减少程序暂停缺点：循环引用时，永远不会为1，不会回收，并且耗时标记清除算法标记清除算法：在全局开始查找可达对象，并把可达对象均标记，然后查找完，再清除没有标记过的对象优点

2020-10-09 18:56:55 569

原创 Typescript

简介Typescript是强类型语言，是基于JavaScript的超集，可解决JavaScript的类型系统的问题并支持ES6，使代码的可靠性大大提高原始数据类型JavaScript 的类型分为两种：原始数据类型和对象类型。原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。原始数据类型在ts中的定义let b: boolean = false;let num: number = 6; // NaN Infinitylet name

2020-10-09 18:25:01 118

原创 javascript的类型检测工具-flow

安装步骤下载npm install flow-bin --dev在package.json的scripts中配置npm命令"flow": "./node_modulws/.bin/flow"初始化flow配置，在终端中运行npm run flow init运行flownpm run flow 需要在文件中注释@flow具体使用// @flow// 定义函数// 通过:number，注解类型为数字，括号后写的类型转换为定义函数返回值的类型，没有返回值

2020-09-26 23:00:06 154

原创 javascript语言类型

强类型与弱类型（类型安全）强类型：函数的实参与形参类型必须相同，有更强的类型约束，不允许有隐式类型转换弱类型：不会限制实参类型，类型几乎没什么约束，允许任意的数据隐式类型转换类型问题不是在代码层级的报错，而是编译过程直接报错静态类型与动态类型（类型检查）静态类型：变量在定义时，就应该声明类型，并且声明过后，不应该修改类型动态类型：运行阶段才会明确变量的类型，允许修改变量的类型，即变量是没有类型的，但是变量的值，是有类型的javascript是动态类型、弱类型的语言，js基本没有类型约束，js是

2020-09-26 22:40:27 148

原创 ECMAScript新特性

ECMAScript新特性ECMAScript2015（es6）ECMAScript是JavaScript的标准化规范，javaScript是EVMAScript的扩展语言ECMAScript只提供了最基本的语法浏览器层次，javascript包含Bom，Dom，ECMAScriptNode层次，javascript包含ECMAScript，node提供的Api，如fs，path等letjs在es6之前，只有两种作用域，全局作用域及函数作用域，也就是只有函数会新建作用域，作用域指代码成员起作用

2020-09-26 17:47:18 221

原创 javascript异步编程总结

前言由于js涉及dom交互，如果多线程会出现很复杂当线程同步问题，故js是单线程模式，单线程模式指执行代码当线程只有一个，故每次只能执行一个任务单线程当优点为简单，安全，缺点为耗时任务会阻塞代码运行，出现白屏假死等影响体验的现象故为了解决阻塞问题，js将任务的执行分为同步和异步两种模式同步模式指代码中任务依次执行，后一个任务必须等前一个任务执行完毕才会执行，任务等执行顺序与代码的编写顺序一致，大部分任务均为同步执行当代码加载进来后，会由自执行函数包裹所有代码，按照从上倒下，先把第一行放到调用栈，

2020-09-25 23:47:08 3447

原创 javascript函数式编程

为什么使用函数式编程1. React、vue3都支持函数式编程2. 函数式编程可以抛弃this3. 打包中可更好利用tree taking过滤没有使用的代码4. 方便单元测试，方便并行处理5. 使代码更简洁，更通用，扩展性更好什么是函数式编程函数式编程（Functional Programming，FP）是编程范式之一s，与面向对象编程并列函数式编程的思维方式：对运算过程对抽象函数式编程的函数是数学中的函数即映射关系，如y=sin(x)相同输入会得到相同输出（纯函数），如数组的slice

2020-09-25 23:45:17 2556

原创 immutable + react

immutable使用immutable创建的数据，一旦创建，就不能更改的数据。每当对象修改的时候，就会返回一个新的Immutable对象，以此来保证数据的不可变。安装npm install immutable使用const { Map } = require('immutable');const map1 = Map({ a: 1, b: 2, c: 3 });const map2 = map1.set('b', 50);map1.get('b') + " vs. " +

2020-08-23 16:07:20 179

原创 React Hooks简单解析

React Hooks是16.8新出的特性，只对函数式组件生效，对class组件无效Hooks是特殊但函数，可使函数式组件使用react的特性state hooks函数式组件不能设置和使用state，只能使用props，但hooks可使函数式组件使用及设置stateimport React, { useState } from 'react';function Example() { // Declare a new state variable, which we'll call

2020-08-23 13:09:51 628

原创 node error

1. 问题： npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATUREnpm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATURE 解决：npm config set strict-ssl false

2017-12-14 15:30:43 467

原创二分法插入paix

var arr = [4,2,1,5,6,9,11,10,32,22,13,24,2,54,11,10];console.log(sort(arr, "min"))console.log(sort(arr, "max"))function sort(arr, type) { var arr_len = arr.length; for (var i = 0; i arr_len

2017-12-09 17:24:46 258

原创 js数组快速排序

快速排序就是找基准，小的放左边，大的放右边，并把左右递归var arr = [1,8,2,5,14,2,4,8,10,32,45,3];console.log(sort(arr, "min"))console.log(sort(arr, "max"))function sort(arr, type) { var arr_len = arr.length; var

2017-12-09 16:51:32 1265

原创 js数组冒泡排序简单解析

var arr = [1,3,8,5,4,9,6,8];console.log(sort(arr, "MIN"))/** * * @param arr 排序数组 * @param type 排序方式 * @returns {Array} 排好序数组 */function sort(arr, type) { var arr_len = arr.length; va

2017-12-09 13:59:07 505

原创 js二分法查找元素在排好序的数组下标

var arr = []; // 通过for 生成排好序的测试数组 for (var i = 10; i 50; i++){ arr.push(i * 2); } // 通过for 测试方法 for (var i = 0; i 100; i++){ console.log(seek(arr, i), i) }

2017-12-05 16:28:35 918

pengyaoli的博客