2012总结之pcode.Class

一，概述

在演示pcode.Class之前，我想先说一下写它的意义，大家也知道在前端开发可以分为三层：显示层（css美工）、语义层（html美工和程序同共管
理），行为层(js程序)，但之前没有做到很好的分工将很多js代码都放在html上，结果给美工和后期维护（扩展）很麻烦（成本高），所希望自己
能自己出一个这样的框架；
1.前端三层分离；
2.js异步加载, 按需引用，不要直接用script（引用多了，都不知道哪个要哪个）
3.发布时可合并

下面一个例子

对应html:

View Code

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="测试" />
    <meta name="description" content="PS 测试" />
    <meta name="author" content="PS" />
    <meta name="copyright" content="PS" />
    <title>测试</title>
    <style type="text/css">
        .box {background-color:Blue;border:solid 1px Black;position:absolute;overflow:hidden;width:100px; height:100px;}
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/pcode.js" classfile="./js/Test/Lib1.Main"></script>
</head>
<body>
    <div>
        <input type="button" value="新建Box" id="hBtnNewbox" />
    </div>
    <div id="boxContent" style="position:relative;">
    </div>
</body>
</html>

<script type="text/javascript" src="js/pcode.js" classfile="./js/Test/Lib1.Main"></script>为程序入口
你会发现html没有js代码, 就可以实现拖动功能了。

对应代码Lib1.Main:

View Code

/// <reference path="http://www.cnblogs.com/reference-vsdoc.js" />
/// <reference path="ClassTest/ClassA.js" />
/// <reference path="Box.js" />

$pcode.Class("Lib1.Main", ["Lib1.Box"], function () {
    console.log("Lib1.Main");

    return $pcode.DefineClass()
        .Init(function () {

            $("#hBtnNewbox:first").click(function () {
                console.log("newBox");
                new Lib1.Box().Event.onDispose(function () {
                    console.log("remove Box");
                });
            });

        })
        .ReturnDefine();
});

对应代码Lib1.Box:

View Code

 1 /// <reference path="http://www.cnblogs.com/reference-vsdoc.js" />
 2 /// <reference path="Dom/Move.js" />
 3 
 4 $pcode.Class("Lib1.Box", ["Lib1.Dom.Move"], function () {
 5     //console.log("Box");
 6 
 7     //所有对Dom操作的类都扩展Lib1.Dom.DOM
 8     return $pcode.DefineClass(Lib1.Dom.DOM)
 9         .Static({
10             BoxContent: null,
11             getBoxContent: function () {
12                 /// <summary>
13                 /// 
14                 /// </summary>
15                 /// <returns type="jQuery"></returns>
16                 return this.BoxContent;
17             },
18             init: function () {
19                 $(function () {
20                     Lib1.Box.BoxContent = $("#boxContent:first");
21                 });
22             }
23         })
24         .Define({
25             remove: function () {
26                 if (this.isDisposed) return;
27                 this.getDomTarget().remove();
28             }
29         })
30         .Init(function () {
31             var jTarget = $('<div class="box"></div>').appendTo(Lib1.Box.getBoxContent());
32             this.baseCall("init", 0, jTarget);
33 
34             //支持拖动
35             new Lib1.Dom.Move({ jqSelector: jTarget });
36 
37             var $obj = this;
38             jTarget.dblclick(function () {
39                 //双击自我删除
40                 $obj.remove();
41             });
42 
43             this.Event.onDispose(function () {
44                 //console.log("remove Box");
45                 jTarget = $obj = null;
46             });
47         })
48         .ReturnDefine();
49 });

二，引用路径计算

接下来先说一下这框架结构，这框架是有库的概念，如下图

<script type="text/javascript" src="js/pcode.js" classfile="./js/Test/Lib1.Main"></script>

./js/Test/Lib1.Main为程序入口

引用路径计算:库的目录+类名
./js/Test/Lib1.Main == > Defautl.html所在目录/js/Test/Lib1/Main.js, (Lib1.Main为类名称)

$pcode.Class("Lib1.Main", ["Lib1.Box"].....
Lib1.Main引用了Lib1.Box ==> Lib1.Main所在库的目录/Lib1/Box.js
....如此类推，库的目录+类名

引用其它库也是如此推算
$pcode.Class("Lib1.Main", ["/test/Lib2.ClassA"].....
如在/test/Lib2/ClassA.js, 定义Lib2.ClassA

直接引用js文件
$pcode.Class("Lib1.Main", ["file:./jquery.js"].....

如下代码:

 1 //下面我要定义Lib1.Main类名称
 2 //引用Lib1.Box类名称, 数组
 3 //类的定义方法
 4 $pcode.Class("Lib1.Main", ["Lib1.Box", "./Lib2.ClassA", "file:.jquery.js"], function () {
 5     //如果当前库位置为 /js/Lib1
 6     //Lib1.Main ==> /js/Lib1/Main.js
 7     //Lib1.Box, ==> /js/Lib1/Box.js
 8     //./Lib2.ClassA, ==> /js/Lib2/ClassA.js
 9     //file:./jquery.js, ==> /js/jquery.js
10     
11 
12 
13     
14     //console.log("Lib1.Main");
15 
16     //返回类的定义
17     return $pcode.DefineClass()
18         .Init(function () {
19 
20             $("#hBtnNewbox:first").click(function () {
21                 console.log("newBox");
22                 new Lib1.Box().Event.onDispose(function () {
23                     console.log("remove Box");
24                 });
25             });
26 
27         })
28         .ReturnDefine();
29 });

三，js导步加载情况

开源位置:https://github.com/winpzs/pcode

posted on 2013-02-03 18:05 winpzs 阅读(502) 评论(0) 编辑收藏举报