《JS修炼之道》—— 读后总结
本篇是基于《JS修炼之道》的记录性与总结性的文章,这本书从多种框架的角度,讲述了JS开发中的一些实用技巧。
比如Prototype,JQuery,Mootools,YUI,Dojo,Ext,不过我个人仅仅会点JQuery而已,因此也就专门只看JQuery的部分了。
任务1 动态选择方法及属性
由于方法在js中也是一种属性,因此可以使用属性的方法来调用方法:
var test = {a:func,b:20}; test.a(); test.b; 或者 test[a](); test[b];
使用下面的方式的好处是,如果需要做逻辑判断,可以直接在下标中进行:
if(isTrue){test.a(); }else{test.b(); } 可以直接写成: test[isTrue?a:b]();
是不是很简洁呢?
任务2 通过模块实现代码访问控制
由于JS中未使用var声明的变量都会自动提升为全局变量,为了避免全局变量过多导致的性能问题,可以使用模块化的方法,把变量声明在某个匿名函数中,由于变量都是函数级别提升的,因此不会溢出到全局。
(function(){//这里声明的变量只有该函数才能访问 })();
任务3 使用可选、可变、命名参数
在JS中参数的定义是很随意的,既无需定义类型的定义,也不需要在使用时按照规定的参数进行设置。
因为JS中使使用arguments对象保存参数,如果在函数声明的时候,添加了参数,就相当于多了一个参数的引用而已。
function xxx(a,b){for (var index = 1, len = arguments.length; index < len; ++index) {alert(arguments[index]);} }//可以这样使用 xxx(a,b,c); //参数c在函数内部,可以通过遍历arguments得到。 //当然xxx(a),也不会出错....只是c是undefined而已
任务4 获得DOM元素的引用
ES中已经定义了一些关于元素引用的方法,比如document.getElementById(),但是这种风格显得有些冗长,因此很多的框架都提供了元素引用的封装,就拿Jquery来说,就提供了:
基于ID的引用、基于CLASS的引用、基于标签的引用 以及 基于前三种的查找引用等等。
任务5 动态修饰内容
很多框架都封装了一些基于CSS的修改方法,比如Jquery支持css或者attr等来修改DOM元素的样式。
任务6 修改元素的内容
原生的JS支持InnerHtml和outHtml等方法,Jquery也对其进行封装:
比如
val()可以获得控件的值html()可以获得内部的Htmltext()可以获得文本
等等
任务7 DOM加载完成后加载脚本
window.load()方法会在DOM加载全部加载完成后执行,包括图片等文件,这就会导致加载的时间很长。而且该方法之能定义一次,这对于用户来说是不能满足需求的。
因此很多框架都提供了相应的方法,比如jquery:
$(function(){})或者$.ready(function(){})
任务8 监听以及停止监听事件
多数的框架都提供了事件监听的机制,比如on进行监听,off接触监听。以前的Jquery版本使用的是bind和unbind。
还有live对未来将会出现的元素事件进行监听。
任务9 利用事件委托
在编写前端代码时,应该尽量优先使用事件委托机制,而且是相对最近的事件委托。
由于事件的绑定都是消耗性能的,如果你有一个表格,想要给表格中的每一行绑定事件,难道要循环给每个tr绑定事件?那么未来添加一行,再绑定一个事件?
这样做肯定是不可取的,此时就应该使用事件委托,给父级的元素绑定事件,然后捕获event.target
$('父级').click(function(e){ //e.target是真正的触发元素} )
需要注意的是,并不是所有的事件都能冒泡,比如blur和focus就无法冒泡。(自己踩过的坑,只怪基础不扎实)
任务10 将行为和自定义事件解耦
最好将事件与DON元素分离,然后通过bind等方式进行绑定。
这样既方便管理代码,也使得事件的绑定更为灵活。
任务11 模拟后台处理
由于JS是单线程的,可以通过setTimeout()和clearTimeout()模拟多线程。
比如一个方法要执行很长的时间,如果不采取任何的行动,可能会造成页面的卡顿。那么就可以把任务拆分成多个部分,使用setTimeout()进行分段执行,这样在每段的间隙,还可以处理其他的请求。
相当于模拟了多线程机制。
任务12 打造漂亮的tooltip
这个属于易用性的技巧了,tooltip现在也有很多开源的UI框架,没必要自己再去写了。
任务13 制作友好的弹窗
个人感觉Bootstrap就足够用了。
任务14 预载入图片
预载入图片有很多中方法:
1 使用动态的js脚本加载图片
2 使用CSS先隐藏已经加载的图片
任务15 创造光箱效果
这种特效在很多网站中还是很常用的,Jquery中的FancyBox可以帮助你快速的达到目的
任务16 实现无限翻页
前两天刚刚总结并且实践了下无限翻页,最主要的还是要理解各种高度和宽度。
任务17 在载入时保持显示区域
这就需要保证滚动条想对的位置了
任务18 暂时禁用提交按钮
有的时候表单的数据需要一定的时间准备,此时用户如果点击提交可能会造成重复提交,或者一次提交出错。
为了避免这些问题,在表单没有完成必填项时,应该禁用提交按钮
任务19 提供输入长度反馈
如果输入框使用了maxlength属性心智,那么长度就是有限制的,因此最好是在用户输入时,提供一个实时的长度反馈,这点效果可以参考微博等。
之前也整理过源码的实现方式,参考我的github
任务20 同时选择或者反选多个checkBox
一般来说提供一些批量操作对于易用性还是有不少帮助的。
比如:
<input type="checkbox" name="items" alue="1" /> 1 <input type="checkbox" name="items" alue="2" /> 2 <input type="checkbox" name="items" alue="3" /> 3 <input type="checkbox" name="items" alue="4" /> 4
对应的的操作为:
//全选 $(xx).click(function(){$("[name=items]:checkbox").attr("checked",true); }) //全不选 $(xx).click(function(){$("[name=items]:checkbox").attr("checked",false); }) //取反 $(xx).click(function{$("[name=items]:checkbox").each(function(){this.checked = !this.checked;}) })
任务21 表单的验证
CSS属性中有required,给必填项添加样式。
任务22 表单验证:进阶技巧
对于更复杂的一些表单控件,比如数字和邮箱,可以通过正则进行校验
任务23 表单验证:高级技巧
利用Ajax可以实时的对表单进行校验,、
任务24 在表单中提供tooltip
任务25 自动完成输入
这需要在控件初始化前,提供一些预设的值,实现的方式可以是在页面加载的时候请求控件的对应的信息,也可以请求某个json文件,把提示的信息存储在JSON中。
任务26 使用动态多文件上传
书中给出的方式是单个文件上传按钮上传后,隐藏对应按钮。然后添加下一个文件....最后搜集所有的上传信息统一提交。
任务27 读取以及写入cookie
cookie是保存在客户端的一些信息,因此存在一定的风险。
它不适合保存过于重要的数据,(否则你应该使用一些加密手段)
它保存的数据量比较小,只能有4KB的大小。
它有时候可能不可用,因为受制于浏览器的限制,有的浏览器可能设置了cookie相关的限制。
一般框架都会提供相应的操作
任务28 通过ajax加载内容
异步变成给浏览器带来了一次历史性的变革。而原生的ajax浏览器兼容并不好,可以直接使用框架封装的ajax,方便又快捷。
例如Jquery的$.ajax();
任务29 使用JSON
JSON是一种基于js的文档型数据类型,它扁平化没有任何固定的闲置。现在很多的框架都把它作为数据传输的基本格式,比如ES。
任务30 使用JSON-P
由于普通的ajax请求会出现一些跨域问题,使用JSON-P可以有效的解决跨域限制。
看过一篇讲解JSON-P非常好的文章:有空可以多看看
其他的任务时关于第三方接入的,没啥实际的作用,就不做总结了。
《JS修炼之道》—— 读后总结相关推荐
- 《一线架构师实践指南》—— 读后总结
之前总觉得架构是一件很高大上的工作,跟普通的编码设计不太一样.前一段实践,自己也尝试做过架构的工作,可惜经验不足导致架构非常混乱.这里读完这本书,大体上对架构的工作有所了解,也稍微摸清了些门道. 我理 ...
- 读了本号称“App架构师实践指南”的书
大家好我是张拭心,最近读了本书,书名比较厉害<App架构师实践指南>,读完还是有一定收获的,记录分享给大家. 什么是 app 架构师 这本书主要内容 读完感受 什么是 App 架构师 成为 ...
- 《App架构师实践指南》:移动开发的进阶指南
文章主要内容: 什么是 app 架构师 这本书主要内容 读完感受 什么是 App 架构师 成为"架构师"是许多程序员的梦想,当然也包括我,在工作的几年里,我见过很多架构师,他们在设 ...
- App架构师实践指南四之性能优化一
1.性能维度 常见用来衡量App性能的维度如图9-1所示.其中,性能指标包括电池(电量/温度).流量(上行流量/下行流量等).CPU(平均/最大/最小).内存(平均/最大/最小).帧率(平均/最高/最 ...
- Android屏幕适配很难嘛其实也就那么回事,app架构师实践指南pdf
程序员的劫 最近,又被程序员年龄的事情刷屏了.37岁被公司优化,找工作几个月都没有很好的归属,所谓的小公司还看不上.等等类似的话题变成了程序员的吐槽固定标题,无论是程序员,还是其他行业人员,都可以就这 ...
- 高级架构师都在读的10本Java实战书籍,Java开发进阶必备书单
关乎于程序员,除了做项目来提高自身的技术,还有一种提升自己的专业技能就是:多!看!书! 毕竟,书是学习的海洋呢!So,Java程序员你们准备好了吗?双手奉上Java程序员必读之热门书单. 在下面这 1 ...
- 大厂资深架构师都在读的10本Java实战书籍,Java开发进阶必备书单
入门 <SSM企业级框架实战> 作者: 肖睿/丁慧洁/张宁彬 **简介:**框架(Framework)的本质为某种应用的半成品,即把不同应用程序中的共性内容抽取出来而形成的半成品程序.SS ...
- 架构师实践日 · 6.30 杭州站 | 视觉 AI 技术如何助力行业提升?来西子湖畔与业内大咖面对面交流!
伴随内容形式的变迁(文字 → 图片 → 视频),目前视觉 AI 技术不仅被应用到传统领域的升级革新中,还作为最重要的基础人工智能技术渗透到前沿技术的创新研究中. 七牛架构师实践日第二十九期将以视觉 A ...
- 如何构建 FinTech 科学反欺诈体系|架构师实践日
微众圈 > 微信资讯 > 科技 > 文章 如何构建 FinTech 科学反欺诈体系|架构师实践日 摘自公众号:七牛云发布时间:2017-4-11 21:28:33 FinTech,即 ...
- 【架构师实践课】微服务如何拆分?大型微服务项目从何下手?
继上期[架构师实践课]单体和微服务怎么选?单体到微服务怎么转?之后,万老师为我们带来了微服务系统设计专题的第二个议题:微服务设计痛点. 以下内容根据实践课整理. 微服务如何拆分 首先想和大家分享的,就 ...
最新文章
- 脑机接口简史——假如这篇推送是你靠意念打开的
- 八月十二日,周二总结
- 你如何检查选择器是否匹配jQuery中的内容? [重复]
- 从源码看runLoop
- lisp 线性标注自动避让_CAD局部放大图如何标注对应的尺寸,才能保持尺寸值不变...
- 服务器多路径协议,多主机多路径分流传输协议研究与设计
- java http 返回码_【Java】Http返回状态码
- MFC添加View的方法
- DBCC PAGE、DBCC LOG、DBCC EXTENTINFO、DBCC IND、DBCC SHOW_STATISTICS、DBCC SHOWCONTIG、DBCC SQLPERF...
- vue 使用百度地图api_高水准 Vue 百度地图组件Vue-BaiduMap
- 机器学习大作业_机器学习编程作业6-支持向量机(Python版)
- 北理慕课——Python文件和数据格式化
- Hyperledge Fabric-身份与角色认证
- XJNU CTF 2018
- 百度AI实现图片转文字-python
- html网页设计作业代码——网上鲜花网页设计(5页)HTML+CSS+JavaScript web期末作业设计网页
- LOAM系列——LeGO-LOAM配置、安装、问题解决及VLP16测试效果(完结版)
- 最好用的内网穿透工具合集
- 2.跟我走吧,现在就出发
- 用javascript函数设置延时执行jQuery