话不多说，先上题。

一、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。

1.使用flex

1
2
3
4
5

//html
<div class='box'>
	<div class='left'></div> 
	<div class='right'></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//css
.box {
    width: 400px;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #c3c3c3;
}
.left {
    flex-basis：100px;
    -webkit-flex-basis: 100px;
    /* Safari 6.1+ */
    background-color: red;
    height: 100%;
}
.right {
    background-color: blue;
    flex-grow: 1;
}

2.浮动布局

1
2

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#left {
    float: left;
    width: 220px;
    background-color: green;
}
#content {
    background-color: orange;
    margin-left: 220px;
    /*==等于左边栏宽度==*/
}
</style>

二、请写出一些前端性能优化的方式，越多越好

1.减少dom操作
2.部署前，图片压缩，代码压缩
3.优化js代码结构，减少冗余代码
4.减少http请求，合理设置 HTTP缓存
5.使用内容分发cdn加速
6.静态资源缓存
7.图片延迟加载

三、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

输入地址
1.浏览器查找域名的 IP 地址
2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…
3.浏览器向 web 服务器发送一个 HTTP 请求
4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）
5.浏览器跟踪重定向地址
6.服务器处理请求
7.服务器返回一个 HTTP 响应
8.浏览器显示 HTML
9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
10.浏览器发送异步请求

四、请大概描述下页面访问cookie的限制条件

跨域问题
设置了HttpOnly

五、描述浏览器重绘和回流，哪些方法能够改善由于dom操作产生的回流

1.直接改变className，如果动态改变样式，则使用cssText

1
2
3
4
5
6
7
8
9
10

// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px"; // 比较好的写法
el.className += " className1";
// 比较好的写法
el.style.cssText += ";
left: " + left + "px;
top: " + top + "px;";

2.让要操作的元素进行”离线处理”，处理完后一起更新

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild技术，引发一次回流和重绘

六、vue生命周期钩子

1.beforcreate
2.created
3.beformount
4.mounted
5.beforeUpdate
6.updated
7.actived
8.deatived
9.beforeDestroy
10.destroyed

七、js跨域请求的方式，能写几种是几种

1、通过jsonp跨域
2、通过修改document.domain来跨子域
3、使用window.name来进行跨域
4、使用HTML5中新引进的window.postMessage方法来跨域传送数据（ie 67 不支持）
5、CORS 需要服务器设置header ：Access-Control-Allow-Origin。
6、nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求

八、对前端工程化的理解

1.开发规范
2.模块化开发
3.组件化开发
4.组件仓库
5.性能优化
6.项目部署
7.开发流程
8.开发工具

九, js深度复制的方式

1.使用jq的$.extend(true, target, obj)
2.newobj = Object.create(sourceObj)，// 但是这个是有个问题就是 newobj的更改不会影响到 sourceobj但是 sourceobj的更改会影响到newObj
3.newobj = JSON.parse(JSON.stringify(sourceObj))

十、js设计模式

总体来说设计模式分为三大类：

• 创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
• 结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
• 行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模

十一、图片预览

1
2

<input type="file" name="file" onchange="showPreview(this)" />
< img id="portrait" src="" width="70" height="75">

1
2
3
4
5
6
7
8
9
10

function showPreview(source) {
  var file = source.files[0];
  if(window.FileReader) {
      var fr = new FileReader();
      fr.onloadend = function(e) {
        document.getElementById("portrait").src = e.target.result;
      };
      fr.readAsDataURL(file);
  }
}

十二、扁平化多维数组

1、老方法

1
2
3
4
5
6
7
8
9
10
11
12

var result = []
function unfold(arr){
     for(var i=0;i< arr.length;i++){
      if(typeof arr[i]=="object" && arr[i].length>1) {
       unfold(arr[i]);
     } else {        
       result.push(arr[i]);
     }
  }
}
var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
unfold(arr)

2、使用tostring

1
2

var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
var b = c.toString().split(',')

3、使用es6的reduce函数

1
2
3

var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
var result = flatten(arr)

十三、iframe有那些缺点？

• iframe会阻塞主页面的Onload事件；
• 搜索引擎的检索程序无法解读这种页面，不利于SEO;
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
• 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

    最近这段时间一直都有在玩nodejs，边学习边总结了一些零零散散的笔记，今天要总结在一起，方便自己查阅和总结。

1. mongodb启动

确保你的电脑上安装了mongodb，进入mongodb的bin目录，执行mongod --dbpath 数据库地址。
例如mongod --dbpath F:\dataBase;

2. 修改node的渲染模板

修改app.js里面的内容，可以修改为你的模板为ejs、html等

1
2
3
4
5

var ejs = require('ejs');
...
app.set('views', path.join(__dirname, 'views'));
app.engine('.html', ejs.__express);
app.set('view engine', 'html');

3. 获取前端传来的参数

• req.query 主要获取GET请求传来的参数。
  获取到的是一个object，如果要获取具体值，可以req.query.id等
• req.params获取的值是url后面的一部分，处理 get 和 post 请求
  比如GET /topic?id=58ff17984edb452fd0fa2cee&node_cat=node8 200 25.245 ms - 331,需要自己拆解
• req.body主要获取POST请求参数
  解析body不是nodejs默认提供的，你需要载入body-parser中间件才可以使用req.body
  查找优先级由高到低为 req.params→req.body→req.query

4. 分页的做法

• 可以先获取你要获取的数据的总数，这里需要mongod单独去查一次，比如

  1 2 3

  exports.getCountByQuery(query, callback){ Topic.count(query,callback); }

• 分find结合一起使用

  1 2 3 4 5 6 7 8 9 10 11

  var limit =Number(req.query.limit) || 10; var page = Number(req.query.page) || 1; var options = {skip:(page - 1)* limit,limit:limit }; exports.findByQuery(data,options,callback){ Topic.find(data,null,options,(err,doc) => { if(err){ return callback(err); } callback(null,doc); }) }

5. 新建一个工程

首先需要在全局安装 express npm install express-generator -g

• 在命令行中输入：express -e 项目名 初始化了一个使用 ejs 模板引擎的工程cd 项目名 && npm install
• 运行 ：npm start 再在浏览器输入对应的窗口即可

• 自动更新：
  安装个supervisornpm -g install supervisorsupervisor必须全局安装
  启动时执行 supervisor app.js。express已经替换了启动方式，所以启动时执行 supervisor ./bin/www

  6. 小tips：快速删除node_modules

• 安装个全局的rimraf npm install rimraf -g,

• 在需要删除node_modules的目录下，执行rimraf node_modules

  7. ejs模板的引用

• 在view目录下新建一个other.ejs,如果要往里面传数据，可以在router里面写res.render('other', { title: 'hello world' });
  <% code %>：JavaScript 代码。
  <%= code %>：显示替换过 HTML 特殊字符的内容。
  <%- code %>：显示原始 HTML 内容。
  注意：
  <%= code %> 和 <%- code %> 的区别，当变量 code 为普通字符串时，两者没有区别。当 code 比如为 <h1>hello</h1>这种字符串时， <%= code %>会原样输出 <h1>hello</h1> ，而 <%- code %>则会显示 H1里面的 hello 字符串。

8. 页面布局

这里我们不使用layout进行页面布局，而是使用更为简单灵活的include。include 的简单使用如下：

1
2
3

<%- include a %>
hello,world!
<%- include b %>

exports和module.exports的区别，exports仅仅是 module.exports的一个地址引用，如果module.exports已经具备一些属性和方法，那么exports收集来的信息将被忽略;

• 最好别分别定义module.exports和exports
• NodeJs开发者建议导出对象用module.exports,导出多个方法和变量用exports

  9. 如何字符串加密?

当我们提交表单后，比如密码这些敏感信息，不做个加密处理那也太不把用户私密信息当回事了，Node.js提供了一个加密模块 crypto
使用方法：

1
2
3
4
5
6
7
8
9
10
11

var express = require('express');
var router = express.Router();
var crypto = require('crypto');
router.post('/',function(req, res){
  var userPwd = req.body.txtUserPwd;
  //生成口令的散列值
  var md5 = crypto.createHash('md5');   //crypto模块功能是加密并生成各种散列
  var en_upwd = md5.update(userPwd).digest('hex');
  console.log('加密后的密码:'+en_upwd);
});
module.exports = router;

10. session的使用

1
2
3
4
5
6
7
8

// session的使用
app.use(cookieParser('keyboard cat'));
//使用靠就这个中间件
app.use(session({
    secret: "keyboard cat",
    resave: true,
    saveUninitialized: true
}));

注意：坑点：！！！！需要注意的是，必须将上面几句放在app.use(app.router);之前

1
2
3

//使用
req.session.name = username;
req.session.pwd = pwd;

写完后，用下面两句存储一下

1
2

sender.send(req.session);
sender.end();

11. Express 模板传值对象app.locals、res.locals

• locals是Express应用中 Application(app)对象和Response(res)对象中的属性，该属性是一个对象。该对象的主要作用是，将值传递到所渲染的模板中。
• locals对象
  locals对象用于将数据传递至所渲染的模板中。
  对于如下一个ejs模板：

  1 2 3 4 5 6 7 8 9 10

  <!DOCTYPE html> <html> <head> <title><%= name %></title> </head> <body> <h1><a href="<%= url %>"><%= name %></a></h1> <p><%= introduce %></p> </body> </html>

1
2
3
4
5
6
7
8
9
10

router.get('/', function(req, res) {  
  res.render('index', {name:'IT笔录', url:'http://itbilu.com', introduce:'学习、记录、整理'});
  // 也可以使用 res.locals 变量
  // res.locals = {
  //   name:'IT笔录',
  //   url:'http://itbilu.com',
  //   introduce:'学习、记录、整理'
  // };
  // res.render('index');
});

• app.locals与res.locals
  locals可能存在于app对象中即：app.locals；也可能存在于res对象中，即：res.locals。两者都会将该对象传递至所渲染的页面中。不同的是，app.locals会在整个生命周期中起作用；而res.locals只会有当前请求中起作用。由于app.locals在当前应用所有的渲染模中访问，这样我们就可以在该对象中定义一些顶级/全局的数据，并在渲染模板中使用。
  注意 ：使用的时候，位置应该是放在路由器的前面，这样才会生效。比如

  1 2	app.use(local); // local是我封装了res.locals的函数，位置要在路由器的前面，不然是不行的 app.use('/',router);

12. node文件读取模块fs

Node.js读取文件内容包括同步和异步两种方式

• 同步读取，调用的是readFileSync

  1 2 3

  var fs=require("fs"); var data=fs.readFileSync("test.js","utf-8"); console.log(data);

• 异步读取，调用readFile

  1 2 3 4 5 6 7 8

  var fs=require("fs"); fs.readFile("test.js",'utf-8',function(err,data){ if(err){ console.log("error"); }else{ console.log(data); } });

fs.readFile 接收了三个参数，第一个是文件名，第二个是编码方式，第三个为回调函数。
其他一下fs的api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

fs.writeFile('delete.txt','1234567890'，function(err){
    console('youxi!');
});
// 删除文件
fs.unlink('delete.txt', function(){
 console.log('success');
});
// 修改文件名称
fs.rename('delete.txt','anew.txt',function(err){
 console.log('rename success');
 // 查看文件状态
fs.stat('anew.txt', function(err, stat){
  console.log(stat);
 });
});
// 判断文件是否存在
fs.exists('a.txt', function( exists ){
    console.log( exists );
});

13. mongodb的使用

(1)、如何开启mongodb

• 首先，进入到安装mongodb的bin目录，如D:\mongodb\bin,然后执行命令mongod --dbpath f:\MongoDB\data 其中 f:\MongoDB\data是文件存放路径，看到如下信息说明成功了

• mongodb的默认端口为27017，所以如果开启了mongodb,可以在浏览器输入http://localhost:27017/,如果现实类似的It looks like you are trying to access MongoDB over HTTP on the native driver port.,则说明mongodb启动成功

• mongoose的api地位为http://www.nodeclass.com/api/mongoose.html#quick_start

如何查看有多少数据库

• 进入mongodb的bin目录，例如D:\mongodb\bin
• 执行mongo,然后再执行show dbs可以查看到有多少数据库。

• 如果要使用指定的数据库的话，可以执行use 数据库名。eg:use myData
  这里需要注意的是，mongodb是需要开启的状态。即：mongod --dbpath f:\MongoDB\data这条命令的窗口是要开着的。

  (2)mongoose的使用

  一般我们不直接用MongoDB的函数来操作MongoDB数据库,而使用mongose,mongoose就是一套操作MongoDB数据库的接口.

• 连接上你的数据库

  1 2	var mongoose = require('mongoose'); var db = mongoose.connect('mongodb://127.0.0.1:27017/dataBase');

• Schema
  一种以文件形式存储的数据库模型骨架，无法直接通往数据库端，不具备对数据库的操作能力，仅仅只是数据库模型在程序片段中的一种表现，可以说是数据属性模型(传统意义的表结构)，又或着是’集合’的模型骨架。说白了就是定义数据的类型。

  1 2 3 4 5 6 7 8 9 10

  const UserSchema = new mongoose.Schema({ username : { type : String }, password : { type : String }, avatar : { type : String }, age : { type : Number , default : 0 }, description : { type : String }, email : { type : String }, github : { type : String }, time : { type : Date , defaul : Date.now }, });

• model
  由Schema构造生成的模型，除了Schema定义的数据库骨架以外，还具有数据库操作的行为，类似于管理数据库属性、行为的类.
  简单的说，就是 Schema定义了数据的类型，那么数据的操作要怎么办呢？ 定义一个类似的类，来操作 Schema声明的数据里面的类型

  1	const UserModel = db.model("user", UserSchema );

user 数据库中的集合名称, 不存在会创建.

• Entity
  由Model创建的实体，使用save方法保存数据，Model和Entity都有能影响数据库的操作，但Model比Entity更具操作性

  (1)、具体的使用

  参考Mongoose使用操作

(2)、Schema - 表结构

• 构造函数

  1 2 3 4 5

  new mongoose.Schema({ name:{type:String}, age:{type:Number, default:10} })

• 添加属性

  1 2 3 4 5

  Schema.add({ name: 'String', email: 'String', age: 'Number' })

• 有时候Schema不仅要为后面的Model和Entity提供公共的属性，还要提供公共的方法

  1 2 3 4 5

  Schema.method('say', function() { console.log('hello'); }); //这样Model和Entity的实例就能使用这个方法了

• 添加静态方法

  1 2	Schema.static( 'say', function(){console.log('hello');} ) //静态方法，只限于在Model层就能使用

• 追加方法

  1 2 3

  Schema.methods.say = function() { console.log('hello'); }; //静态方法，只限于在Model层就能使用

(3)、model - 文档操作

• 构造函数, 参数1:集合名称, 参数2:Schema实例
  db.model('test1', TestSchema );
• 查询, 参数1忽略,或为空对象则返回所有集合文档
• model.find({}, callback);
  *model.find({},field,callback); 过滤查询, 参数2:{'name':1, 'age':0} 查询文档的返回结果包含name, 不包含age(_id默认是1) 1为包含，0为不包含
• model.find({},null,{limit:20}); 过滤查询,参数3: 游标操作 limit限制返回结果数量为20个,如不足20个则返回所有.
• model.findOne({}, callback); 查询找到的第一个文档
• model.findById('obj._id', callback); 查询找到的第一个文档,同上. 但是只接受 __id 的值查询
• 创建, 在集合中创建一个文档
  Model.create(文档数据, callback))
• 更新,参数 1:查询条件, 参数2:更新对象,可以使用MondoDB的更新修改器
  Model.update(conditions, update, function(error)

• 删除, 参数1:查询条件
  Model.remove(conditions,callback);

  (4)、Entity -文档操作

• 构造函数, 其实就是model的实例
  new TestModel( { name:'xueyou', age:21 } );

• 创建, 在集合中创建一个文档.
  Entity.save(callback);

  (5)、修改器和更新器

• 更新修改器:
  ‘$inc’ 增减修改器,只对数字有效.下面的实例: 找到 age=22的文档,修改文档的age值自增1
  Model.update({'age':22}, {'$inc':{'age':1} }); 执行后: age=23

• ‘$set’ 指定一个键的值,这个键不存在就创建它.可以是任何MondoDB支持的类型.
  Model.update({'age':22}, {'$set':{'age':'haha'} }); 执行后: age=’haha’

• ‘$unset’ 同上取反,删除一个键
  Model.update({'age':22}, {'$unset':{'age':'haha'} });执行后: age键不存在

  (6)、数组修改器:

• ‘$push’ 给一个键push一个数组成员,键不存在会创建
  Model.update({'age':22}, {'$push':{'array':10} }); 执行后: 增加一个 array 键,类型为数组, 有一个成员 10

• ‘$addToSet’ 向数组中添加一个元素,如果存在就不添加
  Model.update({'age':22}, {'$addToSet':{'array':10} }); 执行后: array中有10所以不会添加
• ‘$each’ 遍历数组, 和 $push 修改器配合可以插入多个值
  Model.update({'age':22}, {'$push':{'array':{'$each': [1,2,3,4,5]}} });执行后: array : [10,1,2,3,4,5]
• ‘$pop’ 向数组中尾部删除一个元素
  Model.update({'age':22}, {'$pop':{'array':1} }); 执行后: array : [10,1,2,3,4] tips: 将1改成-1可以删除数组首部元素
• ‘$pull’ 向数组中删除指定元素
  Model.update({'age':22}, {'$pull':{'array':10} }); 执行后: array : [1,2,3,4] 匹配到array中的10后将其删除

  (7)、条件查询:

  '$lt'小于
  '$lte'小于等于
  '$gt'大于
  '$gte'大于等于
  '$ne'不等于
  Model.find({'age':{ '$gte':18 , '$lte':30 } });查询 age 大于等于18并小于等于30的文档

(8)、或查询 OR:

'$in'一个键对应多个值
'$nin'同上取反, 一个键不对应指定值
'$or'多个条件匹配, 可以嵌套 $in 使用
'$not'同上取反, 查询与特定模式不匹配的文档
Model.find({'age':{ '$in':[20,21,22.'haha']} } ); 查询 age等于20或21或21或’haha’的文档
Model.find({"$or" : [ {'age':18} , {'name':'xueyou'} ] }); 查询 age等于18 或 name等于’xueyou’ 的文档

(9)、类型查询:

null 能匹配自身和不存在的值, 想要匹配键的值 为null, 就要通过 ‘$exists’ 条件判定键值已经存在 “$exists” (表示是否存在的意思)
Model.find('age' : { '$in' : [null] , 'exists' : true } ); 查询 age值为null的文档 Model.find({name:{$exists:true}},function(error,docs){//查询所有存在name属性的文档}); Model.find({telephone:{$exists:false}},function(error,docs){//查询所有不存在telephone属性的文档});

######(10)、正则表达式:
MongoDb 使用 Prel兼容的正则表达式库来匹配正则表达式
find( {'name' : /joe/i } )查询name为 joe 的文档, 并忽略大小写
find( {'name' : /joe?/i } ) 查询匹配各种大小写组合

(11)、查询数组:

Model.find({'array':10} ); 查询 array(数组类型)键中有10的文档, array : [1,2,3,4,5,10] 会匹配到
Model.find({'array[5]':10} );查询 array(数组类型)键中下标5对应的值是10, array : [1,2,3,4,5,10] 会匹配到
‘$all’ 匹配数组中多个元素
Model.find({'array':[5,10]} ); 查询 匹配array数组中 既有5又有10的文档
‘$size’ 匹配数组长度
Model.find({'array':{"$size" : 3} } );查询 匹配array数组长度为3 的文档
‘$slice’ 查询子集合返回
Model.find({'array':{"$skice" : 10} } ); 查询 匹配array数组的前10个元素
Model.find({'array':{"$skice" : [5,10] } } ); 查询 匹配array数组的第5个到第10个元素

(12)、where

用它可以执行任意javacript语句作为查询的一部分,如果回调函数返回 true 文档就作为结果的一部分返回

1
2
3
4
5
6
7
8
9
10
11

find({
  "$where":function() {
      for(var x in this){
       //这个函数中的 this 就是文档
        if(this.x !==null&&this.y !==null) { 
          return this.x +this.y ===10?true:false;
      } else {
          return true;
      }
    }
});

简化版本

1
2

find( {"$where" : "this.x + this.y === 10" } )
find( {"$where" : " function(){ return this.x + this.y ===10; } " } )

(13)、ObjectId

存储在MongoDB集合中的每个文档（document）都有一个默认的主键_id，这个主键名称是固定的，它可以是mongodb支持的任何数据类型，默认是ObjectId。

(14)、mongoose中的schema.index

建索引是为了提高查询速度，要根据实际业务建立索引，太多了也不好，这样更新数据会变慢，因为要更新索引
TopicSchema.index({create_at: -1});
1是正序， -1是逆序，复合索引是为了提高查询速度。

ECMAScript3给Function的原型定义了两个方法，他们是Function.prototype.call 和 Function.prototype.apply. 在实际开发中，特别是在一些函数式风格的代码编写中，call和apply方法尤为有用。

call和apply区别

其实他们的作用是一样的，只是传递的参数不一样而已。
apply接受2个参数，第一个参数指定了函数体内this对象的指向，第二个参数为数组或者一个类数组。apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

举个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const obj1 = {
    name: 'designdacity',
    getName: function() {
        return this.name;
    }
};
const obj2 = {
    name: 'Leiyi'
}
console.log(obj1.getName());  // "designdacity"
console.log(obj1.getName.call(obj2));  // "Leiyi"
console.log(obj1.getName.apply(obj2));  // "Leiyi"

call和apply的用途

改变this指向

call和apply可以改变this的指向，这点我们从上面这个例子中可以看出。我们还可以举一个实际当中可以遇到的情况：

有的时候我们会觉得document.getElementById这个方法太长了，我们会尝试用一个短函数来代替它，如同prototype.js等一些框架所做过的事情，下面用代码说明：

1
2
3
4
5

const getId = function(id) {
  return document.getElementById(id);
}
getId('id');

在Chrome、Firefox、IE10中执行会发现抛出异常，这是因为很多引擎的 document.getElementById的方法内部需要用到this，这个this本来被期望指向document，但直接普通函数调用就指向了window。我们可以利用apply“修正” this：

1
2
3
4
5
6
7

document.getElementById = (function(func) {
  return function() {
    return func.apply(document, arguments);
  }
})(document.getElement);
const getId = document.getElementById;

Function.prototype.bind

在大部分高级浏览器已经实现了内置的Function.prototype.bind，用来指定函数内部的this指向，如果没有原生的Function.prototype.bind,我们也可以模拟一个，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Function.prototype.bind = function(context) {
  var self = this;
  return function() {
    return self.apply(context, arguments);
  }
}
var obj = {
  name: 'microzz'
};
var func = function() {
  console.log(this.name); // microzz
}.bind(obj);
func();

这是一个简化版的，通常我们会实现得稍微复杂一点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Function.prototype.bind = function() {
  var self = this;
  // 需要绑定的this上下文
  var context = [].shift.call(arguments);
  // 剩余的参数转成数组
  var args = [].slice.call(arguments);
  return function() {
    return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
  }
}
var obj = {
  name: 'microzz'
};
var func = function(a, b, c, d) {
  console.log(this.name); // microzz
  console.log([a, b, c, d]); // [1, 2, 3, 4]
}.bind(obj, 1, 2);
func(3, 4);

借用其他对象的方法

借用构造函数

借用方法的第一种场景是“借用构造函数”，可以实现类似继承的效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var A = function(name) {
  this.name = name;
}
var B = function() {
  A.apply(this, arguments);
}
B.prototype.getName = function() {
  return this.name;
}
var b = new B('designdacity');
console.log(b.getName()); // designdacity

类数组

函数参数列表arguments是一个类数组对象，虽然它有下标，但是并不是真正的数组。为了能使用数组的一些方法，我们常常会借用Array.prototype对象上的方法。
比如想往arguments中添加新元素，通常会借用Array.prototype.push
想把arguments转成真正数组的时候，可以借用Array.prototype.slice或者也可以使用ES6的Array.from

前后端分离的思路，所以都要通过Ajax来请求数据然后把数据渲染到页面上，一开始想过直接引用Jquery，但感觉就使用Jquery的Ajax函数，有点太浪费，所以就自己撸了一个Ajax函数。本文由浅入深，一步一步带你封装属于自己的Ajax库。

Ajax简介

• Asynchronous Javascript And XML （异步的JavaScript和XML）
• 它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体
• Ajax是一种用于创建快速动态网页的技术。在前台与后台进行数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，实现局部更新。

1、优点

页面无刷新，用户体验好。
异步通信，更加快的响应能力。
减少冗余请求，减轻了服务器负担。
基于标准化的并被广泛支持的技术

2、应用场景

场景 1. 数据验证
场景 2. 按需取数据
场景 3. 自动更新页面
…

说了这么多，接下来来点干货。

创建ajax的步骤

Ajax的原理简单来说通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步

1、创建XMLHttpRequest对象

1
2
3
4
5
6
7
8
9

function createRequest (){
    if (window.XMLHttpRequest) {
        //IE6以上
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

2、准备请求

1

xhr.open(method,url,async);

• 第一个参数表示请求类型的字符串，其值可以是GET或者POST

GET请求：

1

xhr.open("GET",demo.php?name=hzzly&age=21,true);

POST请求：

1

xhr.open("POST",demo.php,true);

• 第二个参数是要作为请求发送目标的URL。

• 第三个参数是true或false，表示请求是以异步还是同步的模式发出。（默认为true，一般不建议为false）

  3、发送请求

  1	xhr.send();

GET请求：

1
2

xhr.open("GET",demo.php?name=hzzly&age=21,true);
xhr.send();

POST请求:

1
2
3

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send(param)

4、处理响应

1
2
3
4
5

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
    }
}

• onreadystatechange：当处理过程发生变化的时候执行下面的函数
• readyState：ajax处理过程
  • 0：请求未初始化（还没有调用 open()）
  • 1：请求已经建立，但是还没有发送（还没有调用 send()）
  • 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）
  • 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成
  • 4：响应已完成；您可以获取并使用服务器的响应了
• status属性:
  • 200: “OK”
  • 404: 未找到页面
• responseText：获得字符串形式的响应数据，可以用JSON.parse(xhr.responseText)转化为JSON对象

封装例子

1.get请求函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/**
 * 一个简单的get请求
 * @param {String}   url     请求地址,文件名
 * @param {Function} fnSucc  请求成功时执行的函数
 * @param {Function} fnFaild 请求失败执行的函数
 */
function Get(url, fnSucc, fnFaild) {
    //1.创建ajax对象
    var xhr = null;
        /**
         * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined.
         * 进入else若直接使用XMLHttpRequest在不支持的情况下会报错
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.连接服务器
    //open(方法,url,是否异步)
    xhr.open("GET", url, true);
    //3.发送请求
    xhr.send();
    //4.接收返回
    //OnRedayStateChange事件
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //alert("成功" + xhr.responseText);
                fnSucc(xhr.responseText);
            } else {
                //alert("服务器响应失败!");
                if (fnFaild) {
                    fnFaild();
                }
            }
        }
    };
}

2.get与post结合的请求函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

/**
 * AJAX函数封装
 * @param {string} url     请求地址（必须）
 * @param {object} options 发送请求的选项参数
 *   @config {string} [options.type] 请求发送的类型。默认为GET。
 *   @config {Object} [options.data] 需要发送的数据。
 *   @config {Function} [options.onsuccess] 请求成功时触发。（必须）
 *   @config {Function} [options.onfail] 请求失败时触发。
 */
function AJAX(url, options) {
    //1.创建ajax对象
    var xhr = null;
        /**
         * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined,进入else
         * 若直接使用XMLHttpRequest,在不支持的情况下会报错
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.连接服务器
    //open(方法,url,是否异步)
    var param = ""; //请求参数。
    //只有data存在，且为对象使才执行
    var data = options.data ? options.data : -1; //缓存data
    if (typeof (data) === "object") {
        for (var key in data) { //请求参数拼接
            if (data.hasOwnProperty(key)) {
                param += `${key}=${data[key]}&`;
            }
        }
        param.replace(/&$/, "");
    } else {
        param = "timestamp=" + new Date().getTime();
    }
    //3.发送请求
    var type = options.type ? options.type.toUpperCase() : "GET";
    if (type === "GET") {
        xhr.open("GET", `${url}?${param}`, true);
        xhr.send();
    } else {
        xhr.open("POST", url, true);
        xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
        xhr.send(param);
    }
    //4.接收返回
    //OnRedayStateChange事件
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //请求成功。形参为获取到的字符串形式的响应数据
                options.onsuccess(xhr.responseText);
            } else {
                //先判断是否存在请求失败函数
                //存在时，形参为XMLHttpRequest对象，便于进行错误进行处理
                if (options.onfail) {
                    options.onfail(xhr);
                }
            }
        }
    };
}

实现以下功能：

1. 添加监听者
2. 移除监听者
3. 清空监听者
4. 发起事件信号

设计思路如下：

定义一个对象，包含一个实例成员listeners，用于记录所有的监听者
为对象的原型增加，新增、删除、清空和执行四个成员
具体代码可以参见下面示例

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

function myEvent(){
    this.listeners = [];    //监听者列表
}
//添加一个监听者
myEvent.prototype.addListener = function(fn){
    this.listeners.push(fn);
};
//除移一个监听者
myEvent.prototype.removeListener = function(fn){
    var index = this.listeners.indexOf(fn);
    this.listeners.splice(index,1);
};
//清除所有监听者
myEvent.prototype.clearListeners = function(){
    this.listeners = [];
};
//发出执行信号，并告之所有监听者
myEvent.prototype.raise = function(e){
    var l = this.listeners.length;
    for(var i = 0; i < l; i++){
        this.listeners[i](e);    //执行所有监听方法
    }
};
var me = new myEvent();
//事件fun1
function fun1(e) {
    console.log('fun1: ' + e);
}
//事件fun2
function fun2(e) {
    console.log('fun2: ' + e);
}
//调用相关方法进行测试
me.addListener(fun1);
me.addListener(fun2);
me.removeListener(fun1)
//me.clearListeners();
me.raise("a");

数据类型

原始类型(Primitives)：当你给一个原始类型赋值时，返回的是这个值的本身。

• string
• number
• boolean
• null
• undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    var foo = 1,
    bar = foo;
    bar = 9; 
    console.log(foo, bar); // => 1, 9
```  
    
**对象类型**:当你给一个对象类型赋值时，返回的是这个值的引用。
* object
* array
* function
```javascript
var foo = [1, 2],
  bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9

对象

• 新建一个对象的语法

  1 2 3 4 5

  //不推荐 var item = new Object(); //推荐 var item = {};

• 不要使用保留字作为键值，否则在IE8下面会出现问题(详情)。

  1 2 3 4 5 6 7 8 9 10 11

  //不推荐 var superman = { default: { clark: 'kent'}, private: true }; //推荐 var superman ={ defaults: { clark: 'kent'}, hidden: true };

• 使用可读性强的同义词代替保留字

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  //不推荐 var superman = { class: 'alien' }; //不推荐 var superman = { klass: 'alien' }; //推荐 var superman = { type: 'alien' };

数组

• 新建一个数组的语法

  1 2 3 4 5

  //不推荐 var items = new Array(); //推荐 var items = [];

• 如果你不知道数组的长度可以使用push将元素加入。

  1 2 3 4 5 6 7

  var someStack = []; //不推荐 someStack[someStack.length] = 'something'; //推荐 someStack.push('something');

• 当你需要复制一个数组的时候使用slice。jsPerf

  1 2 3 4 5 6 7 8 9 10 11

  var len = items.length, itemsCopy = [], i; //不推荐 for (i = 0; i < len; i++){ itemsCopy[i] = items[i]; } //推荐 itemsCopy = items.slice();

• 用slice转换伪数组对象到数组

  1 2 3 4

  function trigger() { var args = Array.prototype.slice.call(arguments); ... }

String类型

• 使用单引号’’

  1 2 3 4 5 6 7 8 9 10 11

  //不推荐 var name = "Bob Parr"; //推荐 var name = 'Bob Parr'; //不推荐 var fullName - "Bob " + this.lastName; //推荐 var fullName = 'Bob ' + this.lastName;

• 当字符串长度超过80个时，应该通过字符串连接多行显示。

• 注意：过度使用字符串连接将会影响性能。jsPerf&Discussion

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  //不推荐 var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'; //不推荐 var errorMessage = 'This is a super long error that \ was thrown because of Batman. \ When you stop to think about \ how Batman had anything to do \ with this, you would get nowhere \ fast.'; //推荐 var errorMessage = 'This is a super long error that ' + 'was thrown because of Batman.' + 'When you stop to think about ' + 'how Batman had anything to do ' + 'with this, you would get nowhere ' + 'fast.';

• 当程序建立一个字符串时， 使用join代替字符串连接。特别是在IE下：jsPerf

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

  var items, messages, length, i; messages = [{ state: 'success', message: 'This one worked.' },{ state: 'success', message: 'This one worked as well.' },{ state: 'error', message: 'This one did not work.' }]; length = messages.length; // 不推荐 function inbox(messages) { items = '<ul>'; for (i = 0; i < length; i++) { items += '<li>' + messages[i].message + '</li>'; } return items + '</ul>'; } // 推荐 function inbox(messages) { items = []; for (i = 0; i < length; i++) { items[i] = messages[i].message; } return '<ul><li>' + items.join('</li><li>') + '</li></ul>'; }

函数

• 函数表达式：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  // 匿名函数表达式 var anonymous = function(){ return true; } // 命名函数表达式 var named = function named() { return true; }; // 立即执行的函数表达式（IIFE） (function(){ console.log('Welcome to the Internet. Please follow me.'); })();

• 不要将函数声明放在如if/while循环或其他任何语句中。但可以用函数表达式来替代函数声明这么做。一些浏览器可能的确可以在语句中使用函数声明。但是在解析方面的处理各不相同，各种浏览器下兼容性很不好。

注意: ECMA-262定义了一系列的语句，但是函数声明并没有被归类为真正的语句。关于这点可查看ECMA-262的文档

1
2
3
4
5
6
7
8
9
10
11
12
13

//不推荐
if (currentUser){
  function test() {
    console.log('Nope.');
  }
}
//推荐
if (currentUser){
  var test = function test() {
    console.log('Yup.');
  }
}

• arguments 不能作为一个参数的名字， 因为这会覆盖每一个函数内的arguments对象。

  1 2 3 4 5 6 7 8 9

  //不推荐 function nope(name, options, arguments) { // ...stuff... } //推荐 function yup(name, options, args) { // ...stuff... }

属性

• 访问一个属性时，使用点的形式取值。

  1 2 3 4 5 6 7 8 9 10

  var luke = { jedi: true, age: 28 }; // 不推荐 var isJedi = luke['jedi']; // 推荐 var isJedi = luke.jedi;

• 需要一个变量访问一个属性时，使用“[]”来取值。

  1 2 3 4 5 6 7 8 9 10

  var luke = { jedi: true, age: 28 }; function getProp(prop) { return luke[prop]; } var isJedi = getProp('jedi');

变量

• 总是使用 var 来定义变量。如果不这么做将定义一个全局变量出来。我们希望避免全局命名空间的污染。

  1 2 3 4 5

  // 不推荐 superPower = new SuperPower(); // 推荐 var superPower = new SuperPower();

• 使用一个var 声明多个变量，并且每声明一个变量就换一行。

  1 2 3 4 5 6 7 8 9

  // 不推荐 var items = getItems(); var goSportsTeam = true; var dragonball = 'z'; // 推荐 var items = getItems(), goSportsTeam = true, dragonball = 'z';

• 声明多个变量时，把不赋值的变量放在后面。这样做是有好处的，如果日后你想给未赋值变量赋值的时候，可能要引用到上面已经赋值的变量。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  // 不推荐 var i, len, dragonball, items = getItems(), goSportsTeam = true; // 不推荐 var i, items = getItems(), dragonball, goSportsTeam = true, len; // 推荐 var items = getItems(), goSportsTeam = true, dragonball, length, i;

• 在一个作用域的顶部给一个变量赋值。这样有助于避开，变量声明和声明提前的分配问题。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

  // 不推荐 function() { test(); console.log('doing stuff..'); //..other stuff.. var name = getName(); if (name === 'test') { return false; } return name; } // 推荐 function() { var name = getName(); test(); console.log('doing stuff..'); //..other stuff.. if (name === 'test') { return false; } return name; } // 不推荐 function() { var name = getName(); if (!arguments.length) { return false; } return true; } // 推荐 function() { if (!arguments.length) { return false; } var name = getName(); return true; }

声明提前

• 不管你在何处给一个变量声明或赋值，javascript解析器都会事先在作用域的顶端做声明提前（Hoisting）。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  // 我们知道下面将不能正常运行（假设没有全局变量） function example() { console.log(notDefined); // => 抛出一个引用错误 } // 在引用这个变量之后，给这个变量赋值将不会抛异常，这是因为javascript解析器有声明提前。 // 注意：赋的“true”值，不会被提前。 function example() { console.log(declaredButNotAssigned); // => undefined var declaredButNotAssigned = true; } // javascript解析器,会在作用域的顶部提前声明变量。 // 用代码描述出来，其实就等同于下面这种情况。 function example() { var declaredButNotAssigned; console.log(declaredButNotAssigned); // => undefined declaredButNotAssigned = true; }

• 匿名函数表达式将该变量名做了提前声明，没有给该变量赋值函数。

  1 2 3 4 5 6 7 8 9

  function example() { console.log(anonymous); // => undefined anonymous(); // => 抛出异常，anonymous 不是一个函数 var anonymous = function() { console.log('anonymous function expression'); }; }

• 和匿名一样，有名函数表达式将该变量名做了提前声明，没有给该变量赋值函数名和函数体。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  function example() { console.log(named); // => undefined named(); // => 抛出异常， named 不是一个函数 superPower(); // => 抛出异常， superPower 没定义 var named = function superPower() { console.log('Flying'); }; } // 把函数名改成和变量名一样，也得出同样的结果。 function example() { console.log(named); // => undefined named(); // => 抛出异常， named 不是一个函数 var named = function named() { console.log('named'); }; }

• 函数声明会将函数名和函数体声明提前。

  1 2 3 4 5 6 7

  function example() { superPower(); // => Flying function superPower() { console.log('Flying'); } }

更多信息请参照Ben Cherry 的JavaScript Scoping & Hoisting

条件表达式与等式

使用 === 和 !== 代替== 和 !=

• 条件表达式 会通过 ToBoolean 来进行强制转化，而且遵循以下的规则：

  • 对象被转化为true
  • Undefined被转化为false
  • Null被转化为false
  • 布尔值被转化为相应的布尔值
  • 数字当值为+0,-0或NaN时转化为false，其他的转化为true
  • Strings类型如果为空时转化为false,否则转化为true

    1 2 3 4

    if ([0]) { // true // 因为数组是对象，对象会被转化为 true }

• 使用快捷方式

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  // 不推荐 if (name !== '') { // ...stuff... } // 推荐 if (name) { // ...stuff... } // 不推荐 if (collection.length > 0) { // ...stuff... } // 推荐 if (collection.length) { // ...stuff... }

更多的信息 请看Angus Croll的 Truth Equality and JavaScript

块

• 给多行的块，使用大括号

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  // 不推荐 if (test) return false; // 推荐 if (test) return false; // 推荐 if (test) { return false; } // 不推荐 function() { return false; } // 推荐 function() { return false; }

注释

• 使用 /**...*/ 进行多行注释。注释要包括描述、指定类型、参数值和返回值。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

  // 不推荐 // make() returns a new element // based on the passed in tag name // // @param <String> tag // @return <Element> element function make(tag) { // ...stuff... return element; } // 推荐 /** * make() returns a new element * based on the passed in tag name * * @param <String> tag * @return <Element> element */ function make(tag) { // ...stuff... return element; }

• 使用 // 进行单行注释。注释单独占一行，并写在需要注释对象的上面。在注释的上面留一个空行。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  // 不推荐 var active = true; // is current tab // 推荐 // is current tab var active = true; // 不推荐 function getType() { console.log('fetching type...'); // set the default type to 'no type' var type = this._type || 'no type'; return type; } // 推荐 function getType() { console.log('fetching type...'); // set the default type to 'no type' var type = this._type || 'no type'; return type; }

给你的代码加前缀，比如FIXME或TODO，这样有助于其他开发者可以迅速理解你指出的需要被处理的问题。
如果想更清晰一点你还可以在后面加上描述，比如: FIXME -- need to figure this out或TODO -- need to implement.

• 使用 // FIXME: 去注释问题

  1 2 3 4 5 6 7

  function Calculator() { // FIXME: shouldn't use a global here total = 0; return this; }

• 使用 // TODO: 来注释解决方法

  1 2 3 4 5 6 7

  function Calculator() { // TODO: total should be configurable by an options param this.total = 0; return this; }

空格

• 将tab键设成2个空格

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  // 不推荐 function() { ∙∙∙∙var name; } // 不推荐 function() { ∙var name; } // 推荐 function() { ∙∙var name; }

• 逗号/冒号/小括号后面留一个空格

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

  // 不推荐 function test(){ console.log('test'); } // 推荐 function test() { console.log('test'); } // 不推荐 dog.set('attr',{ age: '1 year', breed: 'Bernese Mountain Dog' }); // 推荐 dog.set('attr', { age: '1 year', breed: 'Bernese Mountain Dog' });

• 在文件的最后留一个空行

  1 2 3 4 5 6 7 8

  // 不推荐 (function(global) { // ...stuff... })(this); // 推荐 (function(global) { // ...stuff... })(this);

逗号

• 逗号不要前置

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  // 不推荐 var once , upon , aTime; // 推荐 var once, upon, aTime; // 不推荐 var hero = { firstName: 'Bob' , lastName: 'Parr' , heroName: 'Mr. Incredible' , superPower: 'strength' }; // 推荐 var hero = { firstName: 'Bob', lastName: 'Parr', heroName: 'Mr. Incredible', superPower: 'strength' };

最后一个元素不可以加逗号。这在IE6和IE7还有IE9的怪异模式下出错。