怎样正确注册事件和手动触发事件

记得那会刚学JavaScript的时候,注册事件都喜欢用最原始的方式(以下说的IE,都为早版本的IE,比如6,7,8)

<input type="button" id="btn" value="点我" />
var btn=document.getElementById("btn");
btn.onclick=function(){
    alert("点击了btn");
}

这样的确是没有问题,所有浏览器都支持。但是,有一点不好的是,多人开发的时候,别人也可能这样给btn注册了一个click事件,然后我在这样注册一个click事件,别人注册的事件就被我的给覆盖了。看人家jQuery,不论注册多少个事件,都会执行。那他是怎么实现的呢

display的box和flex用法

有一天,我突然看到display:box box-flex这个属性。瞬间凌乱了,这有是个什么新用法呀,在好奇心的驱使下,查资料,好好补给了一下

原来这是CSS3新出的弹性盒模型,就是为了更加容易的控制盒子与盒子之间空间关系的一种机制。既然是一种很新的机制,那么,使用的时候,肯定得判断其兼容性了

JavaScript判断

window.CSS.supports("display","-webkit-box")    //webkit内核
window.CSS.supports("display","-moz-box")       //火狐浏览器

打印一个漂亮的旋转矩阵

今天无意翻出上学时候做的一些C语言的demo,其中有一个是要按要求输出一个矩阵。C语言很久不碰了,环境都跑不起来了,我就画个图,演示一下矩阵的样子,如下图

旋转矩阵

嗯。就是这个样子,相信大家一下就看出规律了。记得以前用C语言输出的时候,是一行一行输出的,没法按照这个规律走向依次输出,因为我的输出窗口是DOS控制台,一旦换行,就不能返回上一行了。既然现在都做Web了,没有这么多限制了,那就当为了弥补当年的遗憾,再做一个按规律走向输出的

__proto__和prototype和原型链

var Person = function(name) {
    this.name = name;
}
var p = new Person();
//new操作符的操作是
var p = {}
p.__proto__ =  Person.prototype
Person.call(p)
var p={}; //也就是说,初始化一个对象p。
p.__proto__ = Person.prototype;
Person.call(p); //也就是说构造p,也可以称之为初始化p。
关键在于第二步,我们来证明一下:

简要说明parent,closest,parents,parentUntil

这几个筛选器都是找直系祖先元素的,但具体用法不同
.parent(expr) - 只把父级和expr表达式匹配,匹配成功就返回父级。匹配失败,返回空数组
.parents(expr) - 加了s,就成了匹配祖先了,从父级开始查找,只要是和expr表达式匹配的直系祖先元素都返回。没匹配成,返回空数组
.closest(expr) - 这个是查最近的匹配元素(从自己开始查找),匹配成功,立即返回。匹配失败,返回空数组
.parentsUntil(expr) - 这个是从父级开始查找,到expr停止。返回父级(包括)到expr(不包括)之间的直系祖先元素。如果expr没有匹配到元素,会返回父级(包括)到html(包括)之间的所有直系祖先元素

JavaScript offsetParent属性

学过CSS的朋友都知道,当一个节点使用绝对定位后,那么他的定位参考系就是离他最近的且使用了绝对或相对定位的直系祖先节点。当没有这样的节点的时候,那么定位参考系为BODY节点。

这句话好像比较绕口,那就举个例子。比如A节点使用绝对定位,left:50px;top:40px;如果他的直系祖先节点中有使用了相对或绝对定位的节点P。那么,此时A节点的位置是相对P左上顶点向右偏移50px,向下偏移40px。如果没有这样的节点,那么A的位置就是相对BODY节点进行定位。
这里的offsetParent就类似这样的效果,这个属性会返回离调用对象最近的进行过CSS定位的直系祖先节点。如果没有这样的节点,会返回BODY节点。

DocumentFragment 对象的妙用

在了解这个对象之前,在向DOM追加多个节点时,我都会先创建一个空标签,然后把节点追加到一个空标签里,最后在把这个标签追加到DOM里。这样虽然避免了循环追加,多次渲染这样不友好的操作,但是这样却破坏了原有的文档结构。每次看到那个没用的空标签,都总觉得心里很不舒服,纠结着。

直到有一天看到《JavaScript高级编程》上说到有一种节点,将其插入文档树时,插入的不是其自身,而是它的所有子孙节点。这个神奇的节点就DocumentFragment,翻译过来应该叫文档片段。这样一来,困扰我已久的问题,终于迎刃而解了。想想兴奋之余,上手试一试先。

使用pushState和popstate优化ajax

现在越来越多的网站都会使用到ajax,ajax优点有很多。操作方便、刷新速度快、节省流量、用户体验好等等...但是,ajax使用的缺点也是显而易见的,首先ajax请求并不会在history中添加记录状态。
这样,当用户习惯性的点击了后退或前进按钮的时候,这时呈现的页面,可能就和用户期望得到的结果差之千里了

当然这可以通过使用#改变哈希值的方式来向history添加记录状态,来实现同浏览器后退前进操作友好兼容。但是,这样,却又影响了搜索引擎的收录,搜索引擎是不去理会#后面的东西的。哎,为什么总是这样子不完美呀,纠结死了,到底有没有完美一点的解决方案呀

在visual studio 2010中使用Entity Framework 6

打开visual studio 2010,选择工具->NuGet程序包管理器->管理解决方案的NuGet程序包
看,EntityFramework 我已经安装过了,显示的是管理按钮,如果没有安装过,会显示安装
接着,是最重要的一步,依次选择 工具->拓展管理器,然后选择联机库,再搜索框搜索 entity framework
安装成功了之后,选择一个项目,右键 会有一个 Entity Framework选项,然后选择 Reverse Engineer Code First

CSS较常用却又不容易记忆的一些属性

经常在做一些鼠标拖动处理的时候,经常会不知不觉把文字选中,接着拖动选中的文字,会触发有些浏览器的搜索命令。所以,在会被拖动区域的文字,应该设置成无法选中,这样就不会触发浏览器的搜索命令了。CSS3有属性已经支持这个功能了
user-select有两个值:
none:用户不能选择文本
text:用户可以选择文本
需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整

body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none;  /*webkit浏览器*/
-ms-user-select: none;   /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}