《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是单线程的,可以由此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非常好之稿子:闲得多省

 

外的职责时有关第三正接入的,没啥实际的意图,就非举行总结了。

相关文章