炫意html5
最早CSS3和HTML5移动技术网站之一

Javascript

设计模式之状态模式 – 深入理解JavaScript系列 43

介绍 状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类。 正文 举个例子,就比如我们平时在下载东西,通常就会有好几个状态,比如准备状态(ReadyState)、下载状态(Downloading...

Webpack 打包优化之速度篇

在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨;当然,那些法子对于打包速度的提升,也是大有裨益。然而,打包速度之于开发体验和及时构建,相当重要;所以有必要对其做更为...

Webpack 打包优化之体积篇

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣;从早期的王者Browserify, Grunt,到后来赢得宝座的&nb...

如何通过vuejs异步组件和webpack代码分割实现路由懒加载

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻...

webpack代码分离特性

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。 常...

vuejs的动态组件和异步组件

在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这...

设计模式之原型模式 – 深入理解JavaScript系列 42

介绍 原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象。 正文 对于原型模式,我们可以利用JavaScript特有的原型继承特性去创建对象的方式,也就是创建的一个对象作为另外一个对象的prot...

Webpack4如何优化?

今天我们主要聊聊在写webpack配置中,如何优化打包后生成的上线代码 1、tree shaking tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码。 它依赖于 ES2015 模块系统中的...

如何使用preload预加载页面资源

本文主要介绍preload的使用,以及与prefetch的区别。然后会聊聊浏览器的加载优先级。 preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行。提供的好处主要是 将加载和执行分离开...

浅谈script标签的defer和async

1. defer和async是什么鬼 今天在做一个小需的时候,忽然看到前辈一句吊炸天的代码 卧槽,竟然同时有async和defer属性,心想着肯定是前辈老司机的什么黑科技,两个一块儿肯定会发生什么神奇化学反应,于是赶紧怀着一颗崇敬的心去翻书...

设计模式之模板方法 – 深入理解JavaScript系列 41

介绍 模板方法(TemplateMethod)定义了一个操作中的算法的骨架,而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 模板方法是一种代码复用的基本技术,在类库中尤为重要,因为他们提取...

设计模式之组合模式 – 深入理解JavaScript系列 40

介绍 组合模式(Composite)将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。 常见的场景有asp.net里的控件机制(即control里可以包含子control,可以递归操作...

设计模式之适配器模式 – 深入理解JavaScript系列 39

介绍 适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一些工作。速成包装器(wrapper)。 正文 我们来举一...

设计模式之职责链模式 – 深入理解JavaScript系列 38

介绍 职责链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理他为止。 也就是说,请求以后,从第一...

设计模式之享元模式 – 深入理解JavaScript系列 37

介绍 享元模式(Flyweight),运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类)。 享元模式可以避免大量非常相似类的开销,在程序设计中,有时需要生产大量细粒度的类实例来表...

设计模式之中介者模式 – 深入理解JavaScript系列 36

介绍 中介者模式(Mediator),用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互。 主要内容来自:http://www.addyosmani.com/reso...

设计模式之迭代器模式 – 深入理解JavaScript系列 35

介绍 迭代器模式(Iterator):提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示。 迭代器的几个特点是: 访问一个聚合对象的内容而无需暴露它的内部表示。 为遍历不同的集合结构提供一个统一的接口,从而支持同样的算法在不同...

设计模式之命令模式 – 深入理解JavaScript系列 34

介绍 命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化;对请求排队或者记录请求日志,以及执行可撤销的操作。也就是说改模式旨在将函数的调用、请求和操作封装成一个单一的对象,然后对这个对象...

设计模式之策略模式 – 深入理解JavaScript系列 33

介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户。 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很多时候都是按照swith语句来判断,但是...

CSS3教程HTML5教程