小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
26-手写实现一个 jquery 学习 jquery 源码的思想, 提升自身编程思维
手写实现一个 jquery 分析
现代技术的发展飞快, jquery 已正在逐渐淡化, 公司实际项目开发也越发向各大框架靠拢, 但是jquery的编程思想却是不过时有可学之处的!
学习 jquery 源码的编程思想
手写代码实现
// 传 window 是为了优化,减少作用域链查找, 不传就会向上查找,浪费
// js 特性-作用域链
;(function (window) {
// amd. cmd 模块规则
function jquery() {
// return new jquery(); // 这种方法就无限递归循环了,,,
return new jquery.fn.init()
}
// 利用我们的js引用类型的特点:
jquery.fn.init.prototype = jquery.fn // 把他们的对象都共享起来, 同时改变
jquery.fn = jquery.prototype = {
init: function () {},
}
// 我们怎么扩展方法? // 如下 耦合性太高, 不易维护
// jquery.fn.init.prototype = function css() { }
// jQuery 操作: 模块, 方便修改
// $.extend({a: 1});
// $.extend({a: 2}, {c: 2}); return {a: 2, c: 2}
jquery.extend = jquery.fn.extend = function () {
// 设计模式
// let arg1 = arguments[0]
// let arg2 = arguments[1]
// // ??? 如下重复for
// if (arguments.length > 1) {
// for (var item in arg2) {
// arg1[item] = arg2[item]
// }
// } else {
// for (var item in arg1) {
// this[item] = argq[item]
// }
// }
// 享元模式-减少类似对象的数量
var target = arguments[0] || {}
var length = arguments.length
var i = 1
var options
if (target !== 'object') {
target = {}
}
if (length === 1) {
target = this
i--
}
for (; i < length; i++) {
if ((options = arguments[i]) != null) {
for (var name in options) {
target[name] = options[name]
}
}
}
}
jquery.fn.extend({
// css 模块
})
jquery.fn.extend({
// 动画模块
})
if (typeof define === 'function' && define.amd && define.amd.jQuery) {
define('jQuery', [], function () {
return jQuery
})
}
window.$ = window.jquery = jquery
})(window)
