- webpack实用教程
前端的爬行之旅
packjson.js终端输入$npminit-y{"name":"2","version":"1.0.0","description":"","main":"webpack.config.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1",},"keywords":[],"author":"","license":"ISC",
- webpack相关
Komorebi_9999
webpack前端node.js
一、基础打包指令#基本打包(默认使用webpack.config.js配置)npxwebpack#指定模式(开发/生产)npxwebpack--modedevelopment#开发模式(未压缩,保留注释)npxwebpack--modeproduction#生产模式(自动压缩、优化)二、配置文件相关#指定自定义配置文件npxwebpack--config配置文件名.js#例如:webpack.co
- React-Ts项目中配置路径别名@
wisuky
前端项目相关配置react.js前端前端框架
方案一:配置webpack.config.js在react脚手架搭建的项目中,webpack.config.js配置文件是隐藏的,需要通过npmruneject打开,并且该操作是不可逆的,所以不建议使用该方案。方案二:使用craco库1.安装cracoyarnadd-D@craco/cracoORnpmi-D@craco/craco2.在项目根目录中创建craco.config.js配置文件,并添
- webpack未转译第三方依赖axios为es5导致低端机型功能异常
背景:兼容性测试流程中,遇到华为p9手机上的页面按钮点击无反应的问题。开发者工具查看后发现报错如下:根据报错信息检查了一下页面引用的vendors包,发现有...语法,来自于第三方依赖axios。原因:axios包有es6语法,而我的项目的webpack.config.js配置的babel-loader排除了所有的node_modules的编译。如下:{test:/\.js$/,exclude:/
- Vue 2 项目中内嵌 md 文件
清风细雨_林木木
Vuevue.js前端javascript
推荐方案:raw-loader+marked解析Markdown第一步:安装依赖npminstallmarked--savenpminstallraw-loader--save-dev第二步:配置webpack支持.md文件打开vue.config.js或webpack.config.js,添加以下配置:module.exports={chainWebpack:config=>{config.mo
- MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释
crary,记忆
微前端-MFE前端webpack学习
以ModuleFederation插件详为例,Webpack.config.js它可能的配置和含义如下:前言ModuleFederation的Webpack.config.js核心配置包括:name+filename(定义应用标识)remotes(引用远程模块)exposes(暴露本地模块)shared(共享依赖,优化加载)Host应用中://host/webpack.config.jsconst
- webpack面试题
巛、
初级程序员前端面试总结webpack前端node.js
面试题:webpack介绍和简单使用一、webpack(模块化打包工具)1.webpack是把项目当作一个整体,通过给定的一个主文件,webpack将从这个主文件开始找到你项目当中的所有依赖文件,使用loaders来处理它们,最后打包成一个或多个浏览器可识别的js文件2.通过设置webpack.config.js的配置,由于webpack是基于Node构建的,webpack配置文件中所有的合法no
- 微前端 - Module Federation使用完整示例
crary,记忆
微前端-MFE前端angularreact
Angular框架中项目结构main-app/src/app/app.module.tsapp.component.tsmicro-app/src/app/app.module.tsapp.component.ts主应用配置安装必要依赖:ngadd@angular-architects/module-federation修改webpack.config.js:const{share,SharedM
- 前端工具:Webpack、Babel、Git与工程化流程
一小条咸鱼
前端webpackgit
1.Webpack:资源打包优化工具案例1:多入口文件打包假设项目有多个页面(如首页index.js和登录页login.js),需要分别打包:●配置webpack.config.js:module.exports={entry:{index:'./src/index.js',login:'./src/login.js'},output:{path:path.resolve(__dirname,'d
- webpack构建流程
sun_raise_Up
webpack前端javascript
webpack模块打包模块加载器(Loader)----编译转化代码拆分资源模块(AssetModule)简单使用安装yarnaddwebpackwebpack-cli--dev配置文件webpack.config.js运行在node.js中工作模式:默认production(自动压缩)development(调试优化)none```jsmodule.exports{mode:'developme
- Webpack-第 13 篇:Webpack 5 构建流程剖析与调试
程序员勇哥
前端全套教程webpack前端node.jstypescriptreact.js
Webpack-第13篇:Webpack5构建流程剖析与调试一、Webpack构建流程详解(一)初始化阶段解析配置文件:Webpack启动后,首先会读取webpack.config.js或其他指定的配置文件,将其中的配置项解析为内部可用的数据结构。创建编译器对象:根据解析后的配置信息,创建一个Compiler对象,该对象是Webpack的核心,负责整个构建过程的控制和协调。(二)编译阶段入口模块解
- webstorm 不识别Vue旧项目的路径别名 @
红发-SHANKS
开发工具vue.jswebstormjavascript
其实webstorm是支持这个功能的,但是需要webpack.config.js位置在项目根目录下。如果我们打开的是旧项目,比如Vue2.5之类的,此时配置文件可能是在build/webpack.xxx.config.js中,此时如果需要对这个项目能够正确识别,我们可以调整webstorm的webpack配置文件解析方式,改自动为手动:
- webpack 中 chunks详解
二川bro
前端webpack前端node.js
webpack中chunks详解在Webpack项目中,webpack.config.js是核心配置文件,而非webpack.json。chunks的概念与Webpack的代码分割(CodeSplitting)功能密切相关,通过optimization.splitChunks配置项可以实现对代码块的分类和优化。以下是Webpack中chunks的分类和配置使用详解:一、Chunks的分类在Webp
- webpack配置解析
我有一只臭臭
webpack性能优化webpack前端
Webpack的配置文件一般是一个webpack.config.js文件。这个文件可以导出一个JavaScript对象,其中包含多个配置项来定义Webpack的行为。本篇记录一下常见的配置项和它们的作用:一、entry入口点:Webpack会从这个文件开始分析你的应用程序的依赖关系。可以是一个路径,也可以是一个对象(多入口点的情况)。entry:'./src/index.js',//单个入口//或
- 从0搭建React开发环境
2401_84152232
程序员react.js前端前端框架
{//…“scripts”:{“build”:“webpack--mode=development--configscript/webpack.config.js”},}然后根目录终端输入:npmrunbuild在浏览器中打开dist目录下的index.html,如果一切正常,你应该能看到以下文本:'React'index.html目前放在dist目录下,但它是手动创建的,下面会教你如何生成ind
- 使用 Webpack + TypeScript 来创建项目【持续更新】
Alert.GoSt
WebpackTypeScriptwebpacktypescriptjavascript
第一步、安装nodejs;第二步、创建项目文件夹,在该项目下执行npminit命令;第三步、执行npmi-Dwebpackwebpack-clitypescriptts-loader命令,导入项目所需依赖;第四步、在根目录下创建webpack.config.js文件,引入webpack相关配置,在package.json文件中加入脚本"build":"webpack";//引入依赖constpat
- webpack-dev-server解决跨域
大猫会长
webpackwebpack前端node.js
目前解决跨域常用的方法是采用webpack-dev-server结合proxy接口代理或者使用Nginx均可配置跨域的代理。由于在本地配置好webpack-dev-server之后,所有项目成员都可以使用,一劳永逸。我们采用了配置webpack-dev-server中proxy的接口代理,在webpack.config.js文件中对webpack-dev-server配置如下:proxy:[{co
- 前端项目技术点总结:React项目创建
jimson_zhu
前端react.jsjavascript
(一)webpack基本使用和配置项目初始化;安装webpack和其脚手架webpack-cli;新建webpack.config.js文件,并且配置;安装插件html-webpack-plugin,并且配置;安装webpack-dev-server,配置热启动;安装对应loader(css,js,图片等等);创建webpack.config.js,配置入口、出口、插件和loader;然后在pac
- Webpack打包与优化策略
小陆不会敲代码
Webpackwebpack前端node.js学习笔记vue.js
文章目录前言一、打包流程二、打包原理三、配置与优化1.代码分割SplitChunks配置:2.压缩和优化JavaScript压缩:Css压缩:图片压缩:3.缓存利用总结前言优化Webpack的构建和打包过程,可以从多个方面入手,以提升构建效率、减少打包体积并改善用户体验。以下是一些常见的优化策略:一、打包流程读取配置文件:Webpack首先会读取项目中的webpack.config.js文件,解析
- React使用less语法
世间万物皆对象
reactnpmwebpackreact.jsless前端
1.安装yarnaddlessless-loaderornpmilessless-loader2.打开webpack配置文件创建项目的时候我们是看不到webpack文件的需要暴露出来yarnejectornpmruneject3.配置less语法环境在config文件下找到webpack.config.js文件打开webpack.config.js找到如下图:在下面添加如下两句代码:constle
- webpack多页面打包的一次尝试
初始化cd项目名webpackinit创建第二页面与其头文件touchpage2.htmltouchsrc/page2.js修改page2.jsconsole.log("success")修改webpack.config.js添加page2.html至plugins项,添加src/page2.js至entry项最终模板:constpath=require('path');constHtmlWebp
- webpack怎么配置单页面或者多页面项目?
镜中的女孩-potato
webpack前端node.js
单页直接在entry中指定单页面的入口文件即可,对于多页面来说,如果页面之间有依赖关系可以考虑将entry的值改成一个数组,数组中的每一项是入口文件的地址,并且通过dependOn配置多个入口的依赖关系,一般的,我们也可以直接在entry中配置多个入口文件的键值对1、单页面举个例子=>你有这样一个项目架构├──config│├──webpack.config.js//webpack配置文件├──s
- 20. Vue UI框架 ElementUi的使用 以及webpack.config.js配置
七三里
Vue基础中的基础+实战
1.对于elementUI的简单说明基于Vue的UI框架=>饿了么公司基于vue开的的vue的Ui组件库=>ElementUi基于vuepc端的UI框架官网=>http://element.eleme.io/2.elementUI的使用(1)找官网http://element.eleme.io/#/zh-CN/component/quickstart(2)安装cnpmielement-ui-S-S
- webpack vue-loader was used without the corresponding plugin
轩辕夜空
webpackvue-loaderwasusedwithoutthecorrespondingplugin.MakesuretoincludeVueLoaderPluginwebpack在配置的时候总是报这个错在网上找了很多方法都不行按照网上的方法配置webpack.config.js修改代码constVueLoaderPlugin=require('vue-loader/lib/plugin')
- 前端面试练习24.3.5
程序猿online
前端面试前端面试职场和发展
webpack相关项目使用webpack流程进入一个初始化好的vue项目下载安装webpack相关依赖包/插件npminstall--save-devwebpackwebpack-cliwebpack-dev-server安装一些相关的loader,比如vue-loader,babel-loader,css-loader等创建webpack.config.js文件,进行相关配置文件内容如下cons
- Webpack 打包 Javascript 详细介绍
迹忆客
编程前端webpackjavascript前端
本篇我们主要介绍Webpack打包Javascript。当然,除了可以打包Javascript之外,webpack还可以打包html。但是这不是我们本篇的重点。我们可以参考WebpackHTML打包介绍现在让我们扩展一个项目——webpack-example(点击Webpack安装查看该项目的初始化),并为entry和output属性指定自定义名称。在webpack.config.js中,我们在p
- 【Javascript】webpack的使用和特性
STATICHIT静砸
JavaScriptjavascriptwebpack开发语言
webpack的使用在实际开发中,Webpack是一个非常强大的前端构建工具,可以用于将各种前端资源(如JavaScript、CSS、图片等)打包成静态资源。以下是一些实际开发中使用Webpack的常见方式:那么在实际开发中,我们如何使用Webpack呢?1.安装和配置:-使用npm或yarn安装webpack及其相关的loader和插件。-创建一个`webpack.config.js`文件,定义
- 【前端工程化面试题】webpack proxy的工作原理,为什么能解决跨域问题
我有一棵树
前端webpacknode.js
在webpack的配置文件webpack.config.js中有一个配置项devServer里面有一个属性是proxy,这里面可以配置代理服务器,解决跨域问题,请参考官网。一般来说webpack的代理就是说的开发服务器webpack-dev-server。其实不光是webpack其他的打包工具比如是vite,也有代理的功能,也是开发服务器。webpack-dev-server的工作原理本质是利用了
- 前端面试题(工程化&性能优化篇)
大寄一场_
前端性能优化面试
目录1.Webpack的构建流程2.常用的plugin和loader有哪些3.tree-shaking原理4.前端页面性能优化5.首屏渲染优化6.如何减少回流和重绘7.SEO优化8.SSR服务端渲染9.Git的基本使用10.图片懒加载11.Echarts怎么做页面适配1.Webpack的构建流程(1)初始化参数。获取用户在webpack.config.js文件中配置的参数。(2)开始编译。初始化c
- 【前端工程化面试题】说一下 webpack 的构建流程
我有一棵树
前端webpacknode.js
类似问题是,说一下vite的构建流程,参考这篇文章。初始化流程从配置文件和shell语句中读取合并参数,初始化需要使用的插件和执行环境所需要的参数配置文件默认是webpack.config.js编译构建流程解析入口模块,从入口模块开始串行调用对应的loader去翻译文件内容,依次编译模块的依赖输出流程根据配置文件中entry属性配置的模块,根据入口和模块之前的依赖关系,组装成一个个包含多个模块的c
- windows下源码安装golang
616050468
golang安装golang环境windows
系统: 64位win7, 开发环境:sublime text 2, go版本: 1.4.1
1. 安装前准备(gcc, gdb, git)
golang在64位系
- redis批量删除带空格的key
bylijinnan
redis
redis批量删除的通常做法:
redis-cli keys "blacklist*" | xargs redis-cli del
上面的命令在key的前后没有空格时是可以的,但有空格就不行了:
$redis-cli keys "blacklist*"
1) "blacklist:12:
[email protected]
- oracle正则表达式的用法
0624chenhong
oracle正则表达式
方括号表达示
方括号表达式
描述
[[:alnum:]]
字母和数字混合的字符
[[:alpha:]]
字母字符
[[:cntrl:]]
控制字符
[[:digit:]]
数字字符
[[:graph:]]
图像字符
[[:lower:]]
小写字母字符
[[:print:]]
打印字符
[[:punct:]]
标点符号字符
[[:space:]]
- 2048源码(核心算法有,缺少几个anctionbar,以后补上)
不懂事的小屁孩
2048
2048游戏基本上有四部分组成,
1:主activity,包含游戏块的16个方格,上面统计分数的模块
2:底下的gridview,监听上下左右的滑动,进行事件处理,
3:每一个卡片,里面的内容很简单,只有一个text,记录显示的数字
4:Actionbar,是游戏用重新开始,设置等功能(这个在底下可以下载的代码里面还没有实现)
写代码的流程
1:设计游戏的布局,基本是两块,上面是分
- jquery内部链式调用机理
换个号韩国红果果
JavaScriptjquery
只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象(通过this 因为一旦一个函数称为一个对象方法的话那么在这个方法内部this(结合下面的setStyles)指向这个对象)
function create(type){
var element=document.createElement(type);
//this=element;
- 你订酒店时的每一次点击 背后都是NoSQL和云计算
蓝儿唯美
NoSQL
全球最大的在线旅游公司Expedia旗下的酒店预订公司,它运营着89个网站,跨越68个国家,三年前开始实验公有云,以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。
云端本身是用于驱动网站的部分小功能的,如搜索框的自动推荐功能,还能保证处理Hotels.com服务的季节性需求高峰整体储能。
Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
- java笔记1
a-john
java
1,面向对象程序设计(Object-oriented Propramming,OOP):java就是一种面向对象程序设计。
2,对象:我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说,对象是某个类型的实例。比如狗是一个类型,哈士奇可以是狗的一个实例,也就是对象。
3,面向对象程序设计方式的特性:
3.1 万物皆为对象。
- C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点(一)
aijuans
C/C++求职面试必备考点
找工作在即,以后决定每天至少写一个知识点,主要是记录,逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益,后学幸运之至也。如有错误,还希望大家帮忙指出来。感激不尽。
后学保证每个写出来的结果都是自己在电脑上亲自跑过的,咱人笨,以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
- 程序员写代码时就不要管需求了吗?
asia007
程序员不能一味跟需求走
编程也有2年了,刚开始不懂的什么都跟需求走,需求是怎样就用代码实现就行,也不管这个需求是否合理,是否为较好的用户体验。当然刚开始编程都会这样,但是如果有了2年以上的工作经验的程序员只知道一味写代码,而不在写的过程中思考一下这个需求是否合理,那么,我想这个程序员就只能一辈写敲敲代码了。
我的技术不是很好,但是就不代
- Activity的四种启动模式
百合不是茶
android栈模式启动Activity的标准模式启动栈顶模式启动单例模式启动
android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;
启动模式xml中配置
<activity android:name=".MainActivity" android:launchMode="standard&quo
- Spring中@Autowired标签与@Resource标签的区别
bijian1013
javaspring@Resource@Autowired@Qualifier
Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource、 @PostConstruct及@PreDestroy。
1. @Autowired @Autowired是Spring 提供的,需导入 Package:org.springframewo
- Changes Between SOAP 1.1 and SOAP 1.2
sunjing
ChangesEnableSOAP 1.1SOAP 1.2
JAX-WS
SOAP Version 1.2 Part 0: Primer (Second Edition)
SOAP Version 1.2 Part 1: Messaging Framework (Second Edition)
SOAP Version 1.2 Part 2: Adjuncts (Second Edition)
Which style of WSDL
- 【Hadoop二】Hadoop常用命令
bit1129
hadoop
以Hadoop运行Hadoop自带的wordcount为例,
hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop,需要说明的是,这些命令的使用必须在Hadoop已经运行的情况下才能执行
Hadoop HDFS相关命令
hadoop fs -ls
列出HDFS文件系统的第一级文件和第一级
- java异常处理(初级)
白糖_
javaDAOspring虚拟机Ajax
从学习到现在从事java开发一年多了,个人觉得对java只了解皮毛,很多东西都是用到再去慢慢学习,编程真的是一项艺术,要完成一段好的代码,需要懂得很多。
最近项目经理让我负责一个组件开发,框架都由自己搭建,最让我头疼的是异常处理,我看了一些网上的源码,发现他们对异常的处理不是很重视,研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码,通过他们对异常处理的解决方案,我终
- 记录整理-工作问题
braveCS
工作
1)那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。
2)今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题,以后要是写更大的文件还是得改内存。想问题要长远啊
- org.apache.tools.zip实现文件的压缩和解压,支持中文
bylijinnan
apache
刚开始用java.util.Zip,发现不支持中文(网上有修改的方法,但比较麻烦)
后改用org.apache.tools.zip
org.apache.tools.zip的使用网上有更简单的例子
下面的程序根据实际需求,实现了压缩指定目录下指定文件的方法
import java.io.BufferedReader;
import java.io.BufferedWrit
- 读书笔记-4
chengxuyuancsdn
读书笔记
1、JSTL 核心标签库标签
2、避免SQL注入
3、字符串逆转方法
4、字符串比较compareTo
5、字符串替换replace
6、分拆字符串
1、JSTL 核心标签库标签共有13个,
学习资料:http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html
功能上分为4类:
(1)表达式控制标签:out
- [物理与电子]半导体教材的一个小问题
comsci
问题
各种模拟电子和数字电子教材中都有这个词汇-空穴
书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴
我现在回过头翻大学时候的教材,觉得这个
- Flashback Database --闪回数据库
daizj
oracle闪回数据库
Flashback 技术是以Undo segment中的内容为基础的, 因此受限于UNDO_RETENTON参数。要使用flashback 的特性,必须启用自动撤销管理表空间。
在Oracle 10g中, Flash back家族分为以下成员: Flashback Database, Flashback Drop,Flashback Query(分Flashback Query,Flashbac
- 简单排序:插入排序
dieslrae
插入排序
public void insertSort(int[] array){
int temp;
for(int i=1;i<array.length;i++){
temp = array[i];
for(int k=i-1;k>=0;k--)
- C语言学习六指针小示例、一维数组名含义,定义一个函数输出数组的内容
dcj3sjt126com
c
# include <stdio.h>
int main(void)
{
int * p; //等价于 int *p 也等价于 int* p;
int i = 5;
char ch = 'A';
//p = 5; //error
//p = &ch; //error
//p = ch; //error
p = &i; //
- centos下php redis扩展的安装配置3种方法
dcj3sjt126com
redis
方法一
1.下载php redis扩展包 代码如下 复制代码
#wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz
2 tar -zxvf 解压压缩包,cd /扩展包 (进入扩展包然后 运行phpize 一下是我环境中phpize的目录,/usr/local/php/bin/phpize (一定要
- 线程池(Executors)
shuizhaosi888
线程池
在java类库中,任务执行的主要抽象不是Thread,而是Executor,将任务的提交过程和执行过程解耦
public interface Executor {
void execute(Runnable command);
}
public class RunMain implements Executor{
@Override
pub
- openstack 快速安装笔记
haoningabc
openstack
前提是要配置好yum源
版本icehouse,操作系统redhat6.5
最简化安装,不要cinder和swift
三个节点
172 control节点keystone glance horizon
173 compute节点nova
173 network节点neutron
control
/etc/sysctl.conf
net.ipv4.ip_forward =
- 从c面向对象的实现理解c++的对象(二)
jimmee
C++面向对象虚函数
1. 类就可以看作一个struct,类的方法,可以理解为通过函数指针的方式实现的,类对象分配内存时,只分配成员变量的,函数指针并不需要分配额外的内存保存地址。
2. c++中类的构造函数,就是进行内存分配(malloc),调用构造函数
3. c++中类的析构函数,就时回收内存(free)
4. c++是基于栈和全局数据分配内存的,如果是一个方法内创建的对象,就直接在栈上分配内存了。
专门在
- 如何让那个一个div可以拖动
lingfeng520240
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml
- 第10章 高级事件(中)
onestopweb
事件
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
- 计算两个经纬度之间的距离
roadrunners
计算纬度LBS经度距离
要解决这个问题的时候,到网上查了很多方案,最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。
/**
*
* @param longitudeA
* 经度A点
* @param latitudeA
* 纬度A点
* @param longitudeB
*
- 最具争议的10个Java话题
tomcat_oracle
java
1、Java8已经到来。什么!? Java8 支持lambda。哇哦,RIP Scala! 随着Java8 的发布,出现很多关于新发布的Java8是否有潜力干掉Scala的争论,最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围,但Java并非是函数式编程王位的真正觊觎者。
2、Java 9 即将到来
Oracle早在8月份就发布
- zoj 3826 Hierarchical Notation(模拟)
阿尔萨斯
rar
题目链接:zoj 3826 Hierarchical Notation
题目大意:给定一些结构体,结构体有value值和key值,Q次询问,输出每个key值对应的value值。
解题思路:思路很简单,写个类词法的递归函数,每次将key值映射成一个hash值,用map映射每个key的value起始终止位置,预处理完了查询就很简单了。 这题是最后10分钟出的,因为没有考虑value为{}的情