小笼包是馒头-CSDN博客

原创从JavaScript到Java（一）：基础知识

JS// 函数声明 function myFunction(param1 , param2) {// 函数体 return result;} // 函数表达式 var myFunction = function(param1 , param2) {// 函数体 return result;// 箭头函数 var myFunction =(param1 , param2) => {// 函数体 return result;Java// 函数体 return result;

2023-03-29 18:51:26 2743 1

原创 JavaScript 模块化：CommonJS、AMD、CMD、UMD、ES Module

JavaScript 模块化：CommonJS、AMD、CMD、UMD、ES Module为什么要模块化用原始方式加载，所有变量都挂载在window对象上，前端功能越来越多，引用的包越来越多，难免会有冲突。因此需要模块化来区分不同的功能。以下简述下各种模块化方案的使用方法，只做了解，不做深入。在webpack和babel工具统治下，我们只需要学好ES Module 即可一、commonJS特点所有代码都运行在模块作用域，不会污染全局作用域。模块可以多次加载，但是只会在第一次加载时运行

2021-05-11 18:45:49 394 9

原创【webpack5】webpack-dev-server 热更新不能自动刷新浏览器

【webpack5】webpack-dev-server 热更新不能自动刷新浏览器一、问题配置了热更新，但是不会自动刷新页面// webpack.dev.config.js { devServer: { progress:true,// 进度条 port: 10086, // 本地服务器端口号 hotOnly:true,// 页面构建失败不刷新页面 hot: true, // 热重载 open: true, // 自定打开浏览器 pro

2021-05-11 18:35:24 3328 6

原创 React开发过程的性能优化建议

React开发过程的性能优化建议一、使用合理的key原因React根据key来决定是销毁重新创建组件还是更新组件。重建肯定比更新组件更消耗性能。实践// 使用唯一value值作为替代class Checkbox extends React.Component{ render(){ return ( list.map(row =>{ return <checkbox key={row.code} value={row.code} name

2021-05-05 17:38:31 174

原创 React还能这么玩（二）组件props传入方法替代直接传值

React还能这么玩（二）组件props传入方法替代直接传值一、例子这是一个渲染列表的组件使用方式，这边有个按钮实现点击下载列表的数据。由前端数据生成Excel：class App { handleColumns = () =>{ // 一堆计算 return [] } getDownloadFileName = () =>{ // 一堆计算 return `${dateStr}_${timestamp

2021-03-23 17:28:37 188 1

原创【webpack5】性能优化

【webpack5】性能优化优化构建速度（开发体验效率）优化产出代码（应用性能、网络性能啥的）一、优化构建速度1、babel-loader 开启缓存当有设置时，指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)babel-loader?cacheDirectory module: { rules: [ {

2021-02-03 16:20:37 2080 1

原创【webpack5】低版本浏览器兼容ES6+解决方案

【webpack5】低版本浏览器兼容ES6+解决方案一、垫片@babel/preset-env依赖npm install @babel/preset-env -Dnpm install core-js --save1、全局引用配置// .babellrc{ "presets": [ "@babel/preset-env" ]}JS引用// js文件入口,如 index.js// 引入全局垫片import "core-js/stable";//

2021-02-01 09:48:51 2969 8

原创【webpack5】 autoprefixer不生效

【webpack5】 autoprefixer不生效一、问题一些新css特性需要加前缀来兼容浏览器： transform: rotate(30deg);应该被转为：/* -moz、-ms、-o、-webkit*/-webkit-transform: rotate(30deg);transform: rotate(30deg);官方文档指导下配置（不生效）：webpack.config.js module: { rules: [{ test: /\.css

2021-01-29 15:36:42 2172 1

原创【webpack5】webpack-dev-server 不能正常启动

【webpack5】webpack-dev-server 不能正常启动一、问题webpack-dev-server --open --config script/webpack.dev.js webpack4环境下可以正常启动，但是升级webpack5后依赖都要升级，再跑这个指令就会报错：internal/modules/cjs/loader.js:584 throw err; ^Error: Cannot find module 'webpack-cli/bin/confi

2021-01-29 15:31:55 2745 9

原创三分钟学JS设计模式（十）享元模式

享元模式一、定义享元模式（Flyweight Pattern）主要用于减少创建对象的数量，以减少内存占用和提高性能。举个栗子：有两种食物容器：杯子和碗，假如碗只能装米饭、杯子只能装饮料。有10碗的米饭和10杯的饮料。正常情况装这些食物需要10个碗和10个杯子，为了少洗碗（系统资源有限）可以重复用这些餐具，这时候最少只需要1个碗和1个杯子。这就是享元模式。二、场景数据库连接：多次操作同一个数据库数据不需要多次创建数据库连接对象，只需创建一个，然后重复使用。三、代码举例node连接mong

2021-01-14 15:31:04 85 1

原创三分钟学JS设计模式（九）组合模式

桥接模式一、什么是桥接模式桥接（Bridge）是用于把抽象化与实现化解耦，使得二者可以独立变化。这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。举个栗子：老王要做两件事，一是脚踏车，接送孩子。二是买菜，同样是脚踏车，运输菜。很明显，脚踏车这个提供动力的行为可以抽象化，而具体任务是：接送小王和运输菜。于是给自行车加了电机，把提供动力任务交给电机，自己只需要关注具体实现：接送孩子、运输菜。二、优缺点优点：1、抽象化与实现化解耦，隐藏实现细节，只

2020-12-22 23:09:23 208 1

原创三分钟学JS设计模式（番外一）观察者模式与发布-订阅模式

观察者模式与发布-订阅模式一、定义观察者模式（Observer），当一个对象被修改时，则会自动通知依赖它的对象。发布订阅模式（Pub-Sub Pattern）：二、优缺点三、场景例子、代码实现模拟公众号订阅行为// 【公众号订阅器】const Observer = function () { // 订阅者信息 this.listeners = [];};// 订阅操作，返回取消当前订阅的方法Observer.prototype.subscribe = functio

2020-12-21 10:11:40 180

原创三分钟学JS设计模式（八）桥接模式

桥接模式一、什么是桥接模式桥接（Bridge）是用于把抽象化与实现化解耦，使得二者可以独立变化。这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。举个栗子：老王要做两件事，一是脚踏车，接送孩子。二是买菜，同样是脚踏车，运输菜。很明显，脚踏车这个提供动力的行为可以抽象化，而具体任务是：接送小王和运输菜。于是给自行车加了电机，把提供动力任务交给电机，自己只需要关注具体实现：接送孩子、运输菜。二、优缺点优点：1、抽象化与实现化解耦，隐藏实现细节，只

2020-12-15 10:02:52 122

原创三分钟学JS设计模式（七）外观模式

外观模式一、什么是外观模式外观模式（Facade Pattern）隐藏系统、接口复杂复杂性，并向客户端提供了一个客户端可以访问系统的接口。举个栗子：小王是个小孩子，想学骑自行车。但是普通自行车在前进的过程中还要保持左右平衡（系统、接口复杂），老王给装了辅助小轮（外观模式加持），这样加装的自行车就更容易使用了，小王就只管前进，再也不怕摔倒了。二、优缺点优点：1、简化复杂接口；2、解耦，屏蔽对原系统的直接访问，提高了安全性。缺点：1、不够灵活需要新功能的时候需要对原有的外观模式

2020-12-15 09:30:45 165 3

原创三分钟学JS设计模式（六）适配器模式

适配器模式一、什么是适配器模式适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。举个栗子：美国的电压是110V，自己的手机是220V。买个适配器，手机就能用了。二、优缺点优点：提高代码可复用性：旧的模块接口不支持新的功能，加一层适配就能复用。灵活性好：不影响原接口，不影响被适配的模块缺点：过多地使用适配器，会让系统非常零乱，不易整体进行把握。比如，明明看到调用的是 A 接口，其实内部被适配成了 B 接口的实现。[菜鸟教程]三、场景例子、代

2020-12-09 10:48:19 142

原创三分钟学JS设计模式（五）代理模式

代理模式一、什么是代理模式在代理模式（Proxy Pattern）中，一个类代表另一个类的功能。举个栗子：我们上饱了么点外卖的时候商家做外卖并不是直接送的，而是把外卖给了骑手（代理）送到你的手中，你和商家是没有直接接触的。骑手代理你的外卖期间可以做很多事情比如偷吃你一根香肠。二、优缺点优点：1、隔离作用：如上栗子，商家跟客户直接隔着骑手（代理），客户只能吃商家的外卖，并不能因为难吃殴打老板。因为骑手只代理送外卖业务，并不负责打人。2、高扩展性；商家可以让骑手代理送，可以让美团骑手送

2020-12-08 20:09:18 110

原创三分钟学JS设计模式（四）工厂模式

工厂模式一、什么是工厂模式工厂模式（Factory Pattern）是最常用的设计模式之一。创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。举个栗子：老王开了家马铃薯加工厂。有一天对负责人说：我要生产薯片，于是工厂生产出薯片。第二天，对负责人说：我要吃薯条，于是生产出薯条。期间老王根本不用知道工厂怎么生产，只需要说要什么。这就是工厂模式。二、优缺点优点：1、简单易用：调用者只需要知道名称就能创建对应的对象，调用者只关心接口，实现逻辑都在工厂里面。2、可

2020-12-08 18:46:12 193 5

原创三分钟学JS设计模式（三）单例模式

单例模式一、什么是单例模式单例模式（Singleton Pattern）是最简单的设计模式之一：一个单一的类，负责创建自己的对象，同时提供一个方法直接获取唯一的实例。其中当第一次获取这个对象的时候才实例化这个对象，叫做懒汉模式，反之如果代码代码一加载就实例化一个对象叫做饿汉模式举个栗子：老王生活所迫，开上了滴滴。早上八点开启接单模式，当接到单后才启动车子（实例化对象），这个叫懒汉模式。如果早上开启接单的时候就启动车子，这个就叫饿汉模式。在JS中我们还能拓展到对DOM对象的处理，如Loading效果。

2020-12-08 10:06:58 81

原创三分钟学JS设计模式（二）观察者模式

观察者模式一、什么是观察者模式观察者模式（Observer），又叫订阅模式，当一个对象被修改时，则会自动通知依赖它的对象。举个栗子：老王和小李都关注（订阅、subscribe）了XX公众号，公众号有新内容的时候会自动通知（notify）到所有关注者，此时老王和小李都会收到消息。不喜欢的时候去掉订阅就不会再收到消息了。二、优缺点优点：1、有一套触发机制。2、观察者和被观察者是抽象耦合的（两者的关联仅有订阅和通知两种行为）。缺点：1、被观察者有很多观察者会有很多，通知到所有的

2020-12-07 10:51:11 122

原创三分钟学JS设计模式（一）修饰器模式

装饰器（修饰）模式一、什么是装饰（修饰）模式装饰器（Decorator）：动态地给一个对象添加一些额外的职责。打个比方：老王是个勤奋的打工人，工作日穿上格子衫在办公室里面当程序员，周末黄袍加身当上美团配送员，每天晚上回家穿上睡衣都会看动漫。这边老王就是一个纯粹的人，格子衫、黄袍、睡衣是能给他不同的工作属性，哪天内裤外穿就能当超人了。改变老王的属性只需要给他穿不同的衣服（修饰器），就能有不同的功能二、优缺点优点：装饰器与被装饰的组件功能独立，降低耦合度，拆卸、组装自由。缺点：多个装饰器嵌套出问

2020-12-06 21:51:37 429

原创前端开发的几点经验分享

前端开发的几点经验分享前言码农日益增长的需求功能需要同落后的代码实现之间的矛盾。随着软件项目迭代，代码的日积月累，维护成本变得越来越高。同样是实现功能，怎么能写出更有价值的代码，应该是码农要追求的道路。本文由一个demo入手，讲述下个人对这方面的理解。参考的学习视频（网易云课堂）一、DEMO1.1 需求描述实现一个简易浏览器，功能可以参考我们自己的浏览器。涉及功能如下U...

2019-09-05 09:42:22 604

原创 React组件抽象（二）：高阶组件

React组件抽象(一)：高阶组件前面介绍了组件抽象的方法：mixin。现在我们来介绍下另一种重要的高阶组件(Higher-order Component)，简写HOC。一、高阶组件是什么，为什么要使用?组件被包裹，返回一个增强的组件。打个比方，HOC像钢铁侠的机甲，对于普通人来说，穿上就是复联超人了，这个人并不一定需要关心内部怎么机甲实现方式。为啥要用？被包裹组件不需要关心高阶组件发生...

2019-08-14 23:51:11 288

原创 React还能这么玩（一）组件无render，只为传递数据

React还能这么玩（一）组件无render，只为传递数据前言在翻开源的React组件源码时经常看到一些用法很奇妙的，想着摘录下来，跟大家讨论下。一、例子参考rc-select,此处简化代码描述过程。Selectclass Select extends React.Component{ // 内部的select、option都是原生的React基础组件，先用基础的来替代 /...

2019-08-12 20:24:59 1062

原创 React组件抽象(一): mixin

React组件抽象(一)-Mixin写业务组件的时候常常会有一些功能反复被不同的组件公用，这时候就需要取出相同部分功能，这个过程涉及组件抽象。抽象方式有许多种，如高阶组件（High-order components）和mixin。一、MIxin是什么，为什么要使用Mixin一些古老的面向对象的语言，如C++，有个很强大但是很危险的功能：多重继承。多重继承举个例子：有个程序员写了一本书，...

2019-07-29 23:56:57 566

原创 JavaScript （ES7）: async await

JavaScript ES7: async await一、是什么async function定义一个返回 Promise对象的方法，内部可以配合 await 将异步代码同步化的新特性。二、为什么异步编程的出现带来了很多便利，但是处理起来确实很棘手。2.1 回调$.ajax("/user/login",success:(data)=>{ $.ajax("/user/info...

2019-05-20 17:10:35 227

原创 JavaScript（ES6）： yield的迭代器（Iterator）和生成器（Generator）

迭代器（Iterator）和生成器（Generator）前言最早知道迭代器是在学java的时候，那时候遍历map只能使用迭代器。具体怎么使用我现在忘得差不多了。其他语言应该大部分都有迭代器，甚至SQL也有cursor(游标)。存在即有意义。没有迭代器的日子循环语句迭代数据的时候，需要初始化一个对象来临时记录这个值。let array = [1,2,3];for(let i = 0; ...

2019-05-17 17:44:04 1005

原创性能优化-页面文件加载

前言页面阻塞加载JS，上来就是干随便放是要影响性能的。解决方式1、调整JS顺序将<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>...

2019-04-24 17:31:29 157

原创【GIT】修改GIT提交人记录信息

前言：场景：公司内部有git账号，以工号命名，个人账号参与开源项目；提交开源项目的时候用户名没切换成个人账户，导致项目都是工号的提交记录，违反了公司规定。参考：stackoverflow:How to change the author and committer name and e-mail of multiple commits in Git?51CTO:修改git全部已提交的用...

2019-04-24 15:34:41 1858 2

原创 JavaScript（ES7）： Decorator(修饰器) 简单入门

ES7 Decorator(修饰器) 简单入门前言本文有引用阮一峰的例子，侵删。一、Decorator 是什么很多语言都有对应的Decorator（修饰器），用来修改原类/方法的功能。比如Java的Annotationy注解也算是修饰器。不改变原代码内容逻辑的前提下丰富原有功能class App { get state(){ return 666 } ...

2018-10-09 10:58:20 3330

原创前端性能优化：节流与防抖

前言有时候一些操作可能在短时间内执行多次，但是效果却不是很明显。比如监听键盘Input的时候，敲中文的时候，中文还没打出来已经发起请求n多次；滚动鼠标的时候也会触发好多次，十分影响性能。所以需要加入“防抖”或者“节流”来优化。参考：https://blog.csdn.net/crystal6918/article/details/62236730侵删。正文一、防抖（debounce）若...

2018-10-08 11:12:28 1479 2

原创跨域问题以及解决方案

跨域问题以及解决方案一，什么是跨域因为安全问题，非同源的网站发送请求数据，会被浏览器拒绝。二，跨域的原因就是跨域名，跨端口，跨协议举个例子： http://www.baidu.com/hello/world.html 请求地址形式是否跨域 http://www.baidu.com/test/a.html 同一域名，不同文件夹非跨...

2018-09-03 18:28:18 3219

原创 JavaScript的正则（RegExp）

JavaScript的正则（RegExp）前言此文不作正则规则讲解，只写JavaScript对正则的应用。一、RegExp 的应用活着的意义是处理字符：解析，提取一段字符中想要的内容。如：解析括号内的内容 "he(llow)orld".match(/$(.+?)$/)[1];//llow格式检查，常用于校验字符串是否满足条件，如校验输入内容...

2018-09-03 16:24:58 2004

原创正则表达式

正则表达式前言参考资料：菜鸟教程：http://www.runoob.com/regexp/regexp-syntax.html。笔者的学习的网站，以下为自己理解内容加上部分内容引用，侵删。一、语法正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子...

2018-08-23 14:21:35 381

原创 JavaScript字符串replaceAll方法实现

JavaScript字符串replaceAll方法实现前言有时候需要使用替换字符串某些内容，我们会想到：String.prototype.replace//想把所有A替换成空字符串&amp;amp;quot;ABCDABCD&amp;amp;quot;.replace(&amp;amp;quot;A&amp;amp;quot;,&amp;amp;quot;&amp;amp;quot;);//

2018-08-09 18:27:03 681

原创基于Plupload的图片压缩上传

前言这里的上传工具基于JQuery、Plupload传送门：Plupload官方、中文文档为什么要做图片压缩？现在手机拍照都快10M了，但是有时候图片上传只要看得清楚就可以了，比如上传身份证200k能看清楚，为什么要上传20M？这样做的好处是减少服务器存储压力、减少带宽占用。为什么要自己做一个压缩图片的？官方有提供压缩方式：resize: { width: 1...

2018-03-01 00:20:58 2966

原创 JavaScript（ES6）： Promise 与异步编程

一、Promise 与异步编程, 异步编程的背景知识。回调、ES6 Promise等用法

2018-02-12 10:38:48 1048

原创 JavaScript （ES8/ES2017）新特性

前言内容主要来自网络，主要来自 MDNES（JavaScript）是一门大家都要努力学习语言，也是一门努力不让开发者精通的语言。ES678 大部分功能能通过Polyfill或者Babel来解决。也就是说ES5能实现这些功能/** * ie78 没有 trim方法 * @returns {string} */if(!String.prototype.trim){ Strin

2017-12-01 11:40:06 9587

原创解决：后台传来的有特殊字符的JSON串，解析出现200错误的情况

一、问题：后端因为Excel导入或者其他原因出现一些奇奇怪怪的不可见字符，比如全角空格、制表符等。用ajax取值的时候，遇到这种情况后台正常，前端也只是抛出200，不算是错误的错误。前台取值处于懵逼状态：没有错却没有值。二、解决：暴力直接上代码/** * 用于解析后台传来的有特殊字符的JSON串，解决解析出现200错误的情况 * @param url * @param req

2017-01-17 16:13:39 13041 2

原创解决CSS、JS文件更新网站效果却没实时更新的问题

一、原因修改了CSS/JS 文件却没能够实时更新的原因是浏览器存在缓存，当访问一个页面，如果引用没变，那么就会用缓存的下来的文件，以节省带宽，提高速度。这是个好东西，但是用不好就坑了自己。关闭缓存虽然能够解决，但是会浪费资源，所以不推荐。二、解决1、修改文件名，比如base.js。其改成 base-v20161028.js<script type="text/ja...

2017-01-17 16:09:35 17765 2

原创使用JavaScript将Html table导出Excel

Excel导出的话，因为纯前端导出，IE有工具会提示安全问题，但是仅限IE。谁叫Office是IE的兄弟呢。一、纯前端（原理是利用Excel可以打开HTML格式，改了后缀。不是真正意义上的Excel文件）1、纯JS（兼容性有问题，谷歌可用）介绍：基本没有配置，不能导出表格的格式。具体样式可以去工具包里面看修改，兼容性有毛病。仅供参考，不建议使用。一行代码即可：ExcelUtils.

2017-01-17 15:48:42 22198 8

reduce-image-uploader.zip

前端打印Demo(Jquery)

空空如也