在这jquery横行的年代，自己也来凑个热闹，ShLib.js功能预览

最新推荐文章于 2024-03-21 10:53:04 发布

蓝色_冰点

最新推荐文章于 2024-03-21 10:53:04 发布

阅读量688

点赞数 1

分类专栏： Ajax javascript 文章标签： jquery function javascript div flex ajax

本文链接：https://blog.csdn.net/sharp_ice/article/details/6837032

版权

Ajax 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

现在要是提到Ajax，就几乎不可避免的要提到jquery。但是说实话，我不喜欢jquery的代码风格，我还是比较倾向于面向对象风格的

我用过flex，于是参考了一些flex sdk的风格，就有了这个ShLib.js。

我也不是什么牛人，当然ShLib.js也无法与jquery这个成熟的框架相比，但还是因为代码风格的喜好问题，一直没用jquery来写，一直都是用自己的一套代码，这个ShLib也是经过很多次的修改优化了的。这里上几个例子，因为我没有自己的个人网站，所以没办法做ajax功能的演示，ajax功能也是参考flex，以Loader为命名的，主要也是为了与主流框架区别，以免冲突。其中所用到的ShLib.js上传到了cnblogs上了。计划还要做各种控件的，素材取自ExtJs。慢慢来吧。。。。

首先是布局功能

<html>
<head>
    <title>Application布局</title>
    <script src="http://files.cnblogs.com/shice/ShLib-min.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            margin:0;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--改变这些div的顺序，会有不同的布局，规则就是按顺序计算布局的子项，会优先占用四个边角的位置-->
        <div dock="{dock:'top',size:50}" style="background-color:#ffdddd"> top </div>
        <div dock="{dock:'bottom',size:50}" style="background-color:#ffddff"> bottom </div>
        <div dock="{dock:'left',size:100}" style="background-color:#ffffdd"> left </div>
        <div dock="{dock:'right',size:100}" style="background-color:#ddffdd"> right </div>
        <div dock="{dock:'bottom',size:50}" style="background-color:#ddffff"> bottom2 </div>
        <div dock="{dock:'fill',size:50}" style="background-color:#ddddff"> fill 试试改变页面的大小？或每个区域的不同顺序，会得到不同的布局效果 </div>
    </div>
    <script language="javascript" type="text/javascript">
        //默认main是程序的入口，由window的onload事件触发
        //与window.οnlοad=function(){} 之类的代码不会发生冲突
        //也可以不要main，自己写windown.onload也一样
        function main() {
            var app = new Application("app");
            app.setLayout(new DockLayout());
        }
    </script>
</body>
</html>

其次是类的继承机制，事件机制

<html>
<head>
    <title>类的扩展机制</title>
    <script src="http://files.cnblogs.com/shice/ShLib-min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="tbValue" size="40" />
<input type="button" οnclick="test()" value="修改" />
<script language="javascript" type="text/javascript">
    //创建一个类MyCls扩展自EventDispatcher，该类已经定义了事件制
    var MyCls = sh.Class.create(EventDispatcher,
    (function () {
        function init(name) {
            //与prototype.js的扩展机制类似，这里以init函数为初始化函数，创建对象时会被自动调用.
            this.name = name;
        }
        function setName(name) {
            this.name = name;
        }
        function showMe(){
            alert(this.name);
        }
        return {
            init: init,
            setName:setName,
            showMe: showMe
        };
    })());

    var MyClsExt = sh.Class.create(MyCls, (function () {
        function setName(name) {
            //在父类的基础上添加事件机制
            var eventData = { newName: name, oldName: this.name };
            //如果扩展了同名的方法，可通过callBase方法调用父类方法
            this.callBase("setName", name);

            //派发事件 Event 的第一个参数为事件源，第二个为事件数据
            this.dispatchEvent("nameChanged", new Event(this, eventData));
        }

        function init(name) {
            //init方法也需要调用父类方法，否则父类初始化方法不自动调用
            this.callBase("init", name);
            this.name += "(被子类附加的信息)";
        }
        return {
            init: init,
            setName: setName
        };
    })());

    var obj1 = new MyCls("父类实例");
    obj1.showMe();

    var obj2 = new MyClsExt("子类实例");
    obj2.showMe();
    //添加事件处理方法
    obj2.addEventListener("nameChanged", function (evn) {
        var src = evn.sender;   //获取事件添，其实就是obj2
        var data = evn.data;    //事件数据
        alert("对象的name属性发生变化:\r\n" + data.oldName + "->" + data.newName);
    });

    function main() {
        var tb = document.getElementById("tbValue");
        tb.value = obj2.name;
    }

    function test() {
        obj2.setName(document.getElementById("tbValue").value);
    }
</script>
</body>
</html>

数据绑定机制

<html>
<head>
    <title>数据绑定</title>
    <style type="text/css">
        body,span,a,table,th,td,input,div
        {
            font-size:12px;
        }
        a
        {
            color:#7585F2;
        }
    </style>
    <script src="http://files.cnblogs.com/shice/ShLib-min.js" type="text/javascript"></script>
</head>
<body>
<!--
    绑定表达式{property:"标签属性",field:"数据字段",read:读取函数,write:保存函数}
    property省略时，会自动根据绑定对象的类型获取默认属性，如input则为value，span为innerHTML等常用属性
-->
    <h2>单个数据绑定</h2>
    <!-- 在数据模板中，任意复杂的结构都可以，但必须以某一个标签为根，在此就是 <div id="userInfo"> -->
    <div id="userInfo">
        用户ID：<span bind="{field:'userID'}"></span><br />
        用户名：<span bind="{field:'userName'}"></span><br />
        性　别：<span bind="{read:showSex}"></span><br />
    </div>

    <h2>简单列表绑定</h2>
    <div id="userList">
        <!-- 列表的唯一一个标签作为数据模板，这个模板定义了数据显示界面 -->
        <div style="float:left; width:300px; height:50px; background-color:#eeeeff; margin-left:5px; margin-top:5px;">
            用户ID：<span bind="{field:'userID'}"></span><br />
            用户名：<span bind="{field:'userName'}"></span><br />
            性　别：<span bind="{read:showSex}"></span><br />
        </div>
    </div>
    <div style="clear:both;"></div>

    <h2>简单表格绑定</h2>
    <!--
    在SimpleGrid中，表格的唯一一个tbody作为显示数据区，所以表头要放在thead中以区别开
    tbody中的唯一一行，作为数据模板
    -->
    <table id="userGrid" style="border-collapse:collapse;" border="1">
        <thead>
            <tr>
                <th>用户ID</th>
                <th>用户名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td bind="{field:'userID'}"></td>
                <td bind="{field:'userName'}"></td>
                <td bind="{read:showSex}"></td>
                <td><a href="javascript:;" οnclick="viewData(this)">查看</a></td>
            </tr>
        </tbody>
    </table>

    <script language="javascript" type="text/javascript">
        //一条用户数据
        var user = { userID: "0", userName: "用户名称", sex: "M" };

        //一组数据
        var users = [
            { userID: "0", userName: "用户A", sex: "M" },
            { userID: "1", userName: "用户B", sex: "F" },
            { userID: "2", userName: "用户C", sex: "F" },
            { userID: "3", userName: "用户D", sex: "M" },
            { userID: "4", userName: "用户E", sex: "M" },
            { userID: "5", userName: "用户F", sex: "X" }  //人妖？
        ];

        //显示性别的函数。在某些情况下需要自定义的显示方式
        function showSex(data) {
            var sex = data.sex;
            switch (sex) {
                case "M":
                    this.innerHTML = "男";
                    break;
                case "F":
                    this.innerHTML = "女";
                    break;
                default:
                    this.innerHTML = "人妖？";
                    break;
            }
        }

        //查看数据的函数。在SimpleGrid的实现中，每个tr对应一个数据
        function viewData(link) {
            var tr = link.parentNode.parentNode;    //取到tr
            var data = tr.data;     //每个tr被SimpleGrid赋值一个data属性，即为该行的数据
            alert(data.userName);   //在此仅做显示操作
        }

        function main() {
            var db = new DataBinder("userInfo");    //声明一个绑定对象
            db.setData(user);                       //设置数据源
            db.read();                              //读取数据，也有相应保存数据的方法write

            var list = new SimpleList("userList");
            list.setDataSource(users);

            var grid = new SimpleGrid("userGrid");
            grid.setDataSource(users);
        }
    </script>
</body>
</html>