![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 78
小笼包是馒头
这个作者很懒,什么都没留下…
展开
-
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 · 406 阅读 · 9 评论 -
三分钟学JS设计模式(十)享元模式
享元模式一、定义享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能。举个栗子:有两种食物容器:杯子和碗,假如碗只能装米饭、杯子只能装饮料。有10碗的米饭和10杯的饮料。正常情况装这些食物需要10个碗和10个杯子,为了少洗碗(系统资源有限)可以重复用这些餐具,这时候最少只需要1个碗和1个杯子。这就是享元模式。二、 场景数据库连接:多次操作同一个数据库数据不需要多次创建数据库连接对象,只需创建一个,然后重复使用。三、代码举例node连接mong原创 2021-01-14 15:31:04 · 87 阅读 · 1 评论 -
三分钟学JS设计模式(九)组合模式
桥接模式一、什么是桥接模式桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化。这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦。举个栗子:老王要做两件事,一是脚踏车,接送孩子。二是买菜,同样是脚踏车,运输菜。很明显,脚踏车这个提供动力的行为可以抽象化,而具体任务是:接送小王和运输菜。于是给自行车加了电机,把提供动力任务交给电机,自己只需要关注具体实现:接送孩子、运输菜。二、 优缺点优点:1、抽象化与实现化解耦,隐藏实现细节,只原创 2020-12-22 23:09:23 · 231 阅读 · 1 评论 -
三分钟学JS设计模式(二)观察者模式
观察者模式一、什么是观察者模式观察者模式(Observer),又叫订阅模式,当一个对象被修改时,则会自动通知依赖它的对象。举个栗子:老王和小李都关注(订阅、subscribe)了XX公众号,公众号有新内容的时候会自动通知(notify)到所有关注者,此时老王和小李都会收到消息。不喜欢的时候去掉订阅就不会再收到消息了。二、 优缺点优点:1、有一套触发机制。2、观察者和被观察者是抽象耦合的(两者的关联仅有订阅和通知两种行为)。缺点:1、被观察者有很多观察者会有很多,通知到所有的原创 2020-12-07 10:51:11 · 126 阅读 · 0 评论 -
三分钟学JS设计模式(番外一)观察者模式与发布-订阅模式
观察者模式与发布-订阅模式一、定义观察者模式(Observer),当一个对象被修改时,则会自动通知依赖它的对象。发布订阅模式(Pub-Sub Pattern):二、 优缺点三、场景例子、代码实现模拟公众号订阅行为// 【公众号订阅器】const Observer = function () { // 订阅者信息 this.listeners = [];};// 订阅操作,返回取消当前订阅的方法Observer.prototype.subscribe = functio原创 2020-12-21 10:11:40 · 181 阅读 · 0 评论 -
三分钟学JS设计模式(八)桥接模式
桥接模式一、什么是桥接模式桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化。这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦。举个栗子:老王要做两件事,一是脚踏车,接送孩子。二是买菜,同样是脚踏车,运输菜。很明显,脚踏车这个提供动力的行为可以抽象化,而具体任务是:接送小王和运输菜。于是给自行车加了电机,把提供动力任务交给电机,自己只需要关注具体实现:接送孩子、运输菜。二、 优缺点优点:1、抽象化与实现化解耦,隐藏实现细节,只原创 2020-12-15 10:02:52 · 124 阅读 · 0 评论 -
三分钟学JS设计模式(七)外观模式
外观模式一、什么是外观模式外观模式(Facade Pattern)隐藏系统、接口复杂复杂性,并向客户端提供了一个客户端可以访问系统的接口。举个栗子:小王是个小孩子,想学骑自行车。但是普通自行车在前进的过程中还要保持左右平衡(系统、接口复杂),老王给装了辅助小轮(外观模式加持),这样加装的自行车就更容易使用了,小王就只管前进,再也不怕摔倒了。二、 优缺点优点:1、简化复杂接口;2、解耦,屏蔽对原系统的直接访问,提高了安全性。缺点:1、不够灵活需要新功能的时候需要对原有的外观模式原创 2020-12-15 09:30:45 · 170 阅读 · 3 评论 -
三分钟学JS设计模式(六)适配器模式
适配器模式一、什么是适配器模式适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁。举个栗子:美国的电压是110V,自己的手机是220V。买个适配器,手机就能用了。二、 优缺点优点:提高代码可复用性:旧的模块接口不支持新的功能,加一层适配就能复用。灵活性好:不影响原接口,不影响被适配的模块缺点:过多地使用适配器,会让系统非常零乱,不易整体进行把握。比如,明明看到调用的是 A 接口,其实内部被适配成了 B 接口的实现。[菜鸟教程]三、场景例子、代原创 2020-12-09 10:48:19 · 147 阅读 · 0 评论 -
前端开发的几点经验分享
前端开发的几点经验分享前言码农日益增长的需求功能需要同落后的代码实现之间的矛盾。随着软件项目迭代,代码的日积月累,维护成本变得越来越高。同样是实现功能,怎么能写出更有价值的代码,应该是码农要追求的道路。本文由一个demo入手,讲述下个人对这方面的理解。参考的学习视频(网易云课堂)一、DEMO1.1 需求描述实现一个简易浏览器,功能可以参考我们自己的浏览器。涉及功能如下U...原创 2019-09-05 09:42:22 · 608 阅读 · 0 评论 -
React组件抽象(一): mixin
React组件抽象(一)-Mixin写业务组件的时候常常会有一些功能反复被不同的组件公用,这时候就需要取出相同部分功能,这个过程涉及组件抽象。抽象方式有许多种,如高阶组件(High-order components)和mixin。一、MIxin是什么,为什么要使用Mixin一些古老的面向对象的语言,如C++,有个很强大但是很危险的功能:多重继承。多重继承举个例子:有个程序员写了一本书,...原创 2019-07-29 23:56:57 · 578 阅读 · 0 评论 -
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 · 1029 阅读 · 0 评论 -
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 · 232 阅读 · 0 评论 -
JavaScript(ES7): Decorator(修饰器) 简单入门
ES7 Decorator(修饰器) 简单入门前言本文有引用阮一峰的例子,侵删。一、Decorator 是什么很多语言都有对应的Decorator(修饰器),用来修改原类/方法的功能。比如Java的Annotationy注解也算是修饰器。不改变原代码内容逻辑的前提下丰富原有功能class App { get state(){ return 666 } ...原创 2018-10-09 10:58:20 · 3379 阅读 · 0 评论 -
前端性能优化:节流与防抖
前言有时候一些操作可能在短时间内执行多次,但是效果却不是很明显。比如监听键盘Input的时候,敲中文的时候,中文还没打出来已经发起请求n多次;滚动鼠标的时候也会触发好多次,十分影响性能。所以需要加入“防抖”或者“节流”来优化。参考:https://blog.csdn.net/crystal6918/article/details/62236730侵删。正文一、防抖(debounce)若...原创 2018-10-08 11:12:28 · 1487 阅读 · 2 评论 -
JavaScript的正则(RegExp)
JavaScript的正则(RegExp)前言此文不作正则规则讲解,只写JavaScript对正则的应用。一、RegExp 的应用活着的意义是处理字符:解析,提取一段字符中想要的内容。如:解析括号内的内容 "he(llow)orld".match(/\((.+?)\)/)[1];//llow格式检查 ,常用于校验字符串是否满足条件,如校验输入内容...原创 2018-09-03 16:24:58 · 2022 阅读 · 0 评论 -
JavaScript字符串replaceAll方法实现
JavaScript字符串replaceAll方法实现前言有时候需要使用替换字符串某些内容,我们会想到:String.prototype.replace//想把所有A替换成空字符串"ABCDABCD".replace("A","");//原创 2018-08-09 18:27:03 · 709 阅读 · 0 评论 -
JavaScript(ES6): Promise 与异步编程
一、Promise 与异步编程, 异步编程的背景知识。回调、ES6 Promise等用法原创 2018-02-12 10:38:48 · 1067 阅读 · 0 评论 -
JavaScript (ES8/ES2017)新特性
前言内容主要来自网络,主要来自 MDNES(JavaScript)是一门大家都要努力学习语言,也是一门努力不让开发者精通的语言。ES678 大部分功能能通过Polyfill或者Babel来解决。 也就是说ES5能实现这些功能/** * ie78 没有 trim方法 * @returns {string} */if(!String.prototype.trim){ Strin原创 2017-12-01 11:40:06 · 9626 阅读 · 0 评论