WEB前端交互快速开发指南

最新推荐文章于 2022-10-24 13:51:22 发布

dh20156

最新推荐文章于 2022-10-24 13:51:22 发布

阅读量1.1k

点赞数

分类专栏：技术文档文章标签： web javascript function autocomplete button header

本文链接：https://blog.csdn.net/dh20156/article/details/4132420

版权

技术文档专栏收录该内容

57 篇文章 0 订阅

订阅专栏

WEB前端交互快速开发指南

EasyUI使用介绍(dh20156风之石)

WEB页面中常见的功能形式

切换：

广告轮显(滤镜切换或滚动切换)

广告轮显AdSwitch

TabStrip(导航菜单、内容切换等等)

内容切换TabStrip

表单验证

表单验证EasyValidate

树状展示(此功能多见于WEB管理员页面)

异步Jascript树dhATV

AJAX(提交数据、获取数据)

当然，有些站点还会有其他一些特别的交互功能如AutoComplete、RichEditor，我们暂不做讨论。

如果我们对上述常用的功能都能够迅速处理，那前端开发部分的工作就只剩页面布局了，那将会非常轻松（就是累点 ^_^）。

结构与功能分离

在动手之前，我们需要先制定一套规则，用以保证WEB结构与功能代码分离！

不要写任何的inline script，所有事件都需要通过脚本抓取DOM元素（通过id或class或其他attribute进行抓取）后再进行绑定！

不被支持的写法：<button οnclick=“alert(0);”>alert 0</button>

推荐的方式：
<button>alert 0</button>

<script type=“text/javascript”>
    var dbtns = document.getElementsByTagName(‘button’);
    var il = dbtns.length;
    var dbtn = il&&dbtns[0];
    if(dbtn){dbtn.onclick = function(){alert(0)};}
</script>

结构与功能分离

_________________________________________________

头部

_________________________________________________

内容 | 侧栏

_________________________________________________

底部

_________________________________________________

功能按所在页面区域进行划分，如果头部有交互功能，则可以抓取头部进行绑定，其他部分类似！

按Yahoo的说法就是按模组进行划分，这真的是很值得借鉴的数据与表现分离模式！

_________________________________________________

头部 id="header" <button class=“btn”>alert 0</button>

_________________________________________________

内容 | 侧栏

_________________________________________________

底部

_________________________________________________

假设id为header的头部有一样式名为btn的按钮需要绑定事件!
我们用EasyUI的写法：

var fooheader = function(domobj){//头部功能都在此函数体内定义
    if(!domobj){return;}
    var dbtns = easyUI.getElementsBy(‘class’,’btn’,’button’,domobj);
    var l = dbtns.length;
    if(!l){return;}
    dbtns[0].onclick = function(){alert(0);};
};

(function(){
    easyUI.queue([//执行队列
        function(){easyUI.doWhileExist(‘header’,fooheader);}
    ],1);
})();

相信熟悉YUI用法的朋友一定很容易上手！^_^