整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript函数进阶:函数的定义和调用

JavaScript函数进阶:函数的定义和调用

数的定义方式


1. 函数声明方式 function 关键字 (命名函数)


2. 函数表达式 (匿名函数)


3. new Function()

Function 里面参数都必须是字符串格式


第三种方式执行效率低,也不方便书写,因此较少使用


所有函数都是 Function 的实例(对象)


函数也属于对象


函数的调用方式


1. 普通函数


function fn() {


console.log('人生的巅峰');


}


fn(); fn.call()


2. 对象的方法


var o={


sayHi: function() {


console.log('人生的巅峰');


}


}


o.sayHi();


3. 构造函数


function Star() {};


new Star();(构造函数和普通函数肯定不一样了,他们的主要区别是构造函数首字母大写,还有就是new关键字调用)


4. 绑定事件函数


btn.onclick=function() {}; // 点击了按钮就可以调用这个函数


5. 定时器函数


setInterval(function() {}, 1000); 这个函数是定时器自动1秒钟调用一次


6. 立即执行函数


(function() {


console.log('人生的巅峰');


})();


立即执行函数是自动调用

熟悉的朋友都知道,我所分享的图文,基本上都是后端开发相关的技术

但是web开发是一套综合的技术,牵涉到方方面面的知识。包括Linux服务器,TCP/IP网络,数据库,编程语言,HTML,JS,CSS等前端技术

很多开发者穷其多年功力,不过只是在一方面有所精通。遑论号称全栈的开发者,真正拿得出手的技术也必凤毛麟角

今天分享一篇前端JavaScript的基础函数。因为觉得非常有用,通用性强,推荐给大家。

简陋的过去

还记得早期的 JavaScript,你需要使用一个简单的函数,来处理几乎所有的事情。

浏览器供应商对 JS 实现的功能不同,甚至在基本功能上,如 addEventListener 和 attachEvent,都有所分歧。

时代已经改变了,但是每个开发人员在他们的武器库中,仍然应该有一些功能,以方便功能实现。

1 - debounce

当涉及到事件驱动的性能时,debounce函数可以改变游戏规则。

如果您没有使用具有scroll、resize、key* 事件的 debounce 函数,那么您可能没有找到最佳实践。

这里有一个debounce 函数,可大大提高你的代码效率。

debounce 函数不允许在给定的时间框架内多次使用回调。在为频繁触发的事件分配回调函数时,这一点尤其重要。

2 - poll

正如在 debounce 函数中提到的,有时候你不需要插入一个事件,来表示你想要的状态。如果事件不存在,你需要每隔一段时间检查你想要的状态。

下图是 poll 函数的实现:

然后调用的时候使用下面的方式:

poll(function() {
	return document.getElementById('lightbox').offsetWidth > 0;
}, 2000, 150).then(function() {
    // Polling done
}).catch(function() {
    // Polling timed out, handle the error!
});

poll 在 web 上已经很有用了,并且在未来还会继续使用!

3 - once

有时候,您希望某个给定功能只发生一次,这与您使用 onload 事件的方式类似。

once 函数确保一个给定函数只能调用一次,从而防止重复初始化

4 - getAbsoluteUrl

从变量字符串中获取绝对 URL 并不像您想象的那么容易。有 URL 构造器,但是如果不提供所需的参数,它可能会出现问题。

下面是一个获得绝对 URL 和字符串输入的代码:

这种用法对获取到 href 更为保险。

5 - isNative

用于确定给定的函数是否是本地的,你可以决定是否覆盖它。下面的简便函数能让你认识更为清楚:

方法写的有点儿丑,不过能用。:)

6 - insertRule

我们都知道,可以从选择器中抓取一个节点列表(通过document.querySelectorAll),然后给每个节点一个样式。

但是更有效的是,把这个样式设置成选择器

这在处理一个动态的、大量使用 ajax 的站点时特别有用。

如果将样式设置为选择器,则不需要考虑样式化可能与该选择器匹配的每个元素。

7 - matchesSelector

我们经常在继续之前验证输入。确保真实的输入值,确保表单数据有效等等。

但是,我们多久才能确保,一个元素符合向前移动的条件呢?

你可以使用 matchesSelector 函数,来验证元素是否属于给定的选择器匹配:

写在最后

好了,轮子都准备完毕了,拿去装车上吧!

Happy coding :-)


我是 @程序员小助手 ,持续分享编程知识,欢迎关注。

十几个函数,对于前端的开发的同学来说,非常实用,比如,如何生成一个唯一的字符串ID,如何转义HTML特殊字符。而对于想提升JS基础能力及面试能力的同学来讲,也非常有用,每一个功能考的都是你的基本功扎不扎实的问题。能学东西

如何生成随机数?

我们可以使用Math.random方法来生成 一个随机字符中,比如,当我们需要生成一个唯一字符串ID的时候,这就非常适合。

代码如下: