2021 年度 OSC 中国开源项目评选：OSCHINA 人气指数 TOP 50 开源项目公布

经过两周的角逐，2021 年度 OSC 中国开源项目评选第一轮投票已结束。本次评选对「组织」和「个人」的开源项目进行了区分，并针对「组织」通道的项目设置了 7 大分类：基础软件、云原生、大前端、DevOps、开发框架与工具、AI & 大数据、IoT & 5G 。第一轮投票根据票数选出「组织」项目 7 大分类中每个分类的 TOP 5，以及「个人」项目的 TOP 15，总共 50 个项目获得「OSCHINA 人气指数 TOP 50 开源项目」称号。「组织」通道获奖项目（35 个）「个人」通道获奖项目（15 个）恭喜以上项目获得「OSCHINA 人气指数 TOP 50 开源项目」称号，它们将继续参与第二轮投票环节以争夺「最受欢迎项目」奖项，欢迎大家前来投票支持 ↓↓↓ https://www.oschina.net/project/top_cn_2021 from:https://www.oschina.net/question/2918182_2324736

解决IDEA2021版compiler.automake.allow.when.app.running不存在的问题

IntelliJ IDEA 简称 IDEA，被业界公认为最好的 Java 集成开发工具，尤其在智能代码助手、代码自动提示、代码重构、代码版本管理(Git、SVN、Maven)、单元测试、代码分析等方面有着亮眼的发挥。IDEA 产于捷克，开发人员以严谨著称的东欧程序员为主。IDEA 分为社区版和付费版两个版本。 idea2021免费激活教程： https://www.jb51.net/article/195962.htm https://www.jb51.net/article/196349.htm 下面开始今天的正文介绍：很多文章介绍IntelliJ IDEA开启热部署功能都会写到在IntelliJ IDEA中的注册表中开启compiler.automake.allow.when.app.running选项，此选项在IntelliJ IDEA 2021.2之后的版本迁移到高级设置中。如下图所示：如果你安装了中文语言包，那么它在这里到此这篇关于解决IDEA2021版compiler.automake.allow.when.app.running不存在的问题的文章就介绍到这了,更多相关idea2021compiler.automake.allow.when.app.running不存在内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ from:https://www.jb51.net/article/223927.htm

docker: Error response from daemon: driver failed programming external connectivity on endpoint lamp

Docker容器做端口映射报错 docker: Error response from daemon: driver failed programming external connectivity on endpoint lamp3 (46b7917c940f7358948e55ec2df69a4dec2c6c7071b002bd374e8dbf0d40022c): (iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 86 -j DNAT --to-destination 172.17.0.2:80 ! -i docker0: iptables: No chain/target/match by that name. 解决方法 docker服务启动时定义的自定义链DOCKER被清除重启即可

1	systemctl restart docker

git教程--使用git stash保存和恢复进度

一、应用场景当正在dev分支上开发某个项目，这时项目中出现一个bug，需要紧急修复，但是正在开发的内容只是完成一半，还不想提交，这时可以用git stash命令将修改的内容保存至堆栈区，然后顺利切换到hotfix分支进行bug修复，修复完成后，再次切回到dev分支，从堆栈中恢复刚刚保存的内容。由于疏忽，本应该在dev分支开发的内容，却在master上进行了开发，需要重新切回到dev分支上进行开发，可以用git stash将内容保存至堆栈中，切回到dev分支后，再次恢复内容即可。总的来说，git stash命令的作用就是将目前还不想提交的但是已经修改的内容进行保存至堆栈中，后续可以在某个分支上恢复出堆栈中的内容。这也就是说，stash中的内容不仅仅可以恢复到原先开发的分支，也可以恢复到其他任意指定的分支上。git stash作用的范围包括工作区和暂存区中的内容，也就是说没有提交的内容都会保存至堆栈中。二、命令使用 1、git stash 保存当前工作进度，会把暂存区和工作区的改动保存起来。执行完这个命令后，在运行git status命令，就会发现当前是一个干净的工作区，没有任何改动。 git stash 1 使用save可以添加一些注释。 git stash save 'message…' 1 2、git stash list 显示保存进度的列表。 3、git stash pop [–index] [stash_id] 如下为恢复最新的进度到工作区。git默认会把工作区和暂存区的改动都恢复到工作区。 git stash pop 1 如下为恢复最新的进度到工作区和暂存区。（尝试将原来暂存区的改动还恢复到暂存区） git stash pop --index 1 如下为恢复指定的进度到工作区。stash_id是通过git stash list命令得到的。 git stash pop stash@{1} 1 通过git stash pop命令恢复进度后，会删除当前进度 4、git stash apply [–index] [stash_id] 将堆栈中的内容应用到当前目录，不同于git stash pop，该命令不会将内容从堆栈中删除，也就说该命令能够将堆栈的内容多次应用到工作目录中，适应于多个分支的情况。 5、git stash drop [stash_id] 删除一个存储的进度。如果不指定stash_id，则默认删除最新的存储进度。 6、git stash clear 删除所有存储的进度。 7、git stash show 查看堆栈中最新保存的stash和当前目录的差异。 8、git stash branch 从最新的stash创建分支。应用场景：当储藏了部分工作，暂时不去理会，继续在当前分支进行开发，后续想将stash中的内容恢复到当前工作目录时，如果是针对同一个文件的修改（即便不是同行数据），那么可能会发生冲突，恢复失败，这里通过创建新的分支来解决。可以用于解决stash中的内容和当前目录的内容发生冲突的情景。发生冲突时，需手动解决冲突。参考来自： https://blog.csdn.net/stone_yw/article/details/80795669， https://blog.csdn.net/daguanjia11/article/details/73810577， https://git-scm.com/docs/git-stash/2.0.0 ———————————————— 版权声明：本文为CSDN博主「林猛男」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 […]

Java日志框架SLF4J和log4j以及logback的联系和区别

1.SLF4J(Simple logging Facade for Java) 意思为简单日志门面，它是把不同的日志系统的实现进行了具体的抽象化，只提供了统一的日志使用接口，使用时只需要按照其提供的接口方法进行调用即可，由于它只是一个接口，并不是一个具体的可以直接单独使用的日志框架，所以最终日志的格式、记录级别、输出方式等都要通过接口绑定的具体的日志系统来实现，这些具体的日志系统就有log4j,logback,java.util.logging等，它们才实现了具体的日志系统的功能。如何使用SLF4J? 既然SLF4J只是一个接口，那么实际使用时必须要结合具体的日志系统来使用，我们首先来看SLF4J和各个具体的日志系统进行绑定时的框架原理图：其实slf4j原理很简单，他只提供一个核心slf4j api(就是slf4j-api.jar包)，这个包只有日志的接口，并没有实现，所以如果要使用就得再给它提供一个实现了些接口的日志包，比如：log4j,common logging,jdk log日志实现包等，但是这些日志实现又不能通过接口直接调用，实现上他们根本就和slf4j-api不一致，因此slf4j又增加了一层来转换各日志实现包的使用，当然slf4j-simple除外。其结构如下： slf4j-api(接口层) | 各日志实现包的连接层( slf4j-jdk14, slf4j-log4j) | 各日志实现包所以，结合各日志实现包使用时提供的jar包情况为： SLF4J和logback结合使用时需要提供的jar:slf4j-api.jar,logback-classic.jar,logback-core.jar SLF4J和log4j结合使用时需要提供的jar:slf4j-api.jar,slf4j-log412.jar,log4j.jar SLF4J和JDK中java.util.logging结合使用时需要提供的jar:slf4j-api.jar,slf4j-jdk14.jar SLF4J和simple(SLF4J本身提供的一个接口的简单实现)结合使用时需要提供的jar:slf4j-api.jar,slf4j-simple.jar 当然还有其他的日志实现包，以上是经常会使用到的一些。注意，以上slf4j和各日志实现包结合使用时最好只使用一种结合，不然的话会提示重复绑定日志，并且会导致日志无法输出。 slf4j-api.jar:对外提供统一的日志调用接口，该接口具体提供的调用方式和方法举例说明： public class Test { private static final Logger logger = LoggerFactory.getLogger(Tester.class); //通过LoggerFactory获取Logger实例 public static void main(String[] args) { //接口里的统一的调用方法，各具体的日志系统都有实现这些方法 logger.info("testlog: {}", "test"); logger.debug("testlog: {}", "test"); logger.error("testlog: {}", "test"); logger.trace("testlog: {}", "test"); logger.warn("testlog: {}", "test"); } } 如果系统中之前已经使用了log4j做日志输出，想使用slf4j作为统一的日志输出，该怎么办呢？如果之前系统中是单独使用log4j做为日志输出的，这时再想使用slf4j做为日志输出时，如果系统中日志比较多，此时更改日志输出方法肯定是不太现实的，这个时候就可以使用log4j-over-slf4j.jar将使用log4j日志框架输出的日志路由到slf4j上来统一采用slf4j来输出日志。为什么要使用SLF4J? slf4j是一个日志接口，自己没有具体实现日志系统，只提供了一组标准的调用api,这样将调用和具体的日志实现分离，使用slf4j后有利于根据自己实际的需求更换具体的日志系统，比如，之前使用的具体的日志系统为log4j,想更换为logback时，只需要删除log4j相关的jar,然后加入logback相关的jar和日志配置文件即可，而不需要改动具体的日志输出方法，试想如果没有采用这种方式，当你的系统中日志输出有成千上万条时，你要更换日志系统将是多么庞大的一项工程。如果你开发的是一个面向公众使用的组件或公共服务模块，那么一定要使用slf4的这种形式，这有利于别人在调用你的模块时保持和他系统中使用统一的日志输出。 slf4j日志输出时可以使用{}占位符，如，logger.info("testlog: {}", "test")，而如果只使用log4j做日志输出时，只能以logger.info("testlog:"+"test")这种形式，前者要比后者在性能上更好，后者采用+连接字符串时就是new 一个String 字符串，在性能上就不如前者。 2.log4j(log for java) Log4j是Apache的一个开源项目，通过使用Log4j，我们可以控制日志信息输送的目的地是控制台、文件、GUI组件，甚至是套接口服务器、NT的事件记录器、UNIX Syslog守护进程等；我们也可以控制每一条日志的输出格式；通过定义每一条日志信息的级别，我们能够更加细致地控制日志的生成过程。最令人感兴趣的就是，这些可以通过一个配置文件来灵活地进行配置，而不需要修改应用的代码。如何使用？引入jar,使用log4j时需要的jar为：log4j.jar。定义配置文件log4j.properties或log4j.xml 在具体的类中进行使用：在需要日志输出的类中加入：private static final Logger logger = Logger.getLogger(Tester.class); //通过Logger获取Logger实例在需要输出日志的地方调用相应方法即可：logger.debug(“System […]

【破解APP抓包限制】Xposed+JustTrustMe关闭SSL证书验证！

1 前言这篇文章主要想解决的问题是，在对安卓手机APP抓包时，出现的HTTPS报文通过MITM代理后证书不被信任的问题。（工作中在抓取12306请求时就遇到了这个问题）之前的推送讲过，通常要抓取HTTPS加密的数据包，一般使用Charles或者Fiddler4代理HTTP请求，配置证书信任后，便可拿到明文报文。但是由于Charles证书和Fiddler证书并非证书机构颁发的目标站点的合法证书，所以会不被信任。同样的道理，之前说过的神器Packet Capture也存在该问题。对使用Charles等工具进行中间人代理抓取HTTPS请求不会的请看之前的推送：阅读下文来解决这个问题。 2 解决方案要解决这个问题要使用的工具是：Xposed+JustTrustMe （安卓手机需要Root，该方法有手机变砖风险，建议在模拟器下操作） XposedInstaller(xposed框架)是一款可以在不修改APK的情况下影响程序运行（修改系统）的框架服务，基于它可以制作出许多功能强大的模块，且在功能不冲突的情况下同时运作。 JustTrustMe是Github上的一个开源工程，他是一个Xposed模块，用来禁止SSL证书验证。以下是其简介。 JustTrustMe：An xposed module that disables SSL certificate checking. This is useful for auditing an appplication which does certificate pinning. Xposed安装器下载地址安卓5.0版本以下下载地址：https://pan.baidu.com/s/1dEToAvJ 密码:uiu8 安卓5.0版本以上下载地址：https://files.cnblogs.com/files/pingming/xposedinstaller.apk JustTrustMe Relese版本下载地址：https://files.cnblogs.com/files/pingming/JustTrustMe.apk github：https://github.com/Fuzion24/JustTrustMe/releases 以下是安装步骤： 1 安装Xposed安装器 2 安装Xposed框架安装过程需要Root权限，完成后重启。 3 安装JustTrustMe 4 安装完成后打开模块选项勾选JustTrustMe，重启即可。至此，完成配置，再加上之前的Charles或者Fiddler4的HTTPS配置，就能抓取HTTPS请求了。 3 最后最后再强调一次，安装Xposed是有风险的，请尽量在模拟器中操作。文中的Xposed下载链接主要是针对于安卓5.0以下的机器，是在夜神模拟器安卓4.4版本测试通过，其他版本使用大同小异，请自行查找合适版本安装使用。 from:https://www.cnblogs.com/pingming/p/10846068.html

使用Fiddler抓HTTP/HTTPS包，Android7.0以后https抓包失败问题

原博客地址：https://www.52pojie.cn/thread-967606-1-1.html 抓包的重要性网络抓包，是Android应用逆向分析的重中之重，很多时候我们拿到一个APP，不知道从何入手分析，往往是从抓包开始，先弄清楚他与服务器通信的内容，如果一目了然，我们完全可以照搬，自行写一个程序来模拟，如果有一些加密字段和随机字段，也不用担心，我们可以从抓包中了解到一些关键的URL和session之类的信息，然后再反编译分析代码的时候，这些字符串可以帮助我们更快的定位关键代码所在之处。 Fiddler的使用 Fiddler简直是HTTP抓包分析的神器，比Chrome等浏览器自带的调试工具高不知道哪去了，浏览器自带的调试工具，基本只能查看包内容，而Fiddler除了查看，还可以针对不同类型的内容进行格式化，观赏效果真的不要太爽。除了“看”数据包，它还可以一键重发HTTP请求，修改请求内容并重发HTTP请求，拦截修改数据包，返回预设的欺骗性内容等，还可以编写脚本进行更高级的自动化处理。废话不多说，到Fiddler官网下载安装：https://www.telerik.com/fiddler 接下来，我们要开启Fiddler的HTTPS抓包功能，否则只能看到HTTP请求的内容，而HTTPS请求则是密文。在Fiddler中点击 [Tools] — [Options] — [HTTPS] 勾选如下设置：然后在 [Connections] 选项卡中勾选 [Allow remote computers to connect]，我们知道Fiddler默认在8888端口开启HTTP/HTTPS代{过}{滤}理服务，不管是Android、IPhone还是PC等等设备和程序，只要设置了HTTP/HTTPS代{过}{滤}理，流量从Fiddler走，就可以抓包分析。此处开启远程访问，使得我们的Android/Iphone手机可以在WLAN设置上设置它为HTTP/HTTPS代{过}{滤}理，从而手机上的应用的HTTP/HTTPS流量将从Fiddler走，Fiddler就能捕获它们。然后确保手机和PC在同一个局域网中，然后在手机上设置WLAN代{过}{滤}理，此处我的PC内网IP地址是192.168.1.100，你需要根据自己的情况进行设置：然后我们在手机浏览器中打开http://192.168.1.100:8888 下载Fiddler根证书并安装这是Fiddler解密HTTPS通信的关键，Fiddler对HTTPS包解密的原理是中间人攻击，对客户端声称自己的服务端，对服务端声称自己的客户端，两头欺骗。当然要想欺骗成功，前提是让客户端信任自己的根证书，接下来就可以愉快的观看HTTPS请求明文内容了。畅快的抓包 Fiddler这个抓包方法，不仅对Android有用，对IPhone也有用。接下来在手机上，无论是打开浏览器，打开手机上的应用，应用内嵌的WebView，我们都可以在Fiddler中看到HTTP/HTTPS请求内容，但细心查看就会发现，还是有的HTTP包装不到。一般能抓到包的几种情况： Android内置浏览器应用内置WebView 应用使用URLConnection或OkHttp发起HTTP请求抓不到包，很可能目标APP使用了其它HTTP Client，比如自带一个libcurl的so，那样最终调用的是系统的Socket API，WLAN上设置的HTTP/HTTPS代{过}{滤}理对它无效，但其实这种情况很少，市面上绝大多数的应用，都是使用URLConnection和OkHttp，尤其是近些年的应用，几乎都是清一色的OkHttp，所以绝大多数情况下都能抓到包，如果抓不到，很可能是应用自己进行了额外的SSL证书校验工作，根据情况再特殊分析特殊处理。注意！Android7.0以后抓包失败以前我一直都是在Android5.1的手机上抓包分析应用，屡试不爽，但是近来使用Android7.1和Android8.1的手机，发现按照上面设置以后，尽管向Android导入了Fiddler的根证书，还是没法抓到HTTPS包的内容。以 [云闪付] 为例，具体表现为APP中的WebView无法打开内容，和网络断开了一般，Fiddler中可以看到大量的CONNECT然后就没有下文了。回顾之前我们总结的Fiddler抓不到包的原因《Windows抓包指南(二)：Fiddler抓不到的包是怎么回事？》可以猜想，很可能在Android7.0以及以后的版本，即便是导入了Fiddler根证书，但是APP的URLConnection、OkHttp、WebView，仍然不信任系统中导入的Fiddler根证书。验证猜想自行编写Android应用，分别使用URLConnection、OkHttp发起HTTPS请求，用WebView打开HTTPS的网页，看看出了什么错误。

try {

OkHttpClient client = new OkHttpClient();

Request request = new Request.Builder()

.url("https://www.csdn.net")

.build();

Response response = client.newCall(request).execute();

String back_data = response.body().string();

}

catch (Exception e){

Log.e("TestHttp", e.toString());

}

运行后果然抛出了异常： javax.net.ssl.SSLHandshakeException: java.security.cert.CertPathValIDAtorException: Trust anchor for certification path not found. 不出所料，和我们之前在Windows上分析的情况一样，客户端并不信任我们导入系统的Fiddler根证书，那为什么在Android6.0及以前能正常工作呢？经过查阅资料，这个改动果然是从Android7.0开始的。查看Android官方文档说明：https://developer.android.com/training/articles/security-config.html By default, secure connections (using protocols like TLS and HTTPS) from all apps trust the pre-installed system CAs, and apps targeting Android 6.0 (API level 23) and lower also trust […]

带你了解Typescript的14个基础语法

本文分享自华为云社区《Typescript基础语法全解析》，作者：北极光之夜。。一.Ts是什么：首先，强类型不允许随意的隐式类型转换，而弱类型是允许的。JavaScript就是经典的弱类型语言。而Typescript可以说是JavaScript的超集，在JS的基础上新增了许多语法特性，使得类型不再可以随意转换，能大大减少开发阶段的错误。二. 基本语法： 1.声明原始数据类型：在变量后面指定一个关键字表示其只能为什么类型。 string类型：

1	const a: string = 'auroras'

number类型：

1	const b: number = 666 // 包括 NAN Infinity

boolean类型：

1	const c: boolean = true

null类型：

1	const d: null = null

undefined类型：

1	const e: undefined = undefined

symbol类型：

1	const h: symbol = Symbol()

2.声明Object类型：首先，object类型不单单可以指定对象，还可以指定数组或函数：

const foo1: object = {};

const foo2: object = [];

const foo3: object = function(){};

如果只想指定为对象，如下，对象属性都要提前声明好类型：

const obj: {name: string,age: number} = {

name: '北极光',

age:18

}

3.1声明数组类型：可以指定声明Array且通过<>指定元素类型，比如指定声明元素都为数字的数组：

1	const arr: Array<number> = [1,2,3]

第二种方式如下，也指定声明元素都为数字的数组：

1	const arr: number[] = [1,2,3]

3.2声明元组类型：就是要提前指定数组里每个元素的类型，严格一一对应：

1	const tuple: [number,string,boolean] = [666,'auraros',true]

4.声明枚举类型：通过关键字enum声明一个枚举类型，如：

enum Status {

pedding = 1,

resolve = 2,

reject = '3'

}

//访问

console.log(Status.pedding);

如果全不写值，默认值为从0开始递增。如果第一个元素为字符类型，就必须全部定义值。如果第一个元素指定为一个数字，后面元素不写值，那值为第一个元素值按位置大小递增的结果。 5.函数参数与返回类型：函数声明式：指定函数传入参数类型，指定返回值类型，调用时传入参数个数与类型都必须相同：括号里指定每个参数类型，括号右边指定返回值的类型。

function fun (name:string,age:number):string{

return 'sss'

}

fun('auroras',18);

如果传入参数不确定传不传，那么可以给参数加个‘？’表明它是可选的：

function fun (name:string,age?:number):string{

return 'sss'

}

fun('auroras');

或者给参数添加默认值，那也会成为可选参数：

function fun (name:string,age:number=666):string{

return 'sss'

}

fun('auroras');

如果参数个数不确定，可以用扩展运算符加解构赋值表示，当然要传入与指定类型一致的：

function fun (name:string,age:number=666,...res:number[]):string{

return 'sss'

}

fun('auroras',1,2,3);

函数表达式：

const fun2:(name:string,age:number)=>string = function(name:string,age:number){

return 'sss'

}

定义接口时再详细说。 6.任意类型：通过指定any关键字表示任意类型，跟原来 js 一样，可以任意赋不同类型的值：

let num:any = 1;

num = 'a';

num = true;

7.类型断言：类型断言就是明确的告诉typescript这个变量就是某种类型的，百分之百确定。不用typescript在一些情况下要自己推断某些没有明确定义或者多变的场景是什么类型。可以通过 as+类型断言它就是某种类型的：

1 2	const res = 1; const num = res as number;

也可以通过 <类型> 形式断言（不推荐）：

1 2	const res = 1; const num = <number>res

8.接口基本使用：接口可以理解为一种规范，一种契约。可以约束一个对象里应该有哪些成员，这些成员都是怎么样的。 […]

最全的 Vue 面试题+详解答案

前言本文整理了高频出现的 Vue 相关面试题并且附带详解答案难度分为简单中等困难三种类型大家可以先不看答案自测一下自己的 Vue 水平哈如果对原理感兴趣的同学欢迎查看小编的手写 Vue 源码系列文章如果对答案有不一样见解的同学欢迎评论区补充讨论最后欢迎大家点击链接加入到鲨鱼哥的前端群内推讨论技术摸鱼求助皆可(进群免费领取 Vue2 源码思维导图哈) 整理不易如果觉得本文有帮助记得点赞三连哦十分感谢！简单 1 MVC 和 MVVM 区别 MVC MVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范 Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据 View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的 Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据 MVC 的思想：一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来，换句话说就是在 Controller 里面把 Model 的数据赋值给 View。 MVVM MVVM 新增了 VM 类 ViewModel 层：做了两件事达到了数据的双向绑定一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。 MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM […]

最全的手写JS面试题

前言本文整理了前端面试高频出现的手写源码相关的题目其中有小编面试亲自遇到的也有其他同学帮忙补充的整体采用 es6 语法并且以简单易懂版进行实现如果对答案有不一样见解的同学欢迎评论区补充讨论虽然鲨鱼哥也很不喜欢内卷但是在如今人人皆卷的大环境下大家只有比别人更卷才能收获更好的未来最后欢迎大家点击链接加入到鲨鱼哥的前端群内推讨论技术摸鱼求助皆可~~ 整理不易如果觉得本文有帮助记得点赞三连哦十分感谢！ 1 compose 题目描述:实现一个 compose 函数

// 用法如下:

function fn1(x) {

return x + 1;

}

function fn2(x) {

return x + 2;

}

function fn3(x) {

return x + 3;

}

function fn4(x) {

return x + 4;

}

const a = compose(fn1, fn2, fn3, fn4);

console.log(a(1)); // 1+4+3+2+1=11

复制代码

实现代码如下:

function compose(...fn) {

if (!fn.length) return (v) => v;

if (fn.length === 1) return fn[0];

return fn.reduce(

(pre, cur) =>

(...args) =>

pre(cur(...args))

);

}

复制代码

2 settimeout 模拟实现 setinterval(带清除定时器的版本) 题目描述:setinterval 用来实现循环定时调用可能会存在一定的问题能用 settimeout 解决吗实现代码如下:

function mySettimeout(fn, t) {

let timer = null;

function interval() {

fn();

timer = setTimeout(interval, t);

}

interval();

return {

cancel:()=>{

clearTimeout(timer)

}

// let a=mySettimeout(()=>{

// console.log(111);

// },1000)

// let b=mySettimeout(() => {

// console.log(222)

// }, 1000)

复制代码

扩展：我们能反过来使用 setinterval 模拟实现 settimeout 吗？

const mySetTimeout = (fn, time) => {

const timer = setInterval(() => {

clearInterval(timer);

fn();

}, time);

};

// mySetTimeout(()=>{

// console.log(1);

// },1000)

复制代码

扩展思考：为什么要用 settimeout 模拟实现 setinterval？setinterval 的缺陷是什么？答案请自行百度哈这个其实面试官问的也挺多的小编这里就不展开了 3 发布订阅模式题目描述:实现一个发布订阅模式拥有 on emit once off 方法实现代码如下:

class EventEmitter {

constructor() {

this.events = {};

}

// 实现订阅

on(type, callBack) {

if (!this.events[type]) {

this.events[type] = [callBack];

} else {

this.events[type].push(callBack);

}

// 删除订阅

off(type, callBack) {

if (!this.events[type]) return;

this.events[type] = this.events[type].filter((item) => {

return item !== callBack;

});

}

// 只执行一次订阅事件

once(type, callBack) {

function fn() {

callBack();

this.off(type, fn);

}

this.on(type, fn);

}

// 触发事件

emit(type, ...rest) {

this.events[type] &&

this.events[type].forEach((fn) => fn.apply(this, rest));

}

// 使用如下

// const event = new EventEmitter();

// const handle = (...rest) => {

// console.log(rest);

// };

// event.on("click", handle);

// event.emit("click", 1, 2, 3, 4);

// event.off("click", handle);

// event.emit("click", 1, 2);

// event.once("dbClick", () => {

// console.log(123456);

// });

// event.emit("dbClick");

复制代码

4 数组去重实现代码如下:

function uniqueArr(arr) {

return [...new Set(arr)];

}

复制代码

5 数组扁平化题目描述:实现一个方法使多维数组变成一维数组最常见的递归版本如下：

function flatter(arr) {

if (!arr.length) return;

return arr.reduce(

(pre, cur) =>

Array.isArray(cur) ? [...pre, ...flatter(cur)] : [...pre, cur],

[]

);

}

// console.log(flatter([1, 2, [1, [2, 3, [4, 5, [6]]]]]));

复制代码

扩展思考：能用迭代的思路去实现吗? 实现代码如下:

function flatter(arr) {

if (!arr.length) return;

while (arr.some((item) => Array.isArray(item))) {

arr = [].concat(...arr);

}

return arr;

}

// console.log(flatter([1, 2, [1, [2, 3, [4, 5, [6]]]]]));

复制代码

6 寄生组合继承题目描述:实现一个你认为不错的 js 继承方式实现代码如下:

function Parent(name) {

this.name = name;

this.say = () => {

console.log(111);

};

}

Parent.prototype.play = () => {

console.log(222);

};

function Children(name) {

Parent.call(this);

this.name = name;

}

Children.prototype = Object.create(Parent.prototype);

Children.prototype.constructor = Children;

// let child = new Children("111");

// // console.log(child.name);

// // child.say();

// // child.play();

复制代码

7 实现有并行限制的 Promise […]

最全的TypeScript学习指南

前言 Hello 大家好我是鲨鱼哥这次给大家带来的是我曾经非常嫌弃如今却爱不释手的 TS 技术哈哈大家看往期文章可能已经发现鲨鱼哥之前主要是 Vue 技术栈的然后因为 Vue2 和 TS 的结合总感觉不是很丝滑所以我果断就在技术选型的时候去掉了 TS（其实我是觉得用起来很烦和我之前最讨厌的 eslint 一样各种报错让人不爽）但是鲨鱼哥今年换了新公司开启了全新的 react hook+ts 这一套组合拳然后在重新认真学习并在项目里用上了 ts 之后确实真香哈哈最直观的感受就是可以帮我们规避很多类型错误更友好的提示甚至有些方法我们根据定义的类型大概就知道作用是什么了（去掉了写注释的麻烦）况且如今大火的 Vue3 也是 TS 重构的然后 react 和 ts 的结合就更不必说了所以还没有开始 ts 的同学就从现在开始跟着鲨鱼哥一起来学习吧最后欢迎大家点击链接加入到鲨鱼哥的前端群内推讨论技术摸鱼求助皆可整理不易如果觉得本文有帮助记得点赞三连哦十分感谢！ 1 ts 安装和编译第一步新建一个空文件夹用来学习 ts 第二步全局安装 ts 和 ts-node

1 2	cnpm i typescript -g //全局安装ts cnpm i -g ts-node //全局安装ts-node

第三步生成 tsconfig.js 配置文件

1	tsc --init

我们就先按照自动生成的 tsconfig 配置项去使用里面的配置咱们可以先不去管他后续熟练了再去配置第四步在项目下新建一个index.ts 直接写入

1 2	const a: string = "hello"; console.log(a);

[…]

TypeScript+Vue实例完全教程

功能轮播搜索列表懒加载简单动画 loading vue-router.ts vuex.ts vue-class-component使用 vuex-class使用 xxx.d.ts声明文件基于类的编写方式 mock数据 tsconfig.json webpack配置 vue-typescript-cli 项目地址：https://github.com/SimonZhangITer/vue-typescript-dpapp-demo 完成后的简单例子基于类的写法加上静态类型检查，简直不能再嗨

import Vue from "vue";

import Component from "vue-class-component";

import { State } from "vuex-class";

@Component

export default class Shops extends Vue {

@State shops: StoreState.shop[];

@State searchVal: string;

get shopList(): StoreState.shop[] {

const shops = this.shops;

const searchVal = this.searchVal;

return shops.filter(

(el: StoreState.shop) => el.shopName.indexOf(searchVal) > -1

);

}

</script>

为什么使用TypeScript JavaScript的超集支持所有原生JavaScript的语法强类型语言现在很多主流语言都是强类型的，而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后，将会在代码调试、重构等步骤节省很多时间。比如说：函数在返回值的时候可能经过复杂的操作，那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后，直接就可以看到函数的返回值结构，将会非常的方便强大的IDE支持现在的主流编辑器如VSCode、WebStorm、Atom、Sublime等都对TypeScript有着非常友好的支持，主要体现在智能提示上，非常的方便可运行于任何浏览器、计算机、操作系统强大的编译引擎迭代更新快不断更新，提供更加方便友好的Api 微软和Google爸爸 TypeScript是微软开发的语言，而Google的Angular使用的就是TypeScript，所以不用担心会停止维护，至少在近几年内TypeScript都会一门主流开发语言 npm下载量非常高截止2017.12.17, TypeScript在全球范围内的npm日均下载量在30w左右，这个数字将近是vue下载量的10倍，可见TypeScript还是非常受欢迎的 TypeScript配置本项目已经配置完毕，这里记录一下当时的踩坑过程 1. Webpack 首先需要安装ts-loader，这是TypeScript为Webpack提供的编译器，类似于babel-loader

1	npm i ts-loader -D

接着在Webpack的module.rules里面添加对ts的支持(我这里的webpack版本是2.x)：

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

{

test: /\.tsx?$/,

exclude: /node_modules/,

use: [

"babel-loader",

{

loader: "ts-loader",

options: { appendTsxSuffixTo: [/\.vue$/] }

}

]

}

2. tsconfig.json 创建tsconfig.json文件，放在根目录下，和package.json同级配置内容主要也看个人需求，具体可以去typescript的官网查看，但是有一点需要注意：在Vue中，你需要引入 strict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any 类型。这里列出我的配置，功能在注释中给出

{

"include": [

"src/*",

"src/**/*"

"exclude": [

"node_modules"

"compilerOptions": {

// types option has been previously configured

"types": [

// add node as an option

"node"

// typeRoots option has been previously configured

"typeRoots": [

// add path to @types

"node_modules/@types"

// 以严格模式解析

"strict": true,

// 在.tsx文件里支持JSX

"jsx": "preserve",

// 使用的JSX工厂函数

"jsxFactory": "h",

// 允许从没有设置默认导出的模块中默认导入

"allowSyntheticDefaultImports": true,

// 启用装饰器

"experimentalDecorators": true,

"strictFunctionTypes": false,

// 允许编译javascript文件

"allowJs": true,

// 采用的模块系统

"module": "esnext",

// 编译输出目标 ES 版本

"target": "es5",

// 如何处理模块

"moduleResolution": "node",

// 在表达式和声明上有隐含的any类型时报错

"noImplicitAny": true,

"lib": [

"dom",

"es5",

"es6",

"es7",

"es2015.promise"

"sourceMap": true,

"pretty": true

}

3. 修改main.js 把项目主文件main.js修改成main.ts，里面的写法基本不变，但是有一点需要注意：引入Vue文件的时候需要加上.vue后缀,否则编辑器识别不到把webpack的entry文件也修改成main.ts 4. vue-shims.d.ts TypeScript并不支持Vue文件，所以需要告诉TypeScript*.vue文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件，建议放在src目录下再创建一个typings文件夹，把这个声明文件放进去，如：src/typings/vue-shims.d.ts，文件内容： *.d.ts类型文件不需要手动引入，TypeScript会自动加载

declare module '*.vue' {

import Vue from 'vue'

export default Vue

}

到这里TypeScript在Vue中配置就完成了，可以愉快的撸代码了~ 第三方插件库现在Vue官方已经明确提出支持TypeScript，并考虑出一个对应的vue-cli，在这之前，Vue开发团队已经开发出了一些插件库来支持TypeScript，这里简单和大家介绍一下。 Vue-Class-Component vue-class-component是官方维护的TypeScript装饰器，写法比较扁平化。Vue对其做到完美兼容，如果你在声明组件时更喜欢基于类的 API，这个库一定不要错过 ps：用了这个装饰器之后写方法不需要额外加逗号，贼嗨~~~

import Vue from "vue";

import Component from "vue-class-component";

@Component

export default class App extends Vue {

name:string = 'Simon Zhang'

// computed

get MyName():string {

return `My name is ${this.name}`

}

// methods

sayHello():void {

alert(`Hello ${this.name}`)

}

mounted() {

this.sayHello();

}

[…]