jQuery UI widget源码解析

16. // AMD. Register as an anonymous module.

17. define([“jquery”], factory);

18. } else {

19. // Browser globals

20. factory(jQuery);

21. }

22. }(function($) {

23. var widget_uuid = 0,

24. //插件的实例化数量

25. widget_slice = Array.prototype.slice; //数组的slice方法，这里的作用是将参赛arguments 转为真正的数组

26. //清除插件的数据及缓存

27. $.cleanData = (function(orig) {

28. return function(elems) {

29. for (var i = 0, elem;

30. (elem = elems[i]) != null; i++) {

31. try {

32. // 重写cleanData方法，调用后触发每个元素的remove事件

33. $(elem).triggerHandler(“remove”);

34. // http://bugs.jquery.com/ticket/8235

35. } catch (e) {}

36. }

37. orig(elems);

38. };

39. })($.cleanData);

40. /**

41. * widget工厂方法，用于创建插件

42. * @param name 包含命名空间的插件名称，格式 xx.xxx

43. * @param base 需要继承的ui组件

44. * @param prototype 插件的实际代码

45. * @returns {Function}

46. */

47. $.widget = function(name, base, prototype) {

48. var fullName, //插件全称

49. existingConstructor, //原有的构造函数

50. constructor, //当前构造函数

51. basePrototype, //父类的Prototype

52. // proxiedPrototype allows the provided prototype to remain unmodified

53. // so that it can be used as a mixin for multiple widgets (#8876)

54. proxiedPrototype = {},

55. //可调用父类方法_spuer的prototype对象,扩展于prototype

56. namespace = name.split(“.”)[0];

57. name = name.split(“.”)[1];

58. fullName = namespace + “-” + name;

59. //如果只有2个参数  base默认为Widget类，组件默认会继承base类的所有方法

60. if (!prototype) {

61. prototype = base;

62. base = $.Widget;

63. }

64. //    console.log(base, $.Widget)

65. // create selector for plugin

66. //创建一个自定义的伪类选择器

67. //如 $(‘:ui-menu’) 则表示选择定义了ui-menu插件的元素

68. $.expr[“:”][fullName.toLowerCase()] = function(elem) {

69. return !!$.data(elem, fullName);

70. };

71. // 判定命名空间对象是否存在，没有的话 则创建一个空对象

72. KaTeX parse error: Undefined control sequence: \[ at position 1: \̲[̲namespace\] = [namespace] || {};

73. //这里存一份旧版的插件，如果这个插件已经被使用或者定义了

74. existingConstructor = $[namespace][name];

75. //这个是插件实例化的主要部分

76. //constructor存储了插件的实例，同时也创建了基于命名空间的对象

77. //如$.ui.menu

78. constructor = $[namespace][name] = function(options, element) {

79. // allow instantiation without “new” keyword

80. //允许直接调用命名空间上的方法来创建组件

81. //比如：$.ui.menu({},‘#id’) 这种方式创建的话，默认没有new 实例化。因为_createWidget是prototype上的方法，需要new关键字来实例化

82. //通过 调用 $.ui.menu 来实例化插件

83. if (!this._createWidget) {

84. console.info(this)

85. return new constructor(options, element);

86. }

87. // allow instantiation without initializing for simple inheritance

88. // must use “new” keyword (the code above always passes args)

89. //如果存在参数，则说明是正常调用插件

90. //_createWidget是创建插件的核心方法

91. if (arguments.length) {

92. this._createWidget(options, element);

93. }

94. };

95. // extend with the existing constructor to carry over any static properties

96. //合并对象，将旧插件实例，及版本号、prototype合并到constructor

97. $.extend(constructor, existingConstructor, {

98. version: prototype.version,

99. // copy the object used to create the prototype in case we need to

100. // redefine the widget later

101. //创建一个新的插件对象

102. //将插件实例暴露给外部，可用户修改及覆盖

103. _proto: $.extend({}, prototype),

104. // track widgets that inherit from this widget in case this widget is

105. // redefined after a widget inherits from it

106. _childConstructors: []

107. });

108. //实例化父类 获取父类的  prototype

109. basePrototype = new base();

110. // we need to make the options hash a property directly on the new instance

111. // otherwise we’ll modify the options hash on the prototype that we’re

112. // inheriting from

113. //这里深复制一份options

114. basePrototype.options = $.widget.extend({}, basePrototype.options);

115. //在传入的ui原型中有方法调用this._super 和this.__superApply会调用到base上（最基类上）的方法

116. $.each(prototype, function(prop, value) {

117. //如果val不是function 则直接给对象赋值字符串

118. if (!$.isFunction(value)) {

119. proxiedPrototype[prop] = value;

120. return;

121. }

122. //如果val是function

123. proxiedPrototype[prop] = (function() {

124. //两种调用父类函数的方法

125. var _super = function() {

126. //将当期实例调用父类的方法

127. return base.prototype[prop].apply(this, arguments);

128. },

129. _superApply = function(args) {

130. return base.prototype[prop].apply(this, args);

131. };

132. return function() {

133. var __super = this._super,

134. __superApply = this._superApply,

135. returnValue;

136. //                console.log(prop, value,this,this._super,‘===’)

137. //                debugger;

138. //在这里调用父类的函数

139. this._super = _super;

140. this._superApply = _superApply;

141. returnValue = value.apply(this, arguments);

142. this._super = __super;

143. this._superApply = __superApply;

144. //                console.log(this,value,returnValue,prop,‘===’)

145. return returnValue;

146. };

147. })();

148. });

149. //    console.info(proxiedPrototype)

150. //    debugger;

151. //这里是实例化获取的内容

152. constructor.prototype = $.widget.extend(basePrototype, {

153. // TODO: remove support for widgetEventPrefix

154. // always use the name + a colon as the prefix, e.g., draggable:start

155. // don’t prefix for widgets that aren’t DOM-based

156. widgetEventPrefix: existingConstructor ? (basePrototype.widgetEventPrefix || name) : name

157. }, proxiedPrototype, {

158. //重新把constructor指向 constructor 变量

159. constructor: constructor,

160. namespace: namespace,

161. widgetName: name,

162. widgetFullName: fullName

163. });

164. // If this widget is being redefined then we need to find all widgets that

165. // are inheriting from it and redefine all of them so that they inherit from

166. // the new version of this widget. We’re essentially trying to replace one

167. // level in the prototype chain.

168. //这里判定插件是否被使用了。一般来说，都不会被使用的。

169. //因为插件的开发者都是我们自己，呵呵

170. if (existingConstructor) {

171. $.each(existingConstructor._childConstructors, function(i, child) {

172. var childPrototype = child.prototype;

173. // redefine the child widget using the same prototype that was

174. // originally used, but inherit from the new version of the base

175. $.widget(childPrototype.namespace + “.” + childPrototype.widgetName, constructor, child._proto);

176. });

177. // remove the list of existing child constructors from the old constructor

178. // so the old child constructors can be garbage collected

179. delete existingConstructor._childConstructors;

180. } else {

181. //父类添加当前插件的实例 主要用于作用域链查找 不至于断层

182. base._childConstructors.push(constructor);

183. }

184. //将此方法挂在jQuery对象上

185. $.widget.bridge(name, constructor);

186. return constructor;

187. };

188. //扩展jq的extend方法，实际上类似$.extend(true,…) 深复制

189. $.widget.extend = function(target) {

190. var input = widget_slice.call(arguments, 1),

191. inputIndex = 0,

192. inputLength = input.length,

193. key, value;

194. for (; inputIndex < inputLength; inputIndex++) {

195. for (key in input[inputIndex]) {

196. value = input[inputIndex][key];

197. if (input[inputIndex].hasOwnProperty(key) && value !== undefined) {

198. // Clone objects

199. if ($.isPlainObject(value)) {

200. target[key] = KaTeX parse error: Undefined control sequence: \[ at position 22: …inObject(target\̲[̲key\]) ? .widget.extend({}, target[key], value) :

201. // Don’t extend strings, arrays, etc. with objects

202. $.widget.extend({}, value);

203. // Copy everything else by reference

204. } else {

205. target[key] = value;

206. }

207. }

208. }

209. }

210. return target;

211. };

212. //bridge 是设计模式的一种，这里将对象转为插件调用

213. $.widget.bridge = function(name, object) {

214. var fullName = object.prototype.widgetFullName || name;

215. //这里就是插件了

216. //这部分的实现主要做了几个工作，也是制作一个优雅的插件的主要代码

217. //1、初次实例化时将插件对象缓存在dom上，后续则可直接调用，避免在相同元素下widget的多实例化。简单的说，就是一个单例方法。

218. //2、合并用户提供的默认设置选项options

219. //3、可以通过调用插件时传递字符串来调用插件内的方法。如:$(‘#id’).menu(‘hide’) 实际就是实例插件并调用hide()方法。

220. //4、同时限制外部调用“_”下划线的私有方法

221. $.fn[name] = function(options) {

222. var isMethodCall = typeof options === “string”,

223. args = widget_slice.call(arguments, 1),

224. returnValue = this;

225. // allow multiple hashes to be passed on init.

226. //可以简单认为是$.extend(true,options,args[0],…),args可以是一个参数或是数组

227. options = !isMethodCall && args.length ? $.widget.extend.apply(null, [options].concat(args)) : options;

228. //这里对字符串和对象分别作处理

229. if (isMethodCall) {

230. this.each(function() {

231. var methodValue, instance = $.data(this, fullName);

232. //如果传递的是instance则将this返回。

233. if (options === “instance”) {

234. returnValue = instance;

235. return false;

236. }

237. if (!instance) {

238. return $.error("cannot call methods on " + name + " prior to initialization; " + “attempted to call method '” + options + “'”);

239. }

240. //这里对私有方法的调用做了限制，直接调用会抛出异常事件

241. if (!$.isFunction(instance[options]) || options.charAt(0) === “_”) {

242. return $.error(“no such method '” + options + “’ for " + name + " widget instance”);

243. }

244. //这里是如果传递的是字符串，则调用字符串方法，并传递对应的参数.

245. //比如插件有个方法hide(a,b); 有2个参数：a，b

246. //则调用时$(‘#id’).menu(‘hide’,1,2);//1和2 分别就是参数a和b了。

247. methodValue = instance[options].apply(instance, args);

248. if (methodValue !== instance && methodValue !== undefined) {

249. returnValue = methodValue && methodValue.jquery ? returnValue.pushStack(methodValue.get()) : methodValue;

250. return false;

251. }

252. });

253. } else {

254. this.each(function() {

255. var instance = $.data(this, fullName);

256. if (instance) {

257. instance.option(options || {});

258. //这里每次都调用init方法

259. if (instance._init) {

260. instance._init();

261. }

262. } else {

263. //缓存插件实例

264. $.data(this, fullName, new object(options, this));

265. }

266. });

267. }

268. return returnValue;

269. };

270. };

271. //这里是真正的widget基类

272. $.Widget = function( /* options, element */ ) {};

273. $.Widget._childConstructors = [];

274. $.Widget.prototype = {

275. widgetName: “widget”,

276. //用来决定事件的名称和插件提供的callbacks的关联。

277. // 比如dialog有一个close的callback，当close的callback被执行的时候，一个dialogclose的事件被触发。

278. // 事件的名称和事件的prefix+callback的名称。widgetEventPrefix 默认就是控件的名称，但是如果事件需要不同的名称也可以被重写。

279. // 比如一个用户开始拖拽一个元素,我们不想使用draggablestart作为事件的名称，我们想使用dragstart，所以我们可以重写事件的prefix。

280. // 如果callback的名称和事件的prefix相同，事件的名称将不会是prefix。

281. // 它阻止像dragdrag一样的事件名称。

282. widgetEventPrefix: “”,

283. defaultElement: “

     ”,

284. //属性会在创建模块时被覆盖

285. options: {

286. disabled: false,

287. // callbacks

288. create: null

289. },

290. _createWidget: function(options, element) {

291. element = $(element || this.defaultElement || this)[0];

292. this.element = $(element);

293. this.uuid = widget_uuid++;

294. this.eventNamespace = “.” + this.widgetName + this.uuid;

295. this.options = $.widget.extend({}, this.options, this._getCreateOptions(), options);

296. this.bindings = $();

297. this.hoverable = $();

298. this.focusable = $();

299. if (element !== this) {

300. //            debugger

301. $.data(element, this.widgetFullName, this);

302. this._on(true, this.element, {

303. remove: function(event) {

304. if (event.target === element) {

305. this.destroy();

306. }

307. }

308. });

309. this.document = $(element.style ?

310. // element within the document

311. element.ownerDocument :

312. // element is window or document

313. element.document || element);

314. this.window = $(this.document[0].defaultView || this.document[0].parentWindow);

315. }

316. this._create();

317. //创建插件时，有个create的回调

318. this._trigger(“create”, null, this._getCreateEventData());

319. this._init();

320. },

321. _getCreateOptions: $.noop,

322. _getCreateEventData: $.noop,

323. _create: $.noop,

324. _init: $.noop,

325. //销毁模块：去除绑定事件、去除数据、去除样式、属性

326. destroy: function() {

327. this._destroy();

328. // we can probably remove the unbind calls in 2.0

329. // all event bindings should go through this._on()

330. this.element.unbind(this.eventNamespace).removeData(this.widgetFullName)

331. // support: jquery <1.6.3

332. // http://bugs.jquery.com/ticket/9413

333. .removeData($.camelCase(this.widgetFullName));

334. this.widget().unbind(this.eventNamespace).removeAttr(“aria-disabled”).removeClass(

335. this.widgetFullName + "-disabled " + “ui-state-disabled”);

336. // clean up events and states

337. this.bindings.unbind(this.eventNamespace);

338. this.hoverable.removeClass(“ui-state-hover”);

339. this.focusable.removeClass(“ui-state-focus”);

340. },

341. _destroy: $.noop,

342. widget: function() {

343. return this.element;

344. },

345. //设置选项函数

346. option: function(key, value) {

347. var options = key,

348. parts, curOption, i;

349. if (arguments.length === 0) {

350. // don’t return a reference to the internal hash

351. //返回一个新的对象，不是内部数据的引用

352. return $.widget.extend({}, this.options);

353. }

354. if (typeof key === “string”) {

355. // handle nested keys, e.g., “foo.bar” => { foo: { bar: ___ } }

356. options = {};

357. parts = key.split(“.”);

358. key = parts.shift();

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总