xiyueta.js库原始基础框架代码(图文教程)
一个xiyueta.js库初始基础框架代码
案例预览>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xiyueta.js库原始基础框架代码</title>
</head>
<body>
<script>
var _XIYUETA = function() {
this.test = function(a, b, c) {
return a + b + c
}
}
var _xyt = new _XIYUETA();
var xiyueta = function(config, x, y) {
return new xiyueta.fn.init(config, x, y);
};
xiyueta.fn = xiyueta.prototype = {
length: 0, //长度
selector: "", //选择器
domList: undefined, //找到标签列表,(这个暂时不改为[]20220415)
x: null,
y: null,
domListIndex: 0 //这个有什么用,好像没有用到??20220319
};
//这个是引用jquery
xiyueta.extend = xiyueta.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length
if (i === length) {
target = this;
i--;
}
for (; i < length; i++) {
if ((options = arguments[i]) != null) {
for (name in options) {
copy = options[name];
if (name === "__proto__" || target === copy) {
continue;
}
if (copy !== undefined) {
target[name] = copy;
}
}
}
}
return target;
};
var init = xiyueta.fn.init = function(selector, x, y) {
this.length = 0; //找到条数
this.selector = selector; //选择器
this.domList = []; //undefined 改为 [] 因为它是数组,与jquery保持一致 20220415
this.x = x;
this.y = y;
this.domListArray = []; //DOM列表数组,配合end()使用 20210925
if (this.selector == undefined) this.selector = ""; //为空
};
init.prototype = xiyueta.fn;
$ = $xyt = xiyueta;
//自定义属性方法
xiyueta.fn.extend({
test: function(a,b,c) { //打印HTML对象全部内容
return _xyt.test(a,b,c)
}
});
//自定义工具方法
xiyueta.extend({
'myFuncFour':function(){
alert("我的自定义xiyueta方法4");
}
})
console.log($().test(1,2,3))
console.log($("abc") )
console.log($.myFuncFour() )
</script>
</body>
</html>