语法图(铁路图)的解析实现

使用js分析简单的数学算式

编辑器中当前内容及替换内容

gulp-riot-css中媒体选择器bug及css格式化

算法题:兔子和萝卜

原题: <img src="img/tuzi.jpg" width="400" height="200">
另外: 假如是200根萝卜结果是多少呢?假如是任意根萝卜结果是多少?

算法题:有一个数组,里面的数除了其中一个只出现一次外,其他的数都出现了两次。找出这个数。

要求时间复杂度O(n),空间复杂度O(1)

nodejs中一个文件引入另一个文件,计算新的文件位置

1
var newPath = path.join(oldFile.base, src);

javascript的数组排序函数中参数的返回值

>
arrayObject.sort(sortby)
参数 描述
sortby 可选。规定排序顺序。必须是函数。
返回值
对数组的引用。请注意,数组在原数组上进行排序,不生成副本。
说明
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

10行 JavaScript 实现文本编辑器

arguments参数是否可以更改

平时arguments和平常变量一样可以修改,修改后对应变量也会被修改。
严格模式下arguments列表修改不会报错,但是修改后arguments列表值会改变,参数中的值不会改变。另外严格模式下不能为arguments直接赋值。
1
2
3
4
5
6
7
8
9
"use strict";
function test(a){
arguments[0] = 1;
console.log(arguments[0]);
console.log(a); // 严格模式下姜维
arguments = 'test'; // 严格模式下将出错
console.log(arguments);
}
test(0);

快速排序 dev/quicksort.js

git clone时提示ssl错误

1
2
3
4
5
6
7
8
今天用百度云clone git项目时,报了以下错误:
fatal:unable to access ': SSL certificate problem: unable to get local issuer certificate
这里其实是电脑没有安装对应的ca证书,所以无法通过https连接到git服务器。
这里通过设置git的ssl验证跳过了这个错误(win下):
git config --global http.sslVerify false
之后再进行 git clone,就可以下载百度云的git项目了。

ie9 @media query 不起作用

增加meta标签在所有的meta之前

HTTP

  • response
    • setHeader
    • getHeader
    • write
    • end
  • request
    • request.url
    • request.body
    • request._body
  • header
    • ‘content-length’: ‘123’,
    • ‘content-type’: ‘text/plain’,
    • ‘connection’: ‘keep-alive’,
    • ‘host’: ‘mysite.com’,
    • ‘accept’: ‘/

#页面底端停留的办法

  • 要求:
    • 当页面内容较少时,底部在可视区底部
    • 当页面内容较多时,底部在页面底部
  • 实现原理:
    • body大小设置为整个可视区大小,页面主题高度最低为整个可视区高度,然后使用maring-bottom为负值,让底部上移

#垂直居中

  • line-height
  • 父层div位置为50%,本节点向上移动25%;
  • 两个行内元素,都设为垂直居中(当只有一个时,我们可以为其增加一个兄弟节点)

#手机开发

  • 固定位置position:fixed,而不是absolute

修改

  • 自增$inc db.doc.update({“username”:’test’},{“$inc”:{“loginTimes”:1}});
  • $set
  • $unset

查找

  • find
  • findOne
  • findById

清空数据代码

1
2
3
4
5
6
// 连接数据库
var db = mongoose.connect(config.db, function (err) {
// 清空数据库
db.connection.db.dropDatabase(function (err, result) {
}
}

原来的加载数据代码(使用mongoose-fixtures)

1
fixtures.load(reuire('../data.js'));

加载代码时,没有考虑到数据延迟问题,假如后来加载的数据的校验需要用到之前的数据,则会因为之前数据不存在而出现问题.

更新代码为

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
/**使用promise保证只有当前的数据保存成功时,才会继续下一个(因为保存卡片和文档时,需要频道数据)*/
var promise = Promise.resolve();
function saveModel(model){
promise = promise.then(function(){
return new Promise(function(resolve,reject){
model.save(function(err,data){
if(err){
console.log(err);
reject(err);
}else{
resolve();
}
});
});
});
}
gulp.task('db', ['load-all-models'], function (cb) {
// 连接测试数据库
var db = mongoose.connect(config.db, function (err) {
console.log('连接测试数据库',err);
// 清空测试数据库
db.connection.db.dropDatabase(function (err, result) {
if (err) {
throw err;
}
console.log('清空测试数据库');
console.log('加载测试数据');
for(var model in datas){
console.log('加载'+ model);
var Model = mongoose.model(model);
for(var data in datas[model]){
try{
var d = new Model(datas[model][data]);
saveModel(d);
}
catch(e){
console.log(e);
}
}
}
});
});
});

数据代码示例

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
var ObjectId = require('mongodb').ObjectID;
var md5 = require('md5');
var password = md5('123123');
var adminId = new ObjectId();
function time(){
return (new Date()).getTime();
}
exports.User = {
admin: {
_id: adminId,
email: 'admin@baidu.com',
password: password,
nickname: 'admin',
group: 'admin'
},
marry: {
_id: new ObjectId(),
email: 'marry@123.com',
password: password,
nickname: 'marry'
},
james: {
_id: new ObjectId(),
email: 'james@123.com',
password: password,
nickname: 'james'
}
};

读 css Secrets 笔记

介绍

  • 模块化和扩展性,例如采用相对高度,背景透明度
  • 相信眼睛,而不是相信数字
    • 垂直居中时,看起来总是偏下,可以向上调一下
    • 圆和矩形同样大小,看起来圆总是偏小,可以适当调大
    • 内间距上下间距比左右看起来大

背景和边框

  • 半透明边框颜色和背景颜色相同时,半透明边框不起作用:背景颜色边界 background-clip
  • 多个border: outline shadow
  • 背景位置: background-position: right 10px bottom 20px; background-origin,calc()
  • 外方内圆角: outline实现外方,border-radius实现内圆,box-shadow填充中间空白部分
  • 条纹背景: background:linear-gradient(#fb3,#58a)
  • 垂直条纹,倾斜条纹,三角格子.多套背景background-position: 0 0, 15px 15px;

有用的npm包记录

webfont相关

  • css.js:它能将 CSS 解析成语法树,并且能够较好的容错适应各种 hack 语法
  • jsdom:它能够在 NodeJS 中实现 W3C DOM API,使得我可以使用 document.querySelectorAll() 方法输入 CSS 选择器来查找 HTML 节点上的文本
  • font-optimizer:这是一个使用 Perl 编写的字体优化工具,可以高效的删除字体中指定的字符
  • ttf2eot、ttf2woff、ttf2svg:是它们完成了跨浏览器字体格式转码的工作
  • gulp-util gulp常用工具库
  • gulp-uglify 压缩js文件
  • gulp-concat 连接文件
  • gulp-sourcemaps 处理js时,生成sourcemap
  • gulp-less
  • gulp-sass
  • gulp-autoprefixer 自动补全浏览器兼容的css
  • gulp-minify-css 压缩css
  • del 删除文件夹
  • gulp-nodemon自动重启服务器
  • livereload 自动刷新页面
  • browser-sync 静态文件服务器,支持自动刷新
  • anywhere:小型静态服务器, 安装,然后使用命令行(anywhere -p 8000)在浏览器打开页面

  • sendgrid 发送邮件

    批量加载

  • require-dir加载整个文件夹

    1
    2
    var require_dir = require('require-dir');
    require_dir('./gulp-tasks', {recurse: true});
  • gulp-load-plugins 根据package自动加载gulp插件

    1
    2
    3
    4
    var plugin = require('gulp-load-plugins')({
    pattern: ['gulp-*', 'gulp.*'],
    replaceString: /\bgulp[\-.]/
    });

使用浏览器打开页面

  • gulp-shell

npm模块window下安装问题

  • gulp-sass在window下安装时需要 Visual Studio 2013 WD版本,假如不确定版本号,可以使用 –msvs_version=2013指定编译版本
  • nodegyp

前端书籍

  • Javascript
    • Javascript权威指南
    • javascript高级程序设计
  • css
    图解css3
  • 安全类
    • 白帽子讲Web安全

工程类(提高类)

科普读物

  • 浪潮之巅
  • 黑客与画家

email中html编写注意

  • 参考网站:创建坚如磐石的HTML邮件http://ued.sina.com.cn/?p=1338
  • 布局使用table标签布局
  • 间距使用td,为td设置width、height,并且在其内部添加一个div标签设置其width、height、line-height
  • td内容高度除了设置height之外,还需设置line-height
  • 小块纯色内容也可以使用td表示,设置其背景色bgcolor。
  • 使用font标签设置字体: