《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()可以获得内部的Html

text()可以获得文本

 

等等

任务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非常好的文章:有空可以多看看

其他的任务时关于第三方接入的,没啥实际的作用,就不做总结了。

本文转自博客园xingoo的博客,原文链接:《JS修炼之道》—— 读后总结,如需转载请自行联系原博主。
相关文章
|
JavaScript 前端开发 API
JavaScript数组API总结
JavaScript数组API总结
JavaScript数组API总结
|
JavaScript 前端开发
JavaScript总结:typeof与instanceof的区别,及Object.prototype.toString()方法
JavaScript总结:typeof与instanceof的区别,及Object.prototype.toString()方法
186 0
JavaScript总结:typeof与instanceof的区别,及Object.prototype.toString()方法
|
JavaScript 前端开发
JavaScript总结:let变量(弥补var的缺陷)
JavaScript总结:let变量(弥补var的缺陷)
143 0
JavaScript总结:let变量(弥补var的缺陷)
|
JavaScript 前端开发
JavaScript总结: javascript中使用var定义变量的变量提升问题
JavaScript总结: javascript中使用var定义变量的变量提升问题
132 0
JavaScript总结: javascript中使用var定义变量的变量提升问题
|
存储 前端开发 JavaScript
JavaScript总结:关于堆栈、队列中push()、pop()、shift()、unshift()使用方法的理解
JavaScript总结:关于堆栈、队列中push()、pop()、shift()、unshift()使用方法的理解
258 0
JavaScript总结:关于堆栈、队列中push()、pop()、shift()、unshift()使用方法的理解
|
JavaScript 前端开发 内存技术
JS入门到进阶知识总结(四)
JS入门到进阶知识总结(四)
JS入门到进阶知识总结(四)
|
JavaScript 前端开发 程序员
|
XML 移动开发 JavaScript
JS入门到进阶知识总结(二)
JS入门到进阶知识总结(二)
JS入门到进阶知识总结(二)
|
存储 JavaScript 前端开发
|
JavaScript
js之call() apply() bind() $proxy()的总结
由以上代码可以总结出: 1. foo.call()与foo.apply()原理是一样的,将foo函数的this指向指定的对象(或者表述为在指定对象的上下文环境中运行foo函数); 2. bind(obj)与$proxy(obj)不同的是他们返回的是一个新的函数,该函数的this执行指定的对象obj。
147 0
js之call() apply() bind() $proxy()的总结