读《编写可维护的JavaScript》第五章总结
第五章 UI层的松耦合
5.1 什么是松耦合
在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的:
- HTML是用来定义页面的数据和语义
- CSS用来给页面添加样式
JavaScript用来给页面添加行为
我们的目标:确保对一个组件的修改不会经常性地影响其他部分。
结果:
- 遇到和文本或结构相关的问题,通过查找HTML即可定位
- 当发生了样式相关的问题,你知道问题出现在CSS中
- 对于那些行为相关的问题,你直接去JavaScript中找到问题所在
5.2 将JavaScript从CSS中抽离
IE8和更早版本的浏览器有一个特性:CSS表达式(CSS expression)。(读者本人看了此书才知道- -)
它的特点是:允许你将JavaScript直接插入到CSS中。然而历史中毕竟是有糟粕的。
一句话:杜绝使用。
5.3 将CSS从JavaScript中抽离
这个读者本人就经常见了。。一些只是把JS当做脚本语言的后端人员会经常性的这样写。
- // 不好的写法
- element.style.color = "red";
- element.style.left = "10px";
- element.style.top = "100px";
- element.style.visibility = "visibility";
然而最佳操作的方法是 操作CSS的className
- // 好的写法 - 原生方法
- element.className +=" reveal";
- // 好的写法 - HTML5
- element.classList.add("reveal");
- // 好的写法 - YUI
- Y.one(element).addClass("reveal");
- // 好的写法 - jQuery
- $(element).addClass("reveal");
- // 好的写法 - Dojo
- dojo.addClass(element, "reveal");
理由:由于CSS的className可以成为css和JavaScript之间通信的桥梁,在页面的生命周期中,JS可以随意添加和删除元素的className而不必直接操作样式,以便保持和CSS的松耦合。
5.4 将JavaScript从html抽离
① 这个部分也是老生常谈了。。估计很少有人现在这样写了吧。。
- <button onclick="doSomething()" id="action-btn">Click me</button>
作者推荐的,也是众多书中有的写法:
- function doSomething() {
- // 代码
- }
- var btn = document.getElementById("action-btn");
- btn.addListener(btn, "click", doSomething);
IE8以及早期版本浏览器不支持addEventListener()函数,因此你需要一个标准的函数将这些差异性做封装。
- function addListener(target, type, handler) {
- if (target.addEventListener) {
- target.addEventListener(type, handler, false);
- } else if (target.attachEvent) {
- target.attachEvent("on" + type, handler);
- } else {
- target["on" + type] = handler;
- }
- }
如果你用了JavaScript类库,可以使用类库提供的方法来给元素挂载事件处理程序。这里给出了一些流行的类库的示例代码。
- // YUI
- Y.one("#action-btn").on("click", doSomething);
- // jQuery
- $("#action-btn").on("click", doSomething);
- // Dojo
- var btn = dojo.byId("action-btn");
- dojo.connect(btn, "click", doSomething);
② 另外,作者本人也不推荐使用<script>标签方式包含JavaScript代码(不过在紧急调试时这仍然是一种好办法,正式环境当然隔离好了!)
5.5 将HTML从JavaScript中抽离
作者将重头戏放到了最后,我在做上一个项目的时候,采取的拼html方式。这种方式不用说,很low。类似于以下这种的:
你会发现需要转义,HTML和JS混在一起,如果要修改的话需要修改多处,所以,作者推荐了三种方式将HTML从JavaScript中抽离:
5.5.1 方法1 :从服务器加载
这种方法是将模板置于远程服务器,然后用Ajax技术去取,方法类似于下面的:
- // YUI
- function loadDialog(name, oncomplete) {
- Y.one("#dlg-holder").load("js/dialog" + name, oncomplete);
- }
- // jQuery
- function loadDialog(name, oncomplete) {
- $.one("#dlg-holder").load("js/dialog" + name, oncomplete);
- }
当你需要注入大段不经常改变的HTML代码到页面中时,这种方式是非常有帮助的。对于少量的标签段,你可以考虑采用客户端模板。
PS: 本人感觉这种方法也low- -因为作者本人后面加了一句:出于性能原因,将大量没用的标签放入内存或DOM中是很糟糕的做法。这也就直接说明了这种方式并不适合动态模板。
5.5.2 方法二:简单客户端模板
客户端模板是一些带“插槽”的标签片段,这些插槽会被JavaScript程序替换为数据以保证模板的完整可用。
- // 这段模板包含%s占位符,这个位置的文本会被程序替换掉
<li><a href="%s">%s</a></li>
本质上讲,我们不希望在JavaScript中嵌入模板文本,那放哪呢?作者提供了俩种方法。
- 在HTML注释中包含模板文本。
- <ul id="mylist">
- <%--<li><a href="%s">%s</a></li>--%>
- </ul>
- 或者是带自定义type属性的<script>元素,浏览器会默认将<script>元素的内容识别为JavaScript代码,但你可以通过给type赋值为浏览器不识别的类型,从而来告诉浏览器这不是一段JavaScript脚本。
- <script type="text/x-my-template" id="list-item">
- <li><a href="%s">%s</a></li>
- </script>
- <script type="text/x-my-template" id="list-item">
一旦取出了模板,剩下的事就好办了,用JS把每个%s替换成数据就OK了~。
PS:此方法和上面的方法都是针对简单格式的,并无太多转义,我偏好傻瓜式的作者推荐的方法三(第三方插件),它提供的成熟的解决方案大大方便了程序员。
5.5.3 方法三:复杂客户端模板
如果你想用一些更健壮的模板,可以考虑诸如Handlebars所提供的解决方案。
具体可以去它的官网上查看。非常强大,功能也五花八门的。
PS:本人还木有接触关于前端框架的东东。。只是听微雨惊尘老师说,前端框架自带解决这个问题的功能,希望自己可以尽快接触~
读《编写可维护的JavaScript》第五章总结的更多相关文章
- 读《编写可维护的JavaScript》第一章总结
第一章 基本的格式化 1.4 ① 换行 当一行长度到达了单行最大的字符限制时,就需要手动将一行拆成俩行.通常我们会在运算符后换行,下一行会增加俩个层级的缩进. // 好的做法: 在运算符后换行,第二行 ...
- [已读]编写可维护的javascript
13年4月份出版,作者是大名鼎鼎的Zakas,他的另两本书<javascript高级程序设计>与<高性能javascript>你一定听过或者读过. 这本书重点讲了编码风格和编码 ...
- 【读书笔记】读《编写可维护的JavaScript》 - 编程实践(第二部分)
本书的第二个部分总结了有关编程实践相关的内容,每一个章节都非常不错,捡取了其中5个章节的内容.对大家组织高维护性的代码具有辅导作用. 5个章节如下—— 一.UI层的松耦合 二.避免使用全局变量 三.事 ...
- 拯救一切强迫症 - 读《编写可维护的 JavaScript》(一)
拯救一切强迫症 - 读<编写可维护的 JavaScript>(一) 本文写于 2020 年 4 月 24 日 我在小学的时候就有接触过编程,所以读大一的时候 C 语言还算是轻车熟路.自然会 ...
- 《编写可维护的javascript》读书笔记(上)
最近在读<编写可维护的javascript>这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解. 一.编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致. ...
- 编写可维护的JavaScript 收纳架
如果你看过Nicolas C.Zakas写过的任何作品,你必须承认他是个不折不扣的天才.也只有天才级的才能写出<JavaScript高级程序设计>让所有的前端攻城师人手一本.Nicolas ...
- 推荐一本好书:编写可维护的JavaScript(可下载)
目录 推荐一本好书:编写可维护的JavaScript(可下载) 书摘: 下载: 有些建议: 推荐一本好书:编写可维护的JavaScript(可下载) 书摘: 很多设计模式就是为了解决紧耦合的问题.如果 ...
- 《编写可维护的JavaScript》之编程实践
最近读完<编写可维护的JavaScript>,让我受益匪浅,它指明了编码过程中,需要注意的方方面面,在团队协作中特别有用,可维护性是一个非常大的话题,这本书是一个不错的起点. 本书虽短,却 ...
- 编写可维护的Javascript读书笔记
写在前面:之前硬着头皮参加了java方面的编程规范培训,收货良多,工作半年有余的时候,总算感觉到一丝丝Coding之美,以及造轮子的乐趣,以至于后面开发新功能的时候,在Coding style方面花了 ...
- 《编写可维护的javascript》读书笔记(中)——编程实践
上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
随机推荐
- Javascript模板引擎:Hogan
hogan.js是一个开源前端模板引擎,无逻辑的设计,简单好用,性能也不错. 使用 引入hogan.js,下载链接:http://www.bootcdn.cn/hogan.js/,然后通过hogan. ...
- Ubuntu Dev Box Setup
Editor VIM Sublime Atom Visual Studio Code SSH Client PAC Manager File Manager Double Commander Imag ...
- DNS缓存
有DNS的地方,就有缓存. 浏览器.操作系统.Local DNS.根域名服务器,它们都会对DNS结果做一定程度的缓存.本文总结一些常见的浏览器和操作系统的DNS缓存时间. Table of Conte ...
- oracle 9i相关问题
Oracle 9i在连接数据库的时候需要加上双引号,如sqlplus “sys/oracle@orcl as sysdba” Oracle 9i不支持bigfile大的表空间创建,oracle9i或以 ...
- LL基本姿势
在说怎么练习之前,先说说LL这个游戏里面的一些基本概念: 谱面元素(element) 谱面由一个个的音符组成,在LL中,音符(Note)分以下三类: 单点(下简称S,Single),同一时刻只有一个圆 ...
- eclipse tomcat 集成
1. 下载 Tomcat 作者选择的是 Tomcat6,下载地址:http://tomcat.apache.org/download-60.cgi,选择绿色版的 zip 进行下载(目前最 ...
- 旅游行业的手机App Top5
旅游类app分为很多种类,有我们大众认知的典型旅游app像携程旅行,途牛旅游:也有短程的提供代步功能的app,比如滴滴出行,快的打车:还包括我们的火车票,机票的预订app.所以旅游类app是一个很宽阔 ...
- WCF 、Web API 、 WCF REST 和 Web Service 的区别
WCF .Web API . WCF REST 和 Web Service 的区别 The .Net framework has a number of technologies that allow ...
- IE9浏览器中的My97日历控件刷新后无法打开问题解决办法
解决办法如下: 1:找到WdatePicker.js 2:将$crossFrame:true 改为$crossFrame:false. 3:重启服务,刷新页面发现OK.
- Oracle新表使用序列(sequence)作为插入值,初始值不是第一个,oraclesequence
Oracle新表使用序列(sequence)作为插入值,初始值不是第一个,oraclesequence 使用oracle11g插入数据时遇到这样一个问题: 1 --创建测试表-- 2 CREATE T ...