在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到jQuery作者John Resig,研究了一下,算是明白了最简单的javaScript模版引擎的原理,并没有想象的那么高大上,写篇博客推导一下John Resig写法的过程,写出一个最简单的JavaScript模版引擎. 什么是JavaScript引擎 其实在网站开发中模板还是很常见的一种技术,比…

节流器 javascript的节流器主要用于延缓某些动作的执行,比如ajax请求,如果input框注册了input事件,那么当用户输入时就会持续的触发这个事件,如果回调函数中持续的通过ajax调用后台的接口,就会对服务器产生一定压力.这时就可以考虑采用某种方法来延缓ajax请求,比如可以这么做,当触发input事件后,延缓0.5s再调用后台的接口,这样在一定程度上就可以减轻服务端的压力.下面来实现一个简单的节流器 /** * 节流器 * @param [function] fn 事件触发后要调用…

简单的JavaScript字符串加密解密 <div> <input type="text" id="input" autofocus="autofocus"> <button type="button" onclick="submit()">click</button> </div> <script> // 加密 function en…

初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方式来解决面向对象的问题.所以JavaScript也是一门面向对象的语言.(李昌辉) 面向对象仅仅是一个概念或者编程思想而已,它不应该依赖于某个语言存在.比如 PHP采用面向对象思想构造其语言,它实现了类.继承.派生.多态.接口等机制.但是这些机制,只是实现面向对象编程的一种手段,而非必须.换言之,一…

去年有几个项目需要使用JavaScript互斥锁,所以写了几个类似的,这是其中一个: //Published by Indream Luo //Contact: indreamluo@qq.com //Version: Chinese 1.0.0 !function ($) { window.indream = window.indream || {}; $.indream = indream; indream.async = { // //锁 //lock: 锁的编号 //action: 解锁…

原文标题:Build A Simple Javascript App The MVC Way 作者:joshcrawmer4 翻译人:huansky 初次翻译,翻译的不好,还请见谅 JavaScript中最好的一部分之一,也可能是最糟糕的. 在HTML文档的头部添加一个开始和结束脚本标记,并在其中引入一些意大利面条式的代码,毫无疑问这是一种过分简单化的能力. 瞧! 有用! 真的吗? 你问什么是意大利面条式的代码? 意大利面条式的代码是一个直白的术语,指的是那些代码凌乱,控制结构复杂,并且这种代码…

忙里偷闲,简单介绍一下Javascript中匿名函数和闭包函数以及面向对象编程.首先简单介绍一下Javascript中的密名函数. 在Javascript中函数有以下3中定义方式: 1.最常用的定义方式: function functionVal(variable){ return 3*variable; } 2.使用Function构造函数,将函数的参数和函数体内容作为字符串参数[不建议使用]: var objFunction=new Function('variable','return 3…

很多关于JS的书籍例如<JavaScript权威指南>或者<高程>都把闭包解释的晦涩难懂,萌新们是怎么也看不懂啊!不过别怕,今天我就用很简单的方式给大家讲解下到底什么是闭包.这是一篇面对新手的对于闭包的解释,没有晦涩生硬的语句,一看就能明白.如有不妥欢迎指正! 要理解闭包,首先要理解变量的作用域. JS中变量作用域有两个:全局变量以及局部变量,顾名思义,全局变量就是在任何位置都可以引用的变量,局部变量就是只能在特定位置才能引用的变量,看下面代码. var globalScope=&…

函数作为返回值 高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 我们来实现一个对Array的求和.通常情况下,求和的函数是这样定义的: function sum(arr) { return arr.reduce(function (x, y) { return x + y; }); } sum([1, 2, 3, 4, 5]); // 15 但是,如果不需要立刻求和,而是在后面的代码中,根据需要再计算怎么办?可以不返回求和的结果,而是返回求和的函数! function lazy…

好久没更新博客了,随便写点东西吧. 自从工作之后就特别忙,忙的过程中有时候挺迷茫的,可能是大多数时候写的都是简单的业务代码,很久没好好充电了.最近一直在零碎的上班路上等电梯时间里面学习<图解HTTP >,觉得还是很有收获的. 最近一直在一边忙项目一边帮公司面试招新的前端工程师,算一算面试了很多为应聘者了,有刚刚毕业的大学生,有出来工作几年了中途转行做前端的社会人,不过总体来说并没有碰到另自己满意的人,很多虽然简历上写着已经有几个项目的经验,不过对于基础的JavaScript知识的掌握还是不够,…

看过网上关于javascript的闭包的概念和分析,看完之后都是一头雾水,完全不懂,零度我本来就对于概念性的东西很烦躁,没办法,硬着头皮翻阅了很多的资料,总算理清了一点头绪,现在分享给大家,错误之处还请大家指正! 闭包,简单的定义就是能够读取到函数内部变量的函数,最简单的形式就是: function fn1 () { var a=2; function fn2 () { alert(a); } return fn2; } fn1()(); alert(a); // undefined 这里,第一…

简单理解原型链 什么是原型 ? 我是这样理解的:每一个JavaScript对象在创建的时候就会与之关联另外一个特殊的对象,这个对象就是我们常说的原型对象,每一个对象都会从原型"继承"属性和方法. 什么是原型链 ? 一个由有限个原型对象组成的用来实现继承和共享属性的对象链. 打个通俗的比方,可以把原型链理解成一个家族的血亲关系,每一个后代都会从父代身上继承该家族特有的基因和特征. 什么是"继承" ? 关于原型的继承,我们常说每一个对象都会从原型上"继承&qu…

说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 效果图 解释setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行.它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器. var timerId = setTimeout(func|code, delay) 上面代码中,setTimeout函数接受两个参数,第一个参数func|code是将要推迟执行的函数名…

说明 所有的对象都继承有toString() 和 valueOf() 方法,对象到字符串,对象到数字的转换,会通过调用待转换对象的这两个方法中的一个来完成. 解释 toString( )方法的作用是: 返回一个反映这个对象的字符串,而很多类都定义了不同版本的toString( ). ({}.toString()); //=> "[object Object]" [1,2].toString(); //=> "1,2" true.toString(); /…

JavaScript具有自动垃圾回收机制,即执行环境会负责管理代码执行过程中使用地内存. 这种垃圾回收机制的原理很简单:找出那些不再继续使用的变量,然后释放其占用的内存.为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间)周期性地执行这一操作. 对于函数中局部变量来说,其只在函数的执行过程中存在,在这个过程中,会为局部变量在堆(或栈)内存上分配相应的空间,以便存储它们的值.然后在函数中使用这些变量,直至函数结束.此时局部变量没有存在的必要了,可以释放其内存.在这种情况下,容易判断变…

初次翻译,翻译的不好,还请见谅 JavaScript中最好的一部分之一,也可能是最糟糕的. 在HTML文档的头部添加一个开始和结束脚本标记,并在其中引入一些意大利面条式的代码,毫无疑问这是一种过分简单化的能力. 瞧! 有用! 真的吗? 你问什么是意大利面条式的代码? 意大利面条式的代码是一个直白的术语,指的是那些代码凌乱,控制结构复杂,并且这种代码到处都是. 它几乎不可能维护和调试,通常具有非常差的结构,并且容易出错. 网页设计和开发已经具有足够的挑战性,不要让你的工作变得更加困难!那么你怎样才…

在面试中只要说到模块化的问题,多多少少总会问到这些,umd.amd.cjs.esm,可能听过其中一个两个,或者都听说过.接下来我们先简单了解一下他们到底是什么,又有什么样的区别呢. 最开始的时候,Javascript是没有导入导出模块的这种方法,这就有一个比较头疼的问题,就是我们所有的代码都要写在一个文件里面,那可真的是又臭又长.有问题了,排查起来还特别的麻烦,定义个变量还总是出各种问题.后来,为了解决这些烦人的问题,各路大佬就推出了umd.amd.cjs.esm.cmd. 模块化的优点 实现代…

用js写了一个Map,带遍历功能,请大家点评下啦. //map.js Array.prototype.remove = function(s) { for (var i = 0; i < this.length; i++) { if (s == this[i]) this.splice(i, 1); } } /** * Simple Map * * * var m = new Map(); * m.put('key','value'); * ... * var s = ""; *…

页面中有个删除按钮: <?php $i = 1; foreach ($packages as $package) { ?> <tr> <td height="30"><?php echo $i?></td> <td><?php echo $package->name;?></td> <td><?php echo $package->version;?>&l…

<html> <head> <title>hongmaju</title> <link rel="shortcut icon" href="logo.ico" /> <script type="text/javascript"> function displaymessage() { alert("Hello World!") } </script&…

方便以后copy 页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&q…

方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>时钟特效</title> <script type="text/javascript"> function time(){ var today = new Date();…

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script type="text/javascript">        function k1(vd) {            var ob = document.getElementById(vd);   …

JavaScript是一种弱类型语言.有一种原型机制. 1.创建一个空对象:var bill = {}; 给这个对象添加属性和方法: bill.name = "Bill E Goat"; bill.sound = function() { console.log( 'bahhh!' ); }; 调用对象的属性和方法: alert(bill.name); bill.sound(); 2.一般情况我们都不这样创建对象的,通常都是创建对象的同时,给他添加属性和方法.(接下来我们以这种情况作为…

是夜,想着考量下小黄毛近期的JavaScript进阶如何了,鉴于近期一直在接触Vue 2.0,索性就围绕this编写了个代码片段, 给其一个测量,毕竟写js的程序员都知道,JavaScript的函数调用时会隐性的接收到两个附加的参数:this和arguments. 1.先上代码: /** * this */ var ajaxThis = (function() { global.a = 2; function fn(b) { this.b = b; console.log(this.a); }…

首先知道什么是JavaScript? JavaScript是一种描述性语言,也是一种基于对象和事件驱动的.并具有安全性的脚本语言. 2.JavaScript由三部分组成:①ecmascript ②BoM(浏览器对象模型) ③DOM(文档对象模型) 3.JavaScript基本结构: <script type="text/javaScript"> <!-- JavaScript 语句 --> </script> 4.javaScript的数据类型: ①…

插件描述:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库,可独立使用.并且 Echo.js 非常小巧,压缩后不足 1KB. 兼容性 Echo.js 使用了 HTML5 的 date 属性,并且需要获取该属性的值,所以它并不兼容 IE6.IE7.虽然 Lazy Load 也使用了 HTML5 的 date 属性,但它…

Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改.昨天把自己的电脑重装了,确实非常多软件的存放要改地方了,之前不知道怎么去管理软件安装,所以放得乱七八糟的. 说好一大堆废话之后.我最后再说一遍.管好自己的时间.数据真的比你学习东西重要. Method 本文代码约定 1 el: 指的是添加直接点的DOM节点 2 totalNum: 为100000(…

1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个JavaScript程序</title> <script> //页面加载时执行的函数 function showEnter() { alert("尊敬的客户,欢迎光临本网站"); } //页面关闭的时候执行的函数 f…

javascript中面向对像的能力是后来加进来的, 为了兼容性, 所以整出了很多奇特的东西, function Animal(){ this.name = "Animal"; this.showName = function(){ alert(this.name); } } function Cat(){ this.name = "Cat"; } var animal = new Animal(); var cat = new Cat(); //通过call或ap…