export let createStore = (reducer)=>{ //定义默认的state let state; //定义默认的action let actionTypes = "@@redux/INIT"+Math.random(); let initAction = {type:actionTypes} //将所以需要监听的函数放在这个里面 let listeners = [] //定义getState函数 let getState = ()=>state;…

export let createStore = (reducer)=>{ //定义默认的state let state = {}; //定义默认的action let actionTypes = "@@redux/INIT"+Math.random(); let initAction = {type:actionTypes} //将所以需要监听的函数放在这个里面 let listeners = [] //定义getState函数 let getState = ()=>st…

版权声明:本篇博客大部分代码引用于公众号:java团长,我只是在作者基础上稍微修改一些内容,内容仅供学习与参考 前言:目前mvc框架经过大浪淘沙,由最初的struts1到struts2,到目前的主流框架SpringMvc,并逐渐区域占领市场主流稳定状态,由于其背后强大的Spring家族提供了一系列高可用的组件和服务,SpringMvc在短时间内肯定是无法被超越的.公司里开发的项目第一首先框架就是SpringMvc,在市场上如火如荼,甚嚣尘上.今天我们就来自己手动实现一个简历的阉割版SpringM…

/** * 发送ajax请求 * @type {Object} * 使用方法如下: * $ajax.request( * method: "post", //请求方式 * url: "index.php", //请求的服务器地址 * data: "name=itbsl&age=20",//请求时携带的参数 * dataType: "xml", //期望服务器回应的数据 * callback: function(res)…

使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请求发送是非阻塞的 post ,用户体验好:支持多种数据格式: 缺点,IE 不支持,使用 XHR 作为 fallback 方案 "use strict"; /** * * @author xgqfrms * @license MIT * @copyright xgqfrms * @creat…

FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文件系统.总的来说,它们针对的都是"本地"文件,接下来我们通过自定义FileProvider构建一个"远程"文件系统,我们可以将它视为一个只读的"云盘".由于文件系统的目录结构和文件内容都是通过HTTP请求的方式读取的,所以我们将这个自定义的FileP…

前言 本文是「如何实现一个简易版的 Spring」系列的第二篇,在 第一篇 介绍了如何实现一个基于 XML 的简单 Setter 注入,这篇来看看要如何去实现一个简单的 Constructor 注入功能,实现步骤和 Setter 注入是一样的"套路",先设计一个数据结构去解析表达 XML 配置文件里的信息,然后再使用这些解析好的数据结构做一些事情,比如这里的 Constructor 注入.话不多说,下面我们直接进入正题. 数据结构设计 使用 Constructor 注入方式的 XML…

前言 前面两篇文章(如何实现一个简易版的 Spring - 如何实现 Setter 注入.如何实现一个简易版的 Spring - 如何实现 Constructor 注入)介绍的都是基于 XML 配置文件方式的实现,从 JDK 5 版本开始 Java 引入了注解支持,带来了极大的便利,Sprinng 也从 2.5 版本开始支持注解方式,使用注解方式我们只需加上相应的注解即可,不再需要去编写繁琐的 XML 配置文件,深受广大 Java 编程人员的喜爱.接下来一起看看如何实现 Spring 框架中最常…

前言 本文是 如何实现一个简易版的 Spring 系列第四篇,在 上篇 介绍了 @Component 注解的实现,这篇再来看看在使用 Spring 框架开发中常用的 @Autowired 注入要如何实现,大家用过 Spring 都知道,该注解可以用在字段.构造函数以及setter 方法上,限于篇幅原因我们主要讨论用在字段的方式实现,其它的使用方式大体思路是相同的,不同的只是解析和注入方式有所区别,话不多说,下面进入我们今天的正题-如何实现一个简易版的 Spring - 如何实现 @Autowir…

前言 本文是「如何实现一个简易版的 Spring 系列」的第五篇,在之前介绍了 Spring 中的核心技术之一 IoC,从这篇开始我们再来看看 Spring 的另一个重要的技术--AOP.用过 Spring 框架进行开发的朋友们相信或多或少应该接触过 AOP,用中文描述就是面向切面编程.学习一个新技术了解其产生的背景是至关重要的,在刚开始接触 AOP 时不知道你有没有想过这个问题,既然在面向对象的语言中已经有了 OOP 了,为什么还需要 AOP 呢?换个问法也就是说在 OOP 中有哪些场景其实处…

为了让读者朋友们能够对.NET Core DI框架的实现原理具有一个深刻而认识,我们采用与之类似的设计构架了一个名为Cat的DI框架.在<依赖注入[4]: 创建一个简易版的DI框架[上篇]>中我们介绍了Cat的基本编程模式,接下来我们就来聊聊Cat的设计和实现. 目录一.服务注册:ServiceRegistry 二.DI容器:Cat 三.扩展方法 一.服务注册:ServiceRegistry 由于作为DI容器的Cat对象总是利用预先添加到服务注册来提供对应的服务实例,所以服务注册至关重要.如下…

本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章(<控制反转>.<基于IoC的设计模式>和< 依赖注入模式>)从纯理论的角度对依赖注入进行了深入论述,为了让读者朋友能够更好地理解.NET Core的依赖注入框架的设计思想和实现原理,我们创建了一个简易版本的DI框架,也就是我们在前面文章中多次提及的Cat.我们会上下两篇来介绍这个被称为为Cat的DI框架,上篇介绍编程模型,下篇关注设计实现.[源代码从这里下载] 目录一.DI容器的层…

原文https://www.cnblogs.com/artech/p/net-core-di-04.html 本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章从纯理论的角度对依赖注入进行了深入论述,为了让读者朋友能够更好地理解.NET Core的依赖注入框架的设计思想和实现原理,我们创建了一个简易版本的DI框架,也就是我们在前面文章中多次提及的Cat.我们会上下两篇来介绍这个被称为为Cat的DI框架,上篇介绍编程模型,下篇关注设计实现.[源代码从这里下载]…

前言 之前在 上篇 提到过会实现一个简易版的 IoC 和 AOP,今天它终于来了...相信对于使用 Java 开发语言的朋友们都使用过或者听说过 Spring 这个开发框架,绝大部分的企业级开发中都离不开它,通过 官网 可以了解到其生态非常庞大,针对不同方面的开发提供了一些解决方案,可以说 Spring 框架的诞生是对 Java 开发人员的一大福利,自 2004 年发布以来,Spring 为了解决一些企业开发中的痛点先后引入了很多的特性和功能,其中最重要的就是我们经常听到的 IoC 和 AOP…

使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let args = ???; // } ) const t = new Test(`<a href="{0}">url ={1}, path={2}</a>`); t.format(`https://cdn.xgqfrms.xyz/`, `key`, `value`) //…

使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

使用 js 实现一个简易版的 async 库 具有挑战性的前端面试题 series & parallel 串行,并行 refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

使用 js 实现一个简易版的 vue 框架 具有挑战性的前端面试题 refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

本文基于自身理解进行输出,目的在于交流学习,如有不对,还望各位看官指出. DI DI-Dependency Injection,即"依赖注入":对象之间依赖关系由容器在运行期决定,形象的说,即由容器动态的将某个对象注入到对象属性之中.依赖注入的目的并非为软件系统带来更多功能,而是为了提升对象重用的频率,并为系统搭建一个灵活.可扩展的框架. 使用方式 首先看一下常用依赖注入 (DI)的方式: function Inject(target: any, key: string){ targe…

背景 最近在公司内部进行一个引导配置系统的开发中,需要实现一个多图轮播的功能.到这时很多同学会说了,"那你直接用swiper不就好了吗?".但其实是,因为所有引导的展示都是作为npm依赖的形式来进行插入的,所以我们想要做的就是:尽量减少外部依赖以及包的体积.所以,我们开始了手撸简易版swiper之路. 功能诉求 首先,由于我们所有的内容都是支持配置的,所以首先需要支持停留时间(delay)的可配置:由于不想让用户觉得可配置的内容太多,所以我们决定当停留时间(delay)大于0时,默认开…

目标 参考 https://cn.vuejs.org/v2/guide/reactivity.html 使用 Typescript 编写简易版的 vue 实现数据的响应式和基本的视图渲染,以及双向绑定功能. 测试代码中,编写vue.js是本篇的重点,基本使用方法与常规的Vue一样: <div id='app'> <div>{{ person.name }}</div> <div>{{ count }}</div> <div v-text='…

预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖global.fetch方法或者XMLHttpRequest构造函数,实现开发无感知 M4. mock配置不影响实际的请求,可无缝切换为实际请求 M1. 通过配置文件配置url和response 比较符合我们使用习惯的,也许是下面这种mock方式,有一个专门的配置文件,管理请求的url和返回值.每个请…

前言 在上篇 如何实现 AOP(上) 介绍了 AOP 技术出现的原因和一些重要的概念,在我们自己实现之前有必要先了解一下 AOP 底层到底是如何运作的,所以这篇再来看看 AOP 实现所依赖的一些核心基础技术.AOP 是使用动态代理和字节码生成技术来实现的,在运行期(注意:不是编译期!)为目标对象生成代理对象,然后将横切逻辑织入到生成的代理对象中,最后系统使用的是带有横切逻辑的代理对象,而不是被代理对象,由代理对象转发到被代理对象. 代理模式 动态代理的根源是设计模式中的代理模式,代理模式在 Go…

前言 前面两篇 如何实现 AOP(上).如何实现 AOP(中) 做了一些 AOP 的核心基础知识简要介绍,本文进入到了实战环节了,去实现一个基于 XML 配置的简易版 AOP,虽然是简易版的但是麻雀虽小五脏俱全,一些核心的功能都会实现,通过实现这个简易版的 AOP,相信你会对 AOP 有深入的理解,不止知其然,还能知其所以然.AOP 的顶层接口规范和底层依赖基础组件都是由一个叫 AOP Alliance 的组织制定的,我们经常听到的 AspectJ.ASM.CGLIB 就是其中被管理的一些项目,…

这道js的面试题,是这样的,页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技术( 0, 1, 2, ....9 ),首先我们用闭包封装一个创建li元素的函数. var create = (function(){ var count = 0; return function(){ var oLi = document.createElement( "li" ); oLi.innerHTML = count++; ret…

重新看<JavaScript设计模式与开发实践>一书,第32页发现个简易版的Function.prototype.bind实现,非常容易理解,记录在这了. Function.prototype.bind = function (context) { var self = this; return function () { return self.apply(context, arguments); }; }; var obj = { name: '前端架构师' }; var func = f…

现实 webpack 的打包产物 大概长这样(只把核心代码留下来): 实现一个简版的webpack 依葫芦画瓢,实现思路分2步: 1. 分析入口文件,把所有的依赖找出来(包括所有后代的依赖) 2. 拼接出类似上面的立即执行函数 找依赖 const fs = require('fs'); const path = require('path'); const parser = require('@babel/parser'); const traverse = require('@babel/tr…

了解NPM安装模块时与项目配置文件中的bin配置发生了什么 了解nodejs在控制台中的运行环境及上下文 基于自定义命令集工具集成Yeoman 一.NPM模块安装内幕与nodejs控制台运行环境 1.1NPM模块安装内幕 当我们使用npm install 安装NPM模块时你会思考它到底发生了什么吗? 这个问题在我们日常开发中可能会显得有些多此一举,因为安装依赖和在项目模块中引用这些通过NPM模块都是家常便饭.到这里或许你会灵机一动,当安装angular-cli.create-react-app.…