requirejs

  • baseUrl优先级高于data-main
  • .js结束,/开始,包含http:,https 将不使用baseUrl

config

1
2
3
4
require.config({
urlArgs:'_v='+'@@timestamp' // 添加时间戳
baseUrl:
});

r.js打包

  • 避免循环依赖
  • 避免打包:

#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除路由部分,还应能响应不同用户状态的数据。

##win7安装mean.io

  • 安装git并配置path(bower的dependence问题)
  • node npm
  • ms2012并配置全局参数npm config set msvs_version 2012 –global
  • 安装mean
  • 其他 sublime中terminal,不能执行git命令

casper使用

  • 安装phantomjs v2.0
  • 下载casperjs v1.0.4,设置casperjs\batchbin到环境变量path
  • 错误:Couldn’t find nor compute phantom.casperPath, exiting; 在bin\bootstrap.js中加上代码

    1
    2
    3
    4
    var system = require('system');
    var argsdeprecated = system.args;
    argsdeprecated.shift();
    phantom.args = argsdeprecated;
  • 输出中文乱码问题,添加代码: phantom.outputEncoding=”GBK”;

使用phantomjs进行前端测试

  • 下载文件
  • 设置执行文件到环境变量path

Hello World!

1.创建hello.js

1
2
console.log('Hello, world!');
phantom.exit(); //终止phantom程序

2.执行命令 phantomjs hello.js

下载页面并保存页面渲染图

1
2
3
4
5
6
7
8
var page = require('webpage').create();
page.open('http://example.com', function(status) {
console.log("Status: " + status);
if(status === "success") {
page.render('example.png');
}
phantom.exit();
});

下载速度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var page = require('webpage').create(),
system = require('system'),
t,address;
console.log(system.args);
if(system.args.length === 1){
console.log('Usage: loadspeed.js <some url>');
phantom.exit();
}
t = Date.now();
address = system.args[1];
page.open(address,function(status){
if(status !== 'success'){
console.log('Fail to load the address');
} else{
t = Date.now() - t;
console.log('Loading '+ system.args[1]);
console.log('loading time ' + t + 'msec.');
}
phantom.exit();
});

代码执行

在页面上执行代码需要使用evaluate函数,这是个沙箱函数,不能获取页面上的js对象.

常见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…

chrome开发者技巧

  • 快速切换文件 Ctrl+P
  • 在源代码中搜索 Ctrl+Shift+F
  • 快速跳转到指定行 Ctrl+G
  • 选择下一个匹配项 Ctrl+D
  • 在控制台选择元素 $,$$ $0-$4
  • 多个插入符 Ctrl
  • 加载新页面不清除掉console输出内容
  • 美化代码
  • 设备模式
  • 颜色选择器,改变颜色以及颜色格式
  • 强制改变元素状态
  • 可视化的dom
  • 通过workspace来编辑本地文件
  • 监听event事件,ajax,dom修改,变量修改
  • 保存调试代码sinapt

Chrome 快捷键

Chrome 快捷键

  • Ctrl+N 打开新窗口。
  • Ctrl+T 打开新标签页。
  • Ctrl+Shift+N 在隐身模式下打开新窗口。
  • 按 Ctrl+O 键,然后选择文件。 在 Google Chrome 中打开计算机中的文件。
  • 按住 Ctrl 键的同时点击链接,或用鼠标中键(或鼠标滚轮)点击链接。 在后台的新标签页中打开链接。
  • 按住 Ctrl+Shift 的同时点击链接,或按住 Shift 键并用鼠标中键(或鼠标滚轮)点击链接。 在新标签页中打开链接并切换到刚打开的标签页。
  • 按住 Shift 键的同时点击链接。 在新窗口中打开链接。
  • Ctrl+Shift+T 重新打开上次关闭的标签页。Google Chrome 可记住最近关闭的 10 个标签页。
  • 将链接拖到标签页中。 在标签页中打开链接。
  • 将链接拖到标签栏的空白区域。 在新标签页中打开链接。
  • 将标签页拖出标签栏。 在新窗口中打开标签页。
  • 将标签页从标签栏拖到现有窗口中。 在现有窗口中打开标签页。
  • 拖动标签页时按 Esc 键。 将标签页恢复到原先的位置。
  • Ctrl+1 到 Ctrl+8 切换到标签栏中指定位置编号所对应的标签页。
  • Ctrl+9 切换到最后一个标签页。
  • Ctrl+Tab 或 Ctrl+PgDown 切换到下一个标签页。
  • Ctrl+Shift+Tab 或 Ctrl+PgUp 切换到上一个标签页。
  • Alt+F4 或 Ctrl+Shift+W 关闭当前窗口。
  • Ctrl+W 或 Ctrl+F4 关闭当前标签页或弹出式窗口。
  • 用鼠标中键(或鼠标滚轮)点击标签页。 关闭所点击的标签页。
  • 右键点击或者点击并按住浏览器工具栏中的“后退”或“前进”箭头。 在新标签页中显示浏览历史记录。
  • 按 Backspace 键,或同时按 Alt 和向左箭头键。 转到当前标签页的上一页浏览历史记录。
  • 按 Shift+Backspace,或同时按 Alt 和向右箭头键。 转到当前标签页的下一页浏览历史记录。
  • 按住 Ctrl 键的同时点击工具栏中的后退箭头、前进箭头或转到按钮。或用鼠标中键(或鼠标滚轮)点击其中任一按钮。 从后台在新标签页中打开按钮所对应的目标网页。
  • 双击标签栏的空白区域。 最大化或最小化窗口。
  • Alt+Home 在当前窗口打开主页。
    Alt+R : 开启正则表达式功能
    Alt+Enter: 找到匹配目标后全部选择
    Ctrl+R:前往 method(mac下⌘R)
    Ctrl+M:跳转到对应括号
    按Ctrl+Shift+上下键,可替换行
    Ctrl+D:选择单词,重复可增加选择下一个相同的单词
    Ctrl+L:选择行,重复可依次增加选择下一行
    Ctrl+Shift+P:打开命令面板
    Ctrl+P:搜索项目中的文件(mac下⌘P),在里面输入:
    admi@auto 可以定位到相应文件夹(admin.html)下的相应方法(auto)。
    Ctrl+G:跳转到第几行
    Ctrl+W:关闭当前打开文件
    Ctrl+Shift+W:关闭所有打开文件
    Ctrl+Shift+V:粘贴并格式化
    Ctrl+Shift+L:选择多行
    Ctrl+Shift+Enter:在当前行前插入新行
    Ctrl+X:删除当前行
    Ctrl+U:软撤销,撤销光标位置
    Ctrl+J:选择标签内容
    Ctrl+F:查找内容
    Ctrl+Shift+F:查找并替换
    Ctrl+H:替换
    Ctrl+N:新建窗口
    Ctrl+K+B:开关侧栏
    Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身
    Ctrl+F2:设置/删除标记
    Ctrl+/:注释当前行
    Ctrl+Shift+/:当前位置插入注释
    Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的
    Ctrl+Shift+A:选择当前标签前后,修改标签用的
    F11:全屏
    Shift+F11:全屏免打扰模式,只编辑当前文件
    Alt+F3:选择所有相同的词
    Alt+.:闭合标签
    Alt+Shift+数字:分屏显示
    Alt+数字:切换打开第N个文件
    Shift+右键拖动:光标多不,用来更改或插入列内容
    鼠标的前进后退键可切换Tab文件
    按Ctrl,依次点击或选取,可需要编辑的多个位置
    Ctrl+shift+D: 备份多个当前行
    Ctrl+shift+T: 恢复已经关闭的标签

前端相关网址

推荐书籍

  • Javascript权威指南
  • 正则表达式必知必会
  • CSS Screct

框架

  • angular
  • react
  • riotjs
  • vuejs
  • backbone
  • avalonjs

编辑器

编译工具

调试工具

  • chrome 调试
  • ietester(过时)

测试工具

其他软件

  • Markman 图片标注工具
  • 快捷键工具WinHotKey

在线空间或者WebIDE

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

WebEditor在线编辑器

  • openWYSIWYG
  • UEdtior

Web代码编辑器

  • Codiad
  • Ecoder

Web图形编辑器

  • AIE

图形绘制

  • svg
  • canvas
  • zrender

其他软件

  • gamesalad

前端优化总结

  • 减少请求数目:合并文件

    • 合并js,css
    • 图片sprite技术
  • 减少文件大小:压缩文件

    • 压缩js,css
    • gzip
  • 缓存文件

  • css放在页面头部,js放在页面底部

  • 避免使用css表达式

  • 使用内容分发网络

  • 使用多个域名2-4个,同时下载多个文件

使用riot时遇到的坑

尽量使用数据,然后调用update更新,而不是手动修改节点结构

  • array数组展示节点,手动修改了渲染后的结构,更新节点时不起作用. 原因:手动修改使得节点和数据关联失效.

调用子模块时参数中直接使用函数.最好通过js更新数据后update,而不是在模板中使用函数。

  • 例如这种结构.,在child中的opts.html将为空,数据还未计算