转载 jQuery和js自定义函数和文件的方法(全网最全)
jQuery和js自定义函数和文件的方法(全网最全)
我们在编写jQuery或者js的时候常常要自定义函数,并且写入一个js文件中,方便引入html中调用。那么就涉及到如何在js文件中书写jQuery和js自定义函数的问题了。
在介绍自定义函数之前必须先来了解下js的自执行函数。
一、js自执行函数介绍
我们通常将JS代码写在一个单独的JS文件中,然后在页面中引入该文件。但是,有时候引入后会碰到变量名或函数名与其它JS代码冲突的问题。那么如何解决这个问题呢?作用域隔离。在JS中,作用域是通过函数来划分的,将JS代码封装到函数中进行调用可以避免变量名/函数名冲突的问题,但是这也并不是万无一失,因为封装函数本身有可能和其它函数重名,解决方案:自执行函数。
自执行函数是用一对圆括号将匿名函数包起来,加括号(传参)会立即执行。因为函数无名字,实现了作用域的绝对隔离和函数名的冲突问题。创建这个自执行函数,就相当于开辟了一个新的命名空间,使里面的内容与其他空间隔离,这样就减少了js文件中的全局变量与其他全局变量名称相同的风险。
自执行函数的几种表现方式:
方式1:function外面加括号 (推荐,比较常见):
- //不带参数的自执行(匿名)函数
- (function() {
- alert(x + y);
- })();
- //带参数的自执行(匿名)函数
- (function(x, y) {
- alert(x + y);
- })(2, 3);
上面创建了一个匿名函数(在第一个括号内),第二个括号用于调用该匿名函数,并传入参数。两个括号都是表达式,是表达式就有返回值,所以可以在后面加一对括号让它们执行.当js的解析器执行到前一个括号后就返回一个函数对象然后连着后面一个括号就构成了一个完整的函数名+(参数)+;的函数执行语句。
方式2:最前最后加括号 (这是jslint推荐的写法,好处是,能提醒阅读代码的人,这段代码是一个整体)
- (function() {
- alert(1);
- }());
方式3:function前面加运算符,常见的是!与void 。这样做的目的就是将函数转换成表达式。
- !function() {
- alert(1);
- }();
- void function() {
- alert(2);
- }();
二、js文件的自定义函数
上面介绍了自执行函数,所以我们可以用它来减少全局变量的使用,提高安全性。所以在js文件中,我们常常用自执行函数来包裹住我们的自定义函数。格式如下:
- //自执行匿名函数
- (function($){
- //自定义函数的代码
- })(jQuery);
那么自定义函数如何来定义呢,请看下面的方法
方法一:通过在jQuery全局变量中增加函数
- //创建:通过在jQuery全局变量中增加函数
- (function($){
- //在jQuery这个全局变量对象中增加一个叫myFunction1的函数,函数参数根据需要自定
- $.myFunction1=function(x,y){
- //函数体
- };
- $.fn.myFunction2=function(x,y){
- //函数体
- };
- })(jQuery);
- //执行
- $(function(){
- $.myFunction1(1,2);
- });
方法二:通过在jQuery全局变量中扩展程序
- //创建两个函数
- (function($){
- //创建方法3
- jQuery.extend({
- "myFunction3":function(){
- alert("我的自定义jquery方法3");
- };
- });
- //创建方法4
- jQuery.fn.extend({
- "myFunction4":function(){
- alert("我的自定义jquery方法4");
- }
- });
- })(jQuery);
- //执行
- $(function(){
- //执行方法3
- $.myFunction3();
- //执行方法4
- //注意,在执行方法4的时候,必须要对象来调用,比如通过标签选择器$("button").myMethod(args);
- $("对象").myFunction4();
- });
注意:通过.fn定义的扩展方法,需要通过jQuery选择器调用,比如通过标签选择器$("button").myMethod(args)。
方法三:创建全局变量,在全局变量里面自定义函数
- //在js文件中创建一个全局变量STUDENT,在对象里面自定义一个获得姓名和年龄的方法
- var STUDENT={ //或者window.STUDENT,表示是该窗口的全局变量
- name:"大哥",
- age:"38",
- //自定义函数
- getNameAndAge:function(){
- return "name:"+name,"age:"+age;
- }
- }
- //执行,获取STUDENT对象中的信息
- $(function(){
- //获取学生的信息
- var info=STUDENT.getNameAndAge();
- });
转载 jQuery和js自定义函数和文件的方法(全网最全)的更多相关文章
- web前端对上传的文件进行类型大小判断的js自定义函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery.validate.js默认配置,jquery.validate.js自定义提示信息
jquery.validate.js默认配置,jquery.validate.js自定义提示信息 配置jQuery.validator默认的处理方法 >>>>>>& ...
- 关于jquery.unobtrusive-ajax.js 回调函数无效 的解决办法
今天新项目的时候写MVC的时候使用到了Ajax.BeginForm,发现它的回调函数怎么都不响应,最后在网上查找了相关资料跟自己写的一些代码测试, 总算找到了原因:jquery.unobtrusive ...
- PHP使用feof()函数读文件的方法
这篇文章主要介绍了PHP使用feof()函数读文件的方法,以实例形式对比了正确与错误的用法,阐明了feof()函数的使用技巧,需要的朋友可以参考下 本文实例讲述了PHP使用feof()函数读文件的方法 ...
- php不使用copy()函数复制文件的方法
本文实例讲述了php不使用copy()函数复制文件的方法.分享给大家供大家参考.具体如下:下面的代码不使用php内置的copy函数,直接通过文件读取写入的操作方式复制文件 <?php funct ...
- jquery.form.js用法之清空form的方法
本段代码摘取自jquery.form.js中,由于觉得该方法的使用性非常强,同时也可独立拿出来使用.该段代码言简意赅可以很好的作为学习参考. /** * Clears the form data. T ...
- jquery.form.js ie 下下载文件已经ie8失效问题解决方案
https://github.com/malsup/form/blob/master/jquery.form.js在使用这个插件时遇到的问题1.ie下会变成下载文件,解决方案是在后端返回时设置'Con ...
- 关于JQuery.form.js异步上传文件点滴
好久没动代码了,前几天朋友委托我帮忙给做几个页面,其中有个注册带图片上传的页面.已之前的经验应该很快就能搞定,没想到的是搞了前后近一天时间.下面就说说异步上传的重要几个点,希望自己下次遇到此类问题的时 ...
- 在js自定义函数中使用$(event.target)代替$(this)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- eclipse + maven搭建SSM框架
0.系统环境 1)Windows 10 企业版 2)JDK 1.8.0_131 3)Eclipse Java EE IDE for Web Developers Version: Neon.3 Re ...
- T-SQL :TOP和OFFSET-FETCH筛选 (五)
通过were和having条件可以对数据进行筛选,那么如何通过排序对数据进行筛选呢? 1.TOP筛选 用于限制查询返回行数或者行数的百分比. 例如 我们对订单表筛选最近产生的订单5条 ) orderi ...
- 控制台安装跟检测Microsoft.Net Framework
1.检测 每一个版本的.Net Framework的安装过程都会在Windows目录下的\Microsoft.NET\Framework目录中生成一个子目录(安装目录). 比如说,假设Windows目 ...
- session持久化到sqlserver
每次想使用都会忘记单词,所幸记录下来.简单步骤记录. 第一步:找到cmd目录 输入:cd C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 进入该目录. 第二 ...
- Contest2073 - 湖南多校对抗赛(2015.04.06)
Contest2073 - 湖南多校对抗赛(2015.04.06) Problem A: (More) Multiplication Time Limit: 1 Sec Memory Limit: ...
- Js调试中不得不知的Console
在js调试中,大部分的前端人员都是采用console.log()方法来打印出调试的数据,但是很多人都不知道console这个对象有很多很实在的方法,本文就来介绍一下这些方法的使用. 一.console ...
- layui 数据表格+分页+搜索+checkbox+缓存选中项数据
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...
- 【代码笔记】Web-ionic-列表
一,效果图. 二,index.html代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- 用css实现圆形波浪效果图
在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用canvas写的,后来发现用css也可以. 原理:我们都知道让块元素的border-radius:50%会变成圆形,如果少于50%呢 ...
- 警告!中国90%AI初创企业将在两年内落败出局
https://mp.weixin.qq.com/s/-RkyLda1jovaHBlBTsi-BA 近年来,中国涌现了一大批AI初创企业,但AI热潮也伴随着泡沫.由于近期市场资金紧缩,投资者发出警告, ...