Yk0.0.1版本

最近根据项目需要,需要自己写一个js框架。本人是从php后台开发转为前端开发的新手,刚刚有4个月的前端开发经验。为了项目和更好掌握js,所以开发一个正对项目的js框架。虽然是重复造轮子,不过专门针对项目特点还是需要的。
刚刚写出了0.0.1版本,相当于写出了基本的核心,包括获取节点、绑定事件、ajax请求、dom操作,和功能类的弹出浮层。
先上代码:
(function (window){
var win = window;
win.Yk = win.Yk || {};

var Yk = {
op:{},
isCompatible: function(other){},
$: function(id){
if(typeof id == 'object') return id;
return document.getElementById(id);
},
addEvent: function(node, type, listener){
if(!(node = this.$(node))) return false;
if(node.addEventListener){
node.addEventListener(type,listener,false);
}else if(node.attachEvent){
node.attachEvent('on'+type,listener);
}else{
return false;
}
},
removeEvent: function(node, type, listener){
if(!(node = this.$(node))) return false;
if(node.removeEventListener){
node.removeEventListener(type,listener,false);
}else if(node.detachEvent){
node.detachEvent('on'+type,listener);
}else{
return false;
}
},
getElementByClassName: function(className, tag, parent){
parent = parent || document;
if(!(parent = this.$(parent))) return false;
if(document.getElementsByClassName){
var nodes = (parent || document).getElementsByClassName(className),result = [];
for(var i=0 ;node = nodes[i++];){
if(tag !== "*" && node.tagName === tag.toUpperCase()){
result.push(node);
}else if(tag == "*"){
result.push(node);
}
}
return result
}

// Locate all the matching tags
var allTags = (tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
var matchingElements = new Array();

// Create a regular expression to determine if the className is correct
className = className.replace(/\-/g, "\\-");
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");

var element;
// Check each element
for(var i=0; i<allTags.length; i++){
element = allTags[i];
if(regex.test(element.className)){
matchingElements.push(element);
}
}

// Return any matching elements
return matchingElements;
},
toggleDisplay: function(node, value){
if(!(node = this.$(node))) return false;
if(value){
node.style.display = value;
return node;
}
if(node.style.display != 'none'){
node.style.display = 'none';
}else{
node.style.display = value || '';
}
},
insertAfter: function(node, referenceNode){
if(!(node = this.$(node))) return false;
if(!(referenceNode = this.$(referenceNode))) return false;
referenceNode.parentNode.insertBefore(node,referenceNode.nextSibling);
},
removeChildren: function(parent){
if(!(parent = this.$(parent))) return false;
var firstChild;
while(firstChild = parent.firstChild){
parent.removeChild(firstChild)
}
},
prependChild: function(parent, newChild){
if(!(parent = this.$(parent))) return false;
if(!(newChild = this.$(newChild))) return false;
if(parent.firstChild){
parent.insertBefore(newChild,parent.firstChild);
}else{
parent.appendChild(newChild);
}
},
preventDefault: function(e){
e = e || win.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
},
stopPropagation: function(e){
e = e || win.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
},
getPointerPosition: function(e){
e = e || window.event;
var x = e.pageX || (e.clientX +
(document.documentElement.scrollLeft
|| document.body.scrollLeft));
var y = e.pageY|| (e.clientY +
(document.documentElement.scrollTop
|| document.body.scrollTop));
return {'x':x,'y':y};
},
sendAjax:function(option){
var req = createXMLHTTPObject();
if (!req) return;
var method = (option.postData) ? "POST" : "GET";
req.open(method,option.url,true);
if (option.postData)
req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
req.onreadystatechange = function () {
if (req.readyState != 4) return;
if (req.status != 200 && req.status != 304) {
return;
}
option.callback(req);
}
if (req.readyState == 4) return;
req.send(option.postData);
},
openbox:function(option){
var WRAP = '<div id="skygqOverlay" style="opacity: 0.2;"></div><div id="wrapOut" class="wrap_out" style="width: 396px; left: 50%; margin-left: -198px; z-index: 2000; top: 10%;"><div id="wrapIn" class="wrap_in"><div onselectstart="return false;"class="wrap_bar" id="wrapBar"><div class="wrap_title"><span>'+option.title+'</span></div><a id="wrapClose" class="wrap_close" href="javascript:void(0);">×</a></div><div id="wrapBody" class="wrap_body" style="width: 394px;"></div></div></div>';
var ykopbox;
if(!(ykopbox = Yk.$('yk-openbox'))){
ykopbox = document.createElement('div');
ykopbox.setAttribute('id','yk-openbox');
}
this.op.boxid = option.id;
var box = this.$(option.id);
box.parentNode.insertBefore(ykopbox,box);
ykopbox.innerHTML += WRAP;
this.$('wrapBody').appendChild(box);
this.toggleDisplay(option.id,'block');

this.closebox();
},
closebox: function(){
var that = this;
this.addEvent(this.$('wrapClose'),'click',function(e){
var innerid = that.op.boxid;
var body = Yk.$('yk-openbox');
body.parentNode.appendChild(Yk.$(innerid));
body.removeChild(Yk.$('wrapOut'));
body.removeChild(Yk.$('skygqOverlay'));
Yk.toggleDisplay(innerid);
Yk.stopPropagation(e);
});
}
}

function createXMLHTTPObject() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}


win['Yk'] = Yk;
})(window);

Yk是项目的简称,所以框架名称为Yk。
openbox和closebox是仿照skygqbox设计的,其他都是基础类的函数,看下名字应该就知道功能,已经测试通过。除了没有操作css的功能,其他都可以满足。下一个版本计划添加cookie处理,浏览器检查,脚本加载,拖动,样式处理,动画等功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值