Js~(function(){})匿名自执行方法的作用
匿名自执行方法体(function(){})经常用在设计JS插件上面,它定义相关组件的行为,自动初始化相关属性,而且在页面中可以直接执行,你不需要手动执行它,它被自动被执行!
在设计你的匿名自执行方法体时,我们有几点需要注意,在这里大叔部总结了一下,请看下面说明
- 将它的结果赋给一个对象
- 如果它没有返回值,那希望使用它的内部对象,需要这个对象是公共的(即不可var)
- 可以将它定义成一个自执行的属性体
具体介绍这三点
将它的结果赋给一个对象
var ar = (function () {
var PageMap = function () { console.log("初始化") };
PageMap.prototype = {
get: function (page) {
return page;
},
set: function (page, value) {
console.log("set");
},
has: function (page) {
return false;
},
clear: function () {
console.log("clear");
}
};
return PageMap;
})(); var a = new ar();
a.set(, "OK");
如果它没有返回值,那希望使用它的内部对象,需要这个对象是公共的
(function (option) {
option = option || { id: , pages: [] };
var pages = []; Maps = function () {
console.log("maps init...");
}; //扩展方法
Maps.prototype = {
keys: function () {
return pages[id] != undefined;
},
get: function (id) {
return pages[id];
},
set: function (value) {
pages.splice(value);
pages.push(value);
},
append: function (value) {
pages.push(value);
},
each: function () {
console.log("eache pages result");
for (var item in pages)
console.log(pages[item]);
}
}; })(); var arr = new Maps();
arr.append();
arr.append();
arr.append();
arr.each();
可以将它定义成一个自执行的属性体
var test = ({
// 这里你可以定义常量,设置其它值, 自动运行
width: ,
height: , // 当然也可以定义utility方法
getMax: function () {
return this.width + "x" + this.height;
}, // 初始化
init: function () {
console.log(this.getMax());
// 更多代码...
}, print: function () {
console.log(this.getMax());
}
}); // 这样就开始初始化咯
test.init();
test.print();
而对于以后我们的JS组件的设计,可以很好的利用它的这些特点,即自执行!
Js~(function(){})匿名自执行方法的作用的更多相关文章
- JavaScript匿名自执行函数~function(){}
原博客:https://blog.csdn.net/yaojxing/article/details/72784774 1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: ...
- js中的匿名函数和匿名自执行函数
1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: <input type="button" value="点击" id ...
- js中的自执行匿名函数 (function(){})()
JS函数有两种命名方式 1.声明式 声明式会导致函数提升,function会被解释器优先编译.即我们用声明式写函数,可以在任何区域声明,不会影响我们调用. function XXX(){} 2.函数表 ...
- JS function的定义方法,及function对象的理解。
废话篇: 今天看到了Function的内容,各种晕,各种混淆有木有.简直是挑战个人脑经急转弯的极限啊.不过,最终这一难题还是被我攻克了,哇咔咔.现在就把这东西记下来,免得到时候又忘了就悲催了.... ...
- js匿名自执行函数中闭包的高级使用(---------------------------******-----------------------------)
先看看最常见的一个问题: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- js进阶 14-5 $.getScript()和$.getJSON()方法的作用是什么
js进阶 14-5 $.getScript()和$.getJSON()方法的作用是什么 一.总结 一句话总结:$.getScript()和$.getJSON()方法专门用来加载JS/JSON文件(远程 ...
- js进阶 14-1 jquery的ajax系列中的load方法的作用是什么
js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...
- [转]js中confirm实现执行操作前弹出确认框的方法
原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...
- js匿名自执行函数
匿名自执行函数:没有方法名的函数闭包:闭包是指有权访问另一个函数作用域变量的函数: 通过一个实例来解释: 从网上找到了一个案例,使用了for循环.匿名自执行函数.setTimeout. 案例1: va ...
随机推荐
- js基础知识点总结
如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命 ...
- mybatis报invalue types()错误
错误信息: Cause: org.apache.ibatis.reflection.ReflectionException: Error instantiating class cn.qd.mybat ...
- 查询时,如何保存获取相关路径url
作为新人,总是会有许多小问题不懂,不知道如何解决的. 这不,这次,遇到了路径获取问题. 在Jsp页面中,获取当前路径,在<script></script>中添加 var ur ...
- maven 环境的配置 JAVA_HOME not found in your envirnment
maven 的环境配置在配置maven前 先做好java的环境配置现在假定java已经配置好了.在环境变量中添加;maven的解压路径\bin 例如:D:\soft\java\apache-maven ...
- Samba的安装与配置
Samba的安装与配置: 准备:关闭其他虚拟设备 #/etc/init.d/libvirtd stop #/etc/init.d/xend stop #chkconfig libvirtd off # ...
- 导致人生失败的31种原因(转自csdn博客)
人生的最大悲剧,就是孜孜不倦的努力却终于失败! 美国一位学者曾经分析了数千人的经历,结果是总人数的98%都是失败者.并由此归纳了人们失败的主要原因,有31种之多.当你逐项阅读它们时,要一一检查自己,以 ...
- Android应用:StatusBar状态栏、NavigationBar虚拟按键栏、ActionBar标题栏、Window屏幕内容区域等的宽高
一.屏幕中各种栏目以及屏幕的尺寸 当我们需要计算屏幕中一些元素的高度时,或许需要先获取到屏幕或者各种栏目的高度,下面这个类包含了Status bar状态栏,Navigation bar虚拟按键栏,Ac ...
- oracle中imp命令详解 .
转自http://www.cnblogs.com/songdavid/articles/2435439.html oracle中imp命令详解 Oracle的导入实用程序(Import utility ...
- 关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系
1.概念介绍 如果你拥有一个开发者账户的话,在iOS Dev Center打开Certificates, Indentifiers & Profiles,你就可以看到如下的列表: Profil ...
- Ajax异步调用Controller的Return JsonResult生成下拉列表
@using System.Web.Optimization; @{ Layout = null; } <!DOCTYPE html> <html> <head> ...