标签流 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:只有写数据的,没有读取数据.只能操作目的地,不能操作数据源.(只能写入数据到文件中,而不能从文件中提 ...
随机推荐
- Entity Framework(EF) Code First将实体中的string属性映射成text类型的几种方式
1.通过ColumnType属性设置 [Column(TypeName="text")] public string Text { get; set; } 在进行以上属性设置时,请 ...
- 04.基于IDEA+Spring+Maven搭建测试项目--application-context.xml配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- IDEA导出jar包后运行报错 找不到或无法加载主类
开发工具:IDEA16 运行环境:ubuntu 问题:根据网上的Idea导出jar包的方法,将我的项目导出jar包后运行报错:找不到或无法加载主类. 为了找到这个原因,我重新搭建了一个测试例子,在 ...
- MySQL服务器最大连接数的合理设置
MySQL服务器的连接数并不是要达到最大的100%为好,还是要具体问题具体分析,下面就对MySQL服务器最大连接数的合理设置进行了详尽的分析,供您参考. 我们经常会遇见“MySQL: ERROR 10 ...
- SqlServer在视图上创建索引
在视图上创建索引需要三个条件: 一.视图必须绑定到架构. 要做到这点,在 CREATE VIEW 语句中,必须加上 WITH SCHEMABINDING,如果是使用企业管理器,则在设计界面的空白处点击 ...
- Python常用模块-时间模块(time&datetime)
Python常用模块-时间模块(time & datetime) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.初始time模块 #!/usr/bin/env pyth ...
- INF文件详解
安装信息(Setup Information)文件是Windows系统支持的一种安装信息存放文件,一般以INF作为扩展名,因此也叫INF文件.安装信息INF文件与Windows内建的安装服务引擎(AP ...
- JXL读取,写入Excel
JXL读取,写入Excel2003 相关阅读:poi 读写excel2003:http://www.cnblogs.com/gavinYang/p/3576739.htmlpoi 读写excel200 ...
- C#获取文件超大图标256*256(转)
从Bing搜索得到,保存于此 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
- 字符串日期转化以及yyyy-MM-dd HH:mm:ss大小写解释
字符串日期转化 字符串转换为Calendar对象: // 日期字符串 private String dateStr; // 将字符串转换后的Calender对象 private Calendar ca ...