月度归档:2016年07月

关于javascript模块化

其实js模块化几年前就有了,但自己一直没有接触过,只是听说。这算一个很大的知识点吧,这两天打算认真学习一下。网上搜集了一些资料,首先阅读的是阮一峰大神的文章http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

阅读的过程中,首先明白了最简单的模块化,两个函数声明就是两个模块了。接着是模块化的对象写法,这种写法的缺点是内部变量会暴露,导致被篡改,于是使用匿名函数的方法。

阅读到这里,对于匿名函数我其实是一知半解的,之前也是有所了解,但并不全面。

那么接下来我继续搜索关于立即调用函数的知识。

首先三个名词:函数表达式,函数声明,匿名函数

函数表达式就是有等号的,一般用var声明一个变量之后把一个匿名函数赋值给这个变量。

函数声明就是以function开头,紧接着是函数名和函数体如function funName(){}。

匿名函数就是没有函数名的函数表达式。

立即调用函数,首先他的作用顾名思义,开发者希望定义完之后不用再调用就可以执行。

函数声明无法立即调用。把函数声明转换为函数表达式就可以。有很多种方法,最简单的是用一对小括号将函数声明括起来,然后在最后面加上一对小括号就可以。(function fnName(){})();

其他的方法是在function前面加!,-,+,void,其余具体的不再展开了,其实我还是不太明白为什么外部无法访问内部变量,好像是因为作用域的关系,具体原理不是很清楚。

那么最简单的用立即调用函数创建的js模块就是如下

var module = function(){

var m1 = function(){};

var m2 = function(){};

return{

m1:m1,

m2:m2,

}

}();

放大模式:

var module = function(mod){

mod.m1 = function(){};

mod.m2 = function(){};

return mod;

}(module);

宽放大模式:

var module1 = ( function (mod){

//…

return mod;

})(window.module1 || {});

就是多了个变量能为空

 

HTML5本地存储:SessionStorage, LocalStorage, Cookie

很久没有写技术内容了,是时候继续积累和沉淀了。今天学习一下html5的本地存储。一共有三种,SessionStorage,LocalStorage和Cookie。

他们的异同

1.相同的是他们都是以键值对的形式出现,他们都是本地存储,不会发送到服务器。

2.第一点不同的是cookie每个键值对可以设置过期时间,localStorage是需要手动清除缓存才会消失,sessionStorage在浏览器关闭以后就消失了。第二点不同的是他们的存储空间,cookie一般浏览器允许最大4kb,每个浏览器允许的最多个数也不同,有20,30,40,50的,具体不了解。而另外两者允许大小为5M-10M。

Cookie的操作

1.设置cookie

function setCookie(key,val,expireTime){

var dateTime = new Date();

dateTime.setDate((new Date().getDate()+parseInt(expireTime)));

document.cookie = key+”=”+val+”;expire=”+dateTime.getDate();

}

2.获取cookie

function getCookie(key){

var valStart = document.cookie.indexOf(key+”=”);

if(valStart != -1){

valStart=valStart+key.length+1;

}

var valEnd = document.cookie.indexOf(“;”,valStart);

return document.cookie.substring(valStart,valEnd);

}

 

SessionStorage与Localstorage的操作

这两个的操作很简单了

localStorage.clear();
localStorage.setItem(‘key’, ‘value’);
localStorage.getItem(‘key’); // => ‘value’
localStorage.removeItem(‘key’);
SeccionStorage相同