JS 四种函数调用模式

hhhkhhh 2017-04-09

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 四种函数调用模式</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//最早，我们这么写代码
//Global 被污染，很容易命名冲突
function aaa(){
	console.info('aaa');
}
aaa();

//简单封装：Namespace 模式
//减少 Global 上的变量数目
//本质是对象，一点都不安全
var BBB = {
	bbb1:function(){
		console.info('bbb1');
	},
	bbb2:function(){
		console.info('bbb2');
	}
}
BBB.bbb1();
BBB.bbb2();

//匿名闭包 ：IIFE 模式
//函数是 JavaScript 唯一的 Local Scope
var CCC = (function(){
	var _val = "ccc1";
	var ccc1 = function(){
		console.info(_val);
	}
	return{
		ccc1: ccc1
	}
})()
CCC.ccc1();
console.info(CCC._val);// undefined

//再增强一点 ：引入依赖
//这就是模块模式
//也是现代模块实现的基石
var DDD = (function($){
	var _$var = $("body");
	var ddd1 = function(){
		console.info(_$var);
	}
	return{
		ddd1:ddd1
	}
})(jQuery);
DDD.ddd1();
console.info(DDD._$var);// undefined

//使用 JQ加载 就可以了，下面仅了解，暂时保存
//动态加载脚本文件的技术
//http://www.labjs.com/
//http://www.cnblogs.com/yuzhongwusan/archive/2013/04/14/3020559.html

//优化JS的方法
//合并 Concat
//压缩 Minify
//混淆 Uglify
</script>
</body>
</html>

效果图：
JS 四种函数调用模式

: hhhkhhh

相关推荐

WebAssembly及其 API 的完整介绍

自从引入计算机以来，本地应用程序的性能有了巨大的提高。相比之下，web 应用程序相当慢，因为 JS 一开始并不是为了速度而构建的。但是由于浏览器之间的激烈竞争以及JS 引擎如V8的快速开发，使得 JS 能够在机器上快速运行。但是它仍然不能超过本机应用程

88274956 0喜欢 / 0评论 2020-11-03

图解：什么是 JS 原型和原型链?

本文转载自微信公众号「小鹿动画学编程」，作者不甘平凡的码农。JS 中的继承机制思想可以说是学习 JS 的一个核心思想，更可以说是 JS 中的一个命脉，往往这些复杂、抽象的继承关系，以及专业术语、代名词确成为了困扰初学者的绊脚石。当我真正理解它的设计思想时

Zhongmeishijue 0喜欢 / 0评论 2020-09-10

通过构建自己的JavaScript测试框架来了解JS测试

测试是编程中非常重要的一部分。在当今的软件开发中，单元/功能测试已成为软件开发的组成部分。随着Nodejs的出现，我们已经看到了许多超级JS测试框架的发布：Jasmine，Jest等。这有时也称为隔离测试，它是测试独立的小段代码的实践。如果你的测试使用某些

runner 0喜欢 / 0评论 2020-09-01

想要在JS中把正则玩得飘逸，学会这几个函数的使用必不可少

在之前的一系列文章中，我们讲解了很多关于正则表达式的知识。那么作为一个前端工程师，如果想要把这些知识应用到我们平时的开发中去的话，就需要知道在JavaScript中，能够使用正则的函数有哪些？然后它们各自的功能是什么？有哪些需要注意的地方？只有掌握好了每一

梦的天空 0喜欢 / 0评论 2020-08-25

一文带你掌握JS高阶编程技巧！

用单独的实例来管理当前事物的相关特征，泛指属性和方法，类似于实现分组的特点，把一个实例的所有特征描述绑定在一个分组里。还有一种基于闭包实现的单例模式称为：高级单例设计模式，在vue/react出来之前，是团队协作最常用的模块化思想，常用来以此模块划分。我们

IdeaElements 0喜欢 / 0评论 2020-08-19

JS中DOM元素的操作

<button id="btn" class="btnlist" name="btn_n">点我一下</button>. innerHTML语法: ele.innerHTM

luvhl 0喜欢 / 0评论 2020-08-17

js实现表格单列按字母排序

本文实例为大家分享了js实现表格单列按字母排序的具体代码，供大家参考，具体内容如下。<link href="../css/表格数据搜索.css" rel="stylesheet">. <input

移动开发与培训 0喜欢 / 0评论 2020-08-16

js实现表格数据搜索

<input type="text" placeholder="搜索..." id="myInput" onkeyup="myFunction()">

ReunionIsland 0喜欢 / 0评论 2020-08-16

浅谈AjaxPro.dll,asp.net 前台js调用后台方法

Ajax是异步Javascript和XML的英文缩写。"Ajax"这个名词的发明人是Jesse James Garrett,而大力推广并且使Ajax技术炙手可热的是Google。Ajax的核心理念在于使用XMLHttpRequest对象

lyqdanang 0喜欢 / 0评论 2020-08-16

一个有意思的方案：不借助后台和 JS ，只用 CSS 让一个列表编号倒序，你会怎么做？

我正在做一个项目，其中有一个倒序的列表。列表创建时间降序排序的，这里我想在语义和视觉上都能体现出来。网上做了一些研究，找到了一些有趣的解决办法，有些很好，有些就不那么好了。接着，我们来看看有哪些实现的方式。简单，最直接的解决方案是HTML中的reverse

NARUTOLUOLUO 0喜欢 / 0评论 2020-08-03

前端 HTMLTestRunner中JS的用法

--...--> 注释标签用来在源文档中插入注释。这些信息对用户是不可见的，但是对程序来说是可用的。这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。命令行最后的两个正斜杠（//）是 JavaScript 注释符号。这确保了 JavaScri

MyNameIsXiaoLai 0喜欢 / 0评论 2020-07-08

gulp 构建 demo

var cleanCss = require; // 压缩 css. var livereload = require;//自动编译。gulp.task("server", [‘default‘],function(){//配置热更新服

星辰的笔记 0喜欢 / 0评论 2020-07-04

SpringBoot入门二十五,默认的404错误页面引入css和js文件

Springboot默认的404,500等页面的位置在static的error中,可以直接访问,无需单独编写映射器。如果我们想美化一下这些错误提示页面,那么static下面css中的文件是不能直接饮用的,因为根据错误发生时路径的层级不同,错误页面的层级也会

csstpeixun 0喜欢 / 0评论 2020-06-28

selenium键盘操作，执行JS，上传文件

selenium内置了执行js代码的api。# ----------------------------通过js代码修改元素的属性--------------------. return ‘操作完了‘;# -----------------------通过

letheashura 0喜欢 / 0评论 2020-06-26

JS事件、Bom对象和Dom对象（1）（乐字节架构）

如需要跟多资料请点击右侧 → 这是一条不归路，有秃头风险，请慎重选择！事件是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

liaoxuewu 0喜欢 / 0评论 2020-06-26

js es6 Iterator

任何数据结构只要部署Iterator接口，就可以完成遍历操作。原因在于，这些数据结构原生部署了Symbol.iterator属性，另外一些数据结构没有。调用这个接口，就会返回一个遍历器对象。

OldBowl 0喜欢 / 0评论 2020-06-26

JS HTML DOM

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、Ja

北京老苏 0喜欢 / 0评论 2020-06-25

函数详解

函数调用https://www.w3cschool.cn/javascript/js-function-invocation.html 闭包控制方法的变量作用域https://www.w3cschool.cn/javascript/js-functi

Luffyying 0喜欢 / 0评论 2020-06-25

异常处理/调试

跟java差不多，都是catch（）可以直接写个变量err

JKjiang 0喜欢 / 0评论 2020-06-25

css 和js基础

类库安装路径：python36/lib/site-package/requests

coulder 0喜欢 / 0评论 2020-06-22

python 爬虫遇到 Cloudflare 邮箱加密

最近写一个小爬虫，需要拿到邮箱信息，发现拿不到，也不是ajax接口。最后查资料发现是被Cloudflare加密起来了，有加密肯定有解密。for e += ‘%’ + .slice;前面的 2 位数字转化成 16 进制之后就是秘钥, 接下来的每两位字符跟秘

sunzhihaofuture 0喜欢 / 0评论 2020-06-21

ES6-Babel-Browserify模块化教程

备注：第一步操作后Babel将es6的模块化语法，转换成了CommonJS模块化语法，所以需要第二步用Browserify再次编译。ES6的模块化分为导出与导入两个模块。在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如

FEvivi 0喜欢 / 0评论 2020-06-16

JS之对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合。比如Student类里可以封装学生的姓名、年龄、成绩等。保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。上面这种表达方式比较乱。而如果用JS中的对象表达，结构会更清晰。p

First00 0喜欢 / 0评论 2020-06-16

【AJAX】Asynchronous JavaScript And XML （非同步的JS & XML）

AJAX 即“Asynchronous Javascript And XML”。是指一种创建交互式网页应用的网页开发技术。ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。网页不刷新的情况下，从服务器中获取数据的解决方案。-　url ，你

坚持着执着 0喜欢 / 0评论 2020-06-16

【JS】05 DOM 文档对象模型 P2 元素的CRUD、Dom集合对象

你需要先找到他的父元素。<p id="p1">这是一个段落。我想说，这用CSS标签选择器不好吗？但是这操作跟数组没有区别啊。。。只不过Java的数组要求长度是固定且数据类型一致的。NodeList对象是一个从文档中获取的节点

Lophole 0喜欢 / 0评论 2020-06-14

selenium中如何执行JS方法

想点击网页的登录按钮时，发现由于网页没有最大化导致元素隐藏定位失败，这里不用maximize_window()，我们用执行JS的方法来实现下。

Reiki 0喜欢 / 0评论 2020-06-14

【JS】04 DOM 文档对象模型 P1 查找元素、改变内容、绑定事件

document.write() 可用于直接向 HTML 输出流写内容。【绝对不要在文档加载完成之后使用 document.write()。修改 HTML 内容的最简单的方法是使用 innerHTML 属性。<p>以上段落通过脚本修改。DOM对

SIMONDOMAIN 0喜欢 / 0评论 2020-06-14

原生JavaScript(JS)修改添加CSS样式表（更好的性能）

所以样式排序稍微麻烦点，但你可以很轻松地想出办法定位的。更多用法，自己把 css0 打印出来就知道了，我只是搞后端的，你问我我也不懂。

waterv 0喜欢 / 0评论 2020-06-14

JS原型对象操作实例分析

本文实例讲述了JS原型对象操作。分享给大家供大家参考，具体如下：。打开浏览器，输入fn，会发现fn有一个prototype(原型)属性，这个属性是一个指针，指向原型对象，这个对象包括了特定类型所有共享的属性和方法。换句话说，prototype对象包含了函数

xiaoge00 0喜欢 / 0评论 2020-06-14

js实现mp3录音通过websocket实时传送+简易波形图效果

废话不多说下面讲一下需求。需求：公司要求实现web端的录音并通过websocket实时上传至java后台，而且能通过vlc实时播放，简单一点讲就是我用网页在那一边讲话，一个大喇叭就能实时把我的话播出去，这样是不是通俗易懂呀，而且呢公司要求用mp3格式。后半

firejq 0喜欢 / 0评论 2020-06-14

详解用js代码触发dom事件的实现方案

前端编写测试用例时，在测试界面上的一些效果时，通常都希望能够模拟一些用户操作，而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseu

firstboy0 0喜欢 / 0评论 2020-06-14

fastadmin的前端js文件中api和event的区别，formatter的意思

js中的api和event有什么区别呢？// 这就是定义并返回了一个form对象，本质上，就是引用了四个依赖，返回了一个对象，数据结构是对象。为什么form中有events，而table里，没有events？

MrHaoNan 0喜欢 / 0评论 2020-06-13

webpack4.43 - 创建项目,打包第一个js文件

webpack 用于编译 JavaScript 模块。一旦完成安装，你就可以通过 webpack 的CLI或API与其配合交互。如果你还不熟悉 webpack，请阅读webpack4.x - 初始webpack，了解为什么你要使用 webpack，而不是社

yezitoo 0喜欢 / 0评论 2020-06-13

JS leetcode 宝石与石头题解分析，正则字符组也有妙用

简单问题简单做，今天的题目来自leetcode771. 宝石与石头，字符串相关的一道题，题目描述如下：。J 中的字母不重复，J 和 S中的所有字符都是字母。字母区分大小写，因此"a"和"A"是不同类型的石头。S 和

天高任鸟飞 0喜欢 / 0评论 2020-06-13

uglifyjs 合并压缩 js, clean-css 合并压缩css

本文主要介绍如何通过CLI命令行实现 js和css的合并压缩。这一步就不多说了，下载node自行安装。上面的命令表示把common.js和example.js合并成为common.min.js。这里面的路径请根据你项目的实际情况更改。

e度空间 0喜欢 / 0评论 2020-06-12

JS中基本数据类型与引用数据类型的区别：

当copy数据时，copy到的是数据值本身。基本数据类型的变量与变量之间是独立存在，修改其中一个变量，不会影响其他变量。例：var A = {name: ‘wangxiaoming‘, age: 19}；

hellobabygogo 0喜欢 / 0评论 2020-06-12

巧妙利用selenium中的JS操作来处理特殊的文本框

　　1.日期框：无法直接输入文本，必须要选择某一天的日期并点击才会填入文本框；当我们把第一个标签的value的值改变为“SHH”，第二个标签的value的值改变为“上海”时，文本框自动变更为“上海”，到达地检索框的操作方法一致。

王练 0喜欢 / 0评论 2020-06-12

JS leetcode 回文数题解分析，数学不好是硬伤

每日一题环节，今天的一道是让我相信自己数学薄弱的题目，题目来源leetcode9. 回文数，题目描述如下：。判断一个整数是否是回文数。回文数是指正序和倒序读都是一样的整数。题目关于回文数的描述也很清楚，不管从左还是从右，读起来都相同的数组，那这样无论位数为

seasongirl 0喜欢 / 0评论 2020-06-12

js中的promise详解

Promise是异步编程的一种解决方案，可以替代传统的解决方案--回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点： * 对象的状态不受外界影响。* 一旦状态改变了就不会在变，也就是说任何时候Prom

Magicsoftware 0喜欢 / 0评论 2020-06-11

什么？你还不会身份证号码验证？最全的身份证正则验证js

var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"

Darklovy 0喜欢 / 0评论 2020-06-11

js 调用 angularJs 的方法

var $scope = angular.element.scope(); // 如果先调用 Controller 里面的方法的话$scope.func1;// 改变了值之后还需要调用一下下面的方法, 才可以刷新最新改变的内容$scope.$apply()

阿斌Elements 0喜欢 / 0评论 2020-06-11

gulp js文件压缩 es6 代码转换

// 暂时用下面这个 npm install gulp-babel @babel/core @babel/preset-env. gulp jsmin-------------------------------------- // 代码压缩npm ins

zhongweinan 0喜欢 / 0评论 2020-06-10

使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after

在网页中，如果需要使用辅助性/装饰性的内容的时候，我们不应该直接写在HTML中，这样会影响真正的内容，这就需要使用伪元素了，这是由于css的纯粹语义化是没有意义的。在使用伪元素的时候，会发现js并不真能直接控制它，这篇文章主要就介绍下如果间接的控制、修改c

liboqiao 0喜欢 / 0评论 2020-06-07

django 使用第三方js库“My97DatePicker”作为时间选择插件

五：验证路径是否可以正常访问；

zhouxuan 0喜欢 / 0评论 2020-06-06

django 使用第三方js库“My97DatePicker”作为时间选择插件

五：验证路径是否可以正常访问；

林子的Python笔记 0喜欢 / 0评论 2020-06-06

JS数据类型

js 不区小写和整数, Number. 每个属性之间使用逗号隔开,最后一个不需要添加。获取t元素的下标。// 定义了一个person对象,他有四个属性!

弱思 0喜欢 / 0评论 2020-06-06

webpack 之压缩js代码和html文件

2.压缩html文件，html文件不需要处理兼容问题，压缩文件只需要在plugins中的HtmlWebpackPlugin中配置minify即可

gufudhn 0喜欢 / 0评论 2020-06-06

rails6 导入js依赖库css样式

If you have upgraded your app from an earlier version of Rails make sure you add the following line:. This is included by defaul

mfkpum 0喜欢 / 0评论 2020-06-05

原生js实现ajax封装

表单验证是否登录成功、百度搜索下拉框提示和快递单号查询等等。Ajax请求数据流程，其中最核心的依赖是浏览器提供的对象xhr，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面。

TONIYH 0喜欢 / 0评论 2020-06-05

js 语法检查

eslint 使用 airhub 检查： eslint-config-airbnb 和eslint-config-airbnb-base. eslint-config-airbnb 包含 ECMAScript 6 + 以及 React 的 ESLint 代

hualala 0喜欢 / 0评论 2020-06-05