kissy

在写这篇文章之前，我一直在思考该用什么的方式能讲清楚前端为什么要向智能化方向切换的理由，真的反复思考很久，后来决定还是以我做前端的过去 10 年的所见所闻来做个解答吧，这样让大家也都更有些体感。 起源 这段是我跟前端的结缘，想必很多人也跟我一样，懵懵懂懂地就撞入了前端这个行业。 一脚入坑 我接触前端，那还是 2010 年的时候，在那个时候最火的是 网络三剑客 —— Adobe Dreamweaver、Adobe Flash、Adobe Fireworks。 这三款软件都很热门，第一款可以通过可视化编辑器拖拖拽拽、填填配配就可以搞定一张网页，虽然上手起来概念众多、也挺难用的，但至少是那个时代做网页最牛逼的软件了； 第二款是做 Flash 的，配备一门 ActionScript 的语言，当时网上下载了不少大牛做的很极客的 Flash 网站源码，不过代码读起来很吃力； 第三款是做海报的（因为海报图比较大、比较长，切割起来比较耗费内存，这块软件速度比较快）和 Gif 动画的，但我用的少，大部分时间都用 Photoshop CS4 来搞定。虽说这三款软件最火，但真正让我入坑前端（那个时候还没有“前端”这个称呼，有的就是“切图仔”）的理由，是因为我想当一位网页设计师。 当时，想当一位网页设计师的理由有二： 软件工程搞 Java、C++、C 真是挺枯燥无聊的，写一段程序，还得编译、部署

转在前面：（ 淘宝UED ） 3) 绝对定位 。即 Pinterest ，Mark之，KISSY 采用的方式: 可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整； 线上例子 。 缺点: 需要实现知道数据块高度，如果其中包含图片，需要知道图片高度； JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。 KISSY.Waterfall 实现思路 KISSY 的 Waterfall 组件 主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置； 二是下拉滚动时，触发加载数据操作，并把数据添加到目标容器中。 1) 数据块排列 ，算法步骤简述下: 初始化时，对容器中已有数据块元素进行第一次计算，需要用户给定: a，容器元素 — 以此获取容器总宽度； b，列宽度； c，最小列数； 最终列数取的是容器宽度/列宽度和最小列数的最大值，这样保证了，当窗口很小时，仍然出现最小列数的数据； 获得列数后，需要保存每个列的当前高度，这样在添加每个数据块时，才知道起始高度是多少； 依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束； 当所有元素插入完毕后，调整容器的高度为各列最大的高度值

前言 JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。 既然要实现继承，那么首先我们得有一个父类，代码如下： // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉！'); } } // 原型方法 Animal.prototype.eat = function(food) { console.log(this.name + '正在吃：' + food); }; 1、原型链继承 核心： 将父类的实例作为子类的原型 function Cat(){ } Cat.prototype = new Animal(); Cat.prototype.name = 'cat'; //　Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.eat('fish')); console.log(cat.sleep()); console.log(cat instanceof Animal); //true console.log(cat