箭头函数

this

箭头函数的this值在定义的时候就确定了,等于外层的this

但是还有种理解简单函数没有自己的this,相当自己不生成this

一量定义后就不能修改,所以如果一个函数在将来可能会被this对象调用就不要使用箭头函数,否则

var f = ()=>console.log(this);

var obj = {};

f.call(obj);

返回对象简写

var f = ()=>({a:1});

CSRF跨站攻击

正站: a.com/user/1/

伪站上发送相关操作请求

解决办法

首先要了解自己哪些请求需要受保存

1、验证referer

这种方法最简单直接,加一个拦截器验证下就行

缺点:referer可以伪造,还有用户设置浏览器发送请求时不提供 Referer

2、添加客户端特征IP,token等

token 值应该前后端协商加密

token 添加到url中的话还是有机会被利用,比如论坛

可以通过XMLHttpRequest统一[……]

Read more

undefined与null的区别

null

首先typeOf null === `object`;即是个对象,但他表示的是空值,理解为可能应该是有值的,且值的类型侧重为object如

作为对象原型链的终点

reg.exec

理解为人为主观

undefined

没有、没有值

var a; // 

var obj={};

obj.a

(a)=>a

理解为一种动态不预料,另外非严格模式undefined可以当成左值来赋值var undef[……]

Read more

javascript API中跟索引有关的(持续更新)

总结写在上面

index可以为负数的

array.splice、str.substr都是从尾开始算,首位是-1

str.substring如果传了负数也没用,会自动当0处理

str.substring(indexStart[, indexEnd]),str = 'abcd'; str.substring(1,2);//"b"

如果indexEnd为空直接到到最后;任一参数为负数会被自动转化为0,所以如果两个参数都是负数的话会返回''空字符串,如果i[……]

Read more

js异常

1、如果异常没有处理,js执行就会中断,所以最暴力的处理方式

window.onerror = function (msg, url, lineNo, columnNo, error) {

    var string = msg.toLowerCase();

    var substring = "script error";

    if (string.indexOf(substring) > -1){

 [……]

Read more

JSONP跨域

浏览器会遵循同源策略(Same-Origin Policy),该策略规定如果A域要请求B域下的资源,那A和B必需是同源的,同源包括主机名、协议、端口或者B域已经授权(CORS)A域访问其资源

http://www.lmqy.net/

http://static.lmqy.net/

不同源

主机名不相同

https://www.lmqy.net/

http://www[……]

Read more

scoll、resize性能优化

为什么需要优化

首先这两个事件在开发中出现的频率是很高的,所以更应该注重其性能,主要是这两个事件的触发频率非常高。

resize

该事件经常用来监听当窗口变化时要更新DOM的UI,比如一些响应式的效果可能就要借助他了,下面是点击浏览器最大化、最小化按钮各个浏览器触发resize事件的次数

IE:IE8、IE7放大缩小各触发两次;IE9、IE10各触发一次

Firefox:各触发两次

Chrome:缩小时触发两次;放大一次

可能因为浏览器版本不同也作了相应的优化有可能次数不太一样[……]

Read more

三剑客:call、apply、bind

记得初学JavaScript的时候对call、apply的理解和用处很模糊,觉得没啥用,后面通过学习才知道这两个方法用处太大了,随便查看一个库或者框架里面不泛这两个的方法的运用,从中还可以学到一些编程的思路,直到ES6又出了一大神器bind方法,觉得自己有必要整理和总结下这三个方法的用法和异同,还有各自的优缺点。

首先三个方法都是用一个对象替换函数执行时的上下文对象,也就是常说的this,也可以说成是某对象借用其他方法,看自己怎么理解了。

call

用法:fn.call(obj, arg1, arg2, arg3, …);

[……]

Read more

有关<img />图片边边角角的认识

图片无疑是组成网页的重要元素,特别是电商这类的网站,所以有必要好好了解一下该元素。

src属性

src的值是图像文件的URL地址,也就是引用该图像的文件的的绝对路径或相对路径,但是这里面还是有很多门道,

src=""和没有src属性是有区别的,而且区别很大,当src=""时某些老版浏览器会认为图片的路径为当前页面,所以会碰到打开一次一页面产生两次请求的情况,不过经自己测试最新的Chrome、Firefixt、IE貌似都已经修复了这个问题。另外src的值不仅可以是HTTP URI Scheme形式的值,[……]

Read more

原型链__proto__、原型prototype、constructor之间暧昧关系

一、prototype

强大的JS实现类继承的形式有别于其他后端语言,通常在其他他语言中一般熟悉的类和实例通常如下面这样:

class Person{
    public function sayHi()
    {
        # code...
    }
}

$xiaoQiang = new Person();这里就可以调用类里的公共方法。上面的是php中一个简单的Person[……]

Read more

小结:2015做的那些jQuery插件

NumberInput 文本框的加、减操作 用div模似type="number"的input,购物车经常看到这个。 Alert 比原生的alert稍微复杂一些的alert 初衷是美化原生的alert,但结果UI还是比较丑 DragSort 文字、图片列表的拖动 没有其他拖动插件那些高大上,没有Sort、没有HTML5、没有分组、没有动画 FixedMenu 固定菜单 在一些专题活动页面比较常见的应用,滚动页面时右侧固定显示页面内模块内容的菜单,点击菜单页面滚动到对应模块,类似于抛锚,插件中内置了返回顶部功能。 FollowMessage “跟随信息” 应该是最失败的一个插件,本来是dropMenu,后来搞成了四不象。 Switchable 图片轮播切换 地球人都知道的效果,比较遗憾的不支持Wap和CSS3切换,一直想升级这两个功能,种种原因至今没去做。 City 省、市、县联动 原生select、div模拟城市选择 imageZoom 图片放大镜 在图片缩略图上移动鼠标,放大显示鼠标所在区域的图像。

[……]

Read more

jQuery imageZoom图片放大镜插件

先睹为快:点击查看demo

图片放大镜的实现主要运用尺寸比例和css position定位

JavaScript图片放大镜比例示意图

尺寸比例

根据上图我们可以知道如下信息

缩略图:thumb = { w:400, h:400}

显示框:view = { w:300, h:300}

大图:big = { w:800, h:800}

镜头 lens = …

镜头

其实大图的尺寸需要用JS加载大图地址完成后才能得到,而镜头的尺寸就是通过上面几个尺寸比例得到的,刚开始我们[……]

Read more

jQuery City 省、市、县三级联动选择

先睹为快:查看demo演示

首先该插件附带一个地区基础数据文件cityData.js,数据比较老且只有省、市、县三级,插件也没有预留做第四级的扩展。生成的选择控件UI分为:原生select、div模拟select、选项卡三种形式

原生select

city({
    $element: $('#cityBox-1'),
    type: 'select'
});

根据Id选中

city({
    $element: $('#cityBox-2'),[......]

Read more

小结:微信开发中的坑坑坑

display:flex

flex既是CSS3中的神器,也是一个巨坑;有了flex后元素两端对齐、底部对齐、按比例平均分布这些高大上功能可以轻松实现,但这个属性值的名称那是改了又改,我所知道就有三个box、flexbox、flex。这个在整个手机端开发中都存在,而微信开发中还有一个坑中坑,即在display:flex元素的子元素上添加box-flex:1属性,如果该子元素为内联元素则他的宽度不能自适应,出来的效果类似于inline-block。

.flex{ display:-webkit-box; display:-webkit-flex; display[......]

Read more