写个JavaScript小例子,说明内容与行为如何分离

缪军 2010-07-02 08:14:29

html的开发人员不用特地为了js实现而去些什么代码
而js的开发人员也不用接触html文件:
html:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script type="text/javascript" src="MyJsCase.js"></script>

    <title>MyJsCase</title>

    

</head>

<body>

    <input id="Text1" value="Click Me" />



</body>

</html>

js:



var Text1;

window.onload = Init;





function Init(){

    CreateAction();    

    }



function CreateAction(){

    Text1 = document.getElementById('Text1');

    if(Text1){

        Text1.onclick = function(){

            popUp(this.getAttribute("value"));

            return false;

            }

        }

    else{

        popUp('控件Text1未定义');

        return false;

        }

    }



function popUp(str){

    alert('value属性值:' + str);

    }

...全文

339 33 打赏收藏转发到动态举报

写回复

用AI写文章

33 条回复

切换为时间正序

请发表友善的回复…

发表回复

nextuntil 2010-07-04

打赏
举报

学习思想，顶一个、

camperer 2010-07-04

打赏
举报

确实应该提倡这样
我在做的这个个项目用了母版页，并且还生成静态页，不这样做改起来可费事了。。。

[Quote=引用 24 楼 zhangchuccc 的回复:]
用jquery是不是更舒服啊....
[/Quote]
是，
楼主说的是内容与行为分离这种思想

jiyan1221 2010-07-02

打赏
举报

看LZ说话有点儿别扭，不过探讨的精神值得赞一个，顶了

缪军 2010-07-02

打赏
举报

知道版主的用心良苦,
从技术角度我也是新人,
所以,对这样的机会我是求之不得的

再次感谢版主,
同时也希望CSDN的各位大牛能多多指教

阿非 2010-07-02

打赏
举报

Q : 1
A : 个人觉得论坛的氛围互相尊重才能更好的发展，但技术层面的质疑和争吵是可以理解也应该是必须的
这样才能更接近正解,非技术层面的应该避免。鉴于最近的事，觉得有必要把新人引领回来。

Q : 2
A : 不存在并发问题，但那确实不是局部变量，而是全局变量。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="Sandy(阿非)">

  <META NAME="Description" CONTENT="">

  <script >

    function add(x,y){

		alert(x+y);

	}

	

	window.onload=function(){

	

		var button=document.getElementById('btn');



		button.onclick=function(x,y){ return function(){ add(x,y);};}(1,1);

	}

</script>

 </HEAD>



 <BODY>

      对伟大公式1+1求结果<hr />

      <input type='button' onclick='add(1,1);' value='计算' />

	  <input type='button' id='btn' value='Compute' />

 </BODY>

</HTML>

缪军 2010-07-02

打赏
举报

[Quote=引用 15 楼 zmcici 的回复:]
拜托CSDN得改改结贴率的算法，我从来是不欠贴，都没超100%，欠一贴的还有101。09%
[/Quote]

呵呵,现在再看一下0楼,这样行了吧

24K純帥 2010-07-02

打赏
举报

学习。。

缪军 2010-07-02

打赏
举报

[Quote=引用 22 楼 sandy945 的回复:]
除了全局变量，可否有其他方案。

ps:对繆军的发帖目的，表示感谢。刁难的目的是希望把可能遇到问题的解决方案一并给出。
[/Quote]
1、首先，版主不要这么客气，版主捧场，我感谢还来不及；
2、我认为js文件的模块级变量是局部变量（分发到了每个客户端，没有并发问题）；
3、其实在前台也存在如何带入参数变体的问题；
4、目前根据版主提出的要求，如果排除服务器端的手段，我觉得这是最佳方案了；

「已注销」 2010-07-02

打赏
举报

。。搞不太懂到底这样做有什么好处。我开发时间不长，体会不到嘿嘿

zhangchuccc 2010-07-02

打赏
举报

用jquery是不是更舒服啊....

阿非 2010-07-02

打赏
举报

这种页面结构和逻辑分离的方案是提倡的 ~

阿非 2010-07-02

打赏
举报

除了全局变量，可否有其他方案。

ps:对繆军的发帖目的，表示感谢。刁难的目的是希望把可能遇到问题的解决方案一并给出。

too1998 2010-07-02

打赏
举报

强烈建议CSDN对头像过滤~不准用岛国的女的作头像`

liyingjie5360 2010-07-02

打赏
举报

。。。学习学习。。。

段传涛 2010-07-02

打赏
举报

o 这很奇怪，先学习帮顶

缪军 2010-07-02

打赏
举报

对于我的实际项目,我一般会结合服务器端动态发送js,
今天只是累了,休息的时候,顺手写个小例子烘托一下人气,
版主的问题,我稍稍修改了一下代码如下(前台不变,这就是分离的好处):

var Text1;

var paramX = 1;

var paramY = 2;

window.onload = Init;





function Init(){

    CreateAction();    

    }



function CreateAction(){

    Text1 = document.getElementById('Text1');

    if(Text1){

        Text1.onclick = function(){

            add(paramX,paramY);

            return false;

            }

        }

    else{

        popUp('控件Text1未定义');

        return false;

        }

    }



function popUp(str){

    alert('value属性值:' + str);

    }



function add(x,y){

        alert(x+y);

    }

阿非 2010-07-02

打赏
举报

(1,1) 在此不是定值，只是表示传参。

问的是应用 domElement.onclick = function(){} 这种形式如何传参

阿非 2010-07-02

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="Sandy(阿非)">

  <META NAME="Description" CONTENT="">

  <script>

    function add(x,y){

		alert(x+y);

	}

</script>

 </HEAD>



 <BODY>

      对伟大公式1+1求结果<hr />

      <input type='button' onclick='add(1,1);' value='计算' />

 </BODY>

</HTML>