Jancy的博客

jQuery ParalluxjQuery Parallux是一款可制作响应式网页滚动视觉差特效的jQuery插件。通过该插件可以制作背景图像，图像，视频，文本等HTML元素的滚动视觉差效果。它的特点还有： 1. 轻量级，压缩后的版本只有4KB大小。 2. 可以制作任何元素的视觉差效果。 3. 可以分别制作前景层和背景层，不同层的滚动速度可以不相同。

浏览器发出请求之后浏览器发出请求–》DNS查询–》DNS缓存–》请求到服务器–》服务器代码运行–》返回HTML文档–》浏览器渲染页面浏览器引擎：JS引擎和渲染引擎浏览器渲染引擎：IE（Trident） Chrome（Blink） Firefox（Gecko） Opera（Blink） Safari（Webkit） UC（U3） QQ浏览器/微信webview（X5/Blink）：原来是X

转载自http://www.open-open.com/lib/view/open1409796214932.html收集了NodeJS开发中常用的一些模块。MVC框架 - ExpressExpress 是轻量灵活的Nodejs Web应用框架，它可以快速地搭建网站。Express框架建立在Nodejs内置的Http模块上，并对Http模块再包装，从而实际Web请求处理的 功能。它支持多种前端模板，

npm介绍说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）使用npm安装插件：命令提示符执行npm install <name> [-g] [--save-dev] <name>：node插件名称。 例：npm install gulp-less --save-dev -g：全局安装。 将会安

request模块让http请求变的更加简单。(作为客户端，去请求、抓取另一个网站的信息) request的GitHub主页： https://github.com/request/request最简单的一个示例：var request = require('request'); request('http://www.google.com', function (error, response

项目A通过Ajax访问项目B的接口，获取json数据，项目B采用Node+Express技术栈。项目A可能遇到跨域访问控制问题。报错如下： XMLHttpRequest cannot load http://127.0.0.1:3000/news/latest. No ‘Access-Control-Allow-Origin’ header is present on the requested

express 封装了多种 http 请求方式，我们主要只使用 get和post,可以使用 app.all 获取所以请求方式，回调函数有三个参数分别是 req （代表请求信息）res（代表响应信息）和next。req.query ： 处理 get 请求req.params ： 处理 /:xxx 形式的 get 请求req.body ： 处理 post 请求req.param() ： 可以处理

防盗链如何实现：大多数站点的策略很简单，判断request请求头的refer是否来源于本站。若不是，拒绝访问真实图片。而我们知道: 请求头是来自于客户端，是可伪造的。 HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处理。因此，大致思路如下： 1. 自己的服务器后

jQuery提供了4中事件监听的方式，分别是bind、live、delegate、on，解除监听的函数分别是unbind、die、undelegate、off。bindbind(type,data,function(e){}) type：事件类型 data：传入监听函数的数据，通过event.data获取到，可选 function：监听函数，传入event对象 特点：把监听器绑定到目标对象上

js中window.onload=function(){ console.log(1);}一个页面如果有多个window.onload，只会执行最后一个window.onload，这是因为覆盖了前面的window.onload。window.addEventListener('load',function(){ console.log(1);})window.addEventL

http超文本传输协议今天普遍使用的一个版本——HTTP 1.1。HTTP是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP是一个无状态的协议。同一个客户端的这次请求和上次请求是没有对应关系。默认HTTP的端口号为80。HTTP协议永远都是客户端发起请求，服务器回送响应。HTTP协议承载于TCP协议之上。这样就限制了使用HTTP协议，无法实现在客户端没有发起请求的

浏览器渲染原理浏览器向服务器请求到了HTML文档后便开始解析，产物是DOM（文档对象模型），如果有css，会根据css生成CSSOM（CSS对象模型），然后再由DOM和CSSOM合并产生渲染树，有了渲染树，知道了所有节点的样式，便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局。最后把节点绘制到浏览器上。css的加载和解析不会阻塞html文档的解析css的解析会阻塞js的执行，

meta在head标签中的meta标签,可以为HTML文档提供额外信息 meta属性主要分为两组 1.name属性与content属性 name属性用于描述网页,它是以名称/值形式的名称,name属性的值所描述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中最重要的是description,keywords 2.http-equiv属性与content属性 htt

1.css3的:nth-child(n)选择器 选择器匹配属于其父元素的第 n个子元素，不论元素的类型。（第一个子元素的下标是 1） even是偶数，odd是奇数。p:nth-child(even){ /*偶数*/ color:red;}p:nth-child(odd){ /*奇数*/ color:green;}<h1>标题</h1>//第一个元素<p>

webpack是一个打包工具，实现模块化，支持AMD和CommonJS。将一切文件当作模块。由于插件很多，可以实现部分构建任务，如开启服务器，页面自动刷新，编译less等。 1.安装工具 webpack是核心文件、wepback-dev-server是类http-server的web启动工具。 npm install –save-dev webpack webpack-dev-server

css-loader 处理css中路径引用等问题style-loader 动态把样式写入htmlsass-loader scss编译器less-loader less编译器postcss-loader scss再处理

事件连续触发，导致页面卡顿。窗口缩放和页面滚动mousemove、keydown、mousedown、keyup 节流隔一段时间，执行一次。就像水龙头滴水一样。var throttle = function(){ var last = 0; return function(){ var curr = new Date(); if (curr - last > 1000)

封装对象方法的插件通过选择器获取到jquery对象，调用插件函数。 插件函数挂在$.fn上，$.fn是jQuery构造函数的原型对象。;$(function($){ $.fn.Bar=function(value){ }})(jQuery);;$(function($){ $.fn.extend({ "bar":function(value){

js图片懒加载 原理：自定义data-src属性保存图片的真实地址。窗口滚动时，遍历所有未加载图片的图片节点，判断该图片节点是否在可视区域内，如果是，设置图片节点的src属性为data-src的值，并把它从未加载图片的图片节点数组删除。<img class="lazyimg" data-src="img/pannel2.png" alt="">var checkInView=(img)=>{//判

package.json文件"devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.0", "react-hot-api": "^0.5.0", "reac

1.样式表放在顶部，脚本放在底部。 2.用变量保存DOM，避免重复获取同一个DOM。 3.合并css和js文件，并压缩。减少http请求。 4.图片做出雪碧图。 5.使用cdn内容发布网络。(利用负载均衡寻找最优缓存服务器) 6.lazy load，一些用户不可视的资源可以做成懒惰加载。 7.尽量避免访问全局变量，以减少作用域查找。 待续

传统的服务端渲染（前后端不分离）服务端渲染不是一个新的技术；在 Web 最初的时候，页面就是通过服务端渲染来返回的，用 PHP 来说，通常是使用 Smarty 等模板写模板文件，然后 PHP 服务端框架将数据和模板渲染为html页面返回，这样的服务端渲染有个缺点就是一旦要查看新的页面，就需要请求服务端，刷新页面。前端渲染（前后端分离）如今的前端，为了追求一些体验上的优化，通常整个渲染在浏览器端使用

盒子模型盒子模型的四个关键内容：margin、border、padding、contentjquery var marginLeft=$("#box1").css('marginLeft'); var borderWith=$("#box1").css('borderColor'); var paddingLeft=$("#box1").css('paddingLeft');

直接在标签上加disabled//无论disabled的值是什么，都能禁用input元素<input type="text" name="username" disabled=""><input type="text" name="username" disabled=" "><input type="text" name="username" disabled="abc"><input t

Object.assign函数函数第一个参数为一个目标对象（该对象作为最终的返回值），后面的参数为源对象(此处可以为任意多个)。通过调用该函数可以拷贝所有可被枚举的自有属性值到目标对象中。可被枚举的属性。对于不可枚举的属性，使用Object.assign的时候将被自动忽略。自有属性string或者Symbol类型是可以被直接分配的拷贝过程中将调用源对象的getter方法，并在target对象

EventTarget接口addEventListener：绑定事件的监听函数target.addEventListener(type,listener,useCapture)var btn=document.getElementById('btn');btn.addEventListener('click',hello,false);function hello(){console.log('

1.同一个构造函数的对象实例之间，无法共享属性。function Cat(name){ this.name=name; this.eat=function(){console.log("eat");}}var cat1=new Cat('a');var cat2=new Cat('b');console.log(cat1.eat===cat2.eat);//f

严格模式是一种特殊的执行模式，它修复了部分语言上的不足，提供更强的错误检查，增强安全性。可以对部分函数进行执行严格模式，如：function func(){ 'use strict';}也可以对整个js文件进行执行严格模式，如：'use strict';function func(){}严格模式下，有几种限制： 1.不允许使用withfunction func(obj){ wi

argumentsarguments[n] arguments是个类似数组但不是数组的对象，能够由arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length。arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表。用Array.prototype.slice.call()可将arguements对象转变为数组function add(n){

法1：正则表达式String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g,'');//分枝条件，从字符串开始的位置匹配，和从字符串结束的位置匹配}var res=' abc '.trim();console.log(res);//abc法2：字符串转为数组再处理function trim(s){

this总是返回一个对象，简单说，就是返回属性或方法“当前”所在的对象。在全局环境使用this，它指的就是顶层对象window。console.log(this);//windowvar a=2;this.a;//2function f(){console.log(this);}f();//window2.构造函数中的this，指的是实例对象。function F(){this.pric

面向对象编程和过程式编程面向对象编程程序由一系列对象组成，由对象之间的分工与合作，完成对真实世界的模拟。 “对象”是真实世界中单个实物的抽象，具有属性和方法。属性就是对象的状态；方法就是对象的行为。过程式编程由一系列函数或一系列指令组成面向对象编程特点具有灵活性、代码的可重用性、模块性等特点，容易维护和开发，非常适合多人合作的大型软件项目。构造函数“对象”是单个实物的抽象。通常需要一个模板，表

什么是跨域跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。所谓同源是指，域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行。同源策略的目的，是防止黑客做一些做奸犯科的勾当。比如说，如果一个银行的一个应用允许用户上传网页，如果没有同源策略，黑客可以编写一个登陆表单提

chrome浏览器下项目开发过程中，用到了Ajax异步请求。若将项目放在本地服务器中，通过localhost访问文件，不会报错。若直接通过file://访问文件就会报错。 报错信息： XMLHttpRequest cannot load file:///C:/wamp/www/ejs/abc.ejs. Cross origin requests are only supported for pr

js中用return false 阻止默认行为 方式1：有效<div> <a href="www.baidu.com">sfdhsdh</a></div><script> var elem=document.querySelector('a'); elem.onclick=function(){return false;} //或者elem.onclick=ab

1.indexOffunction f(arr){ var temp=[arr[0]];//临时数组 var i=1; for(;i<arr.length;i++){ if(temp.indexOf(arr[i])==-1){//判断是否在临时数组中 temp.push(arr[i]); } } retu

模块化进程模块就是实现特定功能的一组方法。1、无模块时代：通过script标签来导入一个个的js文件，而一个js文件中，代码简单的堆在一起，把不同的函数简单地放在一起，就算是一个模块，只要能从上往下依次执行就可以了。带来的问题是：全局变量命名冲突、模块成员看不出关系、依赖关系不好管理。 2、模块萌芽时代：把模块写成一个对象，所有的模块成员都放到这个对象里面。var module1 = new

柯里化允许我们把函数与传递给它的参数相结合，产生一个新的函数。最大的作用是参数复用。//给所有函数都添加一个method方法，用于添加其他方法//原型链是F->Function.prototype->Object.prototypeFunction.prototype.method = function(name,func){ this.prototype[name]=func;

双向链表和普通链表的区别在于，在链表中，一个节点只有链向下一个节点的链接，而在双向链表中，链接是双向的：一个链向下一个元素，另一个链向前一个元素。 双向链表提供了两种迭代列表的方法：从头到尾，或者反过来。我们也可以访问一个特定节点的下一个或前一个元素。在单向链表中，如果迭代列表时错过了要找的元素，就需要回到列表起点，重新开始迭代。这是双向链表的一个优点。function DoubleLink(){

链表存储有序的元素集合，但不同于数组，链表中的元素在内存中并不是连续放置的。每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（也称指针或链接）组成。 相对于传统的数组，链表的好处在于，添加或移除元素的时候不需要移动其他元素，然而链表需要使用指针，因此实现链表时需要额外注意。数组的另一个细节是可以直接访问任何位置的任何元素，而要想访问链表中间的一个元素，需要从起点（表头）开始迭代列表直到找