有这样的问题,希望本文所述对大家JavaScript程序

2019-07-13 作者:小鱼儿主页高手论坛   |   浏览(164)

开荒者能够行使FullCalendar成立强大的日历日程应用,FullCalendar提供了充足的选项设置和措施调用,使得开拓者可以轻便的开创各类成效的日历程序。

那二日在做三个专项论题的时候境遇了一个通配符的主题材料

闭包,是 javascript 中十分重要的一个定义,对于初学者来说,闭包是叁个专程抽象的定义,特别是ECMA规范给的概念,如果未有实战经验,你很难从概念去领略它。由此,本文不会对闭包的概念进行大篇幅描述,直接上干货,令你分分钟学会闭包!

本文实例陈诉了js完结C#的StringBuilder效果。分享给大家供大家参谋,具体如下:

鉴于连串需求,须求经过日历的法门表现有个别数据,在网络查找了相当多日历的插件,感到比较好用的如故fullCalendar,上边是自身写的八个轻便德姆o,如有不足,请多多指正!!! 

//弹层操作
$(function(){
 //视频播放
 $("a[href^='#video']").each(function(index, element) {
 $(this).click(function(){
 $(".popDiv,#videoBox1").show();
 });
 });
 //图片
 $(".imgs a:not([href^='#video'])").each(function(){
 $(this).children("img").click(function(){
 var src=$(this).attr("attr");
 //alert(src);
 $("#picBox img").attr("src","images/"   src);
 $(".popDiv,#picBox").show();
 $("#picBox img").animate({opacity:'1'},500)
 });
 });
 $(".close").click(function(){
 $(".popDiv,.popBox").hide();
 $(".box").css("margin","0 0 0 100%");
 $("#picBox img").css({opacity:'0'},1000)
 });
 })

1、闭包--爱的初体验

/*
  ##################### DO NOT MODIFY THIS HEADER #####################
  # Title: StringBuilder Class                    #
  # Description: Simulates the C# StringBuilder Class in Javascript. #
  # Author: Adam Smith                        #
  # Email: ibulwark@hotmail.com                    #
  # Date: November 12, 2006                      #
  #####################################################################
*/
// Simulates the C# StringBuilder Class in Javascript.
// Parameter["stringToAdd"] - The string to add. 
StringBuilder = function(stringToAdd)
{  
  var h = new Array();
  if(stringToAdd){h[0] = stringToAdd;} 
  this.Append = Append;
  this.AppendLine = AppendLine;
  this.ToString = ToString;
  this.Clear = Clear;
  this.Length = Length;
  this.Replace = Replace;
  this.Remove = Remove;
  this.Insert = Insert;
  this.GetType = GetType;   
  // Appends the string representation of a specified object to the end of this instance.
  // Parameter["stringToAppend"] - The string to append. 
  function Append(stringToAppend)
  {
    h[h.length] = stringToAppend;
  } 
  // Appends the string representation of a specified object to the end of this instance with a carriage return and line feed.
  // Parameter["stringToAppend"] - The string to append. 
  function AppendLine(stringToAppend)
  {
    h[h.length] = stringToAppend;
    h[h.length] = "rn";
  } 
  // Converts a StringBuilder to a String.
  function ToString()
  {
    if(!h){ return ""; }
    if(h.length<2){ return (h[0])?h[0]:""; }
    var a = h.join('');
    h = new Array();
    h[0] = a;
    return a;
  }
  // Clears the StringBuilder
  function Clear()
  {
    h = new Array();
  }
  // Gets the StringBuilder Length
  function Length()
  {
    if(!h){return 0;}
    if(h.length<2){ return (h[0])?h[0].length:0; }
    var a = h.join('');
    h = new Array();
    h[0] = a;
    return a.length;
  }
  // Replaces all occurrences of a specified character or string in this instance with another specified character or string.
  // Parameter["oldValue"] - The string to replace. 
  // Parameter["newValue"] - The string that replaces oldValue. 
  // Parameter["caseSensitive"] - True or false for case replace.
  // Return Value - A reference to this instance with all instances of oldValue replaced by newValue.
  function Replace(oldValue, newValue, caseSensitive)
  {
    var r = new RegExp(oldValue,(caseSensitive==true)?'g':'gi');
    var b = h.join('').replace(r, newValue);
    h = new Array();
    h[0] = b;
    return this;
  }
  // Removes the specified range of characters from this instance.
  // Parameter["startIndex"] - The position where removal begins. 
  // Parameter["length"] - The number of characters to remove.
  // Return Value - A reference to this instance after the excise operation has occurred.
  function Remove(startIndex, length)
  {    
    var s = h.join('');
    h = new Array();
    if(startIndex<1){h[0]=s.substring(length, s.length);}
    if(startIndex>s.length){h[0]=s;}
    else
    {
      h[0]=s.substring(0, startIndex); 
      h[1]=s.substring(startIndex length, s.length);
    }
    return this;
  }
  // Inserts the string representation of a specified object into this instance at a specified character position.
  // Parameter["index"] - The position at which to insert.
  // Parameter["value"] - The string to insert. 
  // Return Value - A reference to this instance after the insert operation has occurred.
  function Insert(index, value)
  {
    var s = h.join('');
    h = new Array();
    if(index<1){h[0]=value; h[1]=s;}
    if(index>=s.length){h[0]=s; h[1]=value;}
    else
    {
      h[0]=s.substring(0, index); 
      h[1]=value; 
      h[2]=s.substring(index, s.length);
    }
    return this;
  }
  // Gets the type
  function GetType()
  {
    return "StringBuilder";
  }
};

一、引进供给的公文:

主题素材已化解!有那般的标题,能够参照上边包车型大巴详实用法:

在触及贰个新技艺的时候,小编第一会做的一件事就是:找它的demo code。对于码农们的话,代码偶尔候比自然语言更能理解三个东西。 其实,闭包无处不在,例如:jQuery、zepto的基本点代码都带有在三个大的闭包中,所以上边笔者先写二个最简便最原始的闭包demo,好令你在大脑里发生闭包的镜头:

可望本文所述对大家JavaScript程序设计具备支持。

 <link href="Scripts/Plugins/fullcalendar.css" rel="stylesheet" />
 <link href="Scripts/Plugins/jquery.ui.css" rel="stylesheet" />
 <link href="Scripts/Plugins/style.default.css" rel="stylesheet" />
 <script src="Scripts/Plugins/jquery-1.7.min.js"></script>
 <script src="Scripts/Plugins/jquery-ui-1.8.16.custom.min.js"></script>
 <script src="Scripts/Plugins/fullcalendar.min.js"></script>
 <script src="Scripts/Plugins/fullcalendar.js"></script> 

1.选择器

function A(){
  function B(){
    console.log("Hello Closure!");
  }
  return B;
}
var c = A();
c();//Hello Closure!

你可能感兴趣的作品:

  • 在C#及.NET框架中使用StringBuilder类操作字符串的本事
  • C#中StringBuilder类的选择总括
  • C# 利用StringBuilder提高字符串拼接品质的小例子
  • C#中StringBuilder用法以及和String的界别解析
  • ASP.NET(C#) String, StringBuilder 与 StringWriter质量比较
  • c# StringBuilder.Replace 方法 (Char, Char, Int32, Int32)
  • 浅析C#中StringBuilder类的敏捷及与String的对待

二、在分界面中加多div块:

(1)通配符:

那是史上最简便的闭包,不能够再轻易了,再简单就不是闭包了!

<body> 
<div id='calendar' style="margin-top:10px;margin-left:5px">
</div> 
</body> 
$("input[id^='code']");//id属性以code开始的所有input标签
$("input[id$='code']");//id属性以code结束的所有input标签
$("input[id*='code']");//id属性包含code的所有input标签
$("input[name^='code']");//name属性以code开始的所有input标签
$("input[name$='code']");//name属性以code结束的所有input标签
$("input[name*='code']");//name属性包含code的所有input标签
$("input[name*='code']").each(fuction(){
  var sum=0;
if($(this).val()!=""){
 sum=parseInt(sum) parseInt($(this).val());
}
$("#").text(sum);
})

有了初步的认知后,大家大致解析一下它和常见函数有怎样不一致,那样大家技术从“茫茫人海”中一眼认出“她”。

初叶化calendar的js代码我把它内置了fullcalendar.js文件中接下去就让大家看一下那么些文件里的脚本新闻。

(2)依据目录选取

地点代码翻译成自然语言如下:

三、初始化fullcalender:

$("tbody tr:even"); //选取索引为偶数的装有tr标签
$("tbody tr:odd"); //选择索引为奇数的保有tr标签

  • (1)定义了一个常常函数A
  • (2)在A中定义了一般性函数B
  • (3)在A中再次回到B(确切的讲,在A中重临B的引用)
  • (4)试行A(),把A的回来结果赋值给变量 c
  • (5)执行 c()
 /* 初始化calendar */ 通过ID来初始化放到哪个标签里
 jQuery('#calendar').fullCalendar({
  header: {
   left: 'month,agendaWeek,agendaDay',
   center: 'title',
   right: 'today, prev, next'
  },  monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
  dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
  today: ["今天"],
  firstDay: 1,
  buttonText: {
   prev: '«',
   next: '»',
   prevYear: ' << ',
   nextYear: ' >> ',
   today: '今天',
   month: '月',
   week: '周',
   day: '日'
  },
  viewDisplay: function (view) {
   //动态把数据查出,按照月份动态查询
   var viewStart = $.fullCalendar.formatDate(view.start, "yyyy-MM-dd HH:mm:ss");
   var viewEnd = $.fullCalendar.formatDate(view.end, "yyyy-MM-dd HH:mm:ss");
   $("#calendar").fullCalendar('removeEvents');   通过post 请求一般处理程序来返回需要展现的信息(start与end为需要传递的参数,在本文中没有用到可以忽略)
   $.post("../DateHandle/ViewData.ashx", { start: viewStart, end: viewEnd }, function (data) {
    var resultCollection = jQuery.parseJSON(data);
    $.each(resultCollection, function (index, term) {
     $("#calendar").fullCalendar('renderEvent', term, true);
    });
   }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
  },
  dayClick: function (date, allDay, jsEvent, view) {
  },
  loading: function (bool) {
   if (bool) $('#loading').show();
   else $('#loading').hide();
  },
  //#region 数据绑定上去后添加相应信息在页面上(一开始加载数据时运行)
  eventAfterRender: function (event, element, view) {
   var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
   var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
   var confbg = '';
   if (view.name == "month") {//按月份    
    var evtcontent = '<div class="fc-event-vert"><a>';
    evtcontent = evtcontent   confbg;
    //evtcontent = evtcontent   ''   fstart   " - "   fend   event.fullname   ''; 
    evtcontent = evtcontent   ''   event.fullname   '';
    element.html(evtcontent);
   } else if (view.name == "agendaWeek") {//按周
    var evtcontent = '<a>';
    evtcontent = evtcontent   confbg;
    evtcontent = evtcontent   ''   fstart   "-"   fend   '';
    evtcontent = evtcontent   ''   event.fullname   '';
    element.html(evtcontent);
   } else if (view.name == "agendaDay") {//按日
    var evtcontent = '<a>';
    evtcontent = evtcontent   confbg;
    evtcontent = evtcontent   ''   fstart   " - "   fend   '';
    element.html(evtcontent);
   }
  },
  //#endregion
  //#region 鼠标放上去显示信息
  eventMouseover: function (calEvent, jsEvent, view) {   
   //var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");
   //var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm");
   //$(this).attr('title', fstart   " - "   fend   " "   calEvent.fullname);   鼠标悬浮到title的时候可以设置展现哪些信息
   $(this).attr('title', calEvent.fullname);
   $(this).css('font-weight', 'normal');
   //   $(this).tooltip({
   //    effect: 'toggle',
   //    cancelDefault: true
   //   });
  },
  eventClick: function (event) {    
  },
  events: [],
  //#endregion
  editable: true,
  droppable: true, // this allows things to be dropped onto the calendar !!!
  drop: function (date, allDay) { // this function is called when something is dropped
   // retrieve the dropped element's stored Event Object
   var originalEventObject = jQuery(this).data('eventObject');
   // we need to copy it, so that multiple events don't have a reference to the same object
   var copiedEventObject = jQuery.extend({}, originalEventObject);
   // assign it the date that was reported
   copiedEventObject.start = date;
   copiedEventObject.allDay = allDay;
   // render the event on the calendar
   // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
   jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
   // is the "remove after drop" checkbox checked?
   jQuery(this).remove();
  }
 }); 

(3)得到jqueryObj下一流节点的input个数

把那5步操作总计成一句扯淡的话就是:

 四:通过一般管理程序重回必要的json数据

jqueryObj.children("input").length;

函数A的当中等高校函授数B被函数A外的多少个变量 c 引用

第一新添任务类 Task:

(4)得到class为main的竹签的子节点下具备标签

把那句扯淡的话再加工一下就形成了闭包的概念:

/// <summary>
 /// 任务类
 /// </summary>
 public class Task
 {
  public int ID { get; set; }
  /// <summary>
  /// 任务名称
  /// </summary>
  public string Name { get; set; }
  /// <summary>
  /// 内容
  /// </summary>
  public string Content { get; set; }
  /// <summary>
  /// 开始时间
  /// </summary>
  public DateTime StartDate { get; set; }
  /// <summary>
  /// 结束时间
  /// </summary>
  public DateTime EndDate { get; set; }
 } 
$(".main > a");

当四在那之中间函数被其表面函数之外的变量援用时,就变成了三个闭包。

诚如管理程序ViewData中回到Json数据:

(5)接纳紧邻标签

决不特意去记住那些概念,作者报告你那一个定义的目标是想让您明白地点的5步操作就是在演讲闭包的定义。

 public void ProcessRequest(HttpContext context)
  {
   //测试数据 
List<Task> tasks = new List<Task>() { 
new Task(){ ID=1,Name="任务1",Content="修改某处Bug",StartDate=new DateTime(2015,12,16,08,32,33),EndDate=new DateTime(2015,12,16,11,27,33)},
 new Task(){ ID=2,Name="任务2",Content="与刘总开会讨论需求分析",StartDate=new DateTime(2015,12,09,18,32,33),EndDate=new DateTime(2015,12,09,19,27,33)},
 new Task(){ ID=3,Name="任务3",Content="代码上传与整理",StartDate=new DateTime(2015,12,17,13,32,33),EndDate=new DateTime(2015,12,17,17,27,33)},
 new Task(){ ID=4,Name="任务4",Content="上线测试",StartDate=new DateTime(2015,12,30,15,32,33),EndDate=new DateTime(2015,12,15,17,27,33)},
 new Task(){ ID=5,Name="任务5",Content="代码上传与整理",StartDate=new DateTime(2015,12,07,13,32,33),EndDate=new DateTime(2015,12,07,17,27,33)}
 };
    JavaScriptSerializer jss = new JavaScriptSerializer();
   List<Dictionary<string, object>> gas = new List<Dictionary<string, object>>();
   foreach (var entity in tasks)
   {
    Dictionary<string, object> drow = new Dictionary<string, object>();
    drow.Add("id", entity.ID);
    drow.Add("title", string.Format("任务名称:{0}", entity.Name));
    drow.Add("start", ReturnDate(entity.StartDate));
    drow.Add("end", ReturnDate(entity.EndDate));    //鼠标悬浮上展现的是这个属性信息,可以自己设置
    drow.Add("fullname", string.Format("任务名称:{0}", entity.Name));
    drow.Add("allDay", false);    
    gas.Add(drow);
   }
   context.Response.Write(jss.Serialize(gas));
  }
  #region 时间输出格式
  /// <summary>
  /// 时间按照此格式传输
  /// </summary>
  /// <param name="date"></param>
  /// <returns></returns>
  private string ReturnDate(DateTime? date)
  {
   string str = string.Empty;
   string time = Convert.ToString(date);
   string[] split = time.Split(' ');
   string viewDate = split[0].Split('/')[0]   "-"   AddZero(split[0].Split('/')[1])   "-"   AddZero(split[0].Split('/')[2]);
   string viewTime = AddZero(split[1].Split(':')[0])   ":"   AddZero(split[1].Split(':')[1])   ":"   AddZero(split[1].Split(':')[2]);
   str = viewDate   "T"   viewTime;
   return str;
  }
  /// <summary>
  /// 判断数字前面是否加0
  /// </summary>
  /// <param name="str"></param>
  /// <returns></returns>
  private string AddZero(string str)
  {
   if (str.Length == 1)
    return "0"   str;
   else
    return str;
  }
  #endregion 
jqueryObj.next("div");//获取jqueryObj标签的后面紧邻的一个div,nextAll获取所有

为此,当您推行了上述5步操作的时候,你就曾经定义了二个闭包!

 下边是效果与利益图:

2.筛选器

那正是闭包。

 图片 1

//not
$("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签

2、闭包的效率

鼠标放到title的效果与利益: 

3.事件

在掌握闭包的机能在此以前,大家先通晓一下 javascript中的GC机制:在javascript中,假如多个指标不再被引述,那么这些指标就能够被GC回收,不然这几个指标一贯会保存在内部存款和储蓄器中。

图片 2

//处理文本框上的键盘操作
jqueryObj.keyup(function(event){
var keyCode = event.which;//获取当前按下键盘的键值,回车键为13
}

在上述例子中,B定义在A中,由此B重视于A,而外界变量 c 又引述了B, 所以A直接的被 c 援引,相当于说,A不会被GC回收,会直接保存在内存中。为了表达大家的演绎,上边的例证稍作创新:

以上内容是小编给我们共享的FullCalendar日历插件应用之数据显现(一)的满贯描述,希望大家喜欢。

4.工具函数

function A(){
  var count = 0;
  function B(){
    count   ;
    console.log(count);
  }
  return B;
}
var c = A();
c();// 1
c();// 2
c();// 3

你可能感兴趣的稿子:

  • JavaWeb项目FullCalendar日历插件使用的演示代码
$('#someField').val($.trim($('#someField').val()));//消除空格,语法:$.trim(value)

count是A中的二个变量,它的值在B中被转移,函数B每实践三次,count的值就在本来的功底上累加1。由此,A中的count一贯保存在内部存储器中。

ps:jQuery采取器总计

那正是闭包的服从,有的时候候大家要求贰个模块中定义那样三个变量:希望那些变量一向保存在内部存款和储蓄器中但又不会“污染”全局的变量,这一年,大家就足以用闭包来定义这些模块。

jQuery 的选用器可谓之庞大无比,这里差十分的少地总计一下常用的成分查找方法 

3、高档写法

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:有这样的问题,希望本文所述对大家JavaScript程序

关键词: 小鱼儿玄机30码