SMARTCLIENT入门教程之七——开发前的各种规范

最新推荐文章于 2023-01-28 10:07:49 发布

梦尊

最新推荐文章于 2023-01-28 10:07:49 发布

阅读量2.1k

点赞数 1

分类专栏： SmartClient 文章标签： smartclient web前端开发 web前端 javascript

本文链接：https://blog.csdn.net/dream_art/article/details/39933287

版权

SmartClient 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

SMARTCLIENT入门教程之七

让我们在进入正式的开发过程之前，先理一下思路，有一些必要的开发规范需要事先确定，以免事后返工，浪费开发者的宝贵时间。

——开发前的各种规范

一、目录结构

打开Web服务器的根目录，现在我们已经有了三个文件夹和一个首页文件，其中images文件夹中放了一张loading.gif动画图片，js文件夹中放了两个Javascript脚本文件，而isomorphic文件夹下面则是SmartClient的运行库文件，如下图所示：

如果你的Web服务是由Apache创建的，那么首页通常是 index.html，这一点和IIS有明显的不同。由于Windows系统不区分文件名的大小写，而Linux系统又严格区分文件名的大小写，为了避免不必要的问题，我们可以制定一个约定，所有的文件名都采用小写字母。

另外，我们还可以事先创建一些文件夹，用来区分各种不同的文件，比如css文件夹里面放css文件，又或者对于.Net平台，可以将一些编译过的类库dll文件放在bin文件夹。还可以新建一个static文件夹，可以放一些静态的数据文件，这个以后在讲到数据绑定的时候会用到。

你也可以根据自己的需求制定一个目录结构的存储规则，总的原则是尽量的清晰明了，一目了然，以免在项目大了以后混乱不堪。

二、Javascript文件

在上一章中，我们在首页中加载了两个js文件，一个名为 loading.js 另一个名为 default.js，前者是一个加载画面，后者是我们整个项目的入口。随着开发工作的展开，编写的代码越来越多，放在一个js文件中是不现实的，所以我们可以将不同的程序模块放到不同的js文件中。

比如，在desktop.js中放入客户端UI的桌面控制代码，在user.js中则放入操作者的身份认证及控制代码，在remote.js中放入一些ajax操作的代码等等，具体的命名规则可以按自己的习惯和团队开发的标准来决定。

当然在一个大型的项目中，代码量极其庞大，可能需要更加细化的区分，这样做的好处是有利于团队分工和代码的整洁，以及后期调试、测试及维护的方便性。所以到最后，我们的首页文件可能会变成下面的样子：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" src="/isomorphic/system/modules/ISC_Core.js"></script>
<script type="text/javascript" src="/isomorphic/system/modules/ISC_Foundation.js"></script>
<script type="text/javascript" src="/js/loading.js"></script>
<script type="text/javascript" src="/isomorphic/system/modules/ISC_Containers.js"></script>
<script type="text/javascript" src="/isomorphic/system/modules/ISC_Grids.js"></script>
<script type="text/javascript" src="/isomorphic/system/modules/ISC_Forms.js"></script>
<script type="text/javascript" src="/isomorphic/system/modules/ISC_DataBinding.js"></script>
<script type="text/javascript" src="/isomorphic/locales/frameworkMessages_zh_CN.properties.js"></script>
<script type="text/javascript" src="/isomorphic/skins/Graphite/load_skin.js"></script>
<script type="text/javascript" src="/js/desktop.js"></script>
<script type="text/javascript" src="/js/user.js"></script>
<script type="text/javascript" src="/js/remote.js"></script>
<script type="text/javascript" src="/js/message.js"></script>
<script type="text/javascript" src="/js/i18n.js"></script>
<script type="text/javascript" src="/js/default.js"></script>
</body>
</html>

注意，我们将程序的入口文件放在了最后，因为在项目启动之前，所有的程序代码都必须定义完成，否则将会产生异常。所以，不论有多少个模块文件，最终的入口文件一定要放到最后载入。至此，我们的首页文件应该算是比较完整的了，以后整个项目的所有内容都与这个首页文件关系不大，而整个项目也只需要这么一个html文件，这与传统的网页开发有着很大的差别。

三、Javascript闭包

让我们回到程序运行的开始部分，打开loading.js文件，回顾一下这个文件的代码：

window.isomorphicDir = "/isomorphic/";

isc.Label.create({

	ID: "labelLoading", padding: 10,
	width: "100%", height: "100%",
	align: "center", valign: "center",
	wrap: false, icon: "/images/loading.gif",
	contents: "Loading..."

});

尽管我们还没有正式开始讲SmartClient的语法，但即使是从字面上来看，还是可以基本上看明白，这几行代码创建了一个标签，并且还能显示Loading动画图片。作为一个标准的Javascript脚本文件，在文件在任意地方敲上代码，浏览器就可以执行这些代码。

可是这样就有了一个问题，Javascript脚本不像其它的编程语言，有命名空间，或者类这样的概念，而且它也不是强类型的语言，很容易出现命名冲突的情况。比如我们如果在代码中加入一行，如下面的代码所示：

window.isomorphicDir = "/isomorphic/";

var isc = "";

isc.Label.create({

	ID: "labelLoading", padding: 10,
	width: "100%", height: "100%",
	align: "center", valign: "center",
	wrap: false, icon: "/images/loading.gif",
	contents: "Loading..."

});

这个时候再执行代码，就会发生致命的错误。原因是在我们调用标签创建代码之前，定义了一个字符串变量，名字叫isc，这与SmartClient的内置对象名冲突了，从而后面的代码将不能正确的执行。Javascript的这个特性，使得开发Javascript代码变成了一项充满陷井的工作。

为了防止因为变量的名字冲突而造成的各种问题，我们需要使用到Javascript的闭包特性。闭包作为Javascript特有的概念，对于习惯于其它语言的开发者来说，是很难理解的概念。在这里我们先简单得把闭包理解成一个封闭的空间，代码可以正常执行，并且不受闭包外代码的影响。

最终，我们把 loading.js 改成下面的样子：

(function(){

	window.isomorphicDir = "/isomorphic/";

	isc.Label.create({

		ID: "labelLoading", padding: 10,
		width: "100%", height: "100%",
		align: "center", valign: "center",
		wrap: false, icon: "/images/loading.gif",
		contents: "Loading..."

	});

})();

以后，我们所有的代码都将在这样的闭包中运行，虽然闭包不能解决所有的问题，但至少可以防止不同代码块之间的各种名称冲突。如果你对Javascript闭包非常陌生，可以先参考一下相关的资料。当然，闭包技术不是必须的，你依旧可以采用自己习惯的方式来编写Javascript代码。

四、中文字体的问题

SmartClient提供了不少皮肤主题，也有提供简体中文的语言包，不过实际运行的时候，你会发现中文字体的显示效果非常不理想，字号太小，根本看不清楚。这个问题是由于其主题包中的CSS文件定义都是以英文字体、字号为标准造成的，一般的字号都是11个像素。而对于中文来说，至少需要12个像素才能清晰的显示。

解决这个问题的办法也很简单，找到相应的主题包所在的文件夹，会发现一个名为 skin_styles.css 的文件，将这个 skin_styles.css 复制一份，并命名为 skin_styles.css.bak，然后我们用文本编辑器打个 skin_styles.css　文件，可以看到大量的字体定义，都是英文字体，11个像素大小，比如下面的部分代码：

.pageBackground {
    font-family:Arial,Verdana,sans-serif; font-size:11px;
    color:black;
    background:#FAFAFA;
}

/* default text */
.normal {
    font-family:Arial,Verdana,sans-serif; font-size:11px;
    color:black;
}

.defaultBorder {
    border:1px solid #A7ABB4;
}

把所有出现“font-size:11px;”的地方替换成“font-size:12px;”就可以了。对于Windows7及以上版本的操作系统，因为有微软雅黑字体可以提供更好的显示效果，我们可以将“font-family:”替换成“font-family:微软雅黑,宋体,”，然后以UTF-8编码格式保存，这样CSS文件就变成了下面的样子：

.pageBackground {
    font-family:微软雅黑,宋体,Arial,Verdana,sans-serif; font-size:12px;
    color:black;
    background:#FAFAFA;
}

/* default text */
.normal {
    font-family:微软雅黑,宋体,Arial,Verdana,sans-serif; font-size:12px;
    color:black;
}

.defaultBorder {
    border:1px solid #A7ABB4;
}

更为保险的作法是将字体名称用英文来表示，这样可以避免因为忘记保存为UTF-8格式而造成的问题，对于微软雅黑字体，它的英文名“Microsoft YaHei”，而宋体的英文名称是“SimSun”，最终的CSS文件就应该像下面的代码一样，不再有中文字的出现：

.pageBackground {
    font-family:Microsoft YaHei,SimSun,Arial,Verdana,sans-serif; font-size:12px;
    color:black;
    background:#FAFAFA;
}

/* default text */
.normal {
    font-family:Microsoft YaHei,SimSun,Arial,Verdana,sans-serif; font-size:12px;
    color:black;
}

.defaultBorder {
    border:1px solid #A7ABB4;
}

到这里为止，我们利用SmartClient开发一个项目的前期准备工作已经全部完成，终于可以正式开始进入开发阶段了。