AMD and CMD are dead之KMD.js之懒
缘由
“懒”在软件设计中,有着重大的意义。最常见的两种“懒”,便是:
懒得计算
懒得加载
“懒得计算”常见于服务器端:
比如Multiplayer Online Role-PlayingGame,客户端主动计算,游戏服务器平滑过渡,在性能、游戏同步性找一个合适恰当的点。其目的是节约服务器端CPU、内存等的消耗,把许多消耗性能的计算分布在玩家电脑上;
比如cache,任何cache的目的都是:懒得重新计算,因为我已经计算过了。
比如web应用的表单校验,在数据提交给服务器前进行数据有效性校验,当然这样的目的不是为了省去服务器端的校验,客户端与服务器双校验是必须的,只是过滤一部分正常手段提交错了的格式信息,从而偷一定程度的懒;
“懒得加载”常见于浏览器端:比如图片、视频、音频、css、js等的加载。
拿最常见的焦点图滚动来说:焦点图什么时候初始化完毕?等所有图片加载完成还是第一张图片加载完成?这里可以好好考虑延迟加载。
比如一三屏的网页,用户打开时候处于第一屏?第二屏和第三屏的图片是否要加载?还是根据用户所处的viewport去加载viewport内部的图片?
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";
}
})
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
后来,网站架构师经过随机抽样统计,发现打开这个页面的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);
});
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
当然,也支持 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)
}
})
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
可以看到代码没有任何更改,只不过在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出现…
AMD and CMD are dead之KMD.js之懒的更多相关文章
- AMD and CMD are dead之KMD.js版本0.0.2发布
更新 正式从UglifyJS切换至UglifyJS2 增加依赖可视化功能 压缩代码更加方便 统一风格:如main的class名也不能省略 优化了kmdjs管道 修复了无数bug 通过src开启debu ...
- AMD and CMD are dead之KMD.js依赖可视化工具发布
使用 require("MyAapp.DepTree", function (DepTree) { DepTree(({ renderTo: "holder", ...
- AMD and CMD are dead之KMD规范
What's KMD? 乱世出英雄,KMD名字的由来充满了杀气. Kill AMD and CMD KMD为替代混乱的AMD和CMD世界而生,一统天下.或者让这个混乱的世界更加混乱,导致: KMD A ...
- AMD and CMD are dead之JS工程化终极解决方案KMD.js版本0.0.1发布
回顾 经过两天晚上疯狂的开发调试,伴随着大量掉落的头发和酸痛的颈椎,KMD.js赢来了第一个稳定版本.在此期间KMD规范也有所修改和完善. 这两天主要完成的功能有: 按需加载 版本控制 模块管理 便捷 ...
- AMD and CMD are dead之js模块化黑魔法
var define, require, define2, require2; typeof JSON != "object" && (JSON = {}), fu ...
- AMD and CMD are dead之KMDjs在JS工程化的努力
总览 kmdjs发布了最接近最终版本的0.0.4版本https://github.com/kmdjs/kmdjs,你已经完全可以在项目中使用.我已经无法用语言形容其完美程度.借用我发的微博: 模块 ...
- AMD and CMD are dead之KMDjs集成Blob一键下载全部build包
更新 不zuo,[A/C]MD就不会死,所以kmdjs赢来来其伟大的版本0.0.6,该版本主要的更新有: 移除去了kmdjs.get(..).then的支持,只支持kmdjs.get(-,functi ...
- AMD and CMD are dead之KMDjs内核之依赖分析
有人说js中有三座大三:this.原型链和scope tree,搞懂了他们就算是js成人礼.当然还有其他不同看法的js成人礼,如熟悉js的:OOP.AP.FP.DOP.AOP.当然还听说一种最牛B的j ...
- AMD and CMD are dead之KMDjs内核之分号
在老版本的kmdjs中,强制了分号的要求.但是总感觉不爽,因为在开发Ket - Kmdjs Extension Tools的时候,总需要导入一些开源的库,然后痛苦就来了,总是报错,一查,就是缺少分号! ...
随机推荐
- 搜狗输入法wp风格皮肤
换了个nexus 发现输入法真的没有wp的好用 没办法,刚好搜狗输入法有定制皮肤的选项,所以自己做了个wp风格的输入法皮肤. 一点微小的工作 http://pan.baidu.com/s/1kVsHd ...
- php相对于java、js几点不太一样的地方
1.PHP 变量作用域 在 PHP 中,可以在脚本的任意位置对变量进行声明. 变量的作用域指的是变量能够被引用/使用的那部分脚本. PHP 有三种不同的变量作用域: local(局部) global( ...
- MongoDB 维护Replica Set
在每个MongoDB(版本 3.2.9) Instance中,都有一个本地数据库(local),用于存储 Replication 进程的信息和本地数据.local 数据库的特性是:位于local数据库 ...
- webBrowser 加载网页
事件 webBrowser_DocumentCompleted private void webBrowser_DocumentCompleted(object sender, WebBrowserD ...
- 4、解析配置文件 redis.conf、Redis持久化RDB、Redis的主从复制
1.Units单位 配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit 对大小写不敏感 2.INCLUDES包含 和我们的Struts2配置文件类似,可以通过includes包 ...
- iOS开发之使用CocoaPods更新第三方出现“target overrides the `OTHER_LDFLAGS`……”问题解决方案
今天在自己的项目中用CocoaPods引入第三方SDWebImage的时候,出现了问题.当更新完毕后,在终端没太注意这个问题的提示,就直接使用SDWebImage了,在使用的时候一些方法的提示和头文件 ...
- DevExpress控件安装、汉化使用教程
前言 DevExpress是一个庞大的控件库,也很是好用(没用过,听说),但是要收费. 网上关于DevExpress的教程满天飞,我找了一下午也没找到正确的安装.简单实用教程,还是自己摸索吧. 自己动 ...
- 相克军_Oracle体系_随堂笔记010-SCN
1.SCN的意义?system change number 时间 先后.新旧 select dbms_flashback.get_system_change_number, SCN_TO ...
- 行程编码(atoi函数)
#include<iostream> #include<string> #include<vector> using namespace std; void jie ...
- 【JUC】JDK1.8源码分析之ConcurrentLinkedQueue(五)
一.前言 接着前面的分析,接下来分析ConcurrentLinkedQueue,ConcurerntLinkedQueue一个基于链接节点的无界线程安全队列.此队列按照 FIFO(先进先出)原则对元素 ...