[笔记]前端html设计与js代码分离

最新推荐文章于 2022-03-20 10:48:28 发布

prog_6103

最新推荐文章于 2022-03-20 10:48:28 发布

阅读量6.2k

点赞数 1

分类专栏： javascript 文章标签： html javascript 分离

本文链接：https://blog.csdn.net/prog_6103/article/details/51469795

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这些天对写前端越发不开心，感觉总是哪里别扭。看看现在主流的框架，jQuery就是管管js代码中ajax和dom的操作；AngluarJS做了很好的工作，但是有个很大的问题：ngIf, ngFor直接出现在html里，一个是这样让html设计人员要十分清楚javascript的开发，二是我在浏览器里直接根本看不到最后设计的结果。

代码的管理在AngularJS也变得更复杂：

如果架构不当，就会出现有些地方是html的文件，有些地方是html的javascript string这样尴尬情况，特别乱。这是因为有一些是网页的主框架，一般都是html文件了（虽然可以最后build成一个app_template.js文件把html存在string里），但是像table里的某一行一般都是一个小模版，那么就是html的string了。
如果使用了grunt或者gulp编译，大部分就是一次性打包所有文件到一个文件，比如js就聚合成vedor.js，app.js等。在网页加载就基本所有东西都要加载。

其实前端开发的思想，一直很喜欢微软的VB傻瓜式，拖一拖控件，然后把代码按照event写函数；VC里有刷新界面的函数。就是说AngularJS虽然双向绑定让开发更快，但是更好的practice我觉得应该是数据更新了，程序在某个地方明确调用函数去更新界面。真正做到html设计与js代码分离，而不是像AngularJS那样把ngFor和ngIf这样的代码逻辑放在html里，另外要诟病的是AngularJS的自定义Directive，放一个自定义的tag在那里，哪天想看html设计还得启动整个项目才能看到结果。

话外小广告：要想严格组件化，我不推荐AngularJS的Directive甚至是Component，而是HTML5里的Shadow DOM。把东西封装到里面当一个自定义控件。

为这个难受地方的解决，做了一个小demo就是petal-ui-template (https://github.com/dna2github/dna2petal/blob/master/ui-template/petal-ui.js, 例子: https://github.com/dna2github/dna2petal/tree/master/samples)，去将dom根据一个自定义的attribute解析为javascript的一个object。比如一个html里有显示控件a，表格b，表格里每行的模版tb1, tb2。这样的方案虽然会增加memory leak的风险，因为js的domain和dom有reference；但是使用和修改设计后的修补变得容易很多。var control =createT('<div tag="test"></div>')后使用control.dom.test就可以访问到这个元素。

比如html：

<html>
<body>
 <div>
  <div tag="title">Loading...</div>
  <table>
    <tbody tag="items">
      <tr tag="+item_a"><td>type A</td></tr>
      <tr tag="+item_b"><td tag="title">type B</td></tr>
    </tbody>
  </table>
 </div>
 <div tag="arr"></div>
 <div tag="arr"></div>
 <div tag="arr"></div>
</body>
</html>

那么这个时候打开这个html，我们就可以直接看到它的效果，使用petal-ui-template以后我们可以直接

$(control.dom.title).text("这是一个标题");

还可以：

var item = $petal.ui.createT(control.template.item_b); $(item.dom.title).text("ItemB的标题"); $(control.dom.items).append(item);

数组是原来大爱VB组件index的结果：

$(control.dom.arr[1]).text("这是标记为arr的第二个div。");

至此html设计就可以和js代码分离了，所有的if，for还是放在js端，不要出现在html里。当然大家的想法也都不一样，按照自己的习惯写代码，并让其他人也能快速合作是最好的了。

prog_6103

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[笔记]前端html设计与js代码分离

这些天对写前端越发不开心，感觉总是哪里别扭。看看现在主流的框架，jQuery就是管管js代码中ajax和dom的操作；AngluarJS做了很好的工作，但是有个很大的问题：ngIf, ngFor直接出现在html里，一个是这样让html设计人员要十分清楚javascript的开发，二是我在浏览器里直接根本看不到最后设计的结果。代码的管理在AngularJS也变得更复杂：如果架构不当，就会出现有些地
复制链接

扫一扫