《JS修炼之道》—— 读后总计

本篇是基于《JS修炼之道》的记录性与总括性的文章,那本书从多种框架的角度,讲述了JS开发中的一些实用技巧。

style=”color: #000080;”>比如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是单线程的,可以通过set提姆(Tim)eout()和clear提姆(Tim)eout()模拟八线程。

比如一个主意要履行很长的时日,假若不选用其余的行进,可能会导致页面的卡顿。那么就足以把任务拆分成三个部分,使用set提姆eout()进行分层执行,那样在每段的间隙,还是可以拍卖任何的伸手。

相当于模拟了多线程机制。

职分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卓殊好的稿子:空闲可以多看看

 

其它的职分时有关第三方接入的,没啥实际的意义,就不做计算了。

相关文章