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’: ‘/

常见class关键词:

  • 布局类:header, footer, container, main, content, aside, page, section
    包裹类:wrap, inner
    区块类:region, block, box
    结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
    列表类:list, item, field
    主次类:primary, secondary, sub, minor
    大小类:s, m, l, xl, large, small
    状态类:active, current, checked, hover, fail, success, warn, error, on, off
    导航类:nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
    交互类:tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
    星级类:rate, star
    分割类:group, seperate, divider
    等分类:full, half, third, quarter
    表格类:table, tr, td, cell, row
    图片类:img, thumbnail, original, album, gallery
    语言类:cn, en
    论坛类:forum, bbs, topic, post
    方向类:up, down, left, right
    其他语义类:btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…

bug

  • removeFile删除文件后文件仍然存在。。这时假如是将文件列表全部删除,可以使用uploader.reset函数

未看

  • 7.2 表单验证

模块

  • .run(function($rootScope){})
  • .controller控制器
  • filter过滤器: currency uppercase lowercase number(小数点后位数) date filter json limitTo orderBy
    表单验证 require ng-minlength ng-maxlength ng-pattern type=email type=number type=url
    表单属性 formName.inputFieldName.$pristine $dirty $valid $invalid $error
  • .directive 注册新指令 元素(E)、属性(A)、类(C)或注释(M)
  • .router路由器
  • .service服务

指令

  • ng-app
  • ng-controller
  • ng-include
  • ng-view
  • ng-repeat $index $first $middle $last $even $odd
  • ng-switch ng-switch-when on ng-switch-default
  • ng-if
  • ng-init
  • ng-bind ng-bind-template
  • ng-cloak
  • ng-model
  • ng-show
  • ng-hide
  • ng-change
  • ng-click
  • ng-form
  • ng-submit
  • ng-select
  • ng-class
  • ng-attr-(suffix)
  • ng-href
  • ng-src
  • ng-disabled
  • ng-checked
  • ng-readonly
  • ng-selected
  • ng-class
  • ng-style

系统服务

  • $parse 表达式解析
  • $interpolate 插值计算(指定作用域内变量)
  • $timeout

zrender: 轻量级的canvas类库,MVC核心封装实现图形仓库、视图渲染和交互控制

  • Stroage(M) : shape数据CURD管理
  • Painter(V) : canvase元素生命周期管理,视图渲染,绘画,更新控制
  • Handler(C) : 事件交互处理,实现完整dom事件模拟封装
  • shape : 图形实体,分而治之的图形策略,可定义扩展
  • tool : 绘画扩展相关实用方法,工具及脚手架
  • animation : 动画扩展,提供promise式的动画接口和常用缓动函数

    简单例子

    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
    require.config({
    packages: [
    {
    name: 'zrender',
    location: '../src',
    main: 'zrender'
    }
    ]
    });
    require(
    [
    "zrender",
    "zrender/animation/animation",
    "zrender/shape/Circle"
    ],
    function (zrender, Animation, CircleShape) {
    var zr = zrender.init(document.getElementById("paint"));
    var circle = new CircleShape({
    position: [100, 100],
    scale: [1, 1],
    style: {
    x: 0,
    y: 0,
    r: 50,
    brushType: "fill",
    color: 'rgba(33,222,10,0.4)',
    lineWidth: 6,
    text: 'circle',
    textPosition: 'inside'
    },
    draggable: true
    });
    zr.addShape(circle);
    zr.render();
    }
    )

storage

handle 事件交互处理,实现完整dom事件模拟封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var circle = new CircleShape({
// draggable: true,
// hoverable: false,
// clickable : true,
onmouseover: function () {
console.log('mouse over');
},
onmouseenter: function () {
/*不存在onmouseenter事件,可以根据onmouseover实现*/
console.log('onmouseenter');
},
onmouseout: function () {
console.log('mouse out', this);
},
onclick: function () {
console.log('on click');
}
});

canvas

  • 使用canvas制作动画时,注意清除之前绘制内容,不然容易影响以后绘制的内容。(产生锯齿)

编辑器

编译工具

调试工具

  • chrome 调试
  • ietester(过时)

测试工具

其他软件

  • Fiddler 路由转换工具 stave插件
  • Markman 图片标注工具
  • 快捷键工具WinHotKey
  • git管理工具 sourceTrees

前端工具库

  • webuploader 上传组件

在线空间或者WebIDE

  • sinaapp
  • c9
  • jsbin
  • jsfindle
  • coding.net
  • leancloud

WebEditor在线编辑器,所见即所得编辑器

  • Simditor(Tower开源的所见即所得的在线富文本编辑器)
  • wysihtml5
  • openWYSIWYG
  • UEdtior

Web代码编辑器

  • Codiad
  • Ecoder

Web图形编辑器

  • AIE

图形绘制

  • svg
  • canvas
  • zrender

其他软件

  • gamesalad

WebStorm

  • Ctrl+Alt+N 根据文件名查找文件
  • Alt+F1 在左侧文件树中定位到当前打开文件

PS快捷键

  • Ctrl+Shift+C 合并拷贝
  • Ctrl+N 新建文件
  • Ctrl+Shift+Alt+S 保存Web格式

#notejs开发

15.11.30

问答项目原来使用node0.12,升级node4后模块gulp-sass不能使用,重新编译也不行。。好像是visual stadio的问题

14.09.16

最近使用nodejs重写校园网模块和微信消息处理,采用mysql存储数据,jade生成静态文件,expressjs路由判断。
当把页面生成后,才发现没有办法像php、jsp脚本语言一样根据用户显示不同内容。
仔细思考,才发现原来的脚本把控制和视图混合在了一起,现在使用nodejs,没有办法实现像这样动态页面。
怎么办呢?

可以在视图中,添加javascript脚本,动态的获取页面数据,然后再将其分类显示。
这样就实现了MVC,mysql负责model数据部分,html负责View,node负责控制。
nodejs除路由部分,还应能响应不同用户状态的数据。

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标签设置字体: