关于:用Javascript让HTML有更好的可读性

凌大人给了我一张设计图撸着玩……于是有了这个 很难达到凌大人设计稿要求的页面

(没做跨浏览器优化 也没做低版本兼容 还没做滚动事件 再次偷懒)

在做的过程中逐渐习惯了jade+sass的单页开发,也渐渐适应了带变量的css写法。暂时没上手compass所以部分css3兼容的地方没写,下一步可能会自己开发点基础的sass工具函数(比如现成的满屏幕fixed、absolute全局居中、rotate兼容写法等)。本来打算用coffee写控件的然而因为看着没有括号很不爽就用了原生js一顿狂撸。

页面右下角是一个

.day-list

的class包裹的导航,每个导航都可以看见里面有各种各样的类,如

.day-list-selected / .day-list-none

等等。

然而你造嘛它们一开始是这样的:

 

 

2345截图20150730140644

写成这样,然后根据

.days

的多少来自动添加类、修改样式和添加功能。

事实上,这部分span标签也可以在js里生成……(懒得改了懒得改了

2345截图20150730140701

以及这里(截图少截了一块。。),.item 父级都是 .days ,在js里面为.days增加id,使得修改.days里面的文字内容、days的顺序等过程变得很方便。

提高HTML可读性,在修改内容上有极大的便利,之前趟过不少浑水,为了修改一点点HTML内容翻来覆去地找,修改的时候还得注意需要哪些名字复杂的class或者id。适度使用js使用框架简化HTML代码,尽管在书写的时候很费神,但是在修改和维护中会带来很大很大的效率提升。

前两天写页面的时候被李狗蛋洗脑了所以这个页面的内容里最终都是李狗蛋了……

 

标签: HTML, javascript

已有 2 条评论

  1. nocti nocti

    因为页面初始时候的jquery用得多没优化过,导致页面刚打开的时候显示效果很差,真正做这种复杂页面的时候应该有一个遮罩层来显示LOADING,在进行过一切初始化之后再移除遮罩层。

  2. 求设计稿玩

添加新评论