“懒”在软件设计中,有着重大的意义。最多见的两种“懒”,即是:css
懒得计算git
懒得加载github
“懒得计算”常见于服务器端:web
好比Multiplayer Online Role-PlayingGame,客户端主动计算,游戏服务器平滑过渡,在性能、游戏同步性找一个合适恰当的点。其目的是节约服务器端CPU、内存等的消耗,把许多消耗性能的计算分布在玩家电脑上;promise
好比cache,任何cache的目的都是:懒得从新计算,由于我已经计算过了。浏览器
好比web应用的表单校验,在数据提交给服务器前进行数据有效性校验,固然这样的目的不是为了省去服务器端的校验,客户端与服务器双校验是必须的,只是过滤一部分正常手段提交错了的格式信息,从而偷必定程度的懒;服务器
“懒得加载”常见于浏览器端:好比图片、视频、音频、css、js等的加载。架构
拿最多见的焦点图滚动来讲:焦点图何时初始化完毕?等全部图片加载完成仍是第一张图片加载完成?这里能够好好考虑延迟加载。app
好比一三屏的网页,用户打开时候处于第一屏?第二屏和第三屏的图片是否要加载?仍是根据用户所处的viewport去加载viewport内部的图片?oop
OK,上面说的都跟本文无关,本文主要讲的是js按需加载。
有这样一个页面:
如你所见,用户打开网站,页面有一个a标签,点击可跳转到美女网站,页面还有一个按钮,点击可产生一个运动的小球。以下图所示:
因此专门正对小球抽象出一个对象Ball.js:
define("Ball", { init: function (x,y,r,vx,vy,text) { this.x = x; this.y = y; this.r = r; this.d = 2 * r; this.vx = vx; this.vy = vy; this.text = text; this.element = document.createElement("div"); this.element.innerHTML = text; this.element.style.cssText = "text-align:center;position:absolute; -moz-border-radius:" + this.d + "px; border-radius: " + this.d + "px; width: " + this.d + "px; height: " + this.d + "px;background-color:green;line-height:" + this.d + "px;color:white;"; document.body.appendChild(this.element); var self = this; this.loop = setInterval(function () { self.tick(); }, 15) }, tick: function () { this.x += this.vx; this.y += this.vy; this.element.style.left = this.x + "px"; this.element.style.top = this.y + "px"; } })
后来,网站架构师通过随机抽样统计,发现打开这个页面的10000人当中,其中有9999人点击了美女网站直接跳转去看美女了,而仅剩的1人仍是个女同胞,打开该页面后立马直接关闭,生怕本身老公发现这块宝地。最后统计的结果就是:那个create a ball 的就根本没有人按过。
既然create a ball从未有人点击,那么这个Ball.js就白白加载了,浪费了用户带宽。
这种场景在各类网站中太多了,好比youku登陆相关的弹出层的js,弹出层里表单验证的js。用户进入页面的时候可能仅仅只是想要看视频。因此登陆相关的js能够延迟到用户点击登陆以后再进行加载和执行。固然这个是js很是小,影响甚微,可是若是某一项目板块特别大粒度,按需加载执行就特别重要。
KMDjs做为JS工程化终极解决方案,以Kill AMD和CMD为己任,确定会提供相关的解决方案。
先说一下,KMDjs的懒执行。这点KMDjs开销真的是过小了,由于大部分逻辑都在init才真正执行,因此KMDjs模块ready的开销仅仅是建立类。
KMDjs又是怎么解决懒加载的呢?不卖关子,直接上码:
var crtBtn = document.getElementById("crtBtn"); var balls = []; crtBtn.onclick = function () { kmdjs.get("HelloKMD.Ball", function (Ball) { var ball = new Ball(100, 100, 28, 1, 2, "KMD.js"); balls.push(ball); }); }
固然,也支持 promise style:
kmdjs.get("HelloKMD.Ball").then(function (Ball) { var ball = new Ball(100, 100, 28, 1, 2, "KMD.js"); balls.push(ball); });
其实,上面不是我最初想要的lazy方式。我最初想要的是这样的结果:
kmdjs.config({ name:"HelloKMD", baseUrl: "js", classes: [ { name: "HelloKMD.Ball", lazy:true }, { name: "Util.Bom",url:"Util" } ] }); define("Main",["Util"], { init: function () { var crtBtn = document.getElementById("crtBtn"); var balls = []; crtBtn.onclick = function () { var ball = new Ball(100, 100, 28, 1, 2, "KMD.js"); balls.push(ball); } var vp = Bom.getViewport(); setInterval(function () { for (var i = 0, len = balls.length; i < len; i++) { var ball = balls[i]; (ball.x + ball.r * 2 > vp[2] || ball.x < 0) && (ball.vx *= -1); (ball.y + ball.r * 2 > vp[3] || ball.y < 0) && (ball.vy *= -1); } }, 100) } })
能够看到代码没有任何更改,只不过在config里稍微配置了一番,但这几乎要把wind.js集成进来,把
var ball = new Ball(100, 100, 28, 1, 2, "KMD.js");
变成
var ball=$await(new Ball(……..));
并且要去分析ast,还要去分析current scope,还要遍历scope tree,还要去考虑build的问题,还要去…
最终我放弃!选择了这种kmdjs.get的还不错的方式。若是你有更好的想法、建议或意见,请第一时间告诉我,我会将其糅合进0.0.3版本当中。
https://github.com/kmdjs/kmdjs
目前仍是0.02版本,kmdjs.get将在0.0.3出现…