资源依赖问题在 bowl 中的一种解决方式

2016-12-09
阅读 6 分钟
3.7k
bowl 是一个利用 local storage 进行静态资源缓存和加载的工具库,在开发过程中遇到过一些问题,其中比较典型的是加载多个资源的时候资源之间可能出现相互依赖的情况,假设有一个基于 Angular 的应用,开发者在构建工具,如 webpack,中构建出了两个 JS 文件,一个文件包含了项目所有的依赖模块,比如 Angular, jQuery, ...

bowl - 轻量级的前端资源缓存加载器

2016-12-07
阅读 1 分钟
5.4k
现在单页应用越来越多,前端能做的事也越来越多,但随之而来的问题是一个单页应用的 CSS 和 JavaScript 代码的体积也越来越大。应用每次初始化的时候都要加载这些庞大的资源,虽然浏览器有自己的缓存机制,但首先它并不一定靠谱,其次即使缓存有效,每次加载资源时也要向服务器发送一次请求进行确认,这一成本并不能省略。

让函数进化

2015-11-06
阅读 2 分钟
2.5k
假设现在有这样一个场景,一个下单页面,需要根据特定的条件去计算购物车商品的总价,特定的条件包括但不限于选中的商品、是否选择折扣、是否叠加套餐和运费险等。这时我们通常需要写一个用来计算总价的函数getTotalPrice(),然而,函数的参数是不确定的,同时函数内的逻辑也会根据参数的不同而有所变化,最简单的方法是...

Node.js 自动猜单词程序的实现

2015-04-29
阅读 12 分钟
5.9k
过去,在文曲星等各种电子词典中,经常会有一个叫做猜单词的游戏。给定一个单词,告诉你这个单词有几个字母,然后你去猜。输入一个字母,如果单词中包含这个字母,则将单词中所有的这个字母都显示出来,如果猜错,则扣生命值,在生命值扣光之前全部猜对则为胜利。

JavaScript 中继承实现方式归纳

2015-04-08
阅读 4 分钟
4.7k
不同于基于类的编程语言,如 C++ 和 Java,JavaScript 中的继承方式是基于原型的。同时由于 JavaScript 是一门非常灵活的语言,其实现继承的方式也非常多。

Arale源码解析(3)——Base模块和Aspect模块

2014-11-11
阅读 6 分钟
3.4k
Base这个模块实际上才是Arale模块系统中对外的模块,它包含了之前介绍的Class类和Events类,以及自己内部的attribute模块和aspect模块,因此Base模块是真正的基础类。

Arale源码解析(2)——Events

2014-11-06
阅读 7 分钟
3.4k
一旦触发了某个事件,比如click,那么它对应的回调队列中的所有回调函数就会依次被执行。值得一提的时每个回调函数都有各自的执行上下文对象,这个比较特别,回调和上下文在数组中是间隔排列的,因此触发事件和解除绑定时都会特别处理这种特殊的数据结构。我认为之所以选用数组这种结构主要还是为了保证所有回调的触发顺...

Arale源码解析(1)——Class

2014-11-04
阅读 8 分钟
4.9k
Arale是支付宝开发的一套基础类库,提供了一整套前端模块架构,基于CMD规范,所有模块均是以sea.js的标准进行开发。其开发过程借鉴了优秀的开源类库如jQuery, underscore等的经验,并融合发展,最后建立了一套自己的开发机制。

D2 前端技术论坛流水账

2014-10-27
阅读 6 分钟
9.1k
一直想去阿里看看,这次成行,至少 BAT 三总部签到成就是 get 了。经历了多日的降温降水,初到杭州,就赶上了升温,即使穿短袖在阳光下走走也会微微流汗。一大早出门前往阿里西溪园区,担心坐公交来不及,就打车过去,在车上就感叹——阿里的位置真是偏啊,离城区太远了,杭州的地铁只有一条线,像我这种在南京工作,每天...

页面更新价格组件开发记

2014-10-17
阅读 6 分钟
2.6k
本来,做这么个东西也没太大记录的必要,但是通过这个组件(其实就是一段小脚本)的开发,我有了一些别的感悟。考虑到给未来留个回忆,姑且写上一写。

消失的属性

2014-10-04
阅读 2 分钟
2.4k
最近在开发组件的过程中,需要随时监控整个组件对象的构建,包括对象上的属性方法的变更,以及原型链的变化。本来,在测试代码中加一个console.log:

JavaScript 设计模式读书笔记(七)——适配器模式

2014-05-12
阅读 3 分钟
3.2k
本文要说的适配器模式和上一篇门面模式在思想上有相似之处,所以放在一起说。它们都对类的接口进行了一些改变。门面模式是把相似的或是完成相关任务的接口进行组织,提供给用户一个更加简单易用,更适用于某种业务的接口。而适配器模式是要把一个接口转换为另一个接口,它不对接口的功能进行干涉,它不会简化接口,而是...

JavaScript 设计模式读书笔记(六)——门面模式

2014-05-11
阅读 3 分钟
4.2k
有了这些起好名字的快捷方式,身为电脑盲的爸妈就不需要去了解何为浏览器,何为播放器了,照着指示点就是了。这些快捷方式相当于在用户和计算机程序之间架起了一座桥梁,不需要每个用户都像电影里的黑客一样敲着一行行的代码才能使用计算机的功能。这就是门面模式的意义——把复杂的功能(接口)经过包装,让用户(开发者...

浅谈 JavaScript 模块化编程

2014-05-04
阅读 6 分钟
16.2k
JavaScript本身不是一种模块化语言,设计者在创造JavaScript之初应该也没有想到这么一个脚本语言的作用领域会越来越大。以前一个页面的JS代码再多也不会多到哪儿去,而现在随着越来越多的JavaScript库和框架的出现,Single-page App的流行以及Node.js的迅猛发展,如果我们还不对自己的JS代码进行一些模块化的组织的话,...

JavaScript 设计模式读书笔记(五)——工厂模式

2014-05-03
阅读 3 分钟
6k
一般来说,创建对象的时候我们都习惯使用new关键字来调用constructor构造函数,但使用这种方式会有一些缺点,首先构造器函数的创建本身就是为了模仿其他一些面向对象语言的特性,有些人觉得这是non-sense;另一方面,在一个类中用new关键字调用其他类的构造函数,会造成两个类之间的耦合,设计模式应该要尽量避免这些影...

JavaScript 设计模式读书笔记(四)——单体模式和链式调用

2014-05-02
阅读 6 分钟
6k
在多种Javascript设计模式中,单体模式是最简单,也是最基础的设计模式。它基础到似乎不太像是一种设计模式,因为我们在编写代码的过程中随时都会用到,并不需要过多思考,这是它简单的一面。同时,它不仅可以单独存在,甚至也可以成为其他较高级设计模式的组成部分,这也是为什么说它基础的原因。

使用 CSS3 Flexible Boxes 布局

2014-04-26
阅读 4 分钟
6.9k
Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。

Javascript 设计模式读书笔记(三)——继承

2014-04-24
阅读 4 分钟
5k
继承这个东西在Javascript中尤其复杂,我掌握得也不好,找工作面试的时候在这个问题上栽过跟头。Javascript的继承方式属于原型式继承,非常灵活。因此Javascript的继承方式除了基于类的继承之外还有基于原型的原型式继承。

你真的了解 console 吗

2014-04-24
阅读 5 分钟
35.8k
对于前端开发者来说,在开发过程中需要监控某些表达式或变量的值的时候,用 debugger 会显得过于笨重,取而代之则是会将值输出到控制台上方便调试。最常用的语句就是console.log(expression)了。

Javascript 设计模式读书笔记(二)——封装,简单的创建对象模式

2014-04-23
阅读 4 分钟
4.9k
找工作时一些公司给了offer后我就想知道真正拿到手的是多少,毕竟赋税繁重。但各种税也好,五险一金也好我实在是弄不清楚,于是我就会在网上的一些税后收入计算器上进行计算,只需要填写一些基本信息,比如税前收入,所在地区等等,就能够获得详细的结果,包括各种税收的详细数值。在这个过程中,我只是按照接口给定的要...

Javascript 设计模式读书笔记(一)——接口

2014-04-23
阅读 4 分钟
6.3k
此方法的优点是对类实现的接口提供了文档说明,如果需要的接口未实现则会报错。缺点在于不能保证类是否真正实现了接口,只知道它是否说自己实现了接口,即使代码未将接口实现也能通过检查,这将在代码中留下隐患。