![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端杂项
文章平均质量分 81
小笼包是馒头
这个作者很懒,什么都没留下…
展开
-
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 · 419 阅读 · 9 评论 -
三分钟学JS设计模式(九)组合模式
桥接模式一、什么是桥接模式桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化。这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦。举个栗子:老王要做两件事,一是脚踏车,接送孩子。二是买菜,同样是脚踏车,运输菜。很明显,脚踏车这个提供动力的行为可以抽象化,而具体任务是:接送小王和运输菜。于是给自行车加了电机,把提供动力任务交给电机,自己只需要关注具体实现:接送孩子、运输菜。二、 优缺点优点:1、抽象化与实现化解耦,隐藏实现细节,只原创 2020-12-22 23:09:23 · 239 阅读 · 1 评论 -
三分钟学JS设计模式(八)桥接模式
桥接模式一、什么是桥接模式桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化。这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦。举个栗子:老王要做两件事,一是脚踏车,接送孩子。二是买菜,同样是脚踏车,运输菜。很明显,脚踏车这个提供动力的行为可以抽象化,而具体任务是:接送小王和运输菜。于是给自行车加了电机,把提供动力任务交给电机,自己只需要关注具体实现:接送孩子、运输菜。二、 优缺点优点:1、抽象化与实现化解耦,隐藏实现细节,只原创 2020-12-15 10:02:52 · 129 阅读 · 0 评论 -
三分钟学JS设计模式(七)外观模式
外观模式一、什么是外观模式外观模式(Facade Pattern)隐藏系统、接口复杂复杂性,并向客户端提供了一个客户端可以访问系统的接口。举个栗子:小王是个小孩子,想学骑自行车。但是普通自行车在前进的过程中还要保持左右平衡(系统、接口复杂),老王给装了辅助小轮(外观模式加持),这样加装的自行车就更容易使用了,小王就只管前进,再也不怕摔倒了。二、 优缺点优点:1、简化复杂接口;2、解耦,屏蔽对原系统的直接访问,提高了安全性。缺点:1、不够灵活需要新功能的时候需要对原有的外观模式原创 2020-12-15 09:30:45 · 177 阅读 · 3 评论 -
前端开发的几点经验分享
前端开发的几点经验分享前言码农日益增长的需求功能需要同落后的代码实现之间的矛盾。随着软件项目迭代,代码的日积月累,维护成本变得越来越高。同样是实现功能,怎么能写出更有价值的代码,应该是码农要追求的道路。本文由一个demo入手,讲述下个人对这方面的理解。参考的学习视频(网易云课堂)一、DEMO1.1 需求描述实现一个简易浏览器,功能可以参考我们自己的浏览器。涉及功能如下U...原创 2019-09-05 09:42:22 · 610 阅读 · 0 评论 -
React组件抽象(一): mixin
React组件抽象(一)-Mixin写业务组件的时候常常会有一些功能反复被不同的组件公用,这时候就需要取出相同部分功能,这个过程涉及组件抽象。抽象方式有许多种,如高阶组件(High-order components)和mixin。一、MIxin是什么,为什么要使用Mixin一些古老的面向对象的语言,如C++,有个很强大但是很危险的功能:多重继承。多重继承举个例子:有个程序员写了一本书,...原创 2019-07-29 23:56:57 · 585 阅读 · 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 · 1038 阅读 · 0 评论 -
性能优化-页面文件加载
前言页面阻塞加载JS,上来就是干随便放是要影响性能的。解决方式1、调整JS顺序将<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>...原创 2019-04-24 17:31:29 · 165 阅读 · 0 评论 -
JavaScript(ES7): Decorator(修饰器) 简单入门
ES7 Decorator(修饰器) 简单入门前言本文有引用阮一峰的例子,侵删。一、Decorator 是什么很多语言都有对应的Decorator(修饰器),用来修改原类/方法的功能。比如Java的Annotationy注解也算是修饰器。不改变原代码内容逻辑的前提下丰富原有功能class App { get state(){ return 666 } ...原创 2018-10-09 10:58:20 · 3408 阅读 · 0 评论 -
前端性能优化:节流与防抖
前言有时候一些操作可能在短时间内执行多次,但是效果却不是很明显。比如监听键盘Input的时候,敲中文的时候,中文还没打出来已经发起请求n多次;滚动鼠标的时候也会触发好多次,十分影响性能。所以需要加入“防抖”或者“节流”来优化。参考:https://blog.csdn.net/crystal6918/article/details/62236730侵删。正文一、防抖(debounce)若...原创 2018-10-08 11:12:28 · 1494 阅读 · 2 评论 -
跨域问题以及解决方案
跨域问题以及解决方案一,什么是跨域因为安全问题,非同源的网站发送请求数据,会被浏览器拒绝。二,跨域的原因就是跨域名,跨端口,跨协议举个例子: http://www.baidu.com/hello/world.html 请求地址 形式 是否跨域 http://www.baidu.com/test/a.html 同一域名,不同文件夹 非跨...原创 2018-09-03 18:28:18 · 3281 阅读 · 0 评论 -
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 · 735 阅读 · 0 评论 -
解决CSS、JS文件更新网站效果却没实时更新的问题
一、原因修改了CSS/JS 文件却没能够实时更新的原因是浏览器存在缓存,当访问一个页面,如果引用没变,那么就会用缓存的下来的文件,以节省带宽,提高速度。这是个好东西,但是用不好就坑了自己。关闭缓存虽然能够解决,但是会浪费资源,所以不推荐。 二、解决1、修改文件名,比如base.js。其改成 base-v20161028.js<script type="text/ja...原创 2017-01-17 16:09:35 · 17872 阅读 · 2 评论