jquery留言板代码,用jquery做留言板 收藏 0

jquery1.9以上版本.toggle()的替代实现方法

像大多数前端开发者一样，青衿也经常会用到交互效果的往复切换，比如折叠面板的展开和折叠，动画效果的循环，点击效果的切换等等。

刚刚接触jQuery的时候青衿都是使用.toggle()方法。jquery的.toggle()方法可以添加 click 事件之间要切换的两个或多个函数，刚刚学习juqery的时候这个方法是非常好用的。

但是在1.9及以上版本中.toggle()却被移除了。让一些新手做click效果切换的时候就遇到了困难。不过有什么是jQuery不能解决的呢？一个方法倒下了，千千万万个方法涌现了出来。

青衿在这里就为大家推荐一个很简单的方法：

(function(){

//默认让切换符为true

var toggle = true;

//开始点击事件

$(\”.DIV\”).click(function () {

//让切换符等于他的反义，即原本为true现在为false，或者原本为false现在为true。

toggle = !toggle;

if (toggle) {

$(\”.DIV2\”).hide();

} else {

$(\”.DIV2\”).show();

}

})

});()

基本原理就是当我们完成一次if判断之后，切换符会和初始化时相反，每次点击事件都会让切换符在真假之间切换，代码也会依次在if…else…之间执行。

好了，同学们赶紧尝试一下吧！同时也欢迎大家踊跃留言交流，共同进步~！

jquery的事件名称和命名空间的方法

我们先看一些代码：

当然，我们也可以用bind进行事件绑定。我们看到上面的代码，我们可以在事件后面，以点号，加我们的名字，就是事件命名空间。所谓事件命名空间，就是事件类型后面以点语法附加一个别名，以便引用事件，如”click.a”，其中”a”就是click当前事件类型的别名，即事件命名空间。

假如我们要删除如下命名空间：

我们可以用：

要注意的是：

假如我们写了如下代码：

那么我们要用trigger触发click事件，也就是触发第一个，岂不是把click.a和click.a.bb都触发了，那如何解决这个问题呢，我只想触发click，而不触发click.a及以下的命名空间？

没关系！有如下解决办法：

如果事件类型后面附加感叹号，则表示触发不包含命名空间的特定事件类型。

假如我们只想触发click，可以这么写：

只触发bb，可以这么写：

有了命名空间，可以方便我们在同一个事件上面做管理啦！！！

自定义事件

我在这里就不多描述了！所有自定义事件都可以通过jQuery方法触发，例如下面的示例自定一个Delay事件类型，并把它绑定到input元素对象上，然后在按钮单击事件中触发自定义事件。

自定义事件不是真正意义上的事件，可以把它理解为自定义函数，触发自定义事件就相当于调用自定义函数。

通过上面的介绍，不知道大家对jquery的事件名称和命名空间有没有更深的了解了呢！期待您留言交流！

切图网（qietu.com）专业从事web前端开发的，专注we前端开发，响应式布局，webapp手机端网页制作，微信html5页面制作，bootstrap布局等，关注用户体验。

JavaScript 中，5 种增加代码可读性的最佳实践

作者：Milos Protic译者：前端小智来源：blog.risingstack

为了保证的可读性，本文采用意译而非直译。

简介

如果咱们关注代码本身结构及可读笥，而不是只关心它是否能工作，那么咱们写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码，而不仅仅只编写能应付当前工作的代码。

在此基础上，可读性高的代码可以定义为自解释的、易于人理解的、易于更改或扩展的代码。

以下列表一些好编写方式，仅供参考，当然，如果你有更好的方式，欢迎留言。

以下的方式只是提供一种角度，不代表就需要这样做，请勿抬扛

1. 强类型检查

用===代替 ==

2.变量

用知名其意的方式为变量命名，通过这种方式，当再次看到变量名时，就能大概理解其中的用意

不要在变量名中添加额外的不需要的单词

不要简写变量上下文

不要添加不必要的上下文

3. 函数

使用长而具有描述性的名称，考虑到函数表示某种行为，函数名称应该是动词或短语，用以说明其背后的意图以及参数的意图。函数的名字应该说明他们做了什么。

避免使用大量参数，理想情况下，函数应该指定两个或更少的参数。参数越少，测试函数就越容易，参数多的情况可以使用对象。

使用默认参数替代 || 操作

一个函数应该只做一件事，不要在一个函数中执行多个操作

使用Object.assign设置对象默认值

不要使用标志作为参数，因为它们告诉函数做的比它应该做的多

不要污染全局变量，如果需要扩展现有对象，请使用ES6类和继承，而不是在原生对象的原型链上创建函数

4. 条件

避免使用反面条件

使用条件简写，仅对布尔值使用此方法，并且如果确信该值不会是undefined 或null的，则使用此方法

尽可能避免条件句，而是使用多态性和继承

5. 类

class 是 JS 中新的语法糖,工作方式就像以前的原型但比原型的方式更简单易懂

使用链接，许多库(如jQuery和Lodash)都使用这种模式。在类中，只需在每个函数的末尾返回this就可以将更多的该类方法链接到它上。

总结

这只是改进代码的一小部分。一般生活入，这里所说的原则是人们通常不遵守的原则。他们尝试着去做，但出于各种原因，就没有坚持下去。也许在项目开始时，代码是简洁的，但是当要在截止日期前完成时，这些原则常常被忽略，并被转移到“TODO”或“REFACTOR”部分。在这一点上，你的客户更希望您在最后期限之前完成任务，而不是编写简洁的代码。

原文：https://blog.risingstack.com/javascript-clean-coding-best-practices-node-js-at-scale/

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com