关于"非侵入性 javascript 编程" 和 UI 编程的思考

[Lin Qing]

非侵入性 javascript 程序。
其实是利用了已有的 view 部分作为数据 (module) ，利用 js 添加控制 (control)，
相当于把 mv 合为一体了。

这样有什么好处？
可以不依赖 js，仅有 view 部分的 html 代码也可以满足基本功能需求，
添加的 js 只是作为改进（可用性和功能性）。

不好的地方呢？
虽然说是非侵入性的，但是却要求 js 要跟时刻随 html 结构的变化，
一旦 html 的构成改变了，js 也相应的要改变。
如果其他地方要使用这个 js，那么 html 结构将受到限制。
而且，越是复杂的应用对 html 的限制越多。
可重用性不是很好。


大多数 ui 编程都综合利用界面元素和自己内部的属性作为数据 (module)，
比如标签页中一般每个标签元素都会有自己的 index 属性，在点击的时候这些
index 值被传递给 Tab 类，然后进行处理。
处理方式有 2 种，
一种是在程序内部记录当前标签，点击某标签的时候对当前标签和点击标签进行处理，
这样效率比较高，但是如果遇到恶意修改，可能会比较麻烦（界面出错）。
另一种是遍历所有标签，然后对点击标签进行处理。这种处理效率比较低，但是有比较好的
抗错性。

对于当前标签的标示，有以下方法：

1. 根据标签组数据重新生成所有标签元素；
2. 改变标签元素的 class 属性（标签元素的状态通过 class 属性来控制）。
   

标签元素事件的绑定：

1. 通过元素的事件属性 (onxxxx) 来绑定，这样就必须生成可以全局中引用标签组数据的变量（要处理的问题增多）；
2. 通过标签元素的 addEventListener 方法绑定，这样可以不用生成全局中的变量，不过生成标签组元素会变得比较麻烦（效率也较低）。
   

标签切换一般会引起内容切换，这也有多种方式：

1. 操作已经存在的元素；
   
2. 读取内容形成新元素；（是否缓存，缓存数据还是界面元素）
3. 其他。

跟标签一样，内容切换的时候也需要考虑是否检测其他元素。个人倾向是切换的时候不检查，初始化的时候检查一次。


利用已经存在的界面元素也有 2 种方式：

1. 保持原有元素的结构不变，只是操作他们的属性；
2. 只是利用原有元素的数据，重新生成结构。（即时生成或者一次性生成）

读取的数据的格式：

1. 使用标准格式（例如 RSS 格式），通用性较好，不过可能会有效率问题（数据传输和解析）；
2. 使用自定义格式，通用性较差，不过传输和解析的效率都比较好。

很多东西没法判断，只能是规定。
因为不同的地方有不同的做法，而他们都可以。
但是我们到底用哪一种？
抛硬币决定吧。