Showing posts with label js. Show all posts
Showing posts with label js. Show all posts

Wednesday, October 08, 2008

利用event bus来降低前台业务代码耦合度, Event bus - javascript, js实现

/*
demo:
var observer = function(paramObj){
alert("bomb event comes!" + paramObj);
}

//add business event listener
EventBus.subscribe("tree-node-change",observer);
//remove business event listener
//EventBus.unsubscribe("tree-node-change",observer);
//publish business event
EventBus.publish("tree-node-change",{oldName:"abc", newName:"cdef", id: 123});
*/

/*
ReadMe:
Goal: Using business event dispatcher to reduce code couple between web moudle,
目标: 为了尽可能的减少模块之间业务逻辑的耦合度, 而开发了这个消息总线, 主要用于业务逻辑的事件传递
使用规范: 每个js模块尽可能通过事件去通信, 减少模块之间的直接调用和依赖(耦合)
*/

var EventBus = function(){
var observers={};

var publish=function(eventName, argObj){
var obs = observers[eventName];

if(!obs){
return;
}

for(var i=0;i<obs.length;i++){
obs[i](argObj);
}
}

var subscribe=function(eventName, observer){
var obs = observers[eventName];

if(!obs){
obs=[];
observers[eventName]=obs;
}

obs.push(observer);
}

var unsubscribe=function(eventName, observer){
var obs = observers[eventName];

if(!obs){
return;
}

for(var i=0;i<obs.length;i++){
if(obs[i]==observer){
obs.splice(i,1);
break;
}
}
}

var unsubscribeByObserver=function(observer){
for(var eventName in observers){
removeByName(eventName, observer);
}
}
return {
publish:publish,
subscribe:subscribe,
unsubscribe:unsubscribe,
subscribeByObserver:unsubscribeByObserver
}
}();

Saturday, October 04, 2008

js简单继承的实现, 改进篇

前文表述: js简单继承的实现

前文问题:
alert(child instanceof base); 打印false, 此处并没有实现真正的继承

改进:
function base() {
this.member = "dnnsun_Member";
this.test=function(){
window.alert('in base');
}
}

base.prototype.test= function() {
window.alert("base member "+this.member);
}

function extend(child, b) {
b.call(child);
child.prototype=new b;
}
var childclass=function(){
this.test=function(){
window.alert("in child");
}
};


extend(childclass, base);

child = new childclass;

window.alert(child.member);
window.alert(child.test);
child.test();
window.alert(child instanceof base);

不能没有doctype

* 有他的好处, 我这里放下不表, 今天就说说没有他时, 在开发中遇到的问题
   * 在不同的浏览器下网页莫名其妙的布局问题
   * document.body与document.documentElement谁的属性是准的?
      * scrollLeft
* Right
* Top
* Bottom

Sunday, July 20, 2008

研究了一通数字的格式化方法, 原来有个Number(num).toLocaleString()

Number(34443243244).toLocaleString() -> "34,443,243,244"

获取dom元素的绝对位置

function getPosition(ele){
var nTop = ele.offsetTop;
var nLeft = ele.offsetLeft;
while((ele = ele.offsetParent)!=null)
{
nTop += ele.offsetTop;
nLeft += ele.offsetLeft;
}
return {top:nTop,left:nLeft}
}

从dom书中获取某个元素的绝对位置, 跨浏览器IE, Firefox

Tuesday, July 15, 2008

用js动态实现图片热区

代码如下:
<html>
<body>
<button onclick="init();">init</button>
<img src='20080319_96325f230767e6ac385beuTiIglWzzkf.png' border=0 usemap='#Map'>
<map name="Map" id="MAP"></map>
<div id="maskDIV"></div>
<script language="JavaScript">
var maskDiv;
function mask(param){
if (!maskDiv)
{
maskDiv = document.getElementById('maskDIV');
maskDiv.style.position='absolute';
maskDiv.style.backgroundColor="red";
//document.appendChild(maskDiv);
}
maskDiv.innerHTML=param.title;
maskDiv.style.left=param.left+"px";
maskDiv.style.top=param.top+"px";
}

function init(){
var oAREA = document.createElement('AREA');
oAREA.shape = 'rect';
oAREA.coords = '0,0,225,299';
oAREA.href = 'showcity.aspx?cityid=10600';
oAREA.alt = '北京市西城区';
oAREA.title = '北京市西城区';
oAREA.onmouseover=function(e){
mask({left:e.clientX,top:e.clientY,title: oAREA.title});
}
document.getElementById("MAP").appendChild(oAREA);
}
</script>
</body>
</html>

好了, 技术问题搞定, 剩下的就是你的发挥了!

Wednesday, June 25, 2008

[转] Module Dialog In IE & FF

原文: http://www.zhangsichu.com/blogview.asp?Content_Id=50

本文实现了一个在IE和FF下都可以正常使用的ModuleDialog。
主要使用window.open方法打开Dialog。
使用window.onclick=function (){DialogWin.focus()};和event.cancelBubble = true;保证弹出窗口的Module样式。
详细内容:
ParentWindow
function OpenDialog()
{
if(window.document.all)//IE
{
//参数
var strPara = "dialogHeight:200px;dialogWidth:300px;help:off;resizable:off;scroll:no;status:off";
//传入的值
var strPassIn=window.document.getElementById("txtReturn").value;
//打开模态对话框
var strReturn=window.showModalDialog("ChildOpenWindow.htm",strPassIn,strPara);
//处理返回值
if(typeof(strReturn) != undefined)
{
window.document.getElementById("txtReturn").value=strReturn;
}
}
else//FireFox
{
//参数
var strPara = "dialogHeight:200px;dialogWidth:300px;help:off;resizable:off;scroll:no;status:off;modal=yes;dialog=yes";
var strPassIn=window.document.getElementById("txtReturn").value;

//注册事件
window.myAction=this;

//打开窗口
var DialogWin = window.open("ChildOpenWindow.htm","myOpen",strPara,true);

//传入参数
window.myArguments=strPassIn;

this.returnAction=function(strResult){
//处理返回结果
if(typeof(strResult) != undefined)
{
window.document.getElementById("txtReturn").value=strResult;
}
}

//处理打开窗口最上显示(不完美)
window.onclick=function (){DialogWin.focus()};
event.cancelBubble = true;
}
}

ChildWindow
function window_onload()
{
if(window.document.all)//IE
{
//对于IE直接读数据
var txtInput=window.document.getElementById("txtInput");
txtInput.value=window.dialogArguments;
}
else//FireFox
{
//获取参数
window.dialogArguments=window.opener.myArguments;
var txtInput=window.document.getElementById("txtInput");
txtInput.value=window.dialogArguments;
}
}

function OnOKClick()
{
//对于IE或者FireFox都需要设置returnValue进行返回值设定
var inputStr=window.document.getElementById("txtInput").value;
returnValue=inputStr;
window.close();
}

function window_onunload() {
//对于Firefox需要进行返回值的额外逻辑处理
if(!window.document.all)//FireFox
{
window.opener.myAction.returnAction(window.returnValue)
}
}
</script>
注册onload
<body language="javascript" onload="return window_onload()" onunload="return window_onunload()">

Friday, June 20, 2008

js简单继承的实现

function base() {
this.member = "dnnsun_Member";
this.method = function() {
window.alert(this.member);
}
}
function extend(child, b) {
b.call(child);
}
var child={
test:function(){
window.alert("in child");
window.alert(child.member);
}
};
extend(child, base);
window.alert(child.member);
window.alert(child.method);
child.test()

Sunday, June 15, 2008

getElementsByTagName返回值的问题

nodesList=getElementsByTagName返回的是一个类似NodeList的对象, 并且它的结果集动态的随元素的变化而变化, 例如将一个匹配的node从dom中remove时, 结果集将自动的remove此node,因此如果用
for (var i=0;i=nodesList.length;i++){
var node = nodesList[i];
node.parentNode.replaceNode(newNode,node);
}就遍历不完, 但是如果用for (var i=nodesList.length-1;i>=0;i--){...}就可以