web前端笔记

##Javascript 多浏览器兼容性问题及解决方案

1 自定义属性问题

问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用 getAttribute() 获取自定义属性。

解决方法:统一通过 getAttribute() 获取自定义属性。

2  input.type属性问题

问题说明:IE下 input.type 属性为只读;但是Firefox下 input.type 属性为读写。

解决办法:不修改 input.type 属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。

##3 window.event问题

window.event 只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。

解决方法:在事件发生的函数上加上event参数,在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)

##4  事件委托方法

问题说明:IE下,使用 document.body.onload = inject; 其中function inject()在这之前已被实现;在Firefox下,使用 document.body.onload = inject();

解决方法:统一使用 document.body.onload=new Function('inject()'); 或者 document.body.onload = function(){/* 这里是代码 */}

##5

//获取元素的非行间样式值

function getStyle(object,oCss) {

if (object.currentStyle) {

return object.currentStyle[oCss];//IE

}else{

return getComputedStyle(object,null)[oCss];//除了IE

}

}

####二 :  JavaScript  如何实现继承

http://www.jb51.net/article/81766.htm

1 原型链

基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

2 借用构造函数

基本思想:在子类型构造函数的内部调用超类构造函数,通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

3 组合继承

4.原型式继承

借助原型可以基于已有的对象创建新对象,同时还不必须因此创建自定义的类型。

ECMAScript5通过新增Object.create()方法规范化了原型式继承,这个方法接收两个参数:一个用作新对象原型的对象和一个作为新对象定义额外属性的对象。

5.寄生式继承

基本思想:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真正是它做了所有工作一样返回对象。

6.寄生组合式继承

基本思想:通过借用函数来继承属性,通过原型链的混成形式来继承方法

###三  数组去重

var arr = [1, 11, 2, 3, 4, 5, 4, 2, 3, 6, 9]

var temp = []

var obj = {};

for (var i = 0; i < arr.length; i++) {

if (!obj[arr[i]]) {

obj[arr[i]] = true;

temp.push(arr[i])

}

}

console.log(temp.sort(function(a, b) {

return a - b

}))

###四 Retina屏幕1px边框

0.5px边框

解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框,如果可以,给html标签元素添加个class。

使用border-image实现

使用background-image实现

.background-image-1px {

background: url(../img/line.png) repeat-x left bottom;

-webkit-background-size: 100% 1px;

background-size: 100% 1px;

}

链接://www.greatytc.com/p/7e63f5a32636

來源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果

viewport + rem 实现

####五: 什么是事件冒泡 什么是事件委托 怎么阻止事件冒泡和事件委托

JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件,以便事件发生时执行相应的代码。

事件冒泡:

就是当一个子元素的事件被触发的时候(如onclick事件),该事件会从事件源(被点击的子元素)开始逐级向上传播,触发父级元素的点击事件。

那么我们应该如何组织这讨厌的事件冒泡机制呢?

很简单,在事件触发时,会传入一个相应的event对象,其中有一个stopPropagation()方法可以阻止事件冒泡(IE中为cancleBubble=true),以下是详细代码:

事件委托

就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托:

####HTTP  协议:

面向连接

HTTP是一个属于应用层的面向对象的协议 由于其简捷、快速的方式,适用于分布式超媒体信息系统。

HTTP  是无状态的    可以在http  中使用 cookie

TCp

udp

HTTP 应用层 、

运输层 TCp

网际层

网络接口层

网络之前7层  现在5层

http请求由三部分组成,分别是:请求行、消息报头、请求正文

HTTP消息报头包括普通报头、请求报头、响应报头、实体报头。

报文的

请求报文

请求报文的方法

get  post  delete

响应报文

vue 生命周期

beforecreated:el 和 data 并未初始化

created:完成了 data 数据的初始化,el没有

beforeMount:完成了 el 和 data 初始化

另外在标红处,我们能发现el还是 {{message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

mounted :完成挂载

$route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它。

##对象的深度克隆

###jQuery 相关分析

1). 自执行的匿名函数。

2). $("...")形式调用返回 jQuery.fn.init对象。

3). 框架里最常见的 extend 函数。

jQuery.prototype为jQuery的原型方法,这里用jQuery.fn来代替jQuery.prototype,

### 面向对象和面向过程

###  递归的优化

###  冒泡排序的优化

### web安全

解决方案

综上所述,我们可以这样审视我们的WEB站点:

1.永远不要相信客户端传来的任何信息,对这些信息都应先进行编码或过滤处理;

2.谨慎返回用户输入的信息;

3.使用黑名单和白名单处理(即“不允许哪些敏感信息”或“只允许哪些信息”,白名单的效果更好但局限性高);

4.检查、验证请求来源,对每一个重要的操作都进行重新验证;

5.使用SSL防止第三方监听通信(但无法阻止XSS、CSRF、SQL注入攻击);

6.不要将重要文件、备份文件存放在公众可访问到的地方;

7.会话ID无序化;

8.对用户上传的文件进行验证(不单单是格式验证,

比方一张gif图片还应将其转为二进制并验证其每帧颜色值<无符号8位>和宽高值<无符号16位>);

9.WSDL文档应当要求用户注册后才能获取;

10.在报头定义CSP(Content Security Policy);

11.。。。

虽然我们有一些必要的手段来防止WEB攻击,但永远不会有一枚silver bullet来彻底解决问题,

先不谈那些数不胜数的已知的、可被攻击的漏洞,对于谜一样的0-day漏洞,我们所能做的只是提前发现并及时修补它们。

#### 获取地址栏参数

function GetQueryString(name)

{

var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if(r!=null)return  unescape(r[2]); return null;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容

  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,467评论 1 19
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,513评论 0 106
  • 图/小久英 文/小久英 《盈盈潮中水》 盈盈潮中水,延延念远岸 远岸不可及,杓鹬晚呢呢 呢呢杓鹬归,未归远征人 征...
    小久英阅读 175评论 8 5
  • 国庆学校放了7天小长假,1号下午搭长途车回到家已是晚上10点多,和家人吃了夜宵,便早早洗洗睡了,少来,明明就是人...
    席哈儿阅读 214评论 0 0
  • 英国诗人约翰·梅斯菲尔德曾经说“快乐的日子,是我们聪明”。正因为如此,快乐带来的智慧存在于清晰的心灵感知中,并伴随...
    妖殇杜佳阅读 273评论 0 0