代码改变世界

AMD and CMD are dead之KMDjs在JS工程化的努力

2014-07-03 12:20  【当耐特】  阅读(1441)  评论(0编辑  收藏  举报

总览

kmdjs发布了最接近最终版本的0.0.4版本https://github.com/kmdjs/kmdjs,你已经完全可以在项目中使用。我已经无法用语言形容其完美程度。借用我发的微博:

68d92ef5jw1ehyh20msfdj20hs0dw77y 

模块管理

kmdjs仅仅需要一处配置,即main.js上部的kmdjs.config,用于配置项目名称、baseUrl,并且列出所有Class和其于路径的mapping。在开发桌面程序的时候,这个可能IDE会自动帮助管理。

image

依赖可视

想看整个项目的依赖关系,只需在main后面添加?view

image

当然也支持细粒度的依赖可视,比如引用了其他模块,查看该模块的依赖关系,这个功能会在后续版本中添加。

开发

image

其中,父类的静态属性也可以继承和覆盖。

调试

开启调试非常方便,只需:

image

就可以在任意浏览器的开发者工具里面输出经过kmdjs管线声称的Class,如:

image

延迟按需加载

在kmdjs v0.0.3版本,假如了kmdjs.get方法用于异步加载模块。那个版本只支持单一js文件,而0.0.4版本已经可以自动把该异步模块及其依赖全部获取。写法支持两种方式:回掉形式和promise形式:

image 

打包

早在0.0.1版本,就支持all in one code。开启方式也非常简便:

image

kmdjs会自动创建一个textarea并把打包的代码放入其中,只需把该代码替换原来的<script src=”kmd.js”></script>即可正常运行。

细粒度打包

在写kmdjs第一行代码的时候,我就知道all in one code只有在业务小、或者打包成apk或者ipa时候才能使用。引用前端农民工一句话:

可以把其依赖于项全部单独压缩起来。当且仅当业务规模很小,缓存命中、按需加载收益不明显时,all in one code的方式才因为没那么矬而不被察觉其劣势。

 QQ截图20140703123230

所以,在kmdjs0.0.4版本中,可以支持细粒度打包,打包的模块会自动合并其依赖。而且被打包之后的模块可以被任意kmdjs项目使用。

是不是有点dll的感觉了?我引用某一dll,我就能使用dll里的方法!

重生入口

https://github.com/kmdjs/kmdjs

最后

image

update20140704

今天发布了kmdjs v0.0.5,较大的改动就是build之后的代码经过ug2全力压缩。相关的压缩代码如下:

QQ截图20140704104204