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