主页

闭包

2017.7.16

JS

闭包就是能够读取其他函数内部变量的函数由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁--阮一峰

按照js高程的说法“闭包是指有权访问另一个函数作用域中的变量的函数”


function f1(){
　 var n=999;
　 function f2(){
　　  alert(n); 
　 }
　 return f2;		//f2就是闭包
}
var result=f1();
result(); // 999

可以把父函数当作对象，把闭包当作它的公用方法，把内部变量当作它的私有属性
如果一个函数访问了它的外部变量，那么它就是一个闭包。

利用闭包访问局部变量，


var name = "The Window";
var object = {
　　name : "My Object",
	age: 28,
　　getNameFunc : function(){
		var that=this;
　　　　return function(){
　　　　　　return that.name;
　　　　};
　　}		
};
console.log(object.getNameFunc()());

返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。


function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {    //将var 改为 let 则输出1,4,9
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];	
var f2 = results[1];	
var f3 = results[2];	
console.log(f1()) 		//16
console.log(f2()) 		//16
console.log(f3()) 		//16

利用闭包创建一个计数器


function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    }
}
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3

匿名函数(闭包)的执行环境具有全局性，因此其this对象通常指向window（除非使用了call(),apply()等）


var obj={
	aa:function aa(){
		console.log(this);		   	//obj
		(()=>console.log(this))(); 	//obj
		(function(){
			console.log(this)
		})(); 						//window
		function bb(){
			console.log(this) 		//window
		}
		bb()
	}
}			
obj.aa();

闭包的应用

1.设置私有属性


var Foo = function(){
  var name = 'fooname';
  var age = 12;
  this.getName = function(){
      return name;
  };
  this.getAge = function(){
      return age;
  };
};
var foo = new Foo();

foo.name;        //  => undefined
foo.age;         //  => undefined
foo.getName();   //  => 'fooname'
foo.getAge();    //  => 12

2.在函数执行之前为要执行的函数提供具体参数

某些情况下，是无法为要执行的函数提供参数，只能在函数执行之前，提前提供参数如：setTimeOut , Ajax callbacks , el.attachEvent("onclick",func) 等）


var parm=222;
function f1(){alert(111)}
function f2(obj){alert(obj)}
setTimeout(f1,500);//正确,无参数
var test1=f2(parm);//执行一次f2函数
setTimeout(f2,500);//undefined，传参失败
setTimeout(f2(parm),500);//参数无效，传参失败
setTimeout(function(parm){alert(parm)},500);//undefined，传参失败
document.getElementById("hello").onclick=f1;//正确

//正确做法，使用闭包
function f3(obj){return function(){alert(obj)}}
var test2=f3(parm);//返回f3的内部函数的引用
setTimeout(test2,500);//正确,222
document.getElementById("hello").onclick=test2;//正确,222
document.getElementById("hello").attachEvent("onclick",test2);//正确,222

参考资料： http://nec.netease.com
阮一峰博客

展开全部

使用meta页面跳转

2017.7.1

JS CSS HTML

几乎所有的网页头部都有源信息。除了我们常用的定义编码、关键字name="keywords"、描述name="description" (for SEO)，还可以定义视区大小、缩放比例等(for 移动端),以及，定义网页的过期时间，Cookie的过期时间等等

当前页面每5秒钟刷新一下

<meta http-equiv="refresh" content="5">

这个表示当前页面2秒后跳到首页

<meta http-equiv="refresh" content="2; url='/'">

页面直接跳转到rover95.com

<meta http-equiv="refresh" content="0; url='http://rover95.com/'">

展开全部

浏览器端数据库

2017.6.24

JS

websql,IndexedDB

HTML5规范加入的在浏览器端运行的轻量级数据库

笔记6.23

2017.6.23

JS CSS

JS获取节点坐标


var box=document.getElementByIdx_x('divid');
box.getBoundingClientRect().left);
box.getBoundingClientRect().right);
box.getBoundingClientRect().top);
box.getBoundingClientRect().bottom);

css渐变效果


background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

css模糊效果


.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}

css设置字体无法选中


-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

展开全部

引用类型的深拷贝与浅拷贝

2017.6.22

JS

浅拷贝：给对象拷贝一份新的对象。
浅拷贝的定义 —— 只对值类型（或string）类型分配新的内存地址。
对于浅拷贝直接使用 = 即可是引用传递多个变量指向一个地址

深拷贝：给对象拷贝一份全新的对象。
深拷贝的定义 —— 对值类型分配新的内存地址，引用类型、以及引用类型的内部字段分配的新的地址。
对于深拷贝需要利用循环语句将对象的每个属性依次幅值给新对象，两个对象占用不同的地址


for(var i in a){
　　　　b[i]=a[i];
};

展开全部

ES6常用特性

2017.6.18

JS

ES6已经提出几年了，今年6月好像ES8也出来了，可能出于习惯或者兼容性问题平常使用的主要还是ES5标准为主，但其中的几个新标准还是很好用的，尤其是'Template String'，实在是太好用了，动态生成网页的时候再也不用一截一截拼字符串了。下面整理了几个常用的ES6新特性



'Template String'	模板字符串('Template String')是增强版的字符串，用反引号(`)标识，它可以当作普通字符串使用，
	也可以用来定义多行字符串，更重要的可以在字符串中使用 ${abc} 嵌入变量
	$('#a').html(`this is a &li;h1>${basket},that is another&li;em>${basket}`)

'let'	声明块作用域,主要用于条件或循环语句中：
	for(let i=0;i<10;i++){
		//do something 
	}
	console.log(i) 	//undefined

'const'声明常量 

'class, extends, super'	class 定义一个类，constructor()构造方法
	class 之间可以使用 extends 关键字实现继承class Cat extends Animal{}
	子类需要在constructor中使用 super() 使this指向父类的this指针。

'arrow function'	function(i){ return i + 1; } //ES5
	(i) => i + 1 //ES6
	=>前是传入参数，=>后是返回值，或者{}包裹的代码块，如果返回对象则加小括号({...})
	箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
	箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。
	也不能用call()、apply()、bind()这些方法去改变this的指向
	箭头函数不会获取它们自己的arguments对象
	一些特点
	1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
	2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
	3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
	4）不可以使用yield命令，因此箭头函数不能用作Generator函数。
		this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数
		根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，
		所以也就不能用作构造函数。

'destructuring'	ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）
	let cat = 'ken'
	let dog = 'lili'
	let zoo = {cat, dog} //{cat: "ken", dog: "lili"}

'rest'	function t(...abc){console.log(abc);}
	t(1,2,3,4,5,6)
	abc可以用操作数组的方法操作

'default'	函数参数默认值 function(type='abc')

'import export'	import用于在一个模块中加载另一个含有export接口的模块
	export用于对外输出本模块变量的接口
	也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块

展开全部

http & https区别

2017.6.17

计算机

https是加密了的http

https协议需要到ca申请证书，一般免费证书很少，需要交费。
http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。
http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。”


firefox头文件加Cache-Control:Public可缓存https到硬盘

firesheep
查看公共网络中的cookie信息，获取未使用https协议的信息流
blacksheep
对抗firesheep在入侵时向用户发出警告

公钥与私钥
公钥与私钥可以可以相互解密，公钥加密需要用相应的私钥解密，私钥加密公钥解密。只能相互解密。
原理就是两个大素数相乘容易，他们的积分解因式十分困难。

301重定向
页面永久性移走(301重定向)是一种非常重要的"自动转向"技术。网址重定向最为可行的一种办法。
当用户或搜索引擎向网站服务器发出浏览请求时，服务器返回的HTTP数据流中头信息(header)中的状态码的一种，
表示本网页永久性转移到另一个地址。（待展开）

展开全部

PHP操作数据库

2017.6.16

PHP

新增表单记录


$sql=$_POST['sql']; //sql通过前段传递
echo $sql;
// $sql = "INSERT INTO person (name, age, year, place, sex)
// VALUES ('John', '15', '1945', 'jiangshu', 'm')";
if ($conn->query($sql) === TRUE) {
    echo "新记录插入成功";
} else {
    echo "Error: " . $sql . "
" . $conn->error;
}

预处理语句


// 预处理及绑定
$stmt = $conn->prepare("INSERT INTO person (name, age, year, place, sex) VALUES (?,?,?,?,?)");
$stmt->bind_param("siiss", $n, $a, $y, $p, $s);
$n=$_POST['name'];
$a=$_POST['age'];
$y=$_POST['year'];
$p=$_POST['place'];
$s=$_POST['sex'];
$stmt->execute();    //执行

删除操作


$sql = "DELETE FROM person WHERE name='".$n."'";
$conn->query($sql)

查询操作


$sql = "SELECT name FROM person WHERE age='".$a."'";
$result=$conn->query($sql);
// 输出数据
if ($result->num_rows > 0) {				   
	while($row = $result->fetch_assoc()) {
	    echo  "Name: ".$row["name"]. "
"; 
	}
} else {
	echo "未找到结果";
}

展开全部

apache配置多端口

2017.6.14

JS CSS HTML

打开apache的httpd.conf文件，在Listen 80处另起一行输入Listen 8095 监听8095端口/

在httpd.conf文件最后一行添加：

NameVirtualhost localhost:8095 # 虚拟主机端口
<virtualhost localhost:8095>
	documentroot E:/web  #网站目录绝对路径 ~注意斜杠的方向/
	servername locahost:8095 #对应监听的端口
</virtualhost>

添加目录属性：

<Directory "E:/web">
	Options Indexes FollowSymLinks
	AllowOverride All #允许URL重写
	Order allow,deny
	Allow from all
</Directory>

重启apache

展开全部

响应式布局的注意点

2017.6.13

CSS HTML

加meta viewport标签禁用缩放自适应

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

确定核心布局，布局保持简单干净，减少无关紧要的元素
设计栅格布局方案Twitter Bootstrap 倡导的12分制网格，为2分、3分、4分甚至6分布局，或是不均等分的布局
满足主要断点320px 480px 640px 768px 1024px等,针对不同情况应用不同方案
少用内联元素、绝对定位，百分比拉伸需谨慎勿过度变形
慎用固定值设置图片和内容元素，图片应可伸缩，并限制最大宽
考虑频幕分辨率
以及非核心模块的降级和取舍

展开全部

CSS书写规范

2017.6.11

CSS

查找了网上普遍认同的一些CSS命名规则，挑选了一些个人觉得实用的整理如下：

用两个空格来代替制表符（tab）。这是唯一能保证在所有环境下获得一致展现的方法。
CSS书写顺序：位置属性-->大小-->文字系列-->背景-->其他
表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等除非特殊需要，不在dom中写css 如:
<div style="xx">//尽量避免
<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

NEC规范


1.分类的命名方法：使用单个字母+"-"为前缀
布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。特殊：.j-将被专用于JS获取节点，请勿使用.j-定义样式。

2.后代选择器命名
  1)约定不以单个字母+"-"为前缀且长度大于等于2的类选择器为后代选择器，如：.item为m-list模块里的每一个项，.text为m-list模块里的文本部分：.m-list .item{}.m-list .text{}。
  2)一个语义化的标签也可以是后代选择器，比如：.m-list li{}。
  3)不允许单个字母的类选择器出现，原因详见下面的“模块和元件的后代选择器的扩展类”。
通过使用后代选择器的方法，你不需要考虑他的命名是否已被使用，因为他只在当前模块或元件中生效，同样的样式名可以在不同的模块或元件中重复使用，互不干扰；在多人协作或者分模块协作的时候效果尤为明显！
后代选择器不需要完整表现结构树层级，尽量能短则短。
注：后代选择器不要在页面布局中使用，因为污染的可能性较大；

3.命名应简约而不失语义
/* 反对：表现化的或没有语义的命名 */
.m-abc .green2{}
.g-left2{}
/* 推荐：使用有语义的简短的命名 */
.m-list .wrap2{}
.g-side2{}

4.相同语义的不同类命名
方法：直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。
其他举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。

5.防止污染和被污染
当模块或元件之间互相嵌套，且使用了相同的标签选择器或其他后代选择器，那么里面的选择器就会被外面相同的选择器所影响。
所以，如果你的模块或元件可能嵌套或被嵌套于其他模块或元件，那么要慎用标签选择器，必要时采用类选择器，并注意命名方式，可以采用.m-layer .layerxxx、.m-list2 .list2xxx的形式来降低后代选择器的污染性。

命名的一些细节


给图片加上alt标签
尽量使用 class 不要用 id 
去掉小数点前的“0” ，如："rgba(0,0,0,.5)"
尽量使用英文命名原则，并合理简写
颜色采用16进制简写，如： "#fff"
使用 "-" 代替 "_"，如：".g-title"

附上一些常规命名


头：header　　
内容：content/container　　
尾：footer　　
导航：nav　　
侧栏：sidebar　　
栏目：column　　
登录条：loginbar　　
标志：logo　　
页面主体：main　　
子导航：subnav　　
菜单：menu　　
子菜单：submenu　　
搜索：search　　
页脚：footer　　
版权：copyright　　
内容：content　　
文章列表：list　　
功能区：shop

无意中看到一种叫做"面向属性的CSS命名方式"，原理是将具体的属性拆分例如：{left:50px}、margin-right:10px,直接写出.l、.mr虽然在某些场合下可能不太实用，但思路很巧妙。其原因主要体现在以下三点：

限制重用
我们会使用层级(#test .test)，会使用标签(ul.test)，可能是习惯(没多想)，或是为了避免冲突，你限制越多，越抑制了CSS的重用性
CSS文件大小
简写选择器可以节省许多存储空间（1~2kb?）
降低了渲染效率
《高性能网站进阶指南》一书曾提到CSS的渲染方式是“从右往左”渲染的，就拿#test ul{}举例，先渲染页面上所有的ul标签，再去寻找id为test的元素,所以，CSS命名，只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销也就越大，这就是为什么一些前辈的文章会建议要尽量避免过深的层级。

简单总结来说就是，精简高效的CSS命名的关键字有“分离”，“统一前缀”，方法为“面向属性的命名”，准则为“无层级、无标签”。其中，“分离”是“面向属性命名”的基础。“面向属性命名”和“无层级、无标签”属于两个不同的系列，一个针对短命名属性，一个针对长命名属性。但是，两个又互相依存。没有“面向属性命名”，“无层级、无标签”命名最后是以不堪重负，HTML膨胀致死结局。而仅仅是“面向属性命名”，前端开发人员会因维护过劳喷血而死。总之，两者缺一不可。

参考资料：网易NEC规范
 张鑫旭博客
 知乎

展开全部

this的指向

2017.6.10

JS

this的指向是一个很容易令人混淆的事情，尤其是在写那种有很多嵌套的事件函数，这点我深有体会。很多有需要使用var _this=this这样的方法传递this，听说使用ES6中的箭头函数可以自动绑定父级this指针，这个就以后讨论。下面几点有助于理解this指针指向

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象
如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象
如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window（非严格模式）
new关键字可以改变this的指向,this指向该构造器函数实例出来的对象
apply、call、bind方法
使用bind()改变上下文环境之后并非立即执行，而是在回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数；其中bind()方法返回函数副本。比如fun.apply()直接执行，而bind需要加括号才能执行bind()()

展开全部

个人网站的需求

2017.6.8

JS CSS HTML


个人网站的一些需求
	+响应式，兼容移动端,弹性布局
	+简洁大气
	+电脑桌面形式--项目页面
	背景：渐变色？大头像？纯色？随机生成？
	画布特效
	登录注册功能
	博客发文，图片，存储到数据库
	部署到云服务器
	时间轴？
	添加github等相关社交网站
	五年后的简历
	侧栏分享按钮定期抖动
	简历提供下载
	FBI WARNING
	http://www.nerisson.fr/  框中字体下滑

展开全部

动态加载js

2017.6.2

JS

动态创建节点

var scir=document.createElement('script')
var head=document.getElementsByTagName('head')[0]
scir.src="js/new.js";
head.appendChild(scir)

jq

$.getScript('js/new.js',function(){ 
     new();
 });

更改现有<script>的src

创建新`<script>`节点

document.write("<script src='test.js'><\/script>")

展开全部

进程与线程

2017.6.1

计算机

"进程"是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位
"线程"是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位

1.一个线程可以创建和撤销另一个线程;同一个进程中的多个线程之间可以并发执行
2.进程有独立的地址空间，一个进程崩溃后，在保护模式下不会对其它进程产生影响
3.线程有自己的堆栈和局部变量，但线程之间没有单独的地址空间，一个线程死掉就等于整个进程死掉
4.对于一些要求同时进行并且又要共享某些变量的并发操作，只能用线程，不能用进程
5.多进程的程序要比多线程的程序健壮，但在进程切换时，耗费资源较大，效率要差一些

展开全部

github使用

2017.5.28

JS CSS HTML

在网上看来很多教程，各不相同，按自己的理解写一份

首先需要注册github账号，下载myysgit（地址）
github上建立仓库
有的教程说要建立本地ssh key私钥和公钥，可跳过
找一个你要放代码的文件夹右键 git bash here 打开msysgit
将你在github上新建的仓库下载到本地，git clone 'https://github.com/rover95/Personal-website.git'
在刚才的文件夹中会多一个你仓库名的Personal-website文件夹，把你要上传的文件全复制进去
msysgit输入 cd Personal-website 进入这个文件夹 git add . 把所有文件添加进来
git commit -m "你的提交说明" （提交到本地仓库）
git push -u origin master (将本地仓库push到github上)
随后提示你输入github的用户名和密码——提交完成
更改在本文件夹下打开msysgit 执行git add . | git commit | git push -u oriign master

展开全部

网页宽高获取

2017.5.25

JS

整理了关于网页宽高常见的获取方式

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕工作区高度： window.screen.availHeight
屏幕工作区宽度： window.screen.availWidth

展开全部

闭包

按照js高程的说法“闭包是指有权访问另一个函数作用域中的变量的函数”

闭包的应用

使用meta页面跳转

浏览器端数据库

笔记6.23

引用类型的深拷贝与浅拷贝

ES6常用特性

'Template String'

'let'

'const'

'class, extends, super'

'arrow function'

'destructuring'

'rest'

'default'

'import export'

http & https区别

PHP操作数据库

apache配置多端口

响应式布局的注意点

CSS书写规范

限制重用

CSS文件大小

降低了渲染效率

this的指向

个人网站的需求

动态加载js

动态创建节点

jq

更改现有<script>的src

创建新<script>节点

进程与线程

github使用

网页宽高获取

创建新`<script>`节点