AMD and CMD are dead之js模块化黑魔法

缘由

在2013-03-06 13:58的时候,曾甩下一片文章叫:《为什么不使用requirejs和seajs》,并放下豪言说发布一款完美的模块化库,再后来就把那篇文章删了,再然后就没有然后。该用seajs还用seajs,甚至我码的SCJ都是用requirejs组织起来的。

时光飞逝,岁月流转。弹指间,来到了2014年6月15日,也就是昨日,突然码兴大发,一发不可收拾,也许跟最近小说和诗写得比较猛,把码意给压抑了,便有了这次喷发。

js问题

作为一名前MS必应团队资深当耐特(.NET)石专家,拿js与C#开发应用开发做个对比,js主要暴露的问题有:

1.没有class关键字来定义类 2.没有namespace关键字来定义命名空间 3.没有using/require/import/include关键字来处理依赖 4.继承、partial class、static、private、protected、publish等都要通过小技巧或者特定约定规范且手段太多

AMD和CMD的问题

为什么要define(function(){return xx})?

为什么要本是同根生,还要deps?

为什么要module.export?

为什么要define(function(require, exports, module) {})?

为什么所有模块都需要require deps才能使用?

别看多只多写了几个单词,但这绝对是挣扎纠结之后妥协的结果。

你要推翻它?那请制定一个更好的规范,OK?没有就别瞎嚷嚷,OK?

规范

js里一切define的东西皆class创建出来的

js中一切class都在namespace下

js中define("namespace.class",[namespaces],factory)用于把namespace和class名定义好,并可引用依赖的namespace,类似C#using

js中require用于引用依赖,类似于C#using

js中同一namespace下,依赖的模块不需要引用,如define("namespace.classA",factory)不再需要define("namespace.classA",["namespace.classB"],factory)

js中继承直接通过冒号:define("namespace.class:base",[namespaces],factory)

js中部分类直接通过partial关键字define("partial namespace.class",[namespaces],factory)

ps:尼玛!要求这么多,那还是js了吗?一定要把js改成C#一样吗?直接去用cs和ts算了?规范有可行性吗?能实现吗?

恩!js是个可塑性很强的小子,你想把他塑造成什么形象,他就成什么样子。

举个栗子

define("AppName.Song", function () {
    var Song = function (title) {
        this.title = title;
    }
})
define("AppName.Album", function () {
    var Album = {};
    Album.title = "当耐特专辑";
    Album.songs = [new Song("当耐特进行曲"), new Song("当耐特荡起双桨")];
})
require(["AppName"], function () {
    var span = document.createElement("span"), text = "";
    for (var i = 0, len = arguments.length; i < len; i++) {
        text += "第" + i + "个参数:" + arguments[i].toString();
        text += "<br/>"
    }

    var song = new Song("春天的故事");
    text += "song title:" + song.title;
    text += "<br/>";
    text += "album first song:" + Album.songs[0].title;
    span = text;
    var resultShowPanel=document.getElementById("resultShowPanel");
    resultShowPanel="";
    resultShowPanel.appendChild(span);
})

可以在不同操作系统或浏览器环境测试,兼容到IE5.5+

从代码可以看出:

在Album中,不需要引用Song,就可以使用父AppName下的Song

在程序入口require下,直接引用top namespace就可以使用其下的Song和Album

原理

先看下图:

拿到function之后进行toString,再重构该string,然后创建新的Function,再apply执行,把赖的模块传给apply的第二个参数。有码有真相:

_findRefrence = function (deps, callback, isDefine, className, mdName) {
    var i = 0, len = deps.length, moduleArr = [], moduleNameArr = [];
    for (; i < len; i++) {
        for (var key in modules) {
            var arr = key.split("."), ns = arr[0], cl = arr[1];
            if (ns === deps[i]) {
                moduleNameArr.push(cl);
                moduleArr.push(modules[key]);
            }
        }
    }
    var entire = callback.toString();
    var body = entire.slice(entire.indexOf("{") + 1, entire.lastIndexOf("}")) + (isDefine ? ("return " + className + ";") : "");
    var fn = new Function(moduleNameArr, body);
    var obj = fn.apply(null, moduleArr);
    if (isDefine) {
        modules[mdName] = obj;
    }
}

此时该有掌声,但且慢着鼓掌,这是第一个版本,仅仅不够。再看下个栗子:

再举栗子

现在可以看到,define的function没有了?全部成了{init:xxx,xxx:xxx}的JSON格式,require还保留了其回掉的function,这样是符合语义的。

简直是极简主义!简单就是美。但简单的背后做了大量的工作。

原理

看图:

相关代码:

function JSONstringifyWithFuncs(obj) {
    Object.prototype.toJSON = function () {
        var sobj = {}, i;
        for (i in this)
            if (this.hasOwnProperty(i))
                sobj[i] = typeof this[i] == 'function' ?
                    this[i].toString() : this[i];

        return sobj;
    }
}

这样,json里面function的信息也不回丢失。

Class使用的是John Resig的Class,init为构造函数,使用_super可以调用父类方法很方便。

总结

有些好的东西,由于历史原因可能会遭受大量的反对,但这就是我心目中,理想规范方便极简的模块化开发方式,后续发布并支持脚本加载和namespace树,如:

system

system.web

system.web.ui

system.web.ui.control

system.web.ui.control.xx.xxx.xxx.xxx……

求砖和荐。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏深度学习之tensorflow实战篇

计算机常用算法对照表整理

常用对照: NLP CRF算法: 中文名称条件随机场算法,外文名称conditional random field algorithm,是一种数学算法,是2...

51350
来自专栏程序猿DD

并行化:你的高并发大杀器

想必热爱游戏的同学小时候,都幻想过要是自己要是能像鸣人那样会多重影分身之术,就能一边打游戏一边上课了,可惜漫画就是漫画,现实中并没有这个技术,你要么只有老老实实...

22430
来自专栏一名叫大蕉的程序员

简约的JAVA版本MapReduce和日常No.25

昨天做了一个小调查,说看看想看些啥。大概的分布是这样的,一个1代表一个投票。看来还是2、3比较多。 11111 希望看到"算法"回复1。 111...

20250
来自专栏编程一生

lucene原理及源码解析--核心类

16720
来自专栏FreeBuf

逆向分析智能窗帘频射协议

近来我热衷于对家庭自动化设备的破解,然后将它们添加到我的Homekit集成包之中。这事情要从几个月前说起,当时我爸订购了大批量的RAEX 433MHz射频电动窗...

30750
来自专栏SAP最佳业务实践

想学FM系列(19)-SAP FM模块:派生规则推导策略(2)-派生规则推导步骤-分配、表格查询

4.1.2 分配 分配:是推导过程中给某一字段赋值,如同 A = B 一样赋值。字段可以是源数据,也可以是辅助数据,也可以是目标数据。设置见下图 定义: ? ①...

61860
来自专栏公有云大数据平台弹性 MapReduce

分布式sql引擎原理分析-逻辑执行计划生成

本文档以当前流行的分布式大数据查询引擎Presto为切入点,分析一个query语句怎么生成为一个分段的逻辑计划。

1.3K130
来自专栏吉浦迅科技

DAY37:阅读不同存储器的修饰符

13640
来自专栏偏前端工程师的驿站

JS魔法堂:不完全国际化&本地化手册 之 理論篇

前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求——国际化&本地化。熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"...

23580
来自专栏后端技术探索

php进阶

基本数据类型和数组都为真复制,即为真副本,当属性为对象时,为假复制,改变副本仍会影响原对象.解决方案:

17310

扫码关注云+社区

领取腾讯云代金券