百姓网NeoForm.js关键原理分析

[王cb]

百姓网的房源发布等页面用的是一种名NeoForm模块化框架这个框架有一个导出全局构造器,具体实例化方法var form = new NeoForm.NeoForm($('#bxForm'), NEO_CONFIG, NEO_DATASOURCE);,这个框架有个特点是它内部模块实现都在它的内部无法直接访问,好在他有个导出模块函数getPlugins,但是导出的是function类型,不是具体实例化对象,不过没关系,

,下面我们来分析它的具体实现关键部分,源码(具体全部源码可在http://s.baixing.net/w/neoform-fang.b3fbcbd5.js下载全部内容)

var NeoForm = function(t) {
function e(r) {
if (n[r])
return n[r].exports;
var o = n[r] = {
i: r,
l: !1,
exports: {}
};
return t[r].call(o.exports, o, o.exports, e),
o.l = !0,
o.exports
}
var n = {};
return e.m = t,
e.c = n,
e.i = function(t) {
return t
}
,
e.d = function(t, n, r) {
e.o(t, n) || Object.defineProperty(t, n, {
configurable: !1,
enumerable: !0,
get: r
})
}
,
e.n = function(t) {
var n = t && t.__esModule ? function() {
return t["default"]
}
: function() {
return t
}
;
return e.d(n, "a", n),
n
}
,
e.o = function(t, e) {
return Object.prototype.hasOwnProperty.call(t, e)
}
,
e.p = "",
e(e.s = 102)
}([function(t, e, n) {([//function1},function(t, e, n) {([//function2},(中间省略),,,, function(t, e, n) {
//function103
"use strict";
var r = this && this.__extends || function() {
var t = Object.setPrototypeOf || {
__proto__: []
}instanceof Array && function(t, e) {
t.__proto__ = e
}
|| function(t, e) {
for (var n in e)
e.hasOwnProperty(n) && (t[n] = e[n])
}
;
return function(e, n) {
function r() {
this.constructor = e
}
t(e, n),
e.prototype = null === n ? Object.create(n) : (r.prototype = n.prototype,
new r)
}
}();
e.__esModule = !0;
var o = n(4)
, i = n(34)
, a = n(20)
, s = n(42)
, l = n(33)
, u = n(41)
, c = n(16)
, p = n(43)
, h = n(39)
, d = n(29)
, f = n(40)
, m = n(91)
, v = n(56)
, g = n(11)
, y = n(12)
, _ = function(t) {
function e() {
return null !== t && t.apply(this, arguments) || this
}
return r(e, t),
e.prototype.getPlugins = function() {
return [s.PostAuth, i.Contact, a.Relation, v.Fang, l.Area, u.Liuma, m.QualityView, c.HardCode, p.PostTracker, h.AutoGen, d.AutoFill, f.AutoSave]
}
,
e.prototype.getControlFactory = function() {
return g.ControlFactory
}
,
e.prototype.getLayoutManager = function() {
return y.layoutManager
}
,
e
}(o.NeoForm);
e.NeoForm = _
}
]);

NeoForm 的主函数也就是构造函数内部是一个function e(r)这个函数作用是构造模块用的,
NeoForm 的主函数 最后的return里面最后的值是e(e.s = 102),也就是e(102),这个102是什么用的呢,传给主函数
NeoForm的参数是[function(t, e, n){},,,]数组,总共个数 是103个,所以NeoForm默认导出模块就说它,那t,e,n又是什么呢,
仔细看NeoForm里面 function e(r),它的return的 t[r].call(o.exports, o, o.exports, e),
o.l = !0,
o.exports
}这个实际作用就是这个103个function每个都是它的参数r,而t就说传给NeoForm 的参数也就说它自己 t[r].call(o.exports, o, o.exports, e),这句话实际意义就是function(t, e, n)的参数t=o,e=o.exports,n=e(也就说这个关键e),n(41), n(16)---整个js里面这样的用处也就是n(索引)就是调用了e,而e的第一个return:if (n[r])
return n[r].exports;就实现了模块导出,下面我们来分析一下
NeoForm默认导出模块(下面称作默认模块),它里面有个var r,比较简单就说参数为e, n,e为构造函数,n为prototype,然后实例化对象new ()|Object.create(n),
最后关键的_ = function(t),这个t就是
103个function其中的一个(o.NeoForm),o = n(4),也就说第四个模块,实际上这个就是NeoFormd基类,默认模块的内部有个 function e() {
return null !== t && t.apply(this, arguments) || this
},这个实际上就是吧t作为构造函数给他的arguments, apply一下,然后用var r实例化这个t就说new e这个function,(实例化产生的就是基类),给他绑定3个prototype
[
getControlFactory,
getLayoutManager,
getPlugins],这里的里面的this指的就是NeoForm基类也就说绑定基类方法,那之类也就是其他模块是怎么实现的呢?就是在默认模块中使用n(索引)也就是e(索引)实现,
相当于执行每个(function(t, e, n))(),最后说下总结一下NeoForm 的默认模块定义了:
e.NeoForm = _,也就是主函数里面的 o.exports=e,即NeoForm 的主函数返回o.exports=e,所以调用NeoFormd方法就变成new NeoForm.NeoForm(),参数是基类的e, n,也就是在html中看到的结果,分析到这里,这个NeoForm优点是使用嵌套的方式实现自己的子模块,实现方式比较巧妙,缺点是需要导出才能被外部访问,但是内部模块实例化需要在默认模块中主动调用实现