当前位置: 首页 > 编程日记 > 正文

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.innerHTML = text;var resultShowPanel=document.getElementById("resultShowPanel");resultShowPanel.innerHTML="";resultShowPanel.appendChild(span);
})

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

从代码可以看出:

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

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

原理

先看下图:

20140616084001

拿到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;}
}

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

再举栗子

define2("NS.Song", { init: function (title) { this.title = title; var aa = "xxxxxxxxxxxx"; }, play: function () { alert(this.title); } }) define2("NS.Album", { init: function (title,songs) { this.title = title || "当耐特专辑"; this.songs =songs|| [new Song("当耐特进行曲"), new Song("当耐特荡起双桨")]; }, createSong: function (name) { var song = new Song(name); this.songs.push(song); } }) require2(["NS"], 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/>"; var album = new Album(); text += "album first song:" + album.songs[0].title; span.innerHTML = text; var resultShowPanel2 = document.getElementById("resultShowPanel2"); resultShowPanel2.innerHTML=""; resultShowPanel2.appendChild(span); })

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

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

原理

看图:

20140616090652

相关代码:

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……

求砖和荐。

相关文章:

一文了解Python常见的序列化操作

关于我 编程界的一名小小程序猿&#xff0c;目前在一个创业团队任team lead&#xff0c;技术栈涉及Android、Python、Java和Go&#xff0c;这个也是我们团队的主要技术栈。 联系&#xff1a;hylinux1024gmail.com 0x00 marshal marshal使用的是与Python语言相关但与机器无关的二…

TEE(Trusted Execution Environment)简介

TEE(Trusted Execution Environment)&#xff0c;可信执行环境&#xff0c;该环境可以保证不被常规操作系统干扰的计算&#xff0c;因此称为”可信”。这是通过创建一个可以在TrustZone的”安全世界”中独立运行的小型操作系统实现的&#xff0c;该操作系统以系统调用(由TrustZ…

自动驾驶关键环节:行人的行为意图建模和预测(上)

作者 | 黄浴出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;【导读】介绍一下最近行人行为意图建模和预测的研究工作&#xff0c;还是分上下两部分&#xff0c;本文为上半部分。Social LSTM: Human Trajectory Prediction in Crowded Spaces比较早的是斯坦福大学 201…

自定义windows下自动清除文件夹或者文件的只读属性的脚本

脚本内容入下&#xff1a;其中脚本中 ”/d"作用 &#xff08;可以用来改变当前驱动器目录&#xff09;例如&#xff1a; 我现在是在D盘&#xff0c;现在我要切换到C:\windows目录 脚本参数中 ATTRIB -R /S /D 解释内容如下&#xff1a;&#xff08;上述脚本参数中的 cd …

C++11容器中新增加的emplace相关函数的使用

C11中&#xff0c;针对顺序容器(如vector、deque、list)&#xff0c;新标准引入了三个新成员&#xff1a;emplace_front、emplace和emplace_back&#xff0c;这些操作构造而不是拷贝元素。这些操作分别对应push_front、insert和push_back&#xff0c;允许我们将元素放置在容器头…

Silverlight+WCF 新手实例 象棋 主界面-棋谱-获取列表(三十八)

2019独角兽企业重金招聘Python工程师标准>>> 在线演示地址&#xff1a;SilverlightWCF 新手实例 象棋 在线演示 在SilverlightWCF 新手实例 象棋 主界面-棋谱-布局写谱(三十六)中&#xff0c;我们完成下棋双方的棋谱显示&#xff0c;这节&#xff0c;我们为观众增加…

确认!语音识别大牛Daniel Povey将入职小米,曾遭霍普金斯大学解雇,怒拒Facebook

整理 | 夕颜 出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09; 【导读】10 月 17 日&#xff0c;语音界传奇 Daniel Povey 发布推特&#xff0c;宣布自己 2019 年末将要入职小米&#xff0c;目前正在签订合同阶段&#xff0c;入职后&#xff0c;他将带领一支团队研发…

软链接与硬链接

$ ln f1 f2 #创建f1的一个硬连接文件f2$ ln -s f1 f3 #创建f1的一个符号连接文件f3$ ls -li # -i参数显示文件的inode节点信息转载于:https://www.cnblogs.com/zhizouxiao/p/3794668.html

一文读懂Python复杂网络分析库networkx | CSDN博文精选

作者 | yyl424525来源 | CSDN博客文章目录1. 简介安装支持四种图绘制网络图基本流程2. Graph-无向图节点边属性有向图和无向图互转3. DiGraph-有向图一些精美的图例子环形树状图权重图Giant ComponentRandom Geometric Graph 随机几何图节点颜色渐变边的颜色渐变Atlas画个五角星…

C++11多线程中std::call_once的使用

C11中的std::call_once函数位于<mutex>头文件中。在多线程编程中&#xff0c;有时某个任务只需要执行一次&#xff0c;此时可以用C11中的std::call_once函数配合std::once_flag来实现。如果多个线程需要同时调用某个函数&#xff0c;std::call_once可以保证多个线程对该函…

Solaris 上网配置

2019独角兽企业重金招聘Python工程师标准>>> 早上装solaris10系统的时候&#xff0c;没选默认&#xff0c;选了desk-session模式安装。全英文无界面安装&#xff0c;中间还跑出几个乱码。 靠着随便选随便F2&#xff0c;终于安装完了。 就在那设完分辨率后&#xff0…

Configure,Makefile.am, Makefile.in, Makefile文件之间关系

为什么80%的码农都做不了架构师&#xff1f;>>> 1.autoscan (autoconf): 扫描源代码以搜寻普通的可移植性问题&#xff0c;比如检查编译器&#xff0c;库&#xff0c;头文件等&#xff0c;生成文件configure.scan,它是configure.ac的一个雏形。 your source files…

这款耳机一点不输千元级的AirPods

你如果问我&#xff1a;生活中你觉得必不可少的一件电子产品是什么&#xff1f;那么我会毫不犹豫的回答你&#xff1a;是耳机&#xff01;出门忘带耳机是绝对不能忍听不听没关系&#xff0c;但是有它比较安心我觉得生活中不仅是我很多人都对耳机有一种依赖因为很多人都喜欢音乐…

CUDA Samples: Image Process: BGR to Gray

在图像处理中&#xff0c;颜色变换BGR到Gray&#xff0c;常见的一般有两种计算方式&#xff0c;一种是基于浮点数计算&#xff0c;一种是基于性能优化的通过移位的整数计算。浮点数计算公式为&#xff1a; gray 0.1140 * B 0.5870 * G 0.2989 * R;整数计算公式为&#xff1…

CYQ.Data 数据框架系列索引

2019独角兽企业重金招聘Python工程师标准>>> 索引基础导航&#xff1a; 1&#xff1a;下载地址&#xff1a;http://www.cyqdata.com/download/article-detail-426 2&#xff1a;入门教程&#xff1a;http://www.cyqdata.com/cyqdata/article-cate-33 3&#xff1a;购…

Tesseract 3 语言数据的训练方法

OCR,光学字符识别 光学字符识别(OCR,Optical Character Recognition)是指对文本资料进行扫描&#xff0c;然后对图像文件进行分析处理&#xff0c;获取文字及版面信息的过程。OCR技术非常专业&#xff0c;一般多是印刷、打印行业的从业人员使用&#xff0c;可以快速的将纸质资料…

Windows C++中__declspec(dllexport)的使用

__declspec是Microsoft VC中专用的关键字&#xff0c;它配合着一些属性可以对标准C/C进行扩充。__declspec关键字应该出现在声明的前面。 __declspec(dllexport)用于Windows中的动态库中&#xff0c;声明导出函数、类、对象等供外面调用&#xff0c;省略给出.def文件。即将函数…

图灵奖得主LeCun力推无监督学习:要重视基于能量的学习方法

作者 | Tiernan Ray译者 | 夕颜出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;导语&#xff1a;图灵奖得主深度学习大牛 Yann LeCun 表示&#xff0c;人工智能的下一个发展方向可能是放弃深度学习的所有概率技巧&#xff0c;转而掌握一系列转移能量值的方法。据说&a…

html5小游戏Untangle

2019独角兽企业重金招聘Python工程师标准>>> 今天介绍一个HTML5的小游戏&#xff0c;让大家体验到HTML5带来的乐趣。这个小游戏很简单&#xff0c;只要用鼠标拖动 蓝点&#xff0c;让图上的所有线都不相交&#xff0c;游戏时间就会停止&#xff0c;是动用大家头脑的…

【VMCloud云平台】SCCM(四)域内推送代理

继上一篇云平台完成SCCM部署篇之后&#xff0c;SCCM篇正式开始&#xff0c;今天将开始介绍SCCM为域内机器推送代理&#xff08;紫色为完成实施&#xff0c;红色为实施中&#xff09;&#xff1a; 1、 点击站点&#xff1a; 2、 右键属性&#xff0c;点击客户端安装设置&#…

Python实现决策树(Decision Tree)分类

关于决策树的简介可以参考&#xff1a; http://blog.csdn.net/fengbingchun/article/details/78880934在 https://machinelearningmastery.com/implement-decision-tree-algorithm-scratch-python/ 中给出了CART(Classification and Regression Trees,分类回归树算法,简称CART…

顶尖技术专家严选,15场前沿论坛思辨,2019中国大数据技术大会邀您共赴

扫码了解2019中国大数据技术大会&#xff08;https://t.csdnimg.cn/IaHb&#xff09;更多详情。2019中国大数据技术大会&#xff08;BDTC 2019&#xff09;将于12月5日-7日在北京长城饭店举办&#xff0c;本届大会将聚焦智能时代&#xff0c;大数据技术的发展曲线以及大数据与社…

jQuery 加法计算 使用+号即强转类型

1 var value1 $("#txt1").val(); 2 var value2 $("#txt2").val(); 3 //数值前添加号 number加号和数值加号需要用空格隔开 即实现加法运算 4 $("#txt3").val(value1 value2); 转载于:https://www.cnblogs.com/xiemin-minmin/p/11026784.…

Android Volley 库通过网络获取 JSON 数据

本文内容 什么是 Volley 库 Volley 能做什么 Volley 架构 环境 演示 Volley 库通过网络获取 JSON 数据 参考资料 Android 关于网络操作一般都会介绍 HttpClient 以及 HttpConnection 这两个包。前者是 Apache 开源库&#xff0c;后者是 Android 自带 API。企业级应用&#xff0…

​哪些开发问题最让程序员“头秃”?我们分析了Stack Overflow的11000个问题

作者 | Nick Roberts编译 | AI科技大本营&#xff08;ID:rgznai100&#xff09;自 2008 年成立以来&#xff0c;Stack Overflow 一直在拯救所有类型的开发人员。自那时以来&#xff0c;开发人员提出了数百万个关于开发领域的问题。但是&#xff0c;迫使开发者转向 Stack Overfl…

OpenCV3.3中决策树(Decision Tree)接口简介及使用

OpenCV 3.3中给出了决策树Decision Tres算法的实现&#xff0c;即cv::ml::DTrees类&#xff0c;此类的声明在include/opencv2/ml.hpp文件中&#xff0c;实现在modules/ml/src/tree.cpp文件中。其中&#xff1a;(1)、cv::ml::DTrees类&#xff1a;继承自cv::ml::StateModel&…

ARM 寄存器 和 工作模式了解

一. ARM 工作模式 1. ARM7&#xff0c;ARM9&#xff0c;ARM11&#xff0c;处理器有 7 种工作模式&#xff1b;Cortex-A 多了一个监视模式&#xff08;Monitor&#xff09; 2. 用户模式&#xff1a;非特权模式&#xff0c;大部分任务执行在这种模式&#xff0c;它运行在操作系…

英文版PDF不能显示中文PDF文件的解决方法

首先&#xff0c;PDF如果是英文版本的话&#xff0c;先装一个与之对应的PDF中文包。装上之后要检查的两项&#xff1a;1、PDF本身打开Adobe pdf选择“edit”"Preference""Internet"将"internet"下的三个勾全部勾上"OK"2、IE设置打开IE…

Linux下__attribute__((visibility (default)))的使用

在Linux下动态库(.so)中&#xff0c;通过GCC的C visibility属性可以控制共享文件导出符号。在GCC 4.0及以上版本中&#xff0c;有个visibility属性&#xff0c;可见属性可以应用到函数、变量、模板以及C类。 限制符号可见性的原因&#xff1a;从动态库中尽可能少地输出符号是一…

java web学习项目20套源码完整版

java web学习项目20套源码完整版 自己收集的各行各业的都有&#xff0c;这一套源码吃遍所有作业项目&#xff01; 1、BBS论坛系统(jspsql)2、ERP管理系统&#xff08;jspservlet&#xff09;3、OA办公自动化管理系统&#xff08;Struts1.2Hibernate3.0Spring2DWR&#xff09;4、…