- 博客(80)
- 收藏
- 关注
RSS订阅
原创 vue+vant搭建移动端框架
主要内容1.vant/rem移动端适配的解决方案2. vue/cli二次配置及优化处理3.基于注册动态模式实现loading4.掌握vuex永久化存储1 创建一个vue项目1.1安装vue-cli:npm install -g @vue/cli1.2初始化项目vue create vue-vant(1)选择手动配置空格切换选中状态插件选择这边选择了（Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查）Babel:支持es6
2020-08-13 14:42:56
14828
1
原创 webpack知识整理
webpack基础webpack——基本安装(一)webpack——使用webpack配置文件(二)webpack——加载css、图片和字体(三)webpack——管理输出(四)webpack——开发(五)webpack——模块热更新(六)webpack——使用babel处理es6语法(七)webpack——实现对React代码的打包(八)webpack——tree shaking(九)webpack——生产环境构建(十)webpack——Code Splitting(十一)webp
2020-06-09 16:18:36
188
原创 JS高级教程知识整理——汇总
JS高级教程知识整理——01数据类型JS高级教程知识整理——02数据_变量_内存JS高级教程知识整理——03对象JS高级教程知识整理——04函数JS高级教程知识整理——05回调函数JS高级教程知识整理——06IIFE(匿名函数自调用)JS高级教程知识整理——07函数中的thisJS高级教程知识整理——(补充)分号问题JS高级教程知识整理——08原型与原型链JS高级教程知识整理——...
2020-04-30 16:47:20
262
原创 力扣刷题——买卖股票的最佳时机 II
题目: https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock-ii/思路:维护一个变量profit用来存储利润因为可以多次买卖，那么就要后面的价格比前面的大，那么就可以进行买卖因此，只要prices[i+1] > prices[i]，那么就去叠加profit遍历完成得到的profit就是获取的最大利润/** * @param {number[]} prices * @return {number} */va
2020-06-16 12:07:17
213
原创 力扣刷题——电话号码的字母组合
题目: https://leetcode-cn.com/problems/letter-combinations-of-a-phone-number/1.哈希映射 逐层遍历/** * @param {string} digits * @return {string[]} */var letterCombinations = function(digits) { let res = [] if(digits.length === 0) return [] let map =
2020-06-15 13:56:36
190
原创 力扣刷题——括号生成
题目: https://leetcode-cn.com/problems/generate-parentheses/思路:因为左右括号需要匹配、闭合。所以对应“(”和“)”的数量都是n，当满足这个条件时，一次递归就结束，将对应值放入结果数组中。这里有一个潜在的限制条件：有效的括号组合。对应逻辑就是在往每个位置去放入“(”或“)”前：1.需要判断“(”的数量是否小于 n2.“)”的数量是否小于“(”/** * @param {number} n * @return {string[]} *
2020-06-15 11:11:45
173
原创 力扣刷题——每日温度
题目: https://leetcode-cn.com/problems/daily-temperatures/1.暴力法/** * @param {number[]} T * @return {number[]} */var dailyTemperatures = function(T) { let res = new Array(T.length).fill(0) for(let i = 0; i < T.length; i++){ for(let j
2020-06-12 12:15:43
181
原创 力扣刷题——滑动窗口最大值
题目: https://leetcode-cn.com/problems/sliding-window-maximum/1.暴力法遍历数组依次遍历每个区间内的最大值，放入数组中/** * @param {number[]} nums * @param {number} k * @return {number[]} */var maxSlidingWindow = function(nums, k) { if(nums === 0) return [] if(k === 1)
2020-06-12 11:02:31
159
原创 力扣刷题——有效的括号
题目: https://leetcode-cn.com/problems/valid-parentheses/1.switch case/** * @param {string} s * @return {boolean} */var isValid = function(s) { let arr = [] if(s.length % 2 !== 0) return false for(let i = 0; i < s.length; i++){ l
2020-06-11 14:08:45
138
原创 力扣刷题——环形链表
题目: https://leetcode-cn.com/problems/linked-list-cycle/1.标志法给每个已遍历过的节点加标志位，遍历链表，当出现下一个节点已被标志时，则证明单链表有环。/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.next = null; * } *//** * @param {ListNod
2020-06-11 10:01:35
162
原创 力扣刷题——爬楼梯
题目: https://leetcode-cn.com/problems/climbing-stairs/思路:我们会用到动态规划的算法思想-可以分成多个子问题，爬第 n 阶楼梯的方法数量，等于 2 部分之和：爬上n−1阶楼梯的方法数量。因为再爬 1 阶就能到第 n 阶爬上n−2阶楼梯的方法数量，因为再爬 2 阶就能到第 n 阶相当于非常经典的斐波那契数列题代码实现:/** * @param {number} n * @return {number} */var climbStair
2020-06-09 13:53:07
130
原创 力扣刷题——盛最多水的容器
题目: https://leetcode-cn.com/problems/container-with-most-water/思路:1.首先，我们能快速想到的一种方法：两两进行求解，计算可以承载的水量。 然后不断更新最大值，最后返回最大值即可。这种解法，需要两层循环，时间复杂度是O(n^2)。/** * @param {number[]} height * @return {number} */var maxArea = function(height) { let max = 0
2020-06-09 13:33:01
146
原创 力扣刷题——三数之和
题目:https://leetcode-cn.com/problems/3sum/1.暴力法多层遍历/** * @param {number[]} nums * @return {number[][]} */var threeSum = function(nums) { let res = [] for(let i = 0; i < nums.length-2; i++){ for(let j = i+1; j < nums.length-1; j+
2020-06-08 12:57:07
152
原创 力扣刷题——两数之和
题目: https://leetcode-cn.com/problems/two-sum/思路:1.暴力法使用两层循环，外层循环计算当前元素与 target 之间的差值，内层循环寻找该差值，若找到该差值，则返回两个元素的下标。时间复杂度：O(n*2)/** * @param {number[]} nums * @param {number} target * @return {number[]} */var twoSum = function(nums, target) { fo
2020-06-08 10:10:58
123
原创 webpack实战——多页面打包配置(八)
在src目录下新建list.jssrc/index.jsimport React, {Component} from 'react'import ReactDom from 'react-dom'class App extends Component{ render() { return ( <div> <div>this is home page </div>
2020-06-04 19:49:59
164
原创 webpack实战——webpack性能优化(七)
提升webpack打包速度的方法:1.升级工具的版本(webpack、node、npm、yarn)2.在尽可能少的模块上应用loader,让它作用范围小3.plugin尽可能精简并确保可靠4.resolve参数合理配置import from 文件名 (引用的时候可以不写文件名后缀)resolve: { extensions: ['.js', '.jsx'] //先找以js结尾的文件,再找以jsx结尾的文件}import from 目录(没有具体的文件)resolve: { exten
2020-06-04 17:44:49
173
原创 webpack手写——bundler源码编写(三)
项目初始化新建项目bundler,在目录下新建src目录,在目录新建文件, 目录结构如下:word.jsexport const word = 'hello'message.jsimport {word} from './word.js'const message = `say ${word}`export default messageindex.jsimport {message} from './message.js'console.log(message)实现打包工具
2020-06-03 15:41:23
160
原创 webpack手写——编写一个plugin(二)
项目初始化1.新建一项目plugin并初始化npm init -y2.安装webpack: npm install webpack webpack-cli --save-dev3.新建src目录,在src目录下新建index.jsindex.jsconsole.log('hello world')4.在根目录下新建webapck.config.jswebapck.config.jsconst path = require('path')module.exports = { mod
2020-06-03 11:19:59
335
原创 webpack手写——编写一个loader(一)
新建一项目make-loader并初始化项目npm init -y安装npm install webpack webpack-cli --save-dev添加脚本:"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" },在根目录下新建一文件webpack.config.jswebpack.config.jsconst path = r
2020-06-03 09:59:14
227
原创 webpack——webpack与浏览器缓存(十六)
调整项目项目结构:src/index.jsimport _ from 'lodash'import $ from 'jquery'const dom = $('<div>')dom.html(_.join(['yang', 'yue', 'dingli'], ' '))$('body').append(dom)webpack.common.jsconst path = require('path')const HtmlWebpackPlugin = require('h
2020-06-02 11:58:05
325
原创 webpack实战——eslint在webpack中的配置(六)
什么是eslint?用来约束规范我们的代码安装eslint工具:npm install eslint --save-dev生成配置文件:npx eslint --initkatedeMacBook-Air:lesson1_5-6 kate$ npx eslint --init? How would you like to use ESLint? To check syntax, find problems, and enforce code style? What type of mod
2020-06-02 11:15:59
321
原创 webpack实战——解决单页面应用路由问题(五)
在src目录下新建list.js 和 home.jslist.jsimport React, { Component } from 'react'class List extends Component { render() { return <div>ListPage</div> }}export default Listhome.jsimport React, {Component} from 'react'class Home
2020-06-02 10:12:56
201
原创 webpack实战——proxy配置(四)
发送ajax请求安装:npm install axios --save-devsrc/index.js// 安装: npm i react react-dom --save//react: https://babeljs.io/docs/en/babel-preset-react//remove the `import '@babel/polyfill'` call or use `useBuiltIns: 'entry'` instead// import "@babel/polyfi
2020-06-01 22:13:26
688
原创 webpack实战——TS的打包配置(三)
项目初始1.新建一项目type-script并初始化npm init -y2.新建webpack.config.js3.新建目录src,在src目录下新建index.tsx4.安装webpack 和webpack-clinpm install webpack webpack-cli --save-devindex.tsxclass Greeter { greeting: string constructor(message: string) { this.
2020-06-01 21:14:13
943
原创 webpack实战——PWA的打包配置(二)
在服务器上运行代码模拟后端服务器安装npm install http-server --save-devsrc/index.jsconsole.log('hello')webpack.common.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const {CleanWebpackPlugin} = require('clean-webpack-plugin')
2020-06-01 17:40:47
331
原创 webpack实战——Library的打包(一)
打包库文件创建一新项目library,并初始化,生成一package.json文件npm init -ypackage.json{ "name": "library", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { }, "keywords": [], "author": "KATE", "license": "MIT"}新建一src目录,在src目
2020-06-01 16:09:37
388
1
原创 webpack——css文件的代码分割(十五)
为页面添加样式:在src目录下新建style.csssrc/style.cssbody { background: purple;}src/index.jsimport './style.css'运行npx run dev-build,页面可以看到样式,webpack在做打包的时候会把css文件打包在js里需求: 想要把引入的 css 打包成单独的一个文件,需要使用MiniCssExtractPluginMiniCssExtractPlugin使用的参考链接: https://
2020-06-01 10:39:33
199
原创 牛客网刷题3——替换空格
题目:https://www.nowcoder.com/practice/4060ac7e3e404ad1a894ef3e17650423?tpId=13&tqId=11155&tPage=1&rp=1&ru=%2Fta%2Fcoding-interviews&qru=%2Fta%2Fcoding-interviews%2Fquestion-ranking思路:1.我们知道字符串的遍历无非是从左到右和从右到左两种。1）如果从左到右，会发现如果遇到空格，会将原来的
2020-05-31 15:01:31
154
原创 牛客网刷题2——二维数组中的查找
题目:https://www.nowcoder.com/practice/abc3fe2ce8e146608e868a70efebf62e?tpId=13&tqId=11154&tPage=1&rp=1&ru=/ta/coding-interviews&qru=/ta/coding-interviews/question-ranking思路:1）设初始值为右上角元素，arr[0][5] = val，目标tar = arr[3][1]2）接下来进行二分操作：3）
2020-05-31 11:18:16
129
原创 webpack——打包分析,preloading,prefetching(十四)
1.打包分析打包分析参考链接: https://github.com/webpack/analyse使用下面命令先打包生成一个stats.json文件:webpack --profile --json > stats.json对于package.json做如下修改:“scripts”: {“dev-build”: “webpack --profile --json > stats.json --config ./build/webpack.dev.js”},运行npm run
2020-05-29 14:07:30
174
原创 牛客网刷题1——数组中重复的数字
题目: https://www.nowcoder.com/practice/623a5ac0ea5b4e5f95552655361ae0a8?tpId=13&tqId=11203&tPage=1&rp=1&ru=/ta/coding-interviews&qru=/ta/coding-interviews/question-ranking思路:1.把当前序列当成是一个下标和下标对应值是相同的数组；2.遍历数组，判断当前位的值和下标是否相等： 2.1. 若相等，则
2020-05-29 11:29:03
130
原创 webpack——懒加载(十三)
web pack.common.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const {CleanWebpackPlugin} = require('clean-webpack-plugin')module.exports = { module: { rules: [ { test: /\.j
2020-05-28 16:19:32
140
原创 webpack——SplitChunksPlugin配置参数(十二)
代码分隔底层使用到了SplitChunksPlugin,所以接下来讲解一下SplitChunksPlugin参数的配置。上一节执行异步代码的生成目录如下:文件名为0.bundle.js,希望将文件名改为英文的可识别的名字,可以在异步加载组件当中加一段魔法注释://魔法注释: /* webpackChunkName: “lodash” */src/index.jsfunction getComponent() { return import(/* webpackChunkName: "lo
2020-05-28 15:44:47
457
原创 webpack——Code Splitting(十一)
一.调整目录1.2.添加脚本:package.json"scripts": { "dev": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.prod.js", "dev-build": "webpack --config ./build/webpack.dev.js" },运行npm run dev-build,在bui
2020-05-28 11:50:42
115
原创 webpack——生产环境构建(十)
1.配置开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置
2020-05-27 22:24:53
143
原创 webpack——tree shaking(九)
在src目录下新建一个math.js文件,现在目录结构如下:src/math.jsexport const add = (a, b) => { console.log( a + b )}export const minus = (a, b) => { console.log( a - b )}src/index.jsimport { add } from './math.js'add(1, 2)现在让我们运行npx webpack，并检查输出的 bundl
2020-05-27 21:04:41
147
原创 webpack——实现对React代码的打包(八)
参考链接: https://babeljs.io/docs/en/babel-preset-react安装:npm i react react-dom --savenpm install --save-dev @babel/preset-reactsrc/index.jsimport "@babel/polyfill"import React, {Component} from 'react'import ReactDom from 'react-dom'class App extend
2020-05-24 16:10:32
250
原创 webpack——使用babel处理es6语法(七)
1.使用babel参考链接:https://babeljs.io/setup#installation安装:npm install --save-dev babel-loader @babel/core在src目录下新建index.jssrc/index.js//es6语法const arr = [ new Promise(() => {}), new Promise(() => {})]arr.map(item => { console.l
2020-05-24 15:47:33
2655
原创 webpack——模块热更新(六)
模块热更新(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。启用 HMR启用此功能实际上相当简单。而我们要做的，就是更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。webpack.config.jsconst path = require('path')const HtmlWebpackPlugin = require('html-webpack-
2020-05-24 11:58:43
250
原创 webpack——开发(五)
1.使用 source map当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于
2020-05-24 10:06:41
459
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人