标签流 VS 脚本流
搞过点前端,玩过几个框架之后,基本都会发现框架在设计上的一些套路和流派,今天给大家扒一扒其中的两个书写流派“标签流”和“脚本流”
我们以一个button按钮为例:
这样裸写HTML标签的方式基本没法儿复用,功能和样式都太弱鸡了。搞项目基本没人会这样干了
最常用的Bootstrap框架的写法:
仍然是HTML标签为主体,结构一目了然,按需配置样式,事件得靠自己加。它的结构、样式、行为完全分离,有一定有复用价值。但是用过Bootstrap的都知道,基本就是对着官网例子‘复制’‘粘贴’,真干起重活来还是很低效。
然后有了封装度高一点的jQueryUI,写法大概是这样的:
jQueryUI是比较尴尬的,看着像标签流的写法,有声明式的标签,但属性绑定都在js中依赖options的配置,这又是命令式脚本流的干法,既要写HTML,又要写js,复用性也不是那么方便。
再看看封装度最高的ExtJS,标准写法长这样:
这是标准的命令式写法,完全不用写一行HTML,框架已经全封装好了,需要用的时候随时new 一个button实例就好了,所有的方法人已经替你准备好了,只需要你按需求写完配置就可以了。其实在这种封装度下,你基本上已经不需要懂HTML、css,甚至javascript了,认得已经单词就能学个七八成了。看起来很美好是吧。但是!!!这时候老板突然说,你把这个按钮上给我加一道光吧,blingbling的那种。怎么办?你把文档从头翻到尾,我能怎么办?我也很绝望啊。
这里就很容易看出来了,标签流的写法以HTML为核心,脚本流的写法以js为核心,脚本流的东西用起来爽,改起来烦,标签流的写法正相反。早期做网站 美工负责出界面,后端程序员负责套模板,php里甚至可以直接写HTML不要太爽,至于js特效什么的在网上随便扒一个就是干,所以大家基本都是标签流的写法。后来web应用火起来了,页面全走前端渲染,脚本流靠js包打天下的写法又火了。
有什么办法能结合标签流可读性和脚本流复用性这两方面的优点呢??拿目前最火的前端三大框架为例,最早的AngularJS(1.3版本)是这样写的:
在HTML中使用自定义标签<my-btn>提供了一个挂载点创建元素,自定义属性看起来直观用起来方便,复用性相当好。不过这种写法在js中定义组件是比较有难度的,写法比较恶心。后来就出来了React,用ES6的写法是这样的:
React的理念非常简单又特立独行,你又想要标签又想要脚本?简单啊,我把HTML和js合在一起做一门新’语言‘,叫JSX,所以React的代码里看起来既有标签又有脚本。这种组件化的搞法应该说还是目前最强悍的思路了。当然有人不喜欢JSX那种all in js的拧巴的写法,又有了大家喜闻乐见的Vue,写法是这样子的:
标签用法和Angular基本一样,脚本写法则更像React。果然是前端界的一股清流啊。
目前来说,我感觉标签流的写法在组织架构和易读性通用性上会好一些,web page和web app基本都能干,只是组件搞复杂了之后满屏的bind、model实在太烦了。React功能强大,不过jsx+babel编译玩得有点过火,调试和可读性比较麻烦,有时想干点猥琐的事情很难下手。
所以要怎么选呢?如果你是设计转前端,标签流上手容易,如果你是后端搞前端,毫无疑问脚本流更方便!
标签流 VS 脚本流的更多相关文章
- Character流与Byte流的区别
Character流与Byte流的区别 (2012-09-25 16:15:49) 标签: 杂谈 分类: 大赛指导 Character流与Byte流的区别是 A) 每次读入的字节数不同 B) 前者带有 ...
- java.IO输入输出流:过滤流:buffer流和data流
java.io使用了适配器模式装饰模式等设计模式来解决字符流的套接和输入输出问题. 字节流只能一次处理一个字节,为了更方便的操作数据,便加入了套接流. 问题引入:缓冲流为什么比普通的文件字节流效率高? ...
- JAVA之IO流(字符流)
字符流InputStreamReader和OutputStreamWriter是Writer和Read的子类:是字节流通向字符流的桥梁,也就是可以把字节流转化为字符流. InputStreamRead ...
- java IO流 之 其他流
一.内存操作流(ByteArrayInputStream.ByteArrayOutputStream) (一). public class ByteArrayInputStream extends ...
- java IO流 之 字符流
字符是我们能读懂的一些文字和符号,但在计算机中存储的却是我们看不懂的byte 字节,那这就存在关于字符编码解码的问题.所以在学习Io流的字符流前我们先了解些关于编码问题. 一.字符集与字符编码 1.什 ...
- JAVA里面的IO流(一)分类2(节点流和处理流及构造方法概要)
IO流根据处理对象的不同分为节点流和处理流. 直接对文件进行处理的流为节点流: 对流进行包装从而实现对文件的优化处理的流为处理流. 节点流类型: 可以看出,节点流主要分这几大类: 文件流 文件流构造方 ...
- Java IO7:管道流、对象流
前言 前面的文章主要讲了文件字符输入流FileWriter.文件字符输出流FileReader.文件字节输出流FileOutputStream.文件字节输入流FileInputStream,这些都是常 ...
- java io流(字符流) 文件打开、读取文件、关闭文件
java io流(字符流) 文件打开 读取文件 关闭文件 //打开文件 //读取文件内容 //关闭文件 import java.io.*; public class Index{ public sta ...
- java 21 - 12 IO流的打印流
打印流 字节流打印流 PrintStream 字符打印流 PrintWriter打印流的特点: A:只有写数据的,没有读取数据.只能操作目的地,不能操作数据源.(只能写入数据到文件中,而不能从文件中提 ...
随机推荐
- ajax调用后台webservice返回JSON字符
后台代码: [WebMethod] public static string LoginTest(string userCode, string password) { UserManageCente ...
- delphi xe 的替代者 Lazarus
Lazarus的设计目标是应用Free Pascal,所以所有凡是Free Pascal能运行的平台,Lazarus都可以运行.最新版本能运行于Linux,Win32和Mac OS.整个界面的外观和操 ...
- 用友时空KSOA功能挖掘之zl_func函数
问题日常开发中,需要对界面进行控制,不符合条件时禁用某些功能菜单.例如[采购订单填制]界面,要实现供应商资质证书效期提醒功能,即近效期提醒,超效期禁止采购,如何实现呢? 分析使用KSOA新增加的zl_ ...
- Java之字节流操作-复制文件
package test_demo.fileoper; import java.io.FileInputStream; import java.io.FileOutputStream; import ...
- jdk动态代理 要把目标对象 和自己都传进去;以便自己对目标对象的代理
- scheme 教程 #lang racket
scheme 教程 #lang racket 来源 https://blog.csdn.net/yemeishenme/article/details/51471037 原文: https://le ...
- NOIP2018退役总结
NOIP2018退役总结 先说下成绩,应该压线二等. 也没有什么可以抱怨的,真的是心态的问题. 在Day1的时候这么简单的一套卷子,却打了三道暴力,175本来就是省二的水平.回来以后心态就崩了,因为D ...
- 基于Maven构建的Spring+Mybatis项目
项目的目录结构: 1.基于Maven构建Web项目 参考:基于Maven构建Web项目 2.导入项目依赖 Spring 核心容器(Beans.Core.Context.Context support. ...
- 二、spring boot 1.5.4 异常控制
spring boot 已经做了统一的异常处理,下面看看如何自定义处理异常 1.错误码页面映射 1.1静态页面 必须配置在 resources/static/error文件夹下,以错误码命名 下面是4 ...
- Java: 扩大字节缓存区的大小,提升AIO的处理性能(并发性能)
前些日了,对AIO与NIO的并发性能进行了比较,在低并发的情况下,NIO性能表现比AIO好一些,主要原因是,NIO中可以使用FileChannel.transferTo(long position, ...