如何通过便利隐藏html,通过css类便利前端应用开发

我们知道，使用css类作为标识符为HTML元素赋予功能和特性在某些时候会非常便利，现在举一个实际的例子。

我们在ZCMS的前端功能开发时经常会为链接加${FrontAppContext}前缀和SiteID=${Site.ID}后缀，类似于

这种写法大量存在于前端动态功能模板中，写起来既不便利也不美观。很显然这种小问题不太可能去封装一个标签，如果封装成模板函数(类似于${frontlink('member/info')})也差不太多，那么使用css类怎么做呢？

可以这样：

首先，写一个空的ccs类到公共css文件中，类似于：.front-link{}

然后，加一段js到公共js文件中，类似于：// 所有前端链接统一前缀和后缀

$("a.front-link").each(function() {

var href = $(this).attr("href");

if (href.indexOf("?") > 0) {

href += "&";

} else {

href += "?";

}

href += "SiteID=" + siteID;

href = frontAppContext + href;

$(this).attr("href", href);

});

最后，在前端模板中使用此样式：

很明显，用起来酸爽多了。