lazyload 实现方式

第一种:
首先将页面上的图片的 src 属性设为 loading.gif,而图片的真实路径则设置在 data-src 属性中,页面滚动的时候计算图片的位置与滚动的位置,当图片出现在浏览器视口内时,将图片的 src 属性设置为 data-src 的值,这样,就可以实现延迟加载。

lazyload

将页面中的img标签src指向一张小图片或者src为空,然后定义datasrc属性指向真实的图片。src指向一张默认的图片,否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。


当载入页面时,先把可视区域内的img标签的data-src属性值负给src,然后监听滚动事件,把用户即将看到的图片加载。这样便实现了懒加载。

sass 总结

sass规则:

sass vs scss:
sass 类似stylus
scss 类似css

@import:
@import reset.css 使用css的@import
@import a.scss 使用sass的@import

创建对象

一个对象就是一系列属性的集合,一个属性包含一个名字(key)和一个值(value)。

创建对象

很多有关于JavaScript书在介绍对象创建的方法时,主要有:

使用对象字面量创建对象(key-value)
使用new创建对象
使用Object.create()创建对象
使用函数创建对象
使用原型创建对象

使用对象字面量创建对象

对象字面量是创建对象最简单的一种形式,目的是在于简化创建包含大量属性的对象的过程。对象字面量由若干属性名(keys)和属性值(values)成对组成的映射表,key和value中间使用冒号(:)分隔,每对key/value之间使用逗号(,)分隔,整个映射表用花括号({})括起来。

1
var obj = {
    property_1:   value_1,   // property_# 可能是一个标识符...
    2:            value_2,   // 或者是一个数字
    // ...,
    "property n": value_n    // 或是一个字符串};

数组去重

双重循环去重
这个方法使用了两个for循环做遍历。整个思路是:
构建一个空数组用来存放去重后的数组
外面的for循环对原数组做遍历,每次从数组中取出一个元素与结果数组做对比
如果原数组取出的元素与结果数组元素相同,则跳出循环;反之则将其存放到结果数组中
代码如下:

1
Array.prototype.unique1 = function () {
    // 构建一个新数组,存放结果
    var newArray = [this[0]];    // for循环,每次从原数组中取出一个元素
    // 用取出的元素循环与结果数组对比
    for (var i = 1; i < this.length; i++) {        var repeat = false;        for (var j=0; j < newArray.length; j++) {            // 原数组取出的元素与结果数组元素相同
            if(this[i] == newArray[j]) {
                repeat = true;                break;
            }
        }        if(!repeat) {            // 如果结果数组中没有该元素,则存放到结果数组中
            newArray.push(this[i]);
        }
    }    return newArray;
}

express 中间件

express 中间件:

basicAuth()
基本的认证中间件,在req.user里添加用户名

用户名和密码的例子:

1
app.use(express.basicAuth('username', 'password'));

校验回调:

1
app.use(express.basicAuth(function(user, pass){
  return 'tj' == user && 'wahoo' == pass;
}));

异步校验接受参数fn(err, user), 下面的例子req.user 将会作为user对象传递.

1
app.use(connect.basicAuth(function(user, pass, fn){
  User.authenticate({ user: user, pass: pass }, fn);
}))

express app.js

1
var express = require('express')
var path=require('path')


var mongoose=require('mongoose')
var dbUrl='mongodb://127.0.0.1/zbyou'
	mongoose.connect(dbUrl)

var session = require('express-session')
var mongoStore=require('connect-mongo')(session)

var serveStatic = require('serve-static')
var bodyParser=require('body-parser')
var cookieParser=require('cookie-parser')

var port=process.env.PORT||3001
var app=express()
	app.listen(port)

<!--more-->
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))
app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST')
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
    next()
})

app.use(cookieParser())
app.use(session({
	secret:'zbyou',
	saveUninitialized: true,
	resave: false,
	store: new mongoStore({
		url:dbUrl,
		collection:'sessions'
	})
}))

app.set('views', path.join(__dirname, '../font-end/managem/views'))//设置view的路径 编译jade
app.set('view engine', 'jade')

app.use(serveStatic(path.join(__dirname,'../')))//相对app.js来说 设置静态资源的路劲起点css jpg js等
app.locals.moment=require('moment')

require('./config/routes')(app)

console.log('zbyou started on port ' + port)

canvas图片处理

canvas图片处理运用
对于canvas来说,主要是两个方法对图片处理比较重要,一个是通过html5 canvas的 getImageData 方法获取图片的像素信息,可以很方便的通过方法导入到把网络图片或者本地的图片导入至canvas中并获取图片的像素信息,可以修改像素信息后通过另外一个重要的方法putImageData导出处理后的图片。

1、获取canvas调用

1
var c = document.createElement('canvas');
context = c.getContext('2d');

2、获取导入图像信息

1
var hiddenImage = new Image();
hiddenImage.src=图片地址
 context .drawImage(hiddenImage, 0, 0, width, height);
   hiddenImage .onload=function(){
    context.putImageData(hiddenImage, 0, 0);
}

array

一、Array 在内存中的堆栈模型

  1. Array 的获取

Javascript 中如何产生 Array:

[element0, element1, …, elementN]

new Array(element0, element1, …, elementN)
new Array(arrayLength)

直接定义,或者通过构造函数创建一个 Array,当然也可以使用其他的手段:

“array”.split(“”);
“array”.match(/a|r/g);

等等,方式有很多。但是 Array 内部是个什么样的结构,恐怕很多人还不是很清楚。

一些接口

电商接口

京东获取单个商品价格接口:
http://p.3.cn/prices/mgets?skuIds=J_商品ID&type=1
ps:商品ID这么获取:http://item.jd.com/954086.html

物流接口

快递接口:
http://www.kuaidi100.com/query?type=快递公司代号&postid=快递单号
ps:快递公司编码:申通=”shentong” EMS=”ems” 顺丰=”shunfeng” 圆通=”yuantong” 中通=”zhongtong” 韵达=”yunda” 天天=”tiantian” 汇通=”huitongkuaidi” 全峰=”quanfengkuaidi” 德邦=”debangwuliu” 宅急送=”zhaijisong”

谷歌接口

FeedXml转json接口:
http://ajax.googleapis.com/ajax/services/feed/load?q=Feed地址&v=1.0
备选参数:callback:&callback=foo就会在json外面嵌套foo({})方便做jsonp使用。
备选参数:n:返回多少条记录。