Web前端最新jQuery UI widget源码解析，前端入门

前端资料汇总

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

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

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

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

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

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

77. };

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

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

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

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

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

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

84. //如$.ui.menu

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

86. // allow instantiation without “new” keyword

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

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

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

90. if (!this._createWidget) {

91. console.info(this)

92. return new constructor(options, element);

93. }

94. // allow instantiation without initializing for simple inheritance

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

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

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

98. if (arguments.length) {

99. this._createWidget(options, element);

100. }

101. };

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

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

104. $.extend(constructor, existingConstructor, {

105. version: prototype.version,

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

107. // redefine the widget later

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

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

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

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

112. // redefined after a widget inherits from it

113. _childConstructors: []

114. });

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

116. basePrototype = new base();

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

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

119. // inheriting from

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

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

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

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

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

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

126. proxiedPrototype[prop] = value;

127. return;

128. }

129. //如果val是function

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

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

132. var _super = function() {

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

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

135. },

136. _superApply = function(args) {

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

138. };

139. return function() {

140. var __super = this._super,

141. __superApply = this._superApply,

142. returnValue;

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

144. //                debugger;

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

146. this._super = _super;

147. this._superApply = _superApply;

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

149. this._super = __super;

150. this._superApply = __superApply;

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

152. return returnValue;

153. };

154. })();

155. });

156. //    console.info(proxiedPrototype)

157. //    debugger;

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

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

160. // TODO: remove support for widgetEventPrefix

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

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

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

164. }, proxiedPrototype, {

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

166. constructor: constructor,

167. namespace: namespace,

168. widgetName: name,

169. widgetFullName: fullName

170. });

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

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

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

174. // level in the prototype chain.

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

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

177. if (existingConstructor) {

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

179. var childPrototype = child.prototype;

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

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

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

183. });

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

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

186. delete existingConstructor._childConstructors;

187. } else {

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

189. base._childConstructors.push(constructor);

190. }

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

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

193. return constructor;

194. };

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

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

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

198. inputIndex = 0,

199. inputLength = input.length,

200. key, value;

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

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

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

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

205. // Clone objects

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

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

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

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

210. // Copy everything else by reference

211. } else {

212. target[key] = value;

213. }

214. }

215. }

216. }

217. return target;

218. };

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

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

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

222. //这里就是插件了

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

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

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

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

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

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

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

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

231. returnValue = this;

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

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

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

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

236. if (isMethodCall) {

237. this.each(function() {

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

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

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

241. returnValue = instance;

242. return false;

243. }

244. if (!instance) {

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

246. }

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

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

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

250. }

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

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

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

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

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

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

257. return false;

258. }

259. });

260. } else {

261. this.each(function() {

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

263. if (instance) {

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

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

266. if (instance._init) {

267. instance._init();

268. }

269. } else {

270. //缓存插件实例

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

272. }

273. });

274. }

275. return returnValue;

276. };

277. };

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

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

280. $.Widget._childConstructors = [];

281. $.Widget.prototype = {

282. widgetName: “widget”,

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

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

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

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

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

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

289. widgetEventPrefix: “”,

290. defaultElement: “

     ”,

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

292. options: {

293. disabled: false,

294. // callbacks

295. create: null

296. },

297. _createWidget: function(options, element) {

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

299. this.element = $(element);

300. this.uuid = widget_uuid++;

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

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

303. this.bindings = $();

304. this.hoverable = $();

305. this.focusable = $();

306. if (element !== this) {

307. //            debugger

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

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

310. remove: function(event) {

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

312. this.destroy();

313. }

314. }

315. });

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

317. // element within the document

318. element.ownerDocument :

319. // element is window or document

320. element.document || element);

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

322. }

323. this._create();

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

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

326. this._init();

327. },

328. _getCreateOptions: $.noop,

329. _getCreateEventData: $.noop,

330. _create: $.noop,

331. _init: $.noop,

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

333. destroy: function() {

334. this._destroy();

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

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

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

338. // support: jquery <1.6.3

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

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

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

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

343. // clean up events and states

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

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

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

347. },

348. _destroy: $.noop,

349. widget: function() {

350. return this.element;

351. },

352. //设置选项函数

353. option: function(key, value) {

354. var options = key,

355. parts, curOption, i;

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

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

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

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

360. }

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

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

363. options = {};

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

365. key = parts.shift();

366. if (parts.length) {

367. curOption = options[key] = $.widget.extend({}, this.options[key]);

368. for (i = 0; i < parts.length - 1; i++) {

369. curOption[parts[i]] = curOption[parts[i]] || {};

370. curOption = curOption[parts[i]];

371. }

372. key = parts.pop();

373. if (arguments.length === 1) {

374. return curOption[key] === undefined ? null : curOption[key];

375. }

376. curOption[key] = value;

377. } else {

378. if (arguments.length === 1) {

379. return this.options[key] === undefined ? null : this.options[key];

380. }

381. options[key] = value;

382. }

383. }

384. this._setOptions(options);

385. return this;

386. },

387. _setOptions: function(options) {

388. var key;

389. for (key in options) {

390. this._setOption(key, options[key]);

391. }

392. return this;

393. },

394. _setOption: function(key, value) {

395. this.options[key] = value;

396. if (key === “disabled”) {

397. this.widget().toggleClass(this.widgetFullName + “-disabled”, !! value);

398. // If the widget is becoming disabled, then nothing is interactive

399. if (value) {

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

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

402. }

403. }

404. return this;

405. },

406. enable: function() {

407. return this._setOptions({

408. disabled: false

409. });

410. },

411. disable: function() {

412. return this._setOptions({

413. disabled: true

414. });

415. },  
     最后
     –

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

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它