├── Algorithms └── 算法.md ├── DataBase └── mongo-note.md ├── Design ├── DMMT思维导图.png ├── books.md └── design-note.md ├── Env ├── README.md ├── docker-file-note.md └── docker-note.md ├── FrontEnd ├── 3-web-designs-in-3-weeks.pdf ├── README.md ├── angularjs-note.md ├── css-note.md ├── ejs-note.md ├── emmet-note.md ├── fe-note.md ├── html-note.md ├── html5_cheatsheet.jpg ├── meteor-note.md └── sass-note.md ├── Languages ├── README.md ├── books.md ├── c-note.md ├── cpp-note.md ├── fe_skill_set.jpeg ├── js in one pic.png └── js-note.md ├── Nodejs ├── books.md ├── express-note.md ├── flash-note.md ├── lodash-note.md ├── nodejs-note.md └── srqc-nodejs.md ├── Others ├── hadoop-note.md ├── happy-note.md └── webGL-note.md ├── README.md ├── Shell ├── README.md ├── abs-note.md ├── bash-note.md ├── books.md ├── busybox-note.md ├── makefile-note.md ├── scripts │ ├── 2_2_2.sh │ ├── cleanup.sh │ ├── cleanup1.sh │ ├── cleanup2.sh │ ├── log.txt │ └── log │ │ ├── messages │ │ └── wtmp └── shell-note.md ├── Test ├── appium-note.md ├── mocha-test.md ├── monkey-note.md └── test-note.md ├── Tools ├── README.md ├── atom-note.md ├── docker-create-nodejs-mongodb-image.md ├── docker-file-note.md ├── docker-note.md ├── framer-note.md ├── git-note.md ├── gulp-note.md ├── mac-latex-note.md ├── nginx-note.md ├── pm2-note.md ├── sketch-note.md ├── sublime-note.md ├── vgod-vim-cheat-sheet-full.pdf └── vim-note.md ├── readme.sh └── tmpfile /Algorithms/算法.md: -------------------------------------------------------------------------------- 1 | # 算法4 读书笔记 2 | 3 | ## 数组倍化 4 | - 栈，通过倍化数组扩展一个事先不知道数组长度的数据结构。在内容元素少于1/4时再1/2化数组，这样可以让栈不溢出同时使用率不低于1/4。不过这种重新定义数组大小的方法比较耗时，和栈大小成正比。 5 | 6 | ## 对象游离 7 | - 栈的pop操作 例如`pop(){ return a[--N];}`会造成对象游离，java的垃圾回收机制会回收所有无法被访问的对象，但在pop操作中，被弹出的对象仍然存在数组中，但gc不会知道这一点，除非引用被覆盖，因此我们需要显式地将它置为空 `a[N] = null`。 8 | 9 | ## 并查集的三种效率不同的解法 10 | - quick-find 记录共同标示,find访问数组2次,union 线性。平方级别 11 | - quick-union 合并树，记录父节点,find最坏情况下访问线性。最好线性,最差平方级别(一根线)，深度N 12 | - 加权quick-union 总是将小树连到大树上。需要用一个数组记录每个并查集中节点的数量,最差深度为LogN -------------------------------------------------------------------------------- /DataBase/mongo-note.md: -------------------------------------------------------------------------------- 1 | title: "mongodb-start" 2 | tags: [mongodb] 3 | 4 | --- 5 | 6 | ##书籍 7 | - [mongodb权威指南](http://product.dangdang.com/23399173.html) 8 | - [深入学习mongodb](http://product.dangdang.com/22591445.html) 9 | - [mongdo小书](https://github.com/justinyhuang/the-little-mongodb-book-cn/blob/master/mongodb.md) 10 | 11 | ##指令 12 | - 启动mongodb并启动数据库,`mongod --dbpath Data/db` 13 | > $ mongodb默认的数据目录为/data/db/,需要手动创建，也可以用--dbpath参数指定db路径 14 | 15 | ## shell命令 16 | - `mongo` 进入 mongo shell, 17 | > 顺带说一句，因为我们用的是JavaScript的shell，如果您执行一个命令而忘了加上()，您看到的将是这个命令的实现而并没有执行它。知道这个，您在这么做并看到以function(...){开头的信息的时候就不会觉得惊讶了。比如说如果您输入db.help（后面没有括弧），你就将看到help命令的具体实现。 18 | 19 | - `use` 用全局命令use来切换数据库 20 | > 输入use learn。这个数据库是否存在并没有关系，我们创建第一个集合后这个learn数据库就会生成的 21 | 22 | ### db操作 23 | 操作对象`db`来执行针对当前数据库的操作 24 | - db.help() 显示db的帮助信息 25 | - db.stats() 显示数据库状态 26 | - db.getCollectionNames() 获取collection的列表 27 | > system.indexes在每个数据库中都会创建，它包含了数据库中的索引信息。 28 | 29 | ### collection操作 30 | 操作对象db.COLLECTION_NAME来执行针对某一给集合的操作 31 | - db.unicorns.help() 显示collection的帮助信息 32 | - db.unicorns.count() 显示集合中document的数量 33 | - db.unicorns.insert({...}), 如`db.unicorns.insert({name: 'Aurora', gender: 'f', weight: 450})` 34 | > 因为集合是无模式的，我们不需要专门去创建它。我们要做的只是把一个文档插入一个新的集合，这个集合就生成了。您可以像下面一样调用insert命令去插入一个文档： 35 | 36 | - db.unicorns.find() 得到集合的文档列表 37 | > 请注意，除了您在文档中输入的各个域，还有一个一个叫做_id的域。每一个文档都必须有一个独立的_id域。您可以自己创建，也可以让MongoDB为您生成这个ObjectId。大部分情况下您还是会让MongoDB为您生成ID的。默认情况下， 38 | `_id`域是被索引了的——这就是为什么会有system.indexes创建出来的原因 39 | 40 | - db.unicorns.remove({}) 删除整个集合 41 | 42 | ### 选择器 find 43 | `{field: value}`用来查找所有field等于value的文档。通过`{field1: value1, field2: value2}`的形式可以实现与操作。$lt、$lte、$gt、$gte以及$e分别表示小于、小于或等于、大于、大于或等于以及不等于。 44 | 例如: 45 | ``` 46 | db.unicorns.find({gender: 'm', weight: {$gt: 700}}) 47 | //或者 (效果并不完全一样，仅用来为了演示不同的方法) 48 | db.unicorns.find({gender: {$ne: 'f'}, weight: {$gte: 701}}) 49 | ``` 50 | 51 | $exists操作符用于匹配一个域是否存在，比如下面的命令： 52 | ``` 53 | db.unicorns.find({vampires: {$exists: false}}) 54 | ``` 55 | 56 | 如果需要或而不是与，可以用$or操作符并作用于需要进行或操作的数组： 57 | ``` 58 | db.unicorns.find({gender: 'f', $or: [{loves: 'apple'}, {loves: 'orange'}, {weight: {$lt: 500}}]}) 59 | //以上命令返回所有或者喜欢苹果，或者喜欢橙子，或者体重小于500磅的雌性独角兽。 60 | ``` 61 | 62 | loves域是一个数组。在MongoDB中数组是一级对象(first class object)。这是非常非常有用的功能。一旦用过，没有了它你可能都不知道怎么活下去。更有意思的是基于数组的选择是非常简单的：{loves: 'watermelon'}就会找到loves中有watermelon这个值的所有文档。 63 | 64 | 65 | MongoDB为_id域生成的ObjectId也是可以被选择的，就像这样： 66 | ``` 67 | db.unicorns.find({_id: ObjectId("TheObjectId")}) 68 | ``` 69 | -------------------------------------------------------------------------------- /Design/DMMT思维导图.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Design/DMMT思维导图.png -------------------------------------------------------------------------------- /Design/books.md: -------------------------------------------------------------------------------- 1 | [You Can Draw in 30 Days]() -------------------------------------------------------------------------------- /Design/design-note.md: -------------------------------------------------------------------------------- 1 | title: "UI设计学习" 2 | tags: [design] 3 | --- 4 | 5 | ##前言 6 | 在设计app界面的时候难免会涉及到UI设计方面的东西，比如要实现一个订单从产生到处理到查询的处理流程在UI上该如何比较好的组织起来。此文章本屌记录在学习设计 7 | 设计方面的知识的时候的一些记录，美工设计并非程序员主业，因此，这方面的知识以实用为主，奉行拿来主义. 8 | 9 | ##一些名词 10 | - 用户体验设计(User Experience Design , UXD),或者简称为UX(用户体验) 11 | 12 | ##来自[lucida](lucida.me/blog/archives/)的书籍推荐 13 | > 14 | 非本专业书籍 15 | 专业周边知识尽可能精炼。 16 | 对于专业周边知识，了解关键概念及指导思想即可。 17 | 不需要，也没有必要对专业周边知识进行深入了解。 18 | “Know what” is enough, “Know how” is expensive. 19 | 以我2年前编写手机应用，学习用户体验为例： 20 | 分别在现实中（身边有几个很不错的交互设计师）和线上（Quora和知乎）进行提问和搜索，得到一个书单。 21 | 按照下面的原则过滤书单： 22 | - 去掉教科书和大部头。 23 | - 去掉包含大量原理或论证的书籍。 24 | - 保留结论型书籍。 25 | - 保留指南型书籍。 26 | 总结出书单，迅速的阅读并找到关键点。 27 | - 给大家看的设计书：CRAP原则，字体与配色。 28 | - 设计心理学：心智模型，心智摩擦，最小惊讶。 29 | - 交互设计之路：为什么需要交互，交互有哪些坑。 30 | - Tapworthy：具有实际操作性的移动平台交互设计指南。 31 | 了解设计的人可能认为上面的书单过于初级——没错，它们都是结论型或指南型书籍，没有原理，也没有论证—— 32 | 但这正是对于我这样的非专业者所需要的书籍：我不需要知道这些知识是怎么来的，知道怎么用足矣。 33 | 此外，受价值驱动，而非兴趣——大多数情况下兴趣只是把自己脱离当前困境的接口。 34 | 35 | 这里小小的加一些自己购买的书,关于用户体验: 36 | - **[简约至上：交互设计四策略](http://product.dangdang.com/21009709.html)** 37 | - **[点石成金-访客至上的网页设计秘笈](http://product.dangdang.com/23611791.html)** 38 | 39 | ##设计网站 40 | - **[Dribbble](https://dribbble.com/)** 41 | > $这里聚集了世界上最优秀的GUI设计师,严重推荐 42 | - **[花瓣网](http://huaban.com/)** 43 | > $ 经常用此工具搜集整理图片，此网站上有大量设计方面的图片，值得常去看看,此外[我的花瓣](http://huaban.com/f7iyisadup/) 44 | - **[design-seeds](http://design-seeds.com/)** 45 | > $ 丰富的配色 46 | -- **[techandall](http://www.techandall.com/)** `recommanded` 47 | > $ 国外的web设计师网站 48 | 49 | ##sketch学习 50 | 工欲善其事，必先利其器，在mac上sketch是很好用的软件，号称花最少的时间就能上手的绘图工具，虽然是收费的，不过学生党可以选择破解版，以后赚钱了再买。 51 | 知乎上有[热心的大大](http://www.zhihu.com/question/23421455)创建了[sketch中文网](http://sketchcn.com/)和[sketch中文社区](http://community.sketchcn.com/?/explore/) 52 | 下面整理一下资源，基本都在知乎的问题上，按顺序学习效果更佳，我们并不需要专业搞设计，学习下面的应该就足够了。 53 | - **[Pieter Omvlee](https://www.youtube.com/user/pieteromvlee)** 54 | > $ Youtube 上的sketch基础教学视频 55 | - **[Sketch 3 中文用户手册](http://sketchcn.com/sketch-chinese-user-manual.html)** 56 | > $ 一字不拉的看完 57 | - **[sketchappsources](sketchappsources.com)** 58 | > $ 看看人家的文件，是怎么管理图层，怎么使用一些工具，怎么实现一些效果 59 | - **[Teehan+Lax - Defining Experience](http://www.teehanlax.com/tools/iphone-sketch-app/)** 60 | > $ 大名鼎鼎的 Teenhan+lax 创作的iOS 7 GUI 套件 61 | - **[brilliantsketch](http://brilliantsketch.com/)** 62 | > $ Dribbble 上一位印尼设计师的作品，有资源，有技巧 63 | - **[設計師自學完全手冊，讓你從零基礎到成為專業設計師](http://buzzorange.com/techorange/2013/10/01/get-a-job-as-a-designer-without-going-to-design-school/)** 64 | > $ 作者邊上班邊自學了六個月的設計，最後成功在一間很棒的新創公司 Exec 找到工作。 65 | - **[Awesome Sketch Plugins](http://awesome-sket.ch/)** 66 | > $ 这里有一些很有用的插件。推荐两个吧，一个是Measure；一个是Content generator 。提高效率百倍，谁用谁知道：） 67 | - **[Sketch 插件大集合 —— Using Sketch Like A Boss](http://www.sketchcn.com/sketch-plugins.html)** 68 | > $ 匡雪亭推荐的sketch插件，和上面互补一下效果更佳 69 | - **[sketchactive](http://www.aegeank.com/sketchactive/)** 70 | > $ 上面那位大大设计的图标 71 | 72 | 更多进阶技巧博客参考上面的知乎，想要知道作者的自学之路?[戳这里](http://www.aegeank.com/). 73 | -------------------------------------------------------------------------------- /Env/README.md: -------------------------------------------------------------------------------- 1 | # 构建开发环境 2 | 3 | ## 开发环境 4 | - Docker - 轻量级虚拟环境 5 | - MEAN - Javascript 一站式开发框架 6 | - Vagrant - Vagrant 是一款用来构建虚拟开发环境的工具 7 | 8 | 9 | ## 构建一个Web项目可能需要的框架和代码 10 | 11 | ### 前端框架 12 | - Angualarjs 13 | - Reactjs 14 | - Bootstrap 15 | - Jquery 16 | - ... 17 | 18 | ### 后端框架 19 | - Nodejs 20 | - express 21 | 22 | ### 数据库 23 | - Mongodb 24 | - Redis 25 | 26 | ### 代码构建 27 | - Gulp 推荐 28 | 29 | ### 测试 30 | - mocha 31 | - chai 32 | - JSCover 33 | - ... 34 | -------------------------------------------------------------------------------- /Env/docker-file-note.md: -------------------------------------------------------------------------------- 1 | title: "创建Dockerfile" 2 | date: 2015-09-16 14:07:19 3 | categories: [dev] 4 | tags: [docker] 5 | --- 6 | 7 | > 本篇收集整理关于创建Dockerfile的相关知识 8 | 9 | 10 | 11 | ## Dockerfile命令 12 | 13 | ### FROM 14 | 设置基础镜像 15 | `FROM ubuntu:14.10` 16 | 17 | ### MAINTAINER 18 | 设置维护者信息 19 | `MAINTAINER rdmclin2 "rdmclin2@gmail.com"` 20 | 21 | ### ENV 22 | 指定环境变量 23 | `ENV NODE_VERSION 1.20.1` 24 | 25 | ### WORKDIR 26 | 设置工作目录 27 | `WORKDIR /srv/hello` 28 | 29 | ### RUN 30 | 运行命令 31 | `RUN apt-get update` 32 | 33 | ### ADD COPY 34 | 将Dockerfile所在目录中的文件添加至镜像的目录中 35 | `ADD . /srv/hello` 36 | 37 | 和COPY相比ADD 多了2个功能, 下载URL和解压. 其他都一样. 38 | 如果你不希望压缩文件拷贝到container后会被解压的话, 那么使用COPY. 39 | 如果需要自动下载URL并拷贝到container的话, 请使用ADD. 40 | 41 | ### EXPOSE 42 | 暴露端口 43 | `EXPOSE 3001` 44 | 45 | ### CMD 46 | 设置启动时默认运行命令 47 | `CMD ["nodejs”, “/srv/hello/index"]` 48 | 49 | ### VOLUME 50 | VOLUME指令用于在容器内创建一个或多个卷 51 | `VOLUME ["路径"]` 52 | 53 | ### USER 54 | USER指令用于容器内运行RUN指令或CMD指令的用户。例如，在构建一个nginx镜像时，你希望最后运行nginx的用户为nginx，就可以在CMD ["nginx"]之前将用户设置为nginx。 55 | 如果在运行docker run命令时设置了-u 用户名参数，那么将覆盖USER指令设置的用户。 56 | 57 | ### ONBUILD 58 | ONBUILD指令用于设置一些指令，当本镜像作为基础镜像被其他Dockerfile用FROM指令引用时，在所有其他指令执行之前先执行这些指令。 59 | 60 | ##技巧 61 | ### 用bash替换默认的sh，避免不支持source等指令 62 | ``` 63 | RUN rm /bin/sh && ln -s /bin/bash /bin/sh 64 | ``` 65 | 66 | ## 示例Dockerfile ,boot2docker 67 | ``` 68 | FROM debian:wheezy 69 | MAINTAINER Steeve Morin "steeve.morin@gmail.com" 70 | 71 | RUN apt-get update && apt-get -y install unzip \ 72 | xz-utils \ 73 | curl \ 74 | bc \ 75 | git \ 76 | build-essential \ 77 | cpio \ 78 | gcc-multilib libc6-i386 libc6-dev-i386 \ 79 | kmod \ 80 | squashfs-tools \ 81 | genisoimage \ 82 | xorriso \ 83 | syslinux \ 84 | automake \ 85 | pkg-config 86 | 87 | ENV KERNEL_VERSION 3.16.1 88 | ENV AUFS_BRANCH aufs3.16 89 | 90 | # Fetch the kernel sources 91 | RUN curl --retry 10 https://www.kernel.org/pub/linux/kernel/v3.x/linux-$KERNEL_VERSION.tar.xz | tar -C / -xJ && \ 92 | mv /linux-$KERNEL_VERSION /linux-kernel 93 | 94 | # Download AUFS and apply patches and files, then remove it 95 | RUN git clone -b $AUFS_BRANCH --depth 1 git://git.code.sf.net/p/aufs/aufs3-standalone && \ 96 | cd aufs3-standalone && \ 97 | cd /linux-kernel && \ 98 | cp -r /aufs3-standalone/Documentation /linux-kernel && \ 99 | cp -r /aufs3-standalone/fs /linux-kernel && \ 100 | cp -r /aufs3-standalone/include/uapi/linux/aufs_type.h /linux-kernel/include/uapi/linux/ &&\ 101 | for patch in aufs3-kbuild aufs3-base aufs3-mmap aufs3-standalone aufs3-loopback; do \ 102 | patch -p1 < /aufs3-standalone/$patch.patch; \ 103 | done 104 | 105 | COPY kernel_config /linux-kernel/.config 106 | 107 | RUN jobs=$(nproc); \ 108 | cd /linux-kernel && \ 109 | make -j ${jobs} oldconfig && \ 110 | make -j ${jobs} bzImage && \ 111 | make -j ${jobs} modules 112 | 113 | # The post kernel build process 114 | 115 | ENV ROOTFS /rootfs 116 | ENV TCL_REPO_BASE http://tinycorelinux.net/5.x/x86 117 | ENV TCZ_DEPS iptables \ 118 | iproute2 \ 119 | openssh openssl-1.0.0 \ 120 | tar \ 121 | gcc_libs \ 122 | acpid \ 123 | xz liblzma \ 124 | git expat2 libiconv libidn libgpg-error libgcrypt libssh2 \ 125 | nfs-utils tcp_wrappers portmap rpcbind libtirpc \ 126 | curl ntpclient 127 | 128 | # Make the ROOTFS 129 | RUN mkdir -p $ROOTFS 130 | 131 | # Install the kernel modules in $ROOTFS 132 | RUN cd /linux-kernel && \ 133 | make INSTALL_MOD_PATH=$ROOTFS modules_install firmware_install 134 | 135 | # Remove useless kernel modules, based on unclejack/debian2docker 136 | RUN cd $ROOTFS/lib/modules && \ 137 | rm -rf ./*/kernel/sound/* && \ 138 | rm -rf ./*/kernel/drivers/gpu/* && \ 139 | rm -rf ./*/kernel/drivers/infiniband/* && \ 140 | rm -rf ./*/kernel/drivers/isdn/* && \ 141 | rm -rf ./*/kernel/drivers/media/* && \ 142 | rm -rf ./*/kernel/drivers/staging/lustre/* && \ 143 | rm -rf ./*/kernel/drivers/staging/comedi/* && \ 144 | rm -rf ./*/kernel/fs/ocfs2/* && \ 145 | rm -rf ./*/kernel/net/bluetooth/* && \ 146 | rm -rf ./*/kernel/net/mac80211/* && \ 147 | rm -rf ./*/kernel/net/wireless/* 148 | 149 | # Install libcap 150 | RUN curl -L ftp://ftp.de.debian.org/debian/pool/main/libc/libcap2/libcap2_2.22.orig.tar.gz | tar -C / -xz && \ 151 | cd /libcap-2.22 && \ 152 | sed -i 's/LIBATTR := yes/LIBATTR := no/' Make.Rules && \ 153 | sed -i 's/\(^CFLAGS := .*\)/\1 -m32/' Make.Rules && \ 154 | make && \ 155 | mkdir -p output && \ 156 | make prefix=`pwd`/output install && \ 157 | mkdir -p $ROOTFS/usr/local/lib && \ 158 | cp -av `pwd`/output/lib64/* $ROOTFS/usr/local/lib 159 | 160 | # Make sure the kernel headers are installed for aufs-util, and then build it 161 | RUN cd /linux-kernel && \ 162 | make INSTALL_HDR_PATH=/tmp/kheaders headers_install && \ 163 | cd / && \ 164 | git clone git://git.code.sf.net/p/aufs/aufs-util && \ 165 | cd /aufs-util && \ 166 | git checkout aufs3.9 && \ 167 | CPPFLAGS="-m32 -I/tmp/kheaders/include" CLFAGS=$CPPFLAGS LDFLAGS=$CPPFLAGS make && \ 168 | DESTDIR=$ROOTFS make install && \ 169 | rm -rf /tmp/kheaders 170 | 171 | # Download the rootfs, don't unpack it though: 172 | RUN curl -L -o /tcl_rootfs.gz $TCL_REPO_BASE/release/distribution_files/rootfs.gz 173 | 174 | # Install the TCZ dependencies 175 | RUN for dep in $TCZ_DEPS; do \ 176 | echo "Download $TCL_REPO_BASE/tcz/$dep.tcz" &&\ 177 | curl -L -o /tmp/$dep.tcz $TCL_REPO_BASE/tcz/$dep.tcz && \ 178 | unsquashfs -f -d $ROOTFS /tmp/$dep.tcz && \ 179 | rm -f /tmp/$dep.tcz ;\ 180 | done 181 | 182 | COPY VERSION $ROOTFS/etc/version 183 | 184 | # Get the Docker version that matches our boot2docker version 185 | # Note: `docker version` returns non-true when there is no server to ask 186 | RUN curl -L -o $ROOTFS/usr/local/bin/docker https://get.docker.io/builds/Linux/x86_64/docker-$(cat $ROOTFS/etc/version) && \ 187 | chmod +x $ROOTFS/usr/local/bin/docker && \ 188 | { $ROOTFS/usr/local/bin/docker version || true; } 189 | 190 | # get generate_cert 191 | RUN curl -L -o $ROOTFS/usr/local/bin/generate_cert https://github.com/SvenDowideit/generate_cert/releases/download/0.1/generate_cert-0.1-linux-386/ && \ 192 | chmod +x $ROOTFS/usr/local/bin/generate_cert 193 | 194 | # Get the git versioning info 195 | COPY .git /git/.git 196 | RUN cd /git && \ 197 | GIT_BRANCH=$(git rev-parse --abbrev-ref HEAD) && \ 198 | GITSHA1=$(git rev-parse --short HEAD) && \ 199 | DATE=$(date) && \ 200 | echo "${GIT_BRANCH} : ${GITSHA1} - ${DATE}" > $ROOTFS/etc/boot2docker 201 | 202 | COPY rootfs/isolinux /isolinux 203 | 204 | # Copy our custom rootfs 205 | COPY rootfs/rootfs $ROOTFS 206 | 207 | # These steps can only be run once, so can't be in make_iso.sh (which can be run in chained Dockerfiles) 208 | # see https://github.com/boot2docker/boot2docker/blob/master/doc/BUILD.md 209 | RUN \ 210 | # Make sure init scripts are executable && \ 211 | find $ROOTFS/etc/rc.d/ $ROOTFS/usr/local/etc/init.d/ -exec chmod +x '{}' ';' && \ 212 | # Download Tiny Core Linux rootfs && \ 213 | ( cd $ROOTFS && zcat /tcl_rootfs.gz | cpio -f -i -H newc -d --no-absolute-filenames ) && \ 214 | # Change MOTD && \ 215 | mv $ROOTFS/usr/local/etc/motd $ROOTFS/etc/motd && \ 216 | # Make sure we have the correct bootsync && \ 217 | mv $ROOTFS/boot*.sh $ROOTFS/opt/ && \ 218 | chmod +x $ROOTFS/opt/*.sh && \ 219 | # Make sure we have the correct shutdown && \ 220 | mv $ROOTFS/shutdown.sh $ROOTFS/opt/shutdown.sh && \ 221 | chmod +x $ROOTFS/opt/shutdown.sh && \ 222 | # Add serial console && \ 223 | echo "#!/bin/sh" > $ROOTFS/usr/local/bin/autologin && \ 224 | echo "/bin/login -f docker" >> $ROOTFS/usr/local/bin/autologin && \ 225 | chmod 755 $ROOTFS/usr/local/bin/autologin && \ 226 | echo 'ttyS0:2345:respawn:/sbin/getty -l /usr/local/bin/autologin 9600 ttyS0 vt100' >> $ROOTFS/etc/inittab && \ 227 | # fix su - && \ 228 | echo root > $ROOTFS/etc/sysconfig/superuser 229 | 230 | 231 | COPY rootfs/make_iso.sh / 232 | RUN /make_iso.sh 233 | CMD ["cat", "boot2docker.iso"] 234 | ``` 235 | -------------------------------------------------------------------------------- /Env/docker-note.md: -------------------------------------------------------------------------------- 1 | title: "Docker 学习笔记" 2 | date: 2015-06-09 20:20:10 3 | categories: dev 4 | tags: docker 5 | 6 | --- 7 | ##前言 8 | 本篇为学习使用docker过程中的一些记录，学习docker的原因是希望使用docker在服务器上自动化部署本地编写的服务端程序。本文为学习笔记型文章，方便快速查阅，关于docker的安装等内容请移步[官网](docker.com),想系统的学习docker可以看dockerpool出的[书](http://dockerpool.com/static/books/docker_practice)。 9 | PS:下文的使用环境为macos 10 | 11 | ## 比较好的教程 12 | - http://segmentfault.com/a/1190000000366923 13 | 14 | 15 | 16 | 17 | ##常用命令 18 | 19 | - 获取镜像`docker pull`,如 20 | ``` 21 | $ docker pull ubuntu:12.04 22 | Pulling repository ubuntu 23 | ab8e2728644c: Pulling dependent layers 24 | 511136ea3c5a: Download complete 25 | 5f0ffaa9455e: Download complete 26 | a300658979be: Download complete 27 | 904483ae0c30: Download complete 28 | ffdaafd1ca50: Download complete 29 | d047ae21eeaf: Download complete 30 | ``` 31 | 从 Docker Hub 仓库下载一个 Ubuntu 12.04 操作系统的镜像 32 | 33 | - 列出本地镜像`docker images`,如 34 | ``` 35 | $ docker images 36 | REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE 37 | nginx latest a785ba7493fd 12 days ago 132.9 MB 38 | hello-world latest 91c95931e552 7 weeks ago 910 B 39 | ``` 40 | 41 | 42 | - Mac环境下启动docker `boot2docker start` 43 | mac下需要开启一个虚拟机，和其他linux系统不同 44 | 45 | - 列出已有的容器 `docker ps` ,加参数'-a'列出所有镜像 46 | 47 | - 查看boot2docker状态 `boot2docker status` 48 | 49 | - 启动一个容器并运行一个镜像 如：`docker run -d -P --name web nginx` 50 | -d :让容器在命令完成后在后台继续运行 51 | －P :The -P flag publishes exposed ports from the container to your local host; this lets you access them from your Mac. 52 | 53 | - 查看容器端口`docker port web`,如: 54 | ``` 55 | $ docker port web 56 | 443/tcp -> 0.0.0.0:32770 57 | 80/tcp -> 0.0.0.0:32771 58 | ``` 59 | 容器端口80映射到host端口32771 60 | 61 | - 查看VM的ip地址 `boot2docker ip` 62 | 63 | - 在网页中访问应用的地址为 `$VM ip地址 /host port`，如: 64 | http://192.168.59.103:32771 65 | 66 | - 停止容器 `docker stop`,如: 67 | ``` 68 | docker stop web 69 | ``` 70 | stop container name / container id 71 | 72 | - 删除容器 `docker rm`,如: 73 | ``` 74 | docker rm web 75 | ``` 76 | rm container name / container id 77 | 78 | - 从dockerfile中构建镜像`docker build` 如: 79 | ``` 80 | # -t 镜像的名称 81 | # --rm 构建成功后，删除临时镜像（每执行一行 Dockerfile 中的命令，就会创建一个临时镜像） 82 | # “.” 是 Dockerfile 所在的路径（当前目录）, 也可以替换为一个具体的 Dockerfile 的路径。 83 | docker build -t="ouruser/sinatra:v2" . 84 | 或 docker build --rm -t ouruser/sinatra:v2 . 85 | ``` 86 | 87 | - 推送到dockerhub `docker push` 如: 88 | ``` 89 | docker push user/sinatra 90 | ``` 91 | 注意创建和推送时把user替换成自己的用户名 92 | 93 | - 进入容器控制台 `docker attach`如: 94 | ``` 95 | docker attach name 96 | ``` 97 | 按两次回车进入，按ctrl+p+q退出(按住ctrl，先按p再按q) 98 | 99 | - 查看容器信息 `docker inspect` 如: 100 | ``` 101 | docker inspect name 102 | ``` 103 | 104 | - 将本地文件挂载到container中,`-v` 105 | ``` 106 | docker run -v /data:/mnt -i -t rdmclin2/node /bin/bash 107 | ``` 108 | 例如将data文件夹挂载到container中的mnt文件夹中，可以在mnt文件夹中查看，这个文件是共享的，所以两边的操作都会互相看到。 109 | 将mnt的文件拷贝到container中即可。 110 | 111 | - 启动容器的终端 112 | ``` 113 | docker run -t -i ouruser/sinatra:v2 /bin/bash 114 | ``` 115 | 116 | - 提交修改过的container创建为image,`docker commit` 117 | ``` 118 | docker commit -m "Added app file and do npm insall" -a "xxxx" 6f878669e0d7 rdmclin2/node 119 | ``` 120 | `-m`为信息，`－a`为用户信息。后面的id胃container的id 121 | 122 | - 指定端口运行image `-p`,如: 123 | ``` 124 | docker run -p 49160:8080 -d /centos-node-hello 125 | ``` 126 | 在docker run 后面追加-d=true或者-d，则containter将会运行在后台模式(Detached mode) 127 | 128 | - 重启一个停止的容器 `docker restart`，如: 129 | ``` 130 | sudo docker restart containerName 131 | ``` 132 | 133 | - 如何编写Dockerfile ? 134 | > $ [看这个](https://github.com/zhangpeihao/LearningDocker/blob/master/manuscript/04-WriteDockerfile.md) 135 | 136 | - 停止并删除所有container 137 | ``` 138 | docker stop $(docker ps -a -q) 139 | docker rm $(docker ps -a -q) 140 | ``` 141 | 142 | - 批量删除所有的镜像 143 | ``` 144 | docker rmi $(docker images -q --filter "dangling=true") 145 | ``` 146 | 147 | --- 148 | 149 | 257 | -------------------------------------------------------------------------------- /FrontEnd/3-web-designs-in-3-weeks.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/FrontEnd/3-web-designs-in-3-weeks.pdf -------------------------------------------------------------------------------- /FrontEnd/README.md: -------------------------------------------------------------------------------- 1 | 2 | ## 前端知识汇总 3 | -------------------------------------------------------------------------------- /FrontEnd/angularjs-note.md: -------------------------------------------------------------------------------- 1 | title: "angularjs study" 2 | tags: [angularjs] 3 | 4 | --- 5 | 6 | ##directive指令 7 | - ng-app : 告诉Angular应该管理页面中的哪一块 8 | - $scope : 进行数据绑定的上下文对象 9 | - ng-controller : 指定控制器监视视图中的某一部分 10 | - ng-model: 把输入数据绑定到模型中的一部分属性上 11 | - ng-bind 与双大括号 : 在任何地方使用并刷新文本 12 | - ng-change : 指定函数，一旦用户修改了输入则调用 13 | - $watch : 监视一个表达式，当表达式发生变化时调用一个回调函数 14 | - ng-submit : 在form元素上使用指定一个函数，在提交的时候执行，其自动阻止浏览器执行默认的POST操作 15 | - ng-click : 用户点击一个元素的时候进行响应 16 | - ng-dbclick : 用户双击一个元素的时候进行响应 17 | - ng-repeat : 创建一组元素的多份拷贝 18 | - ng-show : 控制元素是否显示 19 | 20 | ##angular-ui/ui-router 21 | - stateManager 22 | -------------------------------------------------------------------------------- /FrontEnd/css-note.md: -------------------------------------------------------------------------------- 1 | title: "Head First HTML 与 CSS》读书笔记之CSS篇" 2 | date: 2015-08-20 08:46:18 3 | categories: web 4 | tags: [css] 5 | --- 6 | 7 | > 本文为阅读《Head First HTML 与 CSS》的css部分的读书笔记，方便回顾书上的知识，另一篇为[Head First HTML 与 CSS》读书笔记之HTML篇](http://mclspace.com/2015/08/19/html-note/) 8 | 9 | 10 | 11 | --- 12 | 13 | # 基本 14 | 15 | ## 常识与实践 16 | - css的每一个语句包括一个场所，以及这个场所的一个属性，还要应用到这个属性一个样式,一个典型的css规则如下: 17 | ``` 18 | p { // 需要增加样式的元素: p,这称为选择器(selector),匹配页面中的所有p元素 19 | background-color: red; //背景色为红色 格式: < 属性:值; > 20 | border: 1px solid gray; //边框: 1像素,实线,灰色 21 | } 22 | ``` 23 | - css 的注释: `/* */` 24 | - [css验证工具](http://jigsaw.w3.org/css-validator/),你还可以把验证图标放到你的web页面中 25 | 26 | --- 27 | 28 | ## 链接方式 29 | 30 | ### 基本 31 | 最基本的方式就是直接在html文件中指定元素样式，这种方式不推荐，因为将表现层和结构层混起来了 32 | ``` 33 | "style="background-image:url({{user.avatar}})" 34 | ``` 35 | 36 | ### 内部链接 37 | 要为html直接增加css样式，需要在元素中增加开始和结束style标记，css规则放在里面 38 | ``` 39 | 44 | ``` 45 | 46 | ### css文件外置 47 | 另一种方式将css文件外置，如style.css,作为样式表(stylesheets),然后从html众创建一个到这个文件的外部链接,用元素,用外部样式表的好处是要修改整个网站的样式，只要进入这个样式表，对css进行几处修改即可。如: 48 | ``` 49 | 50 | #放到元素中,在html5中不再需要type这个属性(可选),rel(relation)指定html与所链接文件间的关系,这里指我们要链接到一个样式表 51 | #link是一个void元素 52 | ``` 53 | 54 | --- 55 | 56 | ## 多样式表 57 | 使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式，要修改样式，链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式,如下所示: 58 | ``` 59 | //总公司样式 60 | //部门对总公司的样式做了一些补充，甚至可以覆盖公司的样式 61 | //西雅图休闲室对样式表做了自己的调整 62 | ``` 63 | 64 | --- 65 | 66 | 67 | 68 | ## 简写 69 | css属性太多，能不能不费吹灰之力就指定这些属性呢？可以把同一属性的值结合起来写成一句,即简写。 70 | 71 | ### 简写格式 72 | #### `padding` 73 | `padding: 0px 40px 30px 20px;`,顺序是上右下左,顺时针有木有,如果都相同可以用`padding: 20px;` 74 | ``` 75 | padding-top: 0px; 76 | padding-right: 40px; 77 | padding-bottom:30px; 78 | padding-left: 20px; 79 | ``` 80 | #### `margin` 81 | 上面的padding格式同样对margin也适用,还有另一种方法,如果上下一样，左右一致,可以这样写:`margin: 0px 20px`,前面指定上下，后面指定左右。 82 | 83 | #### `border` 84 | 边框属性简写 `border: thin solid #007e73;`,可以用你喜欢的任何顺序。 85 | 86 | #### `background` 87 | 背景简写 `background: white url(images/cocktail.gif) repeat-x;`，同样顺序随便 88 | 89 | #### `字体` 90 | 字体简写的格式稍微复杂一些: 91 | ``` 92 | font : font-style font-variant font-weight font-size/line-height font-family 93 | ``` 94 | - font的属性中`font-size`必须有 95 | - `font-size`前的属性是可选的，组合任意，不过必须出现在font-size之前 96 | - `line-height`是可选的，只要在`font-size`后加/然后指定行高即可 97 | - `font-family`名之间要使用逗号分隔 98 | - 如: `font : small/1.6em Verdana, Helvetica, Arial,sans-serif;` 99 | 100 | ###简写的优劣 101 | - 不一定要用简写形式，有些人觉得长形式更可读。 102 | - 简写的好处: 缩写css文件大小，输入更快。 103 | - 简写的不足: 如果存在问题，或者顺序有误，比较难调试 104 | - 简写记起来复杂，可以用参考手册 105 | 106 | ---- 107 | 108 | # 选择 109 | 110 | ## 子孙选择器 111 | 父元素和子孙元素名之间有一个空格,子孙选择器会选择所有子孙，包括这个元素中嵌套的所有,不管嵌套多深,例如 112 | ``` 113 | #elixirs h2 {//选择elixirs子孙的所有h2 114 | color: black; 115 | } 116 | ``` 117 | 118 | ### 直接孩子 119 | 如果要选择直接的孩子,用> 120 | ``` 121 | #elixirs>h2 {//选择elixirs的直接孩子h2 122 | color: black; 123 | } 124 | ``` 125 | 126 | ### 复杂选择 127 | 更复杂的选择,方法还是一样 128 | ``` 129 | #elixirs blockquote h2 {//选择elixirs中的blockquote中的h2元素 130 | color: blue; 131 | } 132 | ``` 133 | 134 | --- 135 | 136 | ## 规则添加 137 | - 要为多个元素编写一个规则，只需要在选择器之间加上逗号，如 "h1,h2"。 138 | ``` 139 | h1,h2 {// 多个选择器 140 | font-family: sans-serif; 141 | color: gray; 142 | } 143 | ``` 144 | - 元素可以指定多次规则,例如我们想给h1添加下边框，但是不想给h2页也加上，也不想分解上面的规则，可以给h1再增加一个属性: 145 | ``` 146 | h1,h2 { 147 | font-family: sans-serif; 148 | color: gray; 149 | } 150 | h1{ 151 | border-bottom: 1px solid black; 152 | } 153 | ``` 154 | - 把元素的所有共同样式归组在一起(如果改变，只需要在一个规则中修改)，然后把一个元素特定的样式写在另一个规则中. 155 | 156 | --- 157 | 158 | ## 类 159 | 当我们用选择器选择元素使用一个规则时,会对所有该元素应用这个样式，所以如何单独地选择这些元素呢?这里就需要类class,class可以定义一类元素，对属于该类的所有元素应用样式.要将一个元素加入一个类，只需要增加属性"class",并提供类名,如"greentea": 160 | ``` 161 |

162 | ... 163 |

164 | ``` 165 | 166 | ### 类元素选择器 167 | 先选择这个类中的元素,再用"."指定一个类,最后是类名,如: 168 | ``` 169 | p.greentea { 170 | color: green; 171 | } 172 | ``` 173 | 174 | ### 添加类元素 175 | 如果想对所有`
`也做同样的处理，可以: 176 | ``` 177 | blockquote.greentea,p.greentea { 178 | color: green; 179 | } 180 |
`,`

`,`

`,`

`和`

`都增加到greentea呢？要对类中的所有元素都用同一样式可以用: 185 | ``` 186 | .greentea{ 187 | color: green; 188 | } 189 | /*省略所有元素名,只有一个点,则会应用到所有成员*/ 190 | ``` 191 | 192 | ### 多类元素 193 | 元素可以有多个类,例如: 194 | ``` 195 | 220 | ``` 221 | 222 | ### 选择元素 223 | 用id选择一个元素,需要在id前面使用一个#字符(类是[.]),id选择器只与页面中的一个元素匹配 224 | ``` 225 | #footer{ 226 | color: red; 227 | }//选择id为footer的任意元素 228 | ``` 229 | ``` 230 | p#footer{ 231 | color: red; 232 | }//选择id为footer的

元素 233 | ``` 234 | 235 | ### 实践建议 236 | - 在复杂页面中，可能有些页面把id指定给一个段落，有些页面分配给了一个列表，那么需要为该id定义多个规则,根据页面上不同类型的元素应用不同的规则,如p#someid和blockquote#someid 237 | - 类名要以一个字母开头，不过id名可以以一个数字或字母开头，但它们都不能有空格 238 | 239 | --- 240 | 241 | ## 继承 242 | 243 | ### 样式继承 244 | - 为p选择器增加font-family属性时，也会影响到`

`元素中内部元素的字体。 245 | - 元素能够从他们的父元素继承样式。 246 | - 不是所有的样式都能继承,只有一部分,如font-family。 247 | - 并不是所有元素都会继承，如img没有文本，所以不会受到字体影响。 248 | - 继承的样式可以覆盖,例如给``提供一个特定的规则来覆盖body中指定font-family,浏览器会使用更特定的规则： 249 | ``` 250 | body { 251 | font-family : sans-serif; 252 | } 253 | 254 | em { 255 | font-family: serif; 256 | } 257 | ``` 258 | 259 | ### 那哪些元素能够继承 260 | - 如果样式会影响你的文本外观，那么所有这些样式都能继承,如color,font-family,font-size,font-weight,font-style等和字体相关的属性 261 | - 其他属性不能继承，如边框，因为如果body元素有边框，不表示你希望body内的所有元素都有边框 262 | - 根据常识确定，或者试试看 263 | 264 | --- 265 | 266 | ### 层叠 267 | - 浏览器会用多个样式表组织样式，首先是你的ccs所有样式表，其次是用户创建的样式，最后浏览器本身会维护一组默认样式 268 | - 给定一组样式表中的一组样式，浏览器会以层叠的方式确定具体使用哪个样式 269 | - 读者可以在他的css属性上加上!important，那他就能覆盖你的样式 270 | - 浏览器需要选择最特定的规则进行显示 271 | - 特定性由3个数开始000： 272 | - 第一位: 这个选择器包含id吗？每个id加1分 273 | - 第二位: 这个选择器包含类或伪类吗？每个类和伪类加一分 274 | - 第三位: 这个选择器包含元素名吗？一个元素名加一分 275 | - 把它们读作真正的数,100>010>001，例如h1.greentea的特定性值为011,ol li p的特定性为003。 276 | - 浏览器首先收集样式表找到所有的声明,然后对所有匹配的规则按作者，读者和浏览器排序，再按特定性对组内的所有声明分别排序， 277 | 最后对于冲突的规则，按照他们在各个样式表中出现的顺序排序，如果两个规则得分相同，最后出现的规则胜出。 278 | 279 | --- 280 | 281 | ## 媒体查询 282 | 283 | ### link媒体查询 284 | 你可能想针对将要显示页面的设备调整页面的样式，可以用media属性,在link元素中增加这个属性.如 285 | ``` 286 | 287 | 288 | # 其他属性包括min-device-width,max-device-width,orientation(横向landscape,纵向portrait) 289 | ``` 290 | 291 | ### css媒体查询 292 | 可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如 293 | ``` 294 | @media screen and (min-device-width: 481px){//当设备屏幕宽度大于480px时使用 295 | #guarantee { 296 | margin-right: 250px; 297 | } 298 | } 299 | @media screen and (max-device-width: 480px){//当设备屏幕小于等于480px时使用 300 | #guarantee { 301 | margin-right: 30px; 302 | } 303 | } 304 | @media print { // 如果要打印页面，使用该规则 305 | body { 306 | font-family: Times, "Times New Roman", serif; 307 | } 308 | } 309 | ``` 310 | 311 | ### 实践建议 312 | - 如果css文件相当庞大，建议使用link元素 313 | - 除了给出设备的媒体属性，如果你更关心浏览器大小，可以用max-width和min-width 314 | 315 | --- 316 | 317 | # 属性 318 | 319 | ## 盒模型 320 | 盒模型是css看待元素的一种方式，css将每个元素看作由一个盒子表示,每个盒子由一个内容区以及可选的内边距，边框和外边距组成。由内而外分别是: 321 | - `内容区`: content ,包含内容，如文本或图像 322 | - `透明内边距`: padding ,可选,包围内容区 323 | - `边框`: border ,可选,内边距周围 324 | - `透明外边距`: margin,可选,包围所有部分 325 | 326 | ### 内容区 327 | 内容区包含元素的内容，它的大小通常正好包含全部内容 328 | 329 | ### `padding` 内边距 330 | - 使用内边距可以在内容与盒子边框之间创建一些看得到的空间 331 | - css可以控制内边距的宽度，甚至任意一边的宽度,上下左右 332 | - 透明,无法指定样式 333 | - 元素的背景颜色或背景图像会延伸到内边距下面，但不会延伸到外边距 334 | - 设置padding的顺序很重要，如果先设置padding-left再设置padding，刚才设置的padding-left就会被覆盖 335 | ``` 336 | padding: 25px; 337 | padding-left: 80px; 338 | # 我们首先有一个属性来控制所有4个边，另外再对每个边单独设置 339 | ``` 340 | 341 | ### `border` 边框 342 | - 他是围绕内容的一条线 343 | - 边框可以有不同的宽度，颜色和样式 344 | - 内边距将内容区与边框隔开 345 | - 可以指定任意一边的边框样式 border-top-color,border-top-style,border-top-width等 346 | - 锯齿边框(破折线＋白色): 347 | ``` 348 | border-style: dashed; 349 | border-color: white; 350 | ``` 351 | 352 | ### `border-style` 边框样式 353 | - `solid` 实线 354 | - `ridge` 脊线 355 | - `dashed` 破折 356 | - `dotted` 虚线 357 | - `double` 双线 358 | - `groove` 槽线 359 | - `outset` 外凸 360 | - `inset` 内凸 361 | 362 | ### `border-width` 边框宽度 363 | - 关键字 thin medium thick 364 | - 像素 5px; 365 | 366 | ### `border-color` 边框颜色 367 | 和color 类似,使用颜色名，rgb或16进制码 368 | 369 | ### `border-radius` 边框圆角 370 | - 可以为4个角分别指定，如border-top-left-radius 371 | - 可以用px或em(相对于元素字体大小) 372 | ``` 373 | border-radius: 15px; 374 | ``` 375 | 376 | ### `margin` 外边距 377 | - 用外边距在同一个页面上的不同元素之间增加空间 378 | - 和内边距一样，css可以控制外边距的宽度，甚至任意一边的宽度,上下左右 379 | - 透明,无法指定样式 380 | - 和padding一样，设置margin的顺序很重要 381 | ``` 382 | margin: 30px; 383 | margin-right: 250px; 384 | ``` 385 | 386 | --- 387 | 388 | ## `color` 颜色 389 | 390 | ### 文本元素的字体颜色 391 | - color 元素实际控制着一个元素的前景色,他会控制文本和边框颜色，不过你也可以用border-color属性为边框指定自己的颜色 392 | - 改变p的字体颜色不会影响里面的链接颜色. 393 | - web颜色按构成颜色的红，绿，蓝三个分量所占数量来指定,每种颜色会分别指定一个从0到100%的数值,然后把它们混合起来得到最终的颜色.如100%红,100%绿，100%蓝混合在一起是白色。所有指定web颜色的方法最终都是告诉浏览器：一个颜色的红绿蓝分量分别是多少. 394 | - 对于文本和背景，要使用对比度最大的颜色，能提高可读性 395 | 396 | ### 用16进制码指定指定颜色 397 | - 如`#fc1257`,这种方式最常用 398 | - 以#开头,分别用2位数字指定红绿蓝 399 | - 例如: 400 | ``` 401 | body { 402 | background-color: #cc6600; 403 | } 404 | ``` 405 | - [wiki的web颜色表](http://en.wikipedia.org/wiki/web_colors) 406 | - 如果每一组分量中的两位数字都相同，可以使用简写,例如`#ccbb00`可以简写成`#cb0`,不过如果是`#ccbb10`则不能简写 407 | 408 | ### 按名指定颜色 409 | - css只定义了大约150个颜色名,颜色名不区分大小写 410 | - 16种基本颜色,所有浏览器都有,以及150种扩展色,它们是:`aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow` 411 | - 例如: 412 | ``` 413 | body { 414 | background-color: silver; 415 | } 416 | ``` 417 | 418 | ### 用红绿蓝值指定颜色 419 | 以rgb开头，在小括号里指定红绿蓝的百分比,例如: 420 | ``` 421 | body{ 422 | background-color: rgb(80%, 40% , 0%)//橙色 423 | } 424 | ``` 425 | 还可以指定0-255之间的一个数值,例如: 426 | ``` 427 | body{ 428 | background-color: rgb(204, 102, 0)//和上面颜色一致,255*80% = 204... 429 | } 430 | ``` 431 | 432 | --- 433 | 434 | ## `font-family` 字体 435 | 大多数计算机上通常只安装了部分字体,所以选择字体时要当心,通常指定的font-family包含一个候选字体列表,他们都来自同一个字体系列,候选字体用逗号分隔,大小写字母必须一致,最后总是放一个通用的字体系列名,如果一个字体名中包含多个单词,比如Courier New，如何指定？用引号,"Courier New",如: 436 | ``` 437 | body{ 438 | font-family: Verdana, Geneva, Arial, sans-serif; 439 | } 440 | ``` 441 | ### 字体系列 442 | 每个font-family包含一组有共同特征的字体。共有5个字体系列: 443 | - `Sans-serif` : 无衬线体 , 在计算机上更容易识别, 很多人认为在计算机显示中最适合体文本,包括: [`Verdana` : 大多数pc上都有],[`Geneva` : 大多数Mac上都有],[`Arial` : 在PC和Mac上都很常见] 444 | 445 | - `Serif` : 有衬线体 , 新闻报纸的文字排版 446 | 447 | - `Monospace` : 固定宽度的字符,主要用于显示软件代码示例 448 | 449 | - `Cursive` : 看似手写的字体 , 有时会看到在标题中偶尔使用 450 | 451 | - `Fantasy` : 包含有某种风格的装饰性字体 452 | 453 | ### `@font-face` 指定字体 454 | - `@font-face` 允许你定义一种字体的名字和位置,然后可以在你的页面中使用。 455 | - web字体标准: 字体文件使用".woff"文件扩展名,表示web开放字体格式(web open font format) 456 | - 常用字体格式: ［`TrueType` : .ttf］，［`OpenType` : .otf 建立在tt之上］，［`Embedded OpenType字体` : .eot otf的压缩形式 微软专用，仅ie支持］，［`SVG字体` : .svg 通用图像格式］，［`Web开放字体格式` : .woff 推荐使用,浏览器支持最广泛］ 457 | - 缺点: 获取字体需要花费时间，第一次获取字体时页面性能可能会受影响。管理多个字体文件痛苦，最后移动设备和小型设备不支持。 458 | - 有字体托管服务可以为你托管web字体。 459 | - 浏览器会先在用户计算机上查找Verdana字体，如果有，这个元素就使用这个字体，如果不可用，找Geneva,以此类推, 460 | 如果前面指定的字体都没有找到，就用浏览器默认的Sans-serif字体，就是我们最后指定的通用字体。 461 | - 利用font-family可以创建一个首选字体列表 462 | - 把该规则增加到文件的最上面,放在body规则之上 463 | ``` 464 | @font-face { 465 | font-family: "Emblema One"; //创建一个名字 466 | src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), 467 | url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.tff"); 468 | //src属性告诉浏览器到哪里找到这个字体,浏览器会尝试每一个src文件，直到找到它支持的一个文件。 469 | } 470 | ``` 471 | 472 | ### `@import` 473 | `@import` 允许导入其他CSS文件 474 | 475 | 476 | ### `font-weight` 控制文本的粗细 477 | - `lighter` : 相对于继承的值使文本稍细一点。 478 | - `normal` : 正常 479 | - `bold` : 粗体 480 | - `bolder` : 相对于继承的值使文本稍粗一点。 481 | - 还可以设置为100到900之间的一个数（100的倍数),不过并没有广泛支持，通常不使用 482 | 483 | ### `font-size` 让文本更大或更小 484 | - 像素px指定大小 : `font-size: 14px;` //告诉浏览器字母高度是多少像素.14px中间不能有空格 485 | - 百分数%指定大小 : `font-size: 150%;` //指定相对于父元素的字体大小 486 | - em指定字体大小 : `font-size: 1.2em;` //指定相对于父元素的字体的比例因子,称为相对大小 487 | - 好吧，百分数和em看上去差别不大，可能%更容易理解些,例子: 488 | ``` 489 | body { 490 | font-size: 14px; 491 | } 492 | h1 { 493 | font-size: 150%; //父元素body,这里是14*150% = 21px 494 | } 495 | h2 { 496 | font-size: 1.2em; //父元素body,这里是14*1.2 = 17px 497 | } 498 | ``` 499 | - 关键字指定字体大小 : `font-size: small;`, small通常定义为12px,下面每一级大小约比前一个大小大20%，包括:`xx-small`,`x-small`,`small`,`medium`,`large`,`x-large`,`xx-large` 500 | 501 | ### 指定字体大小的秘诀 502 | (1)选择一个关键字(推荐small或medium),作为body的字体大小,为页面默认字体大小 (2)使用em或百分数,相对于body字体大小指定其他元素的字体大小(em或百分数)这样改变web页面中字体大小就很容易，只要改变body字体大小就可以了,例如: 503 | ``` 504 | body { font-size : small; } 505 | h1 { font-size : 150%; } 506 | h2 { font-size : 120%; } 507 | ``` 508 | 注意老版IE不支持用像素指定的文本缩放 509 | 510 | ### 浏览器默认字体大小 511 | - 大多数情况下，浏览器默认的body字体大小都是16像素 512 | - 如果在body中指定字体大小为90%,这将是默认字体的90% 513 | - h1 : 200%, 相对于默认字体,下同 514 | - h2 : 150% 515 | - h3 : 120% 516 | - h4 : 100% 517 | - h5 : 90% 518 | - h6 : 60% 519 | 520 | ### `text-decoration` 文本装饰 521 | - `underline` : 下划线 ,下划线文本通常被用户误认为是链接文本，所以要谨慎使用 522 | - `none` : 无效果 523 | - `overline` : 上划线 524 | - `line-through` : 删除线,html有个的元素可以将内容标记为要删除的内容 525 | - 一次可以设置多个装饰 526 | - 如果文本继承了你不想要的文本装饰，可以使用值"none"来去除装饰 527 | - 如果em有两个不同的规则，不会累加，要把这两个值合并到一个规则中，才能同时得到这两个文本装饰. 528 | - 例如: 529 | ``` 530 | em { 531 | text-decoration: line-through; 532 | } 533 | ``` 534 | 535 | 536 | ### `font-style` 字体风格 537 | - `italic` : 斜体 ,斜体文本向右倾斜,另外衬线还有弯曲 538 | - `oblique` : 倾斜 ,并不是使用一组专门设计的倾斜字符,而是由浏览器将正常文字倾斜 539 | 540 | ### `list-style` 改变列表中列表项的外观 541 | - 列表的主要属性是`list-style-type`,利用这个属性可以控制列表中使用的项目符号 542 | - `disc`,默认 543 | - `circle`,圆圈标记 544 | - `square`,方块标记 545 | - `none`，删除列表标记 546 | 547 | ### 定制列表标记 548 | - 如果想定制列表的标记，可以用`list-style-image`为列表设置标记图像,如: 549 | ``` 550 | li{ 551 | list-style-image: url(images/backpack.gif); 552 | padding-top: 5px; 553 | margin-left: 20px; 554 | } 555 | ``` 556 | - 对于有序列表也一样，可以用`list-style-type`控制一个有序列表标记: 557 | - `decimal`,十进制 558 | - `upper-alpha`,大写字母 559 | - `lower-alpha`,小写字母 560 | - `upper-roman`,大写罗马数字 561 | - `lower-roman`,小写罗马数字 562 | - 列表项的项目符号的位置如何控制?用`list-style-position`,有两个取值`inside`(标记在列表项里)和`outside`（列表项外)。 563 | 区别如下:![区别](http://www.wibibi.com/upload/20130930162132.png) 564 | 565 | 566 | ## 其他属性 567 | 568 | ### `left` 指定一个元素的左边所在位置 569 | 570 | ### `top` 控制一个元素顶部的位置 571 | 572 | ### `background-image` 在元素后面放置一个图像,如 573 | ``` 574 | background-image: url(images/background.gif); 575 | //用url括起来,注意没有引号 576 | ``` 577 | 578 | ### `background-repeat` 背景图像是否重复 579 | - 默认在水平和垂直方向上重复 580 | - 控制平铺行为,no-repeat,repeat-x,repeat-y,inherit; 581 | ``` 582 | background-repeat: no-repeat; 583 | ``` 584 | 585 | ### `background-position` 背景图像的位置 586 | - 可以按像素指定，或百分数,还可以用关键字,如top,left,right,bottom和center 587 | ``` 588 | background-position: top left; 589 | ``` 590 | 591 | ### `background-color` 控制元素的背景颜色 592 | 593 | ### `text-align` 对齐 594 | - text-align会对块元素中的所有内联内容对齐,而不仅仅是文本 595 | - text-align只能在块元素上设置，对内联元素无效 596 | - `left` 左对齐 597 | - `center` 居中 598 | - `right` 右对齐 599 | 600 | ### `letter-spacing` 在字母之间设置间距 601 | 602 | ### `line-height` 设置文本元素中的行间距 603 | ``` 604 | body { 605 | font-size: small; 606 | font-family: Verdana, Helvetica, Arial, sans-serif; 607 | line-height: 1.6em; //调整为字体大小的1.6倍 608 | } 609 | ``` 610 | - line-height元素有点特殊,可以对它直接使用一个数,而不是相对度量,代表各元素行高是其自己字体大小的多少倍 611 | ``` 612 | #elixirs { 613 | line-height: 1;//代表elixirs中的所有元素的行间距为其自己字体大小的1倍 614 | } 615 | ``` 616 | - 设置`line-height`为`normal`，允许浏览器选择一个适当的行高大小,通常根据字体来确定。 617 | 618 | ### `border-bottom` 下边框 619 | - 下边框会延伸到页面边缘,但是文本的underline属性的下划线只会出现在文本下面 620 | - 1px solid black 621 | 622 | ### `width` 指定元素宽度 623 | - 宽度永远是设置的值 624 | - width属性只指定内容区的宽度 625 | - 要确定整个盒子的宽度，需要将内容区的宽度加上左和右内边距,左右外边距和边框的宽度 626 | - 一个块的默认宽度为"auto",它会延伸占满可用的空间 627 | - 如果使用百分数，那么宽度会计算为元素所在容器宽度的一个百分比 628 | - 高度也是默认的，也是"auto",一般，不用指定元素的高度，就让它们默认为auto 629 | 630 | 631 | ### `a`元素和它的多重人格 632 | - 页面上的链接有多重显示样式，包括未访问，已访问或者处于悬停状态等(还有focus和active),这里需要用到伪类 633 | - foucs是指浏览器将焦点放在你的链接上时就是焦点状态，浏览器允许用户按下tab键轮流访问时，浏览器访问到某个链接，某个链接就拥有了"焦点" 634 | - active是指用户第一次单击一个链接时，就处于活动状态。 635 | － a元素可能同时处于多个状态，一般认为适当的顺序是link,visited,hover,focus,active 636 | - 例子: 637 | ``` 638 | a:link { 639 | color: green; 640 | } 641 | a:visited { 642 | color: red; 643 | } 644 | a:hover { 645 | color: yellow; 646 | } 647 | ``` 648 | 649 | ### 伪类 650 | - 上面的a:link,a:visited和a:hover就是伪类 651 | - 它们都允许我指定样式，就好像他们是类一样，但是没有人在html中真正输入这些类 652 | - 浏览器会仔细检查所有a元素，把它们增加到正确的伪类中，如果一个链接已访问过，会放到:visited类中，如果悬停，浏览器会把这个链接 653 | 扔到:hover伪类中。浏览器会在后台向这些类增加和删除元素. 654 | - 伪类不止能处理链接，还能对其他类型的元素提供处理，如first-child对应元素的第一个子元素。 655 | 656 | 657 | 658 | # 布局和定位 659 | 660 | ## 流 661 | - 流：浏览器从html文件最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。 662 | - 块元素从上向下流，各元素之间有一个换行，内联元素从左上方流向右下方,在水平方向上相互挨着摆放（只要右边还有空间放的下） 663 | - 文本是内联函数的特殊情况，浏览器会把它分解成适当大小的内联元素，以适应给定的空间。 664 | - 对于外边距，浏览器并排放置两个内联元素时，外边距会相加，但是当上下放置两个块元素时，会把它们共同的外边距折叠在一起，高度为最大的外边距高度。 665 | 事实上只要两个垂直外边距碰到一起，它们就会折叠，但是如果外面的元素有一个边框，那么两个元素的外边距就不会碰到一起，就不会折叠 666 | 667 | ### `float` 668 | - float属性首先尽可能远地向左或向右浮动一个元素，然后在它下面的所有内容会绕流这个元素。 669 | - 对于所有浮动元素都有一个要求：它必须有一个宽度。 670 | - 浮动元素的外边距不会折叠,因为它只是浮在页面上，注意到这一点可以避免常见css错误. 671 | - 内联元素也可以浮动，如浮动图像 672 | - float属性可以设置为left或right,不能是中间 673 | ``` 674 | #amazing { 675 | width: 200px; 676 | float: right; 677 | } 678 | ``` 679 | - 下面看浏览器如何处理float（想象一下word的图片浮动): 680 | (1)首先，浏览器像往常一样，正常将元素流入页面，从最上面开始。 681 | (2)浏览器遇到浮动元素时，会把它尽可能放在最右边，还会从流中删除这个段落，好像它浮在页面上一样。 682 | (3)由于该浮动段落已经从正常的流中删除，所以其他块元素会填在这里，就好像没有这个段落一样。 683 | (4)对于内联元素定位时，它们会考虑浮动元素的边界，因此会绕着浮动元素。 684 | 685 | 686 | ### `clear` 687 | - 当元素流入页面时，在这个元素左边，右边或两边不允许有浮动内容,例如为防止页脚和右边栏重叠，可以用clear设置: 688 | ``` 689 | #footer { 690 | background-color: #675c47; 691 | color: #efe5d0; 692 | text-align: center; 693 | padding: 15px; 694 | margin: 10px; 695 | font-size: 90%; 696 | clear: right; 697 | } 698 | ``` 699 | - 现在浏览器放置元素时会查看右边有没有浮动元素，如果有就下移，直到没有浮动元素为止。 700 | 701 | ### 两栏效果 702 | - 把sidebar放在页眉下面，然后用float将sidebar栏向右浮动,通过将main div的右外边距设置得和sidebar的宽度相同，来创建两栏效果,不过此时如果页面太宽，页脚会上移造成重叠问题, 703 | 这个问题可以在页脚肿添加clear属性解决。还有一个问题是因为我们把sidebar放在主要内容前，所以在小的移动设备上会看到边栏在最前面。 704 | - 右紧左松，让主内容向左浮动，设置仿照上面的。这样div的顺序是正确的，不过边栏过于扩展不好，还是固定些好 705 | - 使用绝对定位，类似浮动效果，当主内容区的垂直空间缩小，边栏会向下覆盖页脚 706 | - 使用css表格 707 | 708 | ### 流体与冻结设计 709 | - 上面讨论的都是流体布局(liquid layouts)，下面讨论冻结布局(frozen layouts),冻结布局会锁定元素， 710 | 如将body中的所有内容都放到一个id为#allcontent的div中 711 | ``` 712 | #allcontent { 713 | width: 800px; 714 | padding-top: 5px; 715 | padding-bottom: 5px; 716 | background-color: #675c47; 717 | } 718 | ``` 719 | 那么页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间 720 | 721 | ### 凝胶布局 `Jello` 722 | - 凝胶布局会锁定页面中内容区的宽度，不过会将它在浏览器中居中，将内容区的内外边距设为auto即可，浏览器会确定正确的外边距是多少，确保左和右外边距相同，所以内容会居中,如下所示 723 | ``` 724 | #allcontent { 725 | width: 800px; 726 | padding-top: 5px; 727 | padding-bottom: 5px; 728 | background-color: #675c47; 729 | margin-left: auto; 730 | margin-right: auto; 731 | } 732 | ``` 733 | 734 | ## 绝对定位 735 | - 例如上面的边栏，将边栏绝对定位时，它会从流中删除并根据制定的top，left，right或bottom属性定位 736 | - 由于边栏在流之外，其他元素甚至不知道有这样一个元素，它们会将它完全忽略,所以流中的内联内容不会围绕在一个绝对定位的元素周围。 737 | - 如将侧边栏绝对定位 738 | ``` 739 | #sidebar { 740 | position: absolute; 741 | top: 100px; 742 | right: 200px; 743 | width: 280px; 744 | } 745 | ``` 746 | - 关于绝对定位还有一个分层放置的问题，一个元素可以放在另一个绝对定位元素上面，那如何分层？谁在上面？每个定位元素都有一个z-index的属性，这会指定它在一个虚拟z轴上的位置（上面的元素“更靠近”你，z-index更大). 747 | - 可以对任何元素指定绝对位置 748 | - position的默认值为static，将元素放在正常的文档流中。position共有4个值:static,absolute,fixed和relative。fixed将元素放在相对于浏览器窗口（区别页面）的一个位置上，固定元素永远不会移动。relative让元素正常流入页面，不过在页面上显示之前要进行偏移。 749 | - 绝对元素不必像浮动元素一样指定宽度，不过默认会占浏览器的整个宽度，所以如果要改变这种行为就要设置width属性 750 | - 指定元素位置还可以用百分数,相对于浏览器宽度. 751 | 752 | ## css表格 753 | - 类似电子表格，在表格中只放置块元素，所以要把图像包围在一个div中。 754 | - 为整个表格创建一个div，然后为每一行分别创建一个div，对于每一列，只要在行div中放置一个块级元素。 755 | - 例如一行两列的表格可以按如下方式创建： 756 | ``` 757 |

758 |
759 |
760 | ... 761 |
762 | 765 |
766 |
767 | ``` 768 | - 对应的css为: 769 | ``` 770 | #tableContainer { 771 | display: table; 772 | border-spacing: 10px;//于是不再需要div中的外边距 773 | } 774 | 775 | #tableRow { 776 | display: table-row; 777 | } 778 | #main { 779 | display: table-cell; 780 | background: #efe5d0 url(images/background.gif) top left; 781 | font-size: 105%; 782 | padding: 15px; 783 | /*margin: 0px 10px 10px 10px;*/ 784 | vertical-align: top;//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom 785 | } 786 | 787 | #sidebar { 788 | display: table-cell; 789 | background: #efe5d0 url(images/background.gif) bottom right; 790 | font-size: 105%; 791 | padding: 15px; 792 | /*margin: 0px 10px 10px 10px;*/ 793 | vertical-align: top; 794 | 795 | } 796 | ``` 797 | - 上面的border-spacing会在单元格之间增加10像素空间，另外在边界周围也会增加10像素空间，但是border-spacing和外边距创建的空间不会折叠！就会导致页眉和页脚与两列之间有20像素的空间，如何修正？将页眉（页脚）的下边距（上边距）设为0即可。 798 | -------------------------------------------------------------------------------- /FrontEnd/ejs-note.md: -------------------------------------------------------------------------------- 1 | title: "ejs note" 2 | tags: 3 | 4 | --- 5 | 6 | ## github地址 7 | 8 | ## 教程 9 | [scotch](https://scotch.io/tutorials/use-ejs-to-template-your-node-application) 10 | 11 | ## 基本 12 | ### nodejs中设置模板引擎为ejs 13 | ``` 14 | app.set('view engine', 'ejs'); 15 | 16 | ``` 17 | 18 | ### `res.render('path', {data}` 渲染 19 | res 会寻找views文件夹,因此下面的`pages/index`路径实际上是`views/pages/index`如: 20 | ``` 21 | app.get('/', function(req, res) { 22 | var drinks = [ 23 | { name: 'Bloody Mary', drunkness: 3 }, 24 | { name: 'Martini', drunkness: 5 }, 25 | { name: 'Scotch', drunkness: 10 } 26 | ]; 27 | var tagline = "Any code of your own that you haven't looked at for six or more months might as well have been written by someone else."; 28 | 29 | res.render('pages/index', { 30 | drinks: drinks, 31 | tagline: tagline 32 | }); 33 | }); 34 | ``` 35 | 36 | 37 | ### `<% include FILENAME %>` 传入布局模板 38 | 如: 39 | head 40 | ``` 41 | 42 | 43 | 44 | Super Awesome 45 | 46 | 47 | 48 | 51 | ``` 52 | 53 | header 54 | ``` 55 | 56 | 57 | 74 | ``` 75 | 76 | footer 77 | ``` 78 | 79 | 80 |

© Copyright 2014 The Awesome People

81 | ``` 82 | 83 | index 拼接模板 84 | ``` 85 | 86 | 87 | 88 | 89 | 90 | <% include ../partials/head %> 91 | 92 | 93 | 94 |
95 | <% include ../partials/header %> 96 |
97 | 98 |
99 |
100 |

This is great

101 |

Welcome to templating using EJS

102 |
103 |
104 | 105 |
106 | <% include ../partials/footer %> 107 |
108 | 109 | 110 | 111 | ``` 112 | 113 | 114 | ### `<%= variable %>` 替换一个传入的变量 115 | 如: 116 | ``` 117 | ... 118 |

Variable

119 |

<%= tagline %>

120 | ... 121 | ``` 122 | 123 | ### `<% %>`,传入代码 124 | 如: 125 | ``` 126 | ... 127 |

Loop

128 |
    129 | <% drinks.forEach(function(drink) { %> 130 |
  • <%= drink.name %> - <%= drink.drunkness %>
    • 131 | <% }); %> 132 |
133 | ... 134 | ``` 135 | 136 | ### `<%- %>` 显示原始HTML 137 | -------------------------------------------------------------------------------- /FrontEnd/emmet-note.md: -------------------------------------------------------------------------------- 1 | title: "emmet 用法教程" 2 | date: 2015-06-20 22:26:35 3 | categories: dev 4 | tags: [dev,html,emmet] 5 | 6 | --- 7 | 8 | 对于前端开发人员来说,[emmet](http://emmet.io/)简直是神器,可以帮助你少写不少代码，提高编码效率， 9 | 最清晰的方式是在一个html文档中输入`html:5`,然后按tab键，然后： 10 | ``` 11 | 12 | 13 | 14 | 15 | Document 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 一个完整的html页面框架就已经生成好了！但是要掌握emmet的用法还是需要一段时间的练习，因此本文总结整理 23 | 本屌在学习使用emmet过程中**常用**的代码片段，以备不时查阅。 24 | 其实差不多是在翻译emmet的英文文档。emmet多以插件的形式存在，安装就按照官网的来即可。 25 | 26 | ##一个常用稍复杂的emmet的例子 27 | emmet是用缩写来简化输入的，和snippets类似，下面是一个常用的生成列表的缩写： 28 | 29 | `#page>div.logo+ul#navigation>li*5>a{Item $}` 30 | 31 | ``` 32 |
33 | 34 | 41 |
42 | 43 | ``` 44 | 45 | ##emmet语法 46 | ###元素 47 | 例如div,p等，emmet并没有一套与定义的元素，任何词都会转成tag形式 48 | 如 `div ->
` 49 | 50 | ###嵌套操作符 51 | - child: > 52 | 子节点，产生嵌套tag，如`div>ul>li`产生: 53 | ``` 54 |
55 |
    56 |
  • 57 |
58 |
59 | ``` 60 | 61 | - Sibling: + 62 | 兄弟节点，产生同层tag,如`div+ul+li`产生： 63 | ``` 64 |
65 |
    66 |
  • 67 | ``` 68 | -------------------------------------------------------------------------------- /FrontEnd/fe-note.md: -------------------------------------------------------------------------------- 1 | title: "前端笔记" 2 | tags: 3 | --- 4 | 5 | ## css 最佳实践 6 | - 用`` 代替 `@import`,因为`@import`会在用到的时候再读取，导致浏览器闪屏，用``浏览器会并行读取 7 | - 如何改变icon的大小？直接在css文件中修改font-size,例如`font-size: 25px;` 8 | 9 | ## js 最佳实践 10 | - 在事件处理函数里`return false` 表示阻止浏览器对事件的默认处理,例如 11 | ``` 12 | links[i].onclick = function () { 13 | showSection(links[i].destination); 14 | return false; 15 | } 16 | ``` 17 | 表示屏蔽link默认的打开链接事件,因为showSection中已经对该链接做了处理 18 | 19 | ## 跨域问题 20 | 本地的localhost:8100端口访问p.nju发送post请求被拦截，原因是浏览器拦截了非同源请求 21 | > 22 | if I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS. 23 | 24 | > When you are using postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest: 25 | 26 | > Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions. 27 | 28 | 下载chrome的插件[`Allow-Control-Allow-Origin: *`](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US)解决 29 | 30 | > 这个是javascript的跨域问题。它说明的是请求发起的域名不被服务端认可。 31 | 解决这个问题的方法可以在服务端的response上添加`Access-Control-Allow-Origin = ‘*’` 32 | 33 | 34 | ## 非常好的前后端博客和文章及人 35 | - [张云龙的github博客](https://github.com/fouber) 36 | > fucking good 37 | - [前端工程基础篇](https://github.com/fouber/blog/blob/master/201508/01.md) 38 | > 上面那位大牛的 39 | - [移动端自适应方案](http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/) 40 | 41 | - [稀土掘金](http://gold.xitu.io/#/) 42 | > 聚合了很多不错的资源 43 | 44 | 45 | ## 创业公司招聘 46 | - [大搜车前端招聘](http://f2e.souche.com/blog/jia-ru-wo-men-tuan-dui-qian-duan-nodejs/) 47 | - [稀土](https://xitu.io/jobs) 48 | - [Zen](https://cnodejs.org/topic/55deb03928f7851f3946367c) 49 | - [腾讯](https://cnodejs.org/topic/55ff79b2152fdd025f0f4f20) 50 | - [moveha](https://cnodejs.org/topic/54c58bc40d075f173d433f23) 51 | 52 | 53 | ## 软件 54 | [framer破解](http://www.waitsun.com/framer-studio-1-11-173.html) 55 | > mojado@gnu.org 959267c9140c1bd8b7b68e3b64219e 56 | -------------------------------------------------------------------------------- /FrontEnd/html-note.md: -------------------------------------------------------------------------------- 1 | title: "Head First HTML 与 CSS》读书笔记之HTML篇" 2 | date: 2015-08-19 16:41:29 3 | categories: web 4 | tags: [html] 5 | --- 6 | 7 | > 本文为阅读《Head First HTML 与 CSS》的html部分的读书笔记，方便回顾书上的知识，另一篇为[Head First HTML 与 CSS》读书笔记之CSS篇](http://mclspace.com/2015/08/20/css-note/) 8 | 9 | 10 | 11 | --- 12 | 13 | ## 常识 14 | 15 | ### 简称 16 | - html是`hyperText markup language`的缩写,译为`超文本标记语言` 17 | - css是`Cascading Style Sheets`的缩写，译为`层叠样式表` 18 | 19 | ### 元素类型 20 | - 块(block)元素,前后都有一个换行, 如`

    ~

    ,

    ,

    `,特点是: 特立独行 21 | - 内联(inline)元素,总在“行内”出现, 如`, , `,特点是: 随波逐流 22 | - void元素,这个元素没有实际内容，会用简写来表示，如`,
    `,这样能提高效率 23 | 24 | ### 浏览器与服务器惯例 25 | - 浏览器不会显示空白符和换行,制表符等 26 | - web服务器默认文件名为"index.html"或"default.htm",所以如果浏览器请求目录，服务器会在该目录下寻找"index.html"或"default.htm"，如果找到则返回。如果末尾没有正斜杠，如果该目录确实存在，那么浏览器会自动帮你加上末尾的斜线 27 | - 文件URL有3个斜线而不是2个，http url中删去网站名也会有3个斜线 28 | - web服务器默认端口为80 29 | - web页面用来阅读，web应用则用来交互,完成具体的工作. 30 | 31 | ### 规范 32 | - 遵照标准编写html，尽量减少错误，用`doctype`告诉浏览器你使用的那一版本的html，可以减少浏览器显示效果的差异.现在html5的doctype很简单，告诉浏览器你在使用标准html： 33 | ``` 34 | 35 | #也可以写成doctype,两个都可以 36 | #每个html页面都应该加 37 | ``` 38 | - 页面中增加``标记指定字符编码,通常使用`utf-8`,它是Unicode系列中的一个编码。如下: 39 | ``` 40 | 41 | #这个标记要放到元素中所有其他元素的上面 42 | ``` 43 | - [html标准验证工具](http://validator.w3.org) 44 | - 以后html不再有版本号，甚至不是html5,从现在起它只是"HTML".标准改变，浏览器会继续支持老方式，同时也会支持新的方式，这叫做向后兼容性. 45 | 46 | --- 47 | 48 | ## 实践 49 | 50 | ### 一般 51 | - 标记在不同浏览器中的效果不太一样，需要对不同浏览器进行适配 52 | - 规划页面时先设计大的块元素,然后用内联元素完善 53 | - 尽可能使用元素告诉浏览器内容的含义 54 | - id属性是唯一标识元素的方法，可以使用大小写，不过必须一致, (每次都用小写会更容易些), id在它的页面必须唯一。 55 | - 任何元素都可以增加title属性，为其增加工具提示.任何元素都可以有id属性进行标示 56 | 57 | ### 链接 58 | - 内部网页使用相对地址，外部网页使用绝对地址 59 | - 带id的元素有一个特殊特性：你可以直接链接这些元素.如`    see chai tea`,方法为在链接后加#,再加上目标标识符。 60 | - 通常在页面的最上面定义一个目标"top"，并在页面最下面定义一个目标"Back to top",要链接到同一页面的top目标，可以写为`Back to top` 61 | - 链接要简洁，可以在title中提供额外的信息，不要使用诸如"单击这里",或"这一页"之类的链接标签,不要把链接放在一起 62 | - 一般用`http://wickedlysmart.com/buzz/index.html#Coffee`进行链接，不能使用`http://wickedlysmart.com/buzz#Coffee`的形式进行元素链接,因为浏览器会在末尾加斜杠，可能取代id引用，不过可以用`http://wickedlysmart.com/buzz/#Coffee` 63 | 64 | ### 嵌套 65 | - 适当嵌套元素,要完全嵌套 66 | - 嵌套元素要当心，不要把``元素嵌到另一个``元素中，会让访问者迷惑。不允许在``等void元素中嵌套其他内联元素。 67 | 68 | ### 工具 69 | - Dreamweaver 70 | - [Hype(Tumult)](http://tumult.com/hype/) 71 | - [Coda(Panic)](https://www.panic.com/coda/) 72 | - [Flux(The Escapers)](http://www.theescapers.com/flux/) 73 | ... 74 | 75 | --- 76 | 77 | ## HTML首部元素 78 | ### `html` 根元素 79 | web页面的根元素,只有``和``能直接放在``标签中 80 | 81 | ### `head` 页面头部 82 | - head包含有关页面的信息,只能放置``,`<meta>`和`<style>`元素。 83 | - `<meta>` : 关于页面的信息,属性包括 > charset : 指定字符集,通常为utf-8 84 | - `<title>` : 页面标题 85 | - `<style>` : 页面样式,属性包括 > type: 样式类型, 一般为"text/css",如`<style type="text/css">...</style>` 86 | 87 | --- 88 | 89 | ## HTML页面主体 90 | ### `body` 主体元素 91 | web页面的主体元素 92 | 93 | ### `h1`- `h6` 6级标题 94 | 标题默认是粗体,例如: `<h1>一级标题</h1>` 95 | 96 | ### `p` 段落 97 | 块元素,paragraph的缩写,例如: `<p>...</p>` 98 | 99 | ### `a` 超链接 100 | - 内联元素,at的缩写,如 `<a href=""></a>` 101 | - `<a>`元素的内容可以是文字，图像甚至块元素(html5) 102 | - `href`: hyper reference的缩写,指定链接地址 103 | - `title`: 所要链接页面的文本描述 104 | - `target`: 告诉浏览器使用一个不同的窗口，使用_blank作为目标，就会打开一个新的窗口显示页面.如果多个a元素都制定`_blank`作为target,那么每个链接都会在一个新的空窗口中打开，如果指定另一个名字，如Coffee，那么有相同目标名的所有链接都会在同一个窗口中打开。 105 | 106 | ### `em` 强调 107 | 内联元素，emphasize的缩写,例如: `<em>强调</em>` 108 | 109 | ### `br` 换行 110 | void元素,break的缩写,例如`<br>` 111 | 112 | ### `code` 显示计算机程序代码 113 | 块元素,例如: `<code>...</code>` 114 | 115 | ### `pre` 原样显示文本 116 | 块元素,例如: `<pre></pre>` 117 | 118 | ### `strong` 加粗文本 119 | 内联元素 例子: `<strong>加粗</strong>` 120 | 121 | --- 122 | 123 | ## 引用 124 | 125 | ### `q` 短引用 126 | 作为现有段落的一部分,大部分浏览器会加引号，内联元素,quotation的缩写 127 | 128 | ### `blockquote` 长引用 129 | - 需要单独显示，`<blockquote>`创建了单独的一个文本块，另外把文字稍稍缩进，使它更像一个引用。它是个块元素。 130 | - 如果想引用一段或者多段文字，就要使用`<blockquote>`,不过如果只想把一个引用放在现有的文字里，作为其中一个部分，就可以 131 | 使用`<q>`。 132 | - 可以把`<p>`放到`<blockquote>`中，形成多个段落 133 | - 可以把`<q>`放到`<blockquote>`中，表示引用的引用 134 | 135 | --- 136 | 137 | ## 列表 138 | `<ol>`和`<li>`(或者`<ul>`和`<li>`)总是要一起使用,列表可以嵌套,例如: 139 | ``` 140 | <ul> 141 | <li class="selected"><a href="index.html">HOME</a></li> 142 | <li><a href="blog.html">BLOG</a></li> 143 | <li><a href="">INVENTIONS</a></li> 144 | <li><a href="">RECIPES</a></li> 145 | <li><a href="">LOCATIONS</a></li> 146 | </ul> 147 | ``` 148 | 149 | ### `li` 列表项 150 | 块元素,list item的缩写 151 | 152 | ### `ol` 有序列表 153 | 块元素, ordered list的缩写,浏览器负责编号 154 | 155 | ### `ul` 无序列表 156 | 块元素, unordered list的缩写 157 | 158 | ### `dl`,`dt`,`dd` 定义列表 159 | 每一项都由一个定义术语和定义描述组成 160 | ``` 161 | <dl> 162 | <dt>Burma Shave Sign...</dt> 163 | <dd>Road signs common in the US</dd> 164 | <dt>Route 66</dt> 165 | <dd>Most famous road in the U.S. highway system</dd> 166 | </dl> 167 | ``` 168 | 169 | --- 170 | 171 | ## 字符实体 172 | - 用简单缩写来指定特殊字符,但并不保证在所有浏览器上都能显示 173 | - 输入实体时都会用到&,如果内容中确实需要一个&,就要使用& 174 | - 除了用实体名还可以用实体编号比如`d`,并不是所有实体都有名字 175 | - > `>` 大于符号 176 | - < `<` 小于符号 177 | - & `&` 与符号 178 | - © `©` 版权符号 179 | - [详尽的字符实体清单](http://www.unicode.org/charts/) 180 | 181 | --- 182 | 183 | ## 图像 184 | 185 | ### `img` 图片 186 | - void元素,image的缩写 187 | - `src`: 必要属性,指定img的源文件位置，可以指定相对位置 188 | - `alt`: 必要属性,指定描述这个图像的一些文本,可以在图像无法显示的时候显示文本，也可以帮视力障碍的用户，这个属性得加，不然无法通过html标准验证 189 | - `width`: 指定图像宽度 190 | - `height`: 指定图像高度 191 | - 例子: `<img src="" alt="" width="800" height="600">` 192 | 193 | ### 图片格式 194 | - web上最常用的3种格式: JPEG, PNG 和 GIF. 195 | - 照片和复杂图像使用JPEG,支持1600万种不同颜色，有损格式，缩小文件时会丢掉图像信息，不支持透明度，不支持动画，文件较小，便于web高效显示 196 | - PNG,GIF适合单色图像和线条构成的图像，如logo,剪切画和图像中的小文本,都是无损格式，都支持透明度，都比相应的JPEG更大些。 197 | - PNG可以包含上百万种颜色，有PNG-8,PNG-24和PNG-32. 198 | - GIF最多表示256种不同颜色，但是能支持动画. 199 | 200 | ### 实践 201 | - 指定宽度和长度的原因是浏览器预先知道了长宽就可以在显示图像之前就开始建立页面布局，否则浏览器得先下载图像，知道大小，然后再重新调整布局。 202 | - width和height也可以用来图片缩放，不过处于各种原因，还是不要这样达到目的的好。因为浏览器在调整图像之前还是必须得下载完整的大图像 203 | - 图像宽度要小于800像素，是一个好经验。 204 | - 图像可以作为指向其他web页面的链接，将img放在a元素的内容中，如下所示: 205 | ``` 206 | <a href="html/seattle_classic.html"> 207 | <img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA"> 208 | </a> 209 | ``` 210 | 211 | --- 212 | 213 | ## 容器 214 | ### 标记逻辑区 215 | 逻辑区就是页面上彼此相关的一组元素,`div`和`span`容器用来标记一组元素 216 | 217 | ### `div` 块元素容器 218 | - 在属于一个逻辑区的元素周围放置`<div>`开始和结束标记 219 | - div中的元素也会从div继承一些属性(如`font-size`,`color`等) 220 | - 可以用div为页面增加更多结构，进一步展示页面的底层逻辑结构，但不要为了加结构而不必要地增加结构，在完成任务的前提下让结构尽可能简单 221 | - 你也可以嵌套结构，例如可以把cats,dogs的`<div>`放在一个pets `<div>`中,如: 222 | ``` 223 | <div class="pets"> 224 | <div class="cats">...</div> 225 | <div class="dogs">...</div> 226 | </div> 227 | 228 | ``` 229 | 230 | ### `span` 内联元素容器 231 | 类似于div，不过是针对内联元素的，建立内联内容的逻辑分组,如: 232 | ``` 233 | <ul> 234 | <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li> 235 | <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li> 236 | <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li> 237 | <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li> 238 | <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li> 239 | </ul> 240 | ``` 241 | 242 | --- 243 | 244 | ## 表格 245 | 246 | ### `table` 表格 247 | 用`<table>`标记开始一个表格，一行用`<tr>`开始,每个`<th>`分别是某一列的表头,表头是前后排列的。每个`<td>`元素包含表格中的一个单元格。例子: 248 | ``` 249 | <table> 250 | <tr> 251 | <th>City</th> 252 | <th>Date</th> 253 | <th>Temperature</th> 254 | <th>Altitude</th> 255 | <th>Population</th> 256 | <th>Diner Rating</th> 257 | </tr> 258 | <tr> 259 | <td>Walla Walla, WA</td> 260 | <td>June 15th</td> 261 | <td>75</td> 262 | <td>1,204 ft</td> 263 | <td>29,686</td> 264 | <td>4/5</td> 265 | </tr> 266 | <tr> 267 | <td>Magic City, ID</td> 268 | <td>June 25th</td> 269 | <td>74</td> 270 | <td>5,312 ft</td> 271 | <td>50</td> 272 | <td>3/5</td> 273 | </tr> 274 | </table> 275 | //添加css 276 | table { 277 | margin-left: 20px; 278 | margin-right: 20px; 279 | border: thin solid black; 280 | caption-side: bottom;//将标题放在底部 281 | } 282 | 283 | td, th { 284 | border: thin dotted gray; 285 | padding: 5px; 286 | } 287 | 288 | caption { 289 | font-style: italic; 290 | padding-top: 8px; 291 | } 292 | 293 | ``` 294 | 295 | ### `caption` 标题 296 | 增加标题`<caption>...</caption>`, 放在`<table>`元素之下,`<tr>`元素之上（即使你后面要用css把它显示在下方）,默认会显示在表格上方。 297 | 298 | ### `background-color` 背景色 299 | 添加颜色, 设置背景色即可，如: 300 | ``` 301 | th { 302 | background-color: #cc6600; 303 | } 304 | ``` 305 | 306 | ### 颜色交替 307 | 为各行指定交替的颜色, 能够更容易得区分各行, 可以先定义一个新类, `cellcolor`, 然后把这个类增加到你希望着色的各行(tr)上，如: 308 | ``` 309 | .cellcolor { 310 | background-color: #fcba7a; 311 | } 312 | ``` 313 | 另外还可以用下面的`nth-child`实现 314 | 315 | ### `nth-child` 伪类 316 | `nth-child`伪类是一种更高级地选择元素的方法，例如让偶数段落有红色背景，奇数段落有绿色背景: 317 | ``` 318 | p:nth-child(even){ 319 | background-color: red; 320 | } 321 | p:nth-child(odd){ 322 | background-color: green; 323 | } 324 | ``` 325 | 这个伪类还可以更加灵活，用数字n制定简单表达式，如奇偶数： 326 | ``` 327 | p:nth-child(2n){ 328 | background-color: red; 329 | } 330 | p:nth-child(2n+1){ 331 | background-color: green; 332 | } 333 | ``` 334 | 335 | ### 合并单元格 336 | 就是说有的单元格要跨越多行，可以使用`rowspan`属性，指定一个数据单元格占多少行，然后从这个单元格所跨越的其他行中删除相应的表格元素。表格元素还能跨多列，只要为td元素增加colspan属性，然后指定列数，跨多列时需要删除同一行中的表格数据元素，例如： 337 | ``` 338 | <tr> 339 | <td rowspan="2">Truth or Consequences, NM</td> 340 | <td class="center">August 9th</td> 341 | <td class="center">93</td> 342 | <td rowspan="2" class="right">4,242 ft</td> 343 | <td rowspan="2" class="right">7,289</td> 344 | <td class="center">5/5</td> 345 | </tr> 346 | <tr> 347 | 348 | <td class="center">August 27th</td> 349 | <td class="center">98</td> 350 | 351 | 352 | <td class="center">4/5</td> 353 | </tr> 354 | ``` 355 | 356 | ### 嵌套表格 357 | 表格里可以嵌套表格,只需要把另一个table元素放在一个td中，例如： 358 | ``` 359 | <tr> 360 | <td class="center">August 27th</td> 361 | <td class="center">98</td> 362 | <td class="center"> 363 | <table> 364 | <tr> 365 | <th>Tess</th> 366 | <td>5/5</td> 367 | </tr> 368 | <tr> 369 | <th>Tony</th> 370 | <td>4/5</td> 371 | </tr> 372 | </table> 373 | </td> 374 | </tr> 375 | ``` 376 | 377 | 378 | 379 | ### 处理表格双线 380 | 默认情况下每个单元格都有边框，会形成双线，分散注意力，可以在table中将border-spacing设置为0px,还可以用border-collapse的css属性来折叠边框，使单元格之间根本没有边框间距，这样浏览器会忽略所有边框间距，然后将紧挨的两个边框合并成一个边框(good),例如： 381 | ``` 382 | table { 383 | margin-left: 20px; 384 | margin-right: 20px; 385 | border: thin solid black; 386 | caption-side: bottom; 387 | border-collapse: collapse; 388 | } 389 | ``` 390 | 391 | ### 其他实践 392 | - 如果没有足够的元素，要写成`<td></td>`.如果省去这个数据单元格，表格就不能正确地排列对齐 393 | - 如果希望表头放在表格的左侧，可以把表格表头元素放在各行中，而不是都放在第一行中。 394 | - html表格允许你用html标记指定表格的结构，而css表格则提供一种方法，可以用一种类似表格的方式显示块级元素。需要在页面中创建表格数据时就用html表格，不过如果只需要对其他类型的内容使用一种类似表格的表现方式，就可以用css表格显示布局。 395 | - 表格单元格确实有内边距和边框，不过单元格之间的空间叫做border-spacing是针对整个表格定义的，表格单元格没有外边距，不过可以在垂直方向和水平方向上设置不同的边框间距`border-spacing: 10px 30px`,10像素水平间距，30像素垂直边框间距 396 | 397 | --- 398 | 399 | ## 表单 400 | 401 | ### 表单`form` 402 | action属性包含web服务器的url, method属性确定表单数据如何发送到服务器，如POST,另外input 是内联元素, 如果想要有换行用<br>, 例子如下: 403 | ``` 404 | <form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST"> 405 | <p>Just type in your name (and click Submit) to enter the contest:<br> 406 | 407 | First name: <input type="text" name="firstname" value=""><br> 408 | Last name: <input type="text" name="lastname" value=""><br> 409 | <input type="submit"> 410 | </p> 411 | </form> 412 | ``` 413 | 414 | ### `POST`和`GET`请求 415 | 浏览器发送数据的方法主要有两种，POST和GET。POST和GET完成的任务是一样的，都是把表单数据从浏览器发送到服务器，不过采用了两种不同的方式，POST会打包你的表单变量，在后台把它们发送到服务器，GET也会打包你的表单变量，但是会把这些数据追加到URL的最后，然后向服务器发送一个请求. 416 | 417 | 那么什么时候使用post什么时候使用get呢？如果你希望用户能够对提交表单后的结果页面加书签，就必须使用GET,因为如果使用POST就无法加书签了。那什么时候需要加书签呢？假设服务器返回一个搜索列表，你可能希望用户对结果加书签，那么他们就能直接查看这些结果，而不用再填写表单。另外，如果你有一个处理订单的服务器脚本，可能不希望给这个页面加标签，因为否则每次他们返回这个标签时，都会重新提交这个订单。 418 | 419 | 还有一种情况肯定不想用GET，比如你的表单中的数据是私有的，如信用卡或口令，url是明文看到的，所以不安全。最后，如果你用了textarea就应该用POST,因为可能会发送大量数据，get和post对数据量都有限制，但是post要宽松的多。 420 | 421 | ### 可访问性 422 | 应该用<label>元素来标记那些标签，label元素可以提供页面结构的更多的信息，使你能更容易地使用css对标签设置样式，另外对于有视力障碍的人，也有助于他们使用的屏幕阅读器更准确地标识表单元素要使用表单元素必须为表单元素增加一个id属性，然后增加一个label，设置其for属性为相应的id。例如: 423 | ``` 424 | <input type="radio" id="whole_beantype" name="beantype" value="whole"> 425 | <label for="whole_beantype">Whole bean</label><br> 426 | <input type="radio" id="ground_beantype" name="beantype" value="ground" checked> 427 | <label for="ground_beantype">Ground</label> 428 | ``` 429 | 430 | ### `field`和`legend` 分组 431 | 当表单变的越来越大时，在视觉上对元素分组会很有帮助，可以用fieldset做到，legend为这一组提供一个标签,例如: 432 | ``` 433 | <fieldset> 434 | <legend>Ship to</legend> 435 | <div class="tableRow"> 436 | ... 437 | </fieldset> 438 | ``` 439 | 440 | ### `passwords input` 密码 441 | 输入的文本会加掩码,例如： 442 | ``` 443 | <input type="password" name="secret"> 444 | ``` 445 | 446 | ### `file input` 文件 447 | 创建一个文件输入控件,使用这个元素的前提是必须使用POST方法, 例如: 448 | ``` 449 | <input type="file" name="doc"> 450 | ``` 451 | 452 | ### 多选菜单 453 | 为select元素增加布尔属性multiple，在屏幕上显示所有项，选择时同时按下ctrl或command键，可以选择多个选项,例如： 454 | ``` 455 | <select name="characters" multiple> 456 | <option value="Buckaroo">Buckaroo Banzai</option> 457 | <option value="Tommy">Perfect Tommy</option> 458 | <option value="penny">Penny Priddy</option> 459 | <option value="Jersey">New Jersey</option> 460 | <option value="John">John Parker</option> 461 | </select> 462 | ``` 463 | 464 | ###`placeholder` 提示 465 | 为填写表单的人提供提示, 比正常内容浅一些, 例如： 466 | ``` 467 | <input type="text" placeholder="Buckaroo Banzai"> 468 | ``` 469 | 470 | ### `Required` 必要 471 | 可用于任何表单控件, 指示一个域是必要的, 对于设置了这个属性的控件, 如果没有指定值, 就无法正常提交表单, 例如: 472 | ``` 473 | <input type="text" placeholder="Buckaroo Banzai" required> 474 | ``` 475 | 476 | ### `text input` 文本输入 477 | 用type属性指示你希望得到一个"文本"输入, 大多数表单元素都需要一个名字, 服务器脚本将使用这个元素名, 用maxlength限制最大字符数, 例如创建一个单行控件： 478 | ``` 479 | <input type="text" name="fullname"> 480 | ``` 481 | 482 | ### `submit input` 提交输入 483 | 创建一个按钮, 允许你提交表单, 点击该按钮时, 浏览器将表单发送到服务器进行处理。标签默认为"Submit"(提交), 或者"Submit Query"(提交查询), 用value属性制定提交按钮的名字, 例如： 484 | ``` 485 | <input type="submit"> 486 | ``` 487 | 488 | ### `radio input` 单选按钮 489 | 创建包含多个按钮的控件, 一次只能选择一个按钮。给一组给定选项关联的单选按钮必须有相同的名字...每个选项可以有不同的值, 通常将单选按钮的标签放在元素右边,使用checked布尔属性默认选中某个元素,例如： 490 | ``` 491 | <input type="radio" name="hotornot" value="hot"> hot 492 | <input type="radio" name="hotornot" value="not" checked> not 493 | ``` 494 | 495 | ### `checkbox input` 复选按钮 496 | 创建复选框控件，可以选中也可以不选中,允许选择0个或多个选项。给一组给定选项关联的单选按钮必须有相同的名字name...每个选项有不同的值value,通常将复选按钮的标签放在元素右边,使用checked布尔属性默认选中某个元素,例如： 497 | ``` 498 | <input type="checkbox" name="spice" value="salt"> 499 | <input type="checkbox" name="spice" value="Pepper"> 500 | <input type="checkbox" name="spice" value="Garlic" checked> 501 | ``` 502 | 503 | ### `textarea` 文本区 504 | - `<textarea>` 元素会创建一个多行的文本区，如果文本在文本区中放不下，右边还会出现一个滚动条，非空元素 505 | - `name` 指定唯一的名字 506 | - `rows` 告诉浏览器文本区高度为多少字符,`cols`属性告诉浏览器文本区宽度为多少字符。 507 | - 例如: 508 | ``` 509 | <textarea name="comments" rows="10" cols="48"></textarea> 510 | ``` 511 | 512 | ### `select` 菜单 513 | - 创建一个菜单控件，从一组选项中做出选择 514 | - `name` 指定名字 515 | - `option` 元素的内容用作作为菜单项的描述 516 | - 例子: 517 | ``` 518 | <select name="characters"> 519 | <option value="Buckaroo">Buckaroo Banzai</option> 520 | <option value="Tommy">Perfect Tommy</option> 521 | <option value="penny">Penny Priddy</option> 522 | <option value="Jersey">New Jersey</option> 523 | <option value="John">John Parker</option> 524 | </select> 525 | ``` 526 | 527 | --- 528 | 529 | ## html5表单控件 530 | ### `number input` 数字输入 531 | 限制只能输入数字，用min,max来限制允许输入的数字, 例子: 532 | ``` 533 | <input type="number" min="0" max="20"> 534 | ``` 535 | 536 | ### `range input` 范围输入 537 | 类似number，显示滑动条,step指定步长,例子: 538 | ``` 539 | <input type="range" min="0" max="20" step="5"> 540 | ``` 541 | 542 | ### `color input` 颜色输入 543 | 单击时弹出颜色选择器,例子: 544 | ``` 545 | <input type="color"> 546 | ``` 547 | 548 | ### `date input` 日期输入 549 | 日期选择器,例子: 550 | ``` 551 | <input type="date"> 552 | ``` 553 | 554 | ### `email input` email输入 555 | 文本输入元素，在移动浏览器上，开始输入email时会得到一个方便输入email的定制键盘,例子 : 556 | ``` 557 | <input type="email"> 558 | ``` 559 | 560 | ### `tel input` tel 输入 561 | 与email类似，在移动设备上弹出一个定制键盘, 例子 : 562 | ``` 563 | <input type="tel"> 564 | ``` 565 | 566 | ### `url input` url 输入 567 | 和email，tel类似, 例子 : 568 | ``` 569 | <input type="url"> 570 | ``` 571 | 572 | ## html5新增元素 573 | 上面的都是属于html的标准的，html5在这个基础上又添加了一些新的元素，如article,nav,header,footer,time,aside,section,video等,虽然这些新元素用起来和原来的一样，但是使用新元素，浏览器，搜索引擎和开发人员就能肯定该元素是什么，用最合适的元素完成任务。比如aside元素，在屏幕大小受限的移动手机上，浏览器知道这个内容是一个aside，你可能会看到内容被塞到页面最下面，让你首先看到最重要的内容。相反如果使用div就什么情况都可能发生。这些元素本身没有多少样式，不过可以为页面中的内容增加含义信息. 574 | 575 | ### `footer` 页脚 576 | 用`footer`表明这段是页脚，例如: 577 | ``` 578 | <footer> 579 | © 2012, Starbuzz Coffee 580 | <br> 581 | All trademarks and registered trademarks appearing on 582 | this site are the property of their respective owners. 583 | </footer> 584 | //相应的css也需要改变，把#footer 改成footer 585 | footer { 586 | background-color: #675c47; 587 | color: #efe5d0; 588 | text-align: center; 589 | padding: 15px; 590 | margin: 0px 10px 10px 10px; 591 | font-size: 90%; 592 | } 593 | ``` 594 | 595 | ### `section` 节 596 | 用`section`将相关内容组织在一起,例如可以把饮料内容都放在一起，主要内容放在一起,例如 : 597 | ``` 598 | <section id="drinks"> 599 | <h1>BEVERAGES</h1> 600 | <p>House Blend, $1.49</p> 601 | <p>Mocha Cafe Latte, $2.35</p> 602 | <p>Cappuccino, $1.89</p> 603 | <p>Chai Tea, $1.85</p> 604 | <h1>ELIXIRS</h1> 605 | <p> 606 | We proudly serve elixirs brewed by our friends 607 | at the Head First Lounge. 608 | </p> 609 | <p>Green Tea Cooler, $2.99</p> 610 | <p>Raspberry Ice Concentration, $2.99</p> 611 | <p>Blueberry Bliss Elixir, $2.99</p> 612 | <p>Cranberry Antioxidant Blast, $2.99</p> 613 | <p>Chai Chiller, $2.99</p> 614 | <p>Black Brain Brew, $2.99</p> 615 | </section> 616 | ``` 617 | 618 | ### `article` 文章 619 | 用`article`包含独立的内容，如一个新闻报道，例如: 620 | ``` 621 | <article> 622 | <header> 623 | <h1>Starbuzz uses computer science</h1> 624 | <time datetime="2012-03-10">3/10/2012</time> 625 | </header> 626 | <p> 627 | Have you ever noticed how efficient a Starbuzz Coffee 628 | house is? The lines alway move fast, and despite the 629 | astronomical number of different drinks any customer can 630 | order, we have your drink up, hot (or cold if that's the 631 | way you want it) and ready in seconds. How do we do it? 632 | </p> 633 | </article> 634 | ``` 635 | 636 | ### `time` 日期 637 | time元素有个重要的属性:datetime,datetime要用官方internet日期格式来写，如果内容没有按官方日期写，就必须有datetime属性。官方日期完整格式为yyyy-MM-dd hh:mm，可以指定一部分.例如： 638 | ``` 639 | <time datetime="2012-02-18">2/18/2012</time> 640 | ``` 641 | 642 | ### `header` 元素 643 | 可以为article,section,aside增加header元素，可以增加一些内容，比如署名，footer元素也可以,通常，section和article都会有一个header,用来提供描述或介绍,即使只有一个标题也可以使用header,提供额外的语义含义，将文章的首部与其余的内容区分开。例如: 644 | ``` 645 | <section id="blog"> 646 | <article> 647 | <header> 648 | <h1>Starbuzz meets social media</h1> 649 | <time datetime="2012-03-12">3/12/2012</time> 650 | </header> 651 | ... 652 | ``` 653 | 654 | ### `nav` 导航 655 | 导航nav,创建一组链接，包围在一个无序列表中，使用一个类来标识被选中的一项,nav可以插入到页眉的下面 656 | ``` 657 | <nav> 658 | <ul> 659 | <li><a href="index.html">HOME</a></li> 660 | <li class="selected"><a href="blog.html">BLOG</a></li> 661 | <li><a href="">INVENTIONS</a></li> 662 | <li><a href="">RECIPES</a></li> 663 | <li><a href="">LOCATIONS</a></li> 664 | </ul> 665 | </nav> 666 | //对应要为他们设置css样式，不然不符合期望 667 | nav { 668 | background-color: #efe5d0; 669 | margin: 10px 10px 0px 10px; 670 | } 671 | nav ul { 672 | margin: 0px; 673 | list-style-type: none; 674 | padding: 5px 0px 5px 0px; 675 | } 676 | nav ul li { 677 | display: inline; 678 | padding: 5px 10px 5px 10px; 679 | } 680 | nav ul li a:link, nav ul li a:visited { 681 | color: #954b4b; 682 | border-bottom: none; 683 | font-weight: bold; 684 | } 685 | nav ul li.selected { 686 | background-color: #c8b99c; 687 | } 688 | 689 | ``` 690 | 691 | ### 其他html5元素 692 | - `mark`：突出显示某些文本 693 | - `audio`: 声音内容 694 | - `progress`: 显示任务完成进度 695 | - `meter`: 显示某个范围的度量 696 | - `figure`: 定义类似照片，图表，甚至代码清单等独立的内容 697 | 698 | --- 699 | 700 | ## 视频 701 | ### `video` 702 | `<video>`可以用来播放视频，一般的格式如下: 703 | ``` 704 | <video controls autoplay width="512" height="288" src="video/tweetsip.mp4"> 705 | </video> 706 | ``` 707 | - `autoplay`,指定自动播放 708 | - `controls`,提供一组控件来控制播放，暂停，调节音量等 709 | - `autoplay`和`controls`是"布尔属性",有就显示，没有就不会出现。注意autoplay属性，通常用户希望决定加载页面时是否播放视频，另外controls属性对于不同浏览器提供的控件有所不同 710 | - `poster`属性可以在视频未播放时显示这个图像`poster="images/poster.png"`,通常浏览器会显示视频第一帧，往往是黑屏 711 | - `preload`用来细粒度地控制视频如何加载，实现优化。大多数情况下，浏览器根据autoplay和用户带宽决定加载多少视频，可以覆盖这种设置。preload取值: 712 | - `none`,则用户播放视频之前不加载视频 713 | - `metadata`，下载视频元数据 714 | - `auto`,让浏览器做决定 715 | - `loop` 属性，布尔属性，决定视频结束后哦是否自动重新开始播放视频. 716 | - `width`,`height`设置视频显示区，海报会缩放到指定宽度和高度，视频会保持宽高比，有多余则显示黑边. 717 | 718 | ### 视频格式 719 | 一个视频文件包括两个部分，一个视频部分和一个音频部分，每个部分使用特定编码类型来编码，容器也有自己的格式和格式名,现在主要有3种格式的视频：`mp4(H.264,aac)` ,`webm(vp8,vorbis)` ,`ogg(theora,vorbis)` ,那么如何处理所有这些格式呢？在video元素中可以对应每种格式分别使用一个`<source>`元素，浏览器从上往下找，直到找到它能播放的一种格式。 720 | ``` 721 | <video controls autoplay width="512" height="288"> 722 | <source src="video/tweetsip.mp4"> 723 | <source src="video/tweetsip.webm"> 724 | <source src="video/tweetsip.ogv"> 725 | <p>Sorry, your browser doesn't support the video element.</p>//如果浏览器不支持视频，显示此文本 726 | </video> 727 | ``` 728 | 729 | ### 视频选择 730 | `source`中可以具体的指定视频格式，为浏览器提供帮助，因为浏览器在决定是否能够播放一个文件之前还要做一些侦查工作，type指定视频文件的容器格式，视频编码器和音频编码器,如果不知道`codecs`参数可以省略,例如： 731 | ``` 732 | <source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"`> 733 | ``` 734 | 如果你喜欢flash可以把flash放到`<object>...</object>`控件中，并放到source标记下面，如果浏览器不认识video元素，就会使用flash视频。 735 | -------------------------------------------------------------------------------- /FrontEnd/html5_cheatsheet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/FrontEnd/html5_cheatsheet.jpg -------------------------------------------------------------------------------- /FrontEnd/meteor-note.md: -------------------------------------------------------------------------------- 1 | title: "meteor.js 学习笔记" 2 | tags: [js,meteor] 3 | 4 | --- 5 | 6 | ##链接 7 | - [官网](https://www.meteor.com/) 8 | - [github](https://github.com/meteor/meteor/) 9 | - [meteor.js国外社区](https://forums.meteor.com/) 10 | - [meteor.js中文社区](http://www.meteorhub.org/) 11 | - [meteor.js中文社区2](http://cmeteor.org/) 12 | -------------------------------------------------------------------------------- /FrontEnd/sass-note.md: -------------------------------------------------------------------------------- 1 | title: "sass note" 2 | tags: 3 | --- 4 | 5 | > 本文多数内容来自 <http://riny.net/2014/sass-guide/> 6 | 7 | # 基本命令 8 | ## 安装 9 | ``` 10 | $ gem install sass 11 | ``` 12 | 13 | ## 查看版本 14 | ``` 15 | $ sass -v 16 | ``` 17 | 18 | ## 编译单个文件 19 | ``` 20 | sass test.scss test.css 21 | ``` 22 | 23 | ## 设置输出css文件的风格 24 | ``` 25 | sass --style compressed test.scss test.css 26 | ``` 27 | 输出样式的风格可以有四种选择，默认为nested 28 | 29 | - nested：嵌套缩进的css代码 30 | - expanded：展开的多行css代码 31 | - compact：简洁格式的css代码 32 | - compressed：压缩后的css代码 33 | 34 | ## 监控单个文件变化 35 | ``` 36 | sass --watch test.scss:test.css 37 | ``` 38 | 39 | ## 监控文件夹变化 40 | ``` 41 | sass --watch src:dest 42 | ``` 43 | 44 | # 语法 45 | ## 普通变量 46 | ``` 47 | $base-gap: 10px; 48 | $base-color: #333; 49 | 50 | .test { 51 | margin-top: $base-gap; 52 | color: $base-color; 53 | } 54 | ``` 55 | 如果在字符串中引用变量，则需要将变量名写在`#{}`中 56 | ``` 57 | $img-dir: "public/images/"; 58 | 59 | .test { 60 | background-image: url(#{$img-dir}icon.png); 61 | } 62 | ``` 63 | 64 | ## 默认变量 65 | 默认变量用来提供sass的默认值。它的含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用默认值。这在书写sass库文件时非常有用。设置默认变量的方法也非常简单，只需在变量值后加上!default即可。 66 | ``` 67 | $color: #ccc; 68 | $color: #000 !default; 69 | p { 70 | color: $color; 71 | } 72 | ``` 73 | 74 | ## 多值变量 75 | 多值变量类似js中的数组，声明时只需用空格将多个值隔开即可。如： 76 | ``` 77 | $colors: #fff #ccc #999 #666 #333; 78 | ``` 79 | 我们可以通过length($colors)来获取多值变量的值的个数，通过nth($colors, index)来获取第index个位置的值。ps: index的取值范围为1到length($colors)。 80 | ``` 81 | $colors: #fff #ccc #999 #666 #333; 82 | p::after { 83 | content: "#{length($colors)}"; // 5 84 | color: nth($colors, 1); // #fff 85 | } 86 | ``` 87 | 88 | ## 嵌套 89 | ``` 90 | .list { 91 | margin-top: 10; 92 | } 93 | .list li { 94 | padding-left: 15px; 95 | } 96 | .list a { 97 | color: #333; 98 | } 99 | .list a:hover { 100 | text-decoration: none; 101 | } 102 | ``` 103 | 104 | 用嵌套改写: 105 | ``` 106 | .list { 107 | margin-top: 10px; 108 | li { 109 | padding-left: 15px; 110 | } 111 | a { 112 | color: #333; 113 | &:hover { 114 | text-decoration: none; 115 | } 116 | } 117 | } 118 | ``` 119 | 嵌套代码中的&表示父元素选择器。嵌套虽然很方便，但不建议嵌套层次太深，以免生成的css选择器过长。除了选择器可以嵌套外，css属性也可以嵌套(用的相对较少)，如： 120 | ``` 121 | .test { 122 | border: { 123 | width: 2px; 124 | style: solid; 125 | color: #000; 126 | } 127 | } 128 | ``` 129 | 130 | ## 导入.sass或.scss文件 131 | 在使用@import导入sass文件时，可以省略sass文件的后缀名.sass或.scss，例如： 132 | ``` 133 | - a.scss 134 | body { 135 | background-color: #f00; 136 | } 137 | - style.scss 138 | @import "a"; 139 | div { 140 | color: #333; 141 | } 142 | ``` 143 | 编译整个sass目录的话，会发现一个问题，在生成style.css的同时也生成了一个a.css 144 | 在文件名前加上下划线_，sass编译的时候就会忽略这个文件 145 | 146 | ## 导入css文件 147 | 当然，如果你需要像原生css那样去导入其他的css文件，也是可以的，如果符合以下三条中的任意一种情况，sass就会认为你想用css原生的@import: 148 | 149 | 被导入的文件名以.css结尾 150 | 被导入的文件是一个在线的url地址 151 | 以@import url(...)方式去导入文件 152 | 153 | ## 注释 154 | sass会在生成的css文件中删除单行注释，只保留css原生的注释内容 155 | ``` 156 | .test { 157 | margin: 10px; // 这块注释不会出现在生成的css文件中 158 | color: #333; /* 这块注释会出现在生成的css文件中 */ 159 | } 160 | ``` 161 | 162 | 163 | ## 简单混合器 164 | 165 | sass中的混合器一般用来解决大段代码重复的问题。比如我们经常使用的单行文本溢出显示省略号，可以使用@mixin来定义一个简单的混合器： 166 | ``` 167 | @mixin ellipsis { 168 | width: 100%; 169 | overflow: hidden; 170 | white-space: nowrap; 171 | text-overflow: ellipsis; 172 | } 173 | ``` 174 | 然后在需要用到的地方我们可以通过@include来使用这个混合器： 175 | ``` 176 | .text { 177 | @include ellipsis; 178 | } 179 | ``` 180 | 输出的css为： 181 | ``` 182 | .text { 183 | width: 100%; 184 | overflow: hidden; 185 | white-space: nowrap; 186 | text-overflow: ellipsis; 187 | } 188 | ``` 189 | 190 | ## 带参数的混合器 191 | 192 | 混合器不仅可以实现代码的重复利用，还可以传递参数，根据需要生成不同的css。这在跨浏览器的css3兼容方面尤为好用。例如： 193 | ``` 194 | @mixin radius($value) { 195 | -moz-border-radius: $value; 196 | -webkit-border-radius: $value; 197 | border-radius: $value; 198 | } 199 | ``` 200 | 使用时，我们只需传入相应的参数值即可。 201 | ``` 202 | .test { 203 | @include radius(3px); 204 | } 205 | ``` 206 | 生成的css为： 207 | ``` 208 | .test { 209 | -moz-border-radius: 3px; 210 | -webkit-border-radius: 3px; 211 | border-radius: 3px; 212 | } 213 | ``` 214 | 另外我们还可以给参数提供默认值，如： 215 | ``` 216 | @mixin link-colors($normal: #333, $hover: $normal, $visited: $normal) { 217 | color: $normal; 218 | &:hover { 219 | color: $hover; 220 | } 221 | &:visited { 222 | color: $visited; 223 | } 224 | } 225 | ``` 226 | 调用时，可以传参，也可以不传： 227 | 228 | ``` 229 | .text { 230 | @include link-colors; 231 | } 232 | .error { 233 | @include link-colors(red); 234 | } 235 | a { 236 | @include link-colors(blue, green, yellow); 237 | } 238 | ``` 239 | 240 | 生成的css为： 241 | ``` 242 | // 鉴于篇幅问题，已将生成的代码改成单行 243 | .text { color: #333;} 244 | .text:hover { color: #333;} 245 | .text:visited { color: #333;} 246 | 247 | .error { color: red;} 248 | .error:hover { color: red;} 249 | .error:visited { color: red;} 250 | 251 | a { color: blue;} 252 | a:hover { color: green;} 253 | a:visited {color: yellow;} 254 | ``` 255 | 256 | ## 继承extend 257 | 258 | 使用sass时，继承是一个很不错的减少css重复代码的功能。继承可以让一个选择器继承另一个选择器的所有样式，并联合声明。可以使用@extend语法来实现继承。 259 | 260 | .text { 261 | color: #333; 262 | font-size: 14px; 263 | margin: 10px 0; 264 | } 265 | .error { 266 | @extend .text; 267 | color: #f00; 268 | } 269 | 上面代码中，.error继承了.text中的所有样式，并且.error和.text中的公共样式会进行联合声明。生成的css为： 270 | 271 | .text, .error { 272 | color: #333; 273 | font-size: 14px; 274 | margin: 10px 0; 275 | } 276 | 277 | .error { 278 | color: #f00; 279 | } 280 | 这种继承虽然方便，但是也有一定的弊端。比如我们仅仅想继承.text类中的样式，而实际并不需要.text的这个类。换句话说就是我们的html中并没有class="text"这样的代码，这样的话生成的css中的.text其实就是多余的。 281 | 282 | ## 占位选择器% 283 | 284 | 占位选择器的优势在于：声明之后，如果不调用，则不会产生类似.text的多余css代码。占位选择器通过%标识来定义，也是通过@extend来调用。 285 | ``` 286 | %text { 287 | color: #333; 288 | font-size: 14px; 289 | margin: 10px 0; 290 | } 291 | .warn { 292 | @extend %text; 293 | color: #fdd; 294 | } 295 | .error { 296 | @extend %text; 297 | color: #f00; 298 | } 299 | ``` 300 | 生成的css为： 301 | ``` 302 | .warn, .error { 303 | color: #333; 304 | font-size: 14px; 305 | margin: 10px 0; 306 | } 307 | .warn { 308 | color: #fdd; 309 | } 310 | .error { 311 | color: #f00; 312 | } 313 | ``` 314 | 这样就不会再额外生成多余的样式了。 315 | 316 | ## `@if`添加判断 317 | 318 | sass中的@if语句和js中的if很相似。可以单独使用，也可以配合@else使用。 319 | ``` 320 | $lte7: true; // 是否支持ie7以下版本 321 | $theme: yellow; 322 | .clearfix { 323 | @if $lte7 { 324 | zoom: 1; 325 | } 326 | &:after { 327 | content: "."; 328 | display: block; 329 | height: 0; 330 | clear: both; 331 | visibility: hidden; 332 | } 333 | } 334 | 335 | body { 336 | @if $theme == red { 337 | background: rgba(255, 0, 0, 0.5); 338 | } @else if $theme == yellow { 339 | background: rgba(255, 255, 0, 0.5); 340 | } @else if $theme == black { 341 | background: rgba(0, 0, 0, 0.5); 342 | } 343 | } 344 | ``` 345 | 生成css为： 346 | ``` 347 | .clearfix { 348 | zoom: 1; 349 | } 350 | .clearfix:after { 351 | content: "."; 352 | display: block; 353 | height: 0; 354 | clear: both; 355 | visibility: hidden; 356 | } 357 | body { 358 | background: rgba(255, 255, 0, 0.5); 359 | } 360 | ``` 361 | 362 | ## 三目运算判断 363 | 364 | 三目运算符的语法为：`@if($condition, $condition_true, $condition_false)`，例如： 365 | ``` 366 | $fontBold: true; 367 | .title { 368 | font-weight: if($fontBold, bold, normal); 369 | } 370 | 生成的css为 371 | 372 | .title { 373 | font-weight: bold; 374 | } 375 | ``` 376 | 377 | ## sass相关工具推荐 378 | 379 | [sass在线编译](http://sassmeister.com) 380 | [sass可视化编译工具: Koala]() 381 | -------------------------------------------------------------------------------- /Languages/README.md: -------------------------------------------------------------------------------- 1 | ========== 2 | 3 | # 主流语言 4 | - C 5 | 6 | # 脚本语言 7 | - JavaScript 8 | 9 | 10 | ## AppleScript 11 | - 资料《AppleScript》跟我学 12 | -------------------------------------------------------------------------------- /Languages/books.md: -------------------------------------------------------------------------------- 1 | BootstrappingDesign_v1.0.pdf 2 | CoffeeScript - Accelerated JavaScript Development.pdf 3 | GNUMakeManual.pdf 4 | JavaScript.Web.Applications.pdf 5 | JavaScript设计模式.pdf 6 | JavaScript高级程序设计(中文)-第3版.pdf 7 | Non-Designers.Design.Book.3rd.Edition.pdf 8 | [W3Cfuns]CSS权威指南《第3版》.pdf 9 | ashlyn-black_c-reference.pdf 10 | bootstrappingdesign_sample.pdf 11 | c reference card (ansi) 2.2.pdf 12 | lisp入门教程.pdf 13 | 苹果脚本跟我学.pdf -------------------------------------------------------------------------------- /Languages/c-note.md: -------------------------------------------------------------------------------- 1 | title: "c note" 2 | tags: 3 | --- 4 | 5 | # cc编译命令 6 | cc是c语言编译器的统称，一般指向系统的c编译器，如gcc或clang。 7 | 8 | - `cc program.c` 产生一个a.out的可执行程序，删除目标文件 9 | - `cc main.c sort.c lookup.c` 编译并链接几个源文件，不删除目标文件 10 | - `cc -c program.c` 编译单个c源文件，产生一个目标文件 11 | - `cc -c program.c sort.c lookup.c` 编译多个c源文件，为每个文件产生一个目标文件 12 | - `cc main.o sort.o lookup.o` 链接几个目标文件 13 | 产生可执行程序的命令均可以加上`-o name`选项重命名a.out 14 | 15 | # cmakelist 和 makefile的区别 16 | CMake是一个跨平台的软件，在很多平台可以使用。一般在windows下，我们会直接使用VS生成项目，在linux下面，我们也可以使用QT Creater生成项目，但是两个不同平台上面的项目不能相互移植。这就有了CMake的用武之地，我们可以先编写一个CMakeLists.txt文件，将需要的.h和.cpp文件包含进来，然后在不同的平台使用CMake调用各自的编译器生成各自的工程。 17 | 18 | 大家都知道，写程序大体步骤为： 19 | 20 | 1.用编辑器编写源代码，如.c文件。 21 | 22 | 2.用编译器编译代码生成目标文件，如.o。 23 | 24 | 3.用链接器连接目标代码生成可执行文件，如.exe。 25 | 26 | 但如果源文件太多，一个一个编译时就会特别麻烦，于是人们想到，为什么不设计一种类似批处理的程序，来批处理编译源文件呢，于是就有了make工具，它是一个自动化编译工具，你可以使用一条命令实现完全编译。但是你需要编写一个规则文件，make依据它来批处理编译，这个文件就是makefile，所以编写makefile文件也是一个程序员所必备的技能。 27 | 28 | 对于一个大工程，编写makefile实在是件复杂的事，于是人们又想，为什么不设计一个工具，读入所有源文件之后，自动生成makefile呢，于是就出现了cmake工具，它能够输出各种各样的makefile或者project文件,从而帮助程序员减轻负担。但是随之而来也就是编写cmakelist文件，它是cmake所依据的规则。所以在编程的世界里没有捷径可走，还是要脚踏实地的。 29 | 30 | 31 | # 实践建议 32 | - 可以用while((ch=getchar())!=EOF && ch != '\n' )进行无用字符的读取。 33 | - 为什么ch被声明为整形，而事实上我们用它看来读取字符？因为EOF是一个整型值。 34 | - 确保数组有空间容纳终止符。 35 | - if或者各种函数调用的括号首尾加空格，可以突出表达式的内容,参数之间也用空格隔开 36 | - 应该使用 typedef而不是 #define来创建新的类型名，因为后者无法正确地处理指针类型。如: 37 | 38 | ``` 39 | #define d_ptr_to_char char * 40 | d_ptr_to_char a,b 41 | ``` 42 | 这里正确地声明了a，但b被声明为一个字符。 43 | - malloc的时候sizeof（）切记不能写成typedef出来的值，而是`struct Node` 44 | 45 | # 基本 46 | - for(int i = 0; i< 100 ;i++) 在c99中才能使用，一般情况下需要先声明后使用 47 | - 在提交题目前将无用的输出语句都去掉。 48 | - 注意题目的输入格式 ，如`while(scanf("%f%f%f",&xc,&yc,&r) != EOF)` 49 | - 注意floor和ceil返回的都是float，要取整得转成int 50 | - 最好用double，效率和空间不是问题,在目前的硬件环境下，最好都用double。嵌入式除外 51 | - 涉及比较，浮点数的题目的时候不要用float,用double，因为比较的时候差别有时候就是很小的。 52 | - \#define的常量一般都大写，用于提醒它们不是不同的变量 53 | - 函数原型中参数的名字不是必须的。 54 | - 函数中变量可以声明为const,代表在函数中不会修改所传递的参数的值 55 | - 在c语言中，数组参数按引用形式传递，标量和常量按值传递，因此对变量参数的任何修改都会在函数返回时丢失，但是修改数组参数中的元素时，就会被实际的修改。 56 | - 字符串就是一串以NUL字节结尾的字符，例如字符串常量"Hello"在内存中占据6个字节的空间。 57 | - 如果你要从函数中返回一个数组作为结构，只能通过数组传参。 58 | - 在函数声明的数组参数中，不指定数组的长度。但函数没办法知道该数组的长度，如果确实需要数组的长度，它的值必须作为一个单独的参数传递给函数。 59 | - 注意进行数组下标检查 60 | - 声明指针的时候用`int *a`的方式，而不是`int* a`，因为`int* b, c, d`很容易让人以为把所有三个变量都声明为指向整形的指针，事实上并不是这样，应该`int *b, *c, *d`。 61 | - 定义常量可以用const, 可以`const int a`,也可以`int const a`,但坚持用一种。可以在声明的时候对其进行初始化。当涉及指针时，`int const *pci`是一个指向整形常量的指针，可修改指针。`int * const pci`是一个指向整形的常量指针，不可修改指针。记忆的时候看const靠近哪个，那个就是不变的。另外`int const * const pci`两个都不可以变。 62 | - static 关键字可以使链接属性变成internal，被该源文件所私有，只对缺省为external的声明有效。extern关键字为一个标识符指定external链接属性 63 | - 在任何代码块之外声明的变量总是存储在静态内存中，在程序运行之前创建。在代码块内部声明的变量的存储在堆栈中，称为自动变量。 64 | - 在代码块内部声明的变量如果加上关键词static可以让它的存储类型从自动编程静态。 65 | 66 | # stdlib库 67 | - <stdlib.h> 头文件里包含了C语言的中最常用的系统函数 68 | - EXIT_FAILURE 失败状态码 69 | - EXIT_SUCCESS 成功状态码 70 | - exit(retval) 用于正常退出程序 71 | 72 | 73 | # stdio库 74 | - <stdio.h>头文件定义了用于输入和输出的函数、类型和宏。 75 | - while(scanf("%f %f %f",&xc,&yc,&r) != EOF) 76 | - printf("a1=%c, a2=%d, b=%c, c=%d, d=%c\n", a, a, b, c, d); 77 | - printf与scanf不同的是，scanf 的变量前要带一个&符号；&称为取地址符，也就是获取变量在内存中的地址。 78 | - gets函数从标准输入读取一行文本并把它存储于作为参数传递给它的数组中，如gets(input)。 79 | - 用puts输出字符串,把指定的字符串写到标准输出并在末尾添加一个换行符. 80 | - 对于scanf必须小心，所有标量参数的前面必须加上一个"&"符号，数组参数前面不需要，但是如果数组参数中出现了下标引用，他们它的前面也必须加上"&"符号。用%s格式码输入值时，中间不能包含空白。因为使用所有格式码（除去%c）时，输入值之前的空白（空格，制表符，换行符）都会被跳过，值后面的空白标示该值的结束。 81 | - 用putchar输出单个字符 82 | 83 | # ctype库 84 | - <ctype.h> 主要提供两类重要的函数：字符测试函数和字符大小转化函数。 85 | - `extern int isspace(int c);`,ispace函数判断字符c是否为空白符 86 | - `int isalpha (int c)`,isalpha测试字符是否为英文字母,为宏 87 | 88 | # string库 89 | - <string.h> 头文件里包含了C语言的最常用的字符串操作函数 90 | - `extern char *strcpy(char *dest,char *src);`把src所指由NULL结束的字符串复制到dest所指的数组中。 91 | - extern int strlen(char *s); 计算字符串s的长度，不包括NUL 92 | - extern int strcmp(char *s1,char * s2); 当s1<s2时，返回值<0;当s1=s2时，返回值=0;当s1>s2时，返回值>0 93 | 94 | 95 | # 数据类型 96 | - char 用'',字符串用"" 97 | - 可以看出，ASCII 码将字符和整数联系起来了，你可以给 char 变量一个整数，也可以给 int 变量一个字符，它们可以相互转换。 98 | - 对于无符号整数的声明,long和short同， 99 | ``` 100 | // 下面的两种写法都是正确的，使用 unsigned 时可以不写 int 101 | unsigned int a=100; 102 | unsigned a=999; 103 | ``` 104 | - short 一般占2个字节，int 占 4 个字节，long 也占 4 个字节，char 的长度始终都是1个字节，float 的长度为 4 个字节，double 占用 8 个字节，是双精度浮点数，忘了可以用sizeof求 105 | - system("pause");可以用来暂停等待用户输入 106 | - sizeof(14.67) 的结果是8，不错，因为小数默认的类型就是double。 107 | 108 | # 运算 109 | - 我们把诸如a++这样的操作叫做后自增，也就是先进行其他操作，再进行自增操作；而把++a叫做前自增，会先进行自增操作，再进行其他操作。一般使用后自增，防止前自增的错误 110 | 111 | # Array 112 | ## decalare 113 | - int array[5]; 114 | 115 | ## initialize 116 | - int array[5] = {1,2,3,4,5}; // no more than 5 117 | - int array = {1,2,3,4,5}; //make an array that just hold the 5 numbers 118 | 119 | ## get the size of an array 120 | - `int n = sizeof(array)/sizeof(*array);` 121 | 122 | 123 | # 输入输出 124 | 125 | - 如果仅仅是输入单个字符，也可以使用 getchar,注意getchar也是带有缓冲区的 126 | 127 | float : %f 默认保留6位小数 128 | double : %lf 129 | int : %d 130 | octal : %o 131 | hexadecimal : %x 132 | unsigned : %u 133 | 134 | ## 美观 135 | %-9d中，d表示以十进制输出，9表示最少占9个字符的宽度，宽度不足以空格补齐，-表示左对齐。综合起来，%-9d表示以十进制输出，左对齐，宽度最小为9个字符。大家可以亲自试试%9d的输出效果。`%[flags][width][.precision]type` 136 | flags 137 | 几种常见的标志字符 138 | 标志字符 含 义 139 | - - 左对齐 140 | - + 输出符号（正号或负号） 141 | - 空格 输出值为正时冠以空格，为负时冠以负号 142 | - # 143 | - 对c、s、d、u类无影响； 144 | - 对o类，在输出时加前缀o； 145 | - 对x类，在输出时加前缀0x； 146 | - 对e、g、f 类当结果有小数时才给出小数点 147 | 148 | ## 缓冲区 149 | fflush(stdin);用来清空输入缓冲区，这是什么意思呢？ 150 | 151 | 在内存中，有一块区域（比如512字节）专门用来保存用户输入的数据，遇到 scanf 时，程序会首先检查该区域是否有数据： 152 | 如果没有，就等待用户输入，用户从键盘输入的每个字符都会暂时保存到这里，直到按下回车键，输入结束，scanf 再从这里读取数据，赋值给变量。 153 | 如果有数据，哪怕是一个字符，scanf 也会直接读取，不会等待用户输入。 154 | 155 | 这块内存区域，就叫做缓冲区（Buffer），或者缓存（Cache）；又因为它是用来暂存用户输入的数据的，所以又叫输入缓冲区。 156 | 157 | > 这里重点是告诉大家 scanf 是带有缓冲区的 158 | 159 | # 取整 160 | ## floor 161 | extern float floor(float x); 162 | 163 | 用法：#include <math.h> 164 | 165 | 功能：求不大于x的最大整数 166 | 167 | 说明：返回x的下限，如74.12的下限为74，-74.12的下限为-75。返回值为float类型。 168 | 169 | ## ceil 170 | 原型：extern float ceil(float x); 171 | 172 | 用法：#include <math.h> 173 | 174 | 功能：求不小于x的最小整数 175 | 176 | 说明：返回x的上限，如74.12的上限为75，-74.12的上限为-74。返回值为float类型。 177 | -------------------------------------------------------------------------------- /Languages/cpp-note.md: -------------------------------------------------------------------------------- 1 | C++ 笔记 2 | ======= 3 | 4 | 5 | # string 常用 6 | - string substr(pos,length) 7 | - int find_first_of() find_first_of 是給定一個要查找的字符集，找到這個字符集中任何一個字符所在字符串中第一個位置。 8 | 9 | #vector 常用 10 | 1.push_back 在数组的最后添加一个数据 11 | 2.pop_back 去掉数组的最后一个数据 12 | 3.at 得到编号位置的数据 13 | 4.begin 得到数组头的指针 14 | 5.end 得到数组的最后一个单元+1的指针 15 | 6．front 得到数组头的引用 16 | 7.back 得到数组的最后一个单元的引用 17 | 8.max_size 得到vector最大可以是多大 18 | 9.capacity 当前vector分配的大小 19 | 10.size 当前使用数据的大小 20 | 11.resize 改变当前使用数据的大小，如果它比当前使用的大，者填充默认值 21 | 12.reserve 改变当前vecotr所分配空间的大小 22 | 13.erase 删除指针指向的数据项 23 | 14.clear 清空当前的vector 24 | 15.rbegin 将vector反转后的开始指针返回(其实就是原来的end-1) 25 | 16.rend 将vector反转构的结束指针返回(其实就是原来的begin-1) 26 | 17.empty 判断vector是否为空 27 | 18.swap 与另一个vector交换数据 28 | 29 | 30 | # queue 常用 31 | ``` 32 | empty() 如果队列为空返回真 33 | pop() 删除对顶元素 34 | push() 加入一个元素 35 | size() 返回优先队列中拥有的元素个数 36 | top() 返回优先队列对顶元素 37 | ``` 38 | 39 | # list 常用 40 | assign() 给list赋值 41 | back() 返回最后一个元素 42 | begin() 返回指向第一个元素的迭代器 43 | clear() 删除所有元素 44 | empty() 如果list是空的则返回true 45 | end() 返回末尾的迭代器 46 | erase() 删除一个元素 47 | front() 返回第一个元素 48 | get_allocator() 返回list的配置器 49 | insert() 插入一个元素到list中 50 | max_size() 返回list能容纳的最大元素数量 51 | merge() 合并两个list 52 | pop_back() 删除最后一个元素 53 | pop_front() 删除第一个元素 54 | push_back() 在list的末尾添加一个元素 55 | push_front() 在list的头部添加一个元素 56 | rbegin() 返回指向第一个元素的逆向迭代器 57 | remove() 从list删除元素 58 | remove_if() 按指定条件删除元素 59 | rend() 指向list末尾的逆向迭代器 60 | resize() 改变list的大小 61 | reverse() 把list的元素倒转 62 | size() 返回list中的元素个数 63 | sort() 给list排序 64 | splice() 合并两个list 65 | swap() 交换两个list 66 | unique() 删除list中重复的元素 -------------------------------------------------------------------------------- /Languages/fe_skill_set.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Languages/fe_skill_set.jpeg -------------------------------------------------------------------------------- /Languages/js in one pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Languages/js in one pic.png -------------------------------------------------------------------------------- /Languages/js-note.md: -------------------------------------------------------------------------------- 1 | title: "js note" 2 | tags: [js] 3 | --- 4 | 5 | ##前言 6 | 最近接触到很多js相关的技术，是时候好好补一补基础了。 7 | 8 | ##坑 9 | - 如何遍历一个json对象并改变其值?，不能直接用for in遍历,如下 10 | ``` 11 | for(var i=0,l=list.length;i<l;i++){ 12 | var post = list[i]; 13 | post.likesCount = post.likes.length; 14 | post.likes = undefined; 15 | } 16 | ``` 17 | 18 | - array.concat 不会改变现有的数组的，而是会返回一个新的数组 19 | ``` 20 | var arr = ['A', 'B', 'C']; 21 | var added = arr.concat([1, 2, 3]); 22 | added; // ['A', 'B', 'C', 1, 2, 3] 23 | arr; // ['A', 'B', 'C'] 24 | ``` 25 | 26 | 27 | ##JavaScript语言精粹结合[廖雪峰的js教程](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000) 28 | - js中的字符串除了以字母开头还可以以_和$开头。 29 | - `/* */`可能导致语法错误，例如出现在正则表达式里，所以作者（下面称老道)建议避免使用，用// 30 | - js只有一个数字类型，内部是64位浮点数,没有整数类型，所以1和1.0值相同 31 | - NaN表示Not a Number，当无法计算结果时用NaN表示,NaN这个特殊的Number与所有其他值都不相等，包括它自己,唯一能判断NaN的方法是通过isNaN()函数：isNaN(NaN); // true 32 | - Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity 33 | - js没有字符类型，所有字符都是16位的unicode，要表示一个字符只需创建包含一个字符的字符串即可。 34 | - 字符串有length属性,通过+连接其他字符串来创建新字符串.字符串可以用''或""括 35 | - 转义字符\\,\\u用来指定数字字符编码 "A" === "\\u0041",\\x表示16进制，如'\x41'完全等同于'A' 36 | - 十六进制用0x前缀和0-9，a-f表示，例如：0xff00，0xa5b4c3d2 37 | - js中的代码块不会创建新的作用域，因此变量应该被定义在函数的头部，而不是在代码块中。 38 | - if语句的假: false,null,undefined,空字符串' ',0,NaN 39 | - 所有其他值为真,包括"false" 40 | - for语句的一种表示形式 for in : for(myvar in obj) 41 | - 如果没有指定返回表达式，那么返回值是undefined.return和表达式之间不能换行。 42 | - js不允许break和标签之间换行，标签是什么？ 43 | - =赋值，===恒等,+=加法或连接字符串 44 | - 要特别注意相等运算符==。JavaScript在设计时，有两种比较运算符：第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。 45 | - javaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用 46 | - JavaScript的数组可以包括任意数据类型,如 [1, 2, 3.14, 'Hello', null, true];或通过Array(),然而，出于代码的可读性考虑，强烈建议直接使用[]。 47 | - JavaScript的对象是一组由键-值组成的无序集合，例如： 48 | ``` 49 | var person = { 50 | name: 'Bob', 51 | age: 20, 52 | tags: ['js', 'web', 'mobile'], 53 | city: 'Beijing', 54 | zipcode: null 55 | }; 56 | ``` 57 | - 可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但是要注意只能用var申明一次，例如： 58 | ``` 59 | var a = 123; // a的值是整数123 60 | a = 'ABC'; // a变为字符串 61 | ``` 62 | 这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言,例如java 63 | 64 | - 为了修补JavaScript这一严重设计缺陷(不强制要求用var申明变量,不用var申明的变量会被视为全局变量)，ECMA在后续规范中推出了strict模式，在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。启用strict模式的方法是在JavaScript代码的第一行写上： 65 | ``` 66 | 'use strict'; 67 | ``` 68 | 为了避免这一缺陷,所有的JavaScript代码都应该使用strict模式. 69 | - js中% 为求余运算，和求模运算不同，其差别主要体现在求整数商c，例如：计算-7 Mod 4，进行求模运算c = -2（向负无穷方向舍入），求余c = -1（向0方向舍入）； 70 | -------------------------------------------------------------------------------- /Nodejs/books.md: -------------------------------------------------------------------------------- 1 | JavaScript异步编程.pdf 2 | MongoDB权威指南.pdf 3 | NodeJS开发指南.pdf 4 | MongoDB-crud-guide.pdf 5 | Node.js实战.pdf 6 | Node即学即用.pdf -------------------------------------------------------------------------------- /Nodejs/express-note.md: -------------------------------------------------------------------------------- 1 | title: "express-note" 2 | tags: 3 | --- 4 | 5 | ##express中间件 6 | 7 | ### express视图助手dynamicHelpers和helpers从2.x到3.x改成什么了？ 8 | ``` 9 | app.use(function (req,res,next) { 10 | res.locals.user = req.session.user; 11 | 12 | var err = req.flash('error'); 13 | var success = req.flash('success'); 14 | 15 | res.locals.error = err.length ? err: null; 16 | res.locals.success = success.length ? success : null; 17 | 18 | next(); 19 | }); 20 | 21 | // app.dynamicHelpers({ 22 | // user: function (req,res) { 23 | // return req.session.user; 24 | // }, 25 | // error: function (req,res) { 26 | // var err = req.flash('error'); 27 | // if(err.length){ 28 | // return err; 29 | // }else{ 30 | // return null; 31 | // } 32 | // }, 33 | // success: function (req,res) { 34 | // var succ = req.flash('success'); 35 | // if(succ.length){ 36 | // return succ; 37 | // }else{ 38 | // return null; 39 | // } 40 | // } 41 | // }); 42 | ``` 43 | 44 | ### connect-flash flash中间件 45 | 46 | 47 | ### cookie-parser cookie解析中间价 48 | [官网](https://www.npmjs.com/package/cookie-parser) 49 | 例子: 50 | ``` 51 | var express = require('express') 52 | var cookieParser = require('cookie-parser') 53 | 54 | var app = express() 55 | app.use(cookieParser()) 56 | 57 | app.get('/', function(req, res) { 58 | console.log("Cookies: ", req.cookies) 59 | }) 60 | 61 | app.listen(8080) 62 | 63 | // curl command that sends an HTTP request with two cookies 64 | // curl http://127.0.0.1:8080 --cookie "Cho=Kim;Greet=Hello" 65 | ``` 66 | 67 | ### connect-mongo 用来在mongo中存储session 68 | [connect-mongo包官网](https://www.npmjs.com/package/connect-mongo) 69 | 例子: 70 | ``` 71 | var session = require('express-session'); 72 | var MongoStore = require('connect-mongo')(session); 73 | 74 | app.use(session({ 75 | secret: 'foo', 76 | store: new MongoStore(options) 77 | })); 78 | ``` 79 | 80 | ### express-session session管理中间件 81 | [官网](https://github.com/expressjs/session) 82 | 例子: 83 | ``` 84 | var express = require('express') 85 | var parseurl = require('parseurl') 86 | var session = require('express-session') 87 | 88 | var app = express() 89 | 90 | app.use(session({ 91 | secret: 'keyboard cat', 92 | resave: false, 93 | saveUninitialized: true 94 | })) 95 | 96 | app.use(function (req, res, next) { 97 | var views = req.session.views 98 | 99 | if (!views) { 100 | views = req.session.views = {} 101 | } 102 | 103 | // get the url pathname 104 | var pathname = parseurl(req).pathname 105 | 106 | // count the views 107 | views[pathname] = (views[pathname] || 0) + 1 108 | 109 | next() 110 | }) 111 | 112 | app.get('/foo', function (req, res, next) { 113 | res.send('you viewed this page ' + req.session.views['/foo'] + ' times') 114 | }) 115 | 116 | app.get('/bar', function (req, res, next) { 117 | res.send('you viewed this page ' + req.session.views['/bar'] + ' times') 118 | }) 119 | ``` 120 | -------------------------------------------------------------------------------- /Nodejs/flash-note.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Nodejs/flash-note.md -------------------------------------------------------------------------------- /Nodejs/lodash-note.md: -------------------------------------------------------------------------------- 1 | Lodash 笔记 2 | ===== 3 | 4 | > A JavaScript utility library delivering consistency, modularity, performance, & extras. 5 | 6 | 简单来说Lodash是JS的工具库，继承自underscore。 7 | 8 | # 方法 9 | ## pick 10 | 用法示例: 11 | 12 | ``` 13 | user = _.pick(user, ['id', 'role', 'description', 14 | 'name', 'accessToken']); 15 | ``` -------------------------------------------------------------------------------- /Nodejs/nodejs-note.md: -------------------------------------------------------------------------------- 1 | title: "我的nodejs学习之旅［开端］" 2 | tags: [nodejs] 3 | 4 | --- 5 | 6 | 本文为学习nodejs过程中的知识整理，部分引用原文话语.参考文献: 7 | - [nodejs 包教不包会](https://github.com/alsotang/node-lessons) 8 | - [7天学会nodejs](http://mclspace.com/2015/08/21/7-days-nodejs/) 9 | - [粉丝日志](http://blog.fens.me/nodejs-roadmap/) 10 | 11 | 12 | ## 常用库教程 13 | - [restify](http://segmentfault.com/a/1190000000369308) 14 | 15 | ## 书籍 16 | - NodeJS开发指南 17 | 18 | 19 | ## 常用技巧 20 | ### 计时 21 | **console.time(label)** 22 | > Mark a time. 23 | 24 | **console.timeEnd(label)** 25 | 26 | ``` 27 | Finish timer, record output. Example: 28 | 29 | console.time('100-elements'); 30 | for (var i = 0; i < 100; i++) { 31 | ; 32 | } 33 | console.timeEnd('100-elements'); 34 | // prints 100-elements: 262ms 35 | ``` 36 | 37 | ### 格式化json输出 38 | JSON.stringify的第4个参数可以定义插入的空格的数量。 39 | 40 | ``` 41 | JSON.stringify({ a:1, b:2, c:3 }, null, 4); 42 | /* output: 43 | { 44 | "a": 1, 45 | "b": 2, 46 | "c": 3, 47 | } 48 | */ 49 | ``` 50 | 51 | ##记录 52 | ###推荐用homebrew 来安装nvm 53 | `brew install nvm` 并按照brew的指示添加文件夹和指令 54 | 55 | <del> 56 | 使用[nvm](https://github.com/creationix/nvm)管理node版本，使用以下命令安装: 57 | ``` 58 | $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.2/install.sh | bash 59 | ``` 60 | </del> 61 | 62 | 常用命令： 63 | - 查看哪些版本可以用 `nvm ls-remote` 64 | - 安装某一版本 `nvm install 0.12` 65 | - 显示所有版本 `nvm ls` 66 | - 使用某一版本 `nvm use 0.12` 67 | - 卸载nvm `sudo rm -rf ~/.nvm`，并且删除.zshrc或.profile中的关于nvm的行,重启终端。 68 | - 设定默认版本 `nvm alias default 4.1.0` 69 | 70 | ### 下面是一个完全符合 CommonJS 规范的 package.json 示例: 71 | ``` 72 | { 73 | "name": "mypackage", 74 | "description": "Sample package for CommonJS. This package demonstrates the required 75 | elements of a CommonJS package.", 76 | "version": "0.7.0", 77 | "keywords": [ 78 | "package", 79 | "example" ], 80 | "maintainers": [ 81 | { 82 | "name": "Bill Smith", 83 | "email": "bills@example.com", 84 | } 85 | ], 86 | "contributors": [ 87 | { 88 | "name": "BYVoid", 89 | "web": "http://www.byvoid.com/" 90 | } ], 91 | "bugs": { 92 | "mail": "dev@example.com", 93 | "web": "http://www.example.com/bugs" 94 | }, 95 | "licenses": [ 96 | { 97 | "type": "GPLv2", 98 | "url": "http://www.example.org/licenses/gpl.html" 99 | } ], 100 | "repositories": [ 101 | { 102 | "type": "git", 103 | "url": "http://github.com/BYVoid/mypackage.git" 104 | } 105 | ], 106 | "dependencies": { 107 | "webkit": "1.2", 108 | "ssl": { 109 | "gnutls": ["1.0", "2.0"], 110 | "openssl": "0.9.8" 111 | } 112 | } } 113 | ``` 114 | 115 | ### 使用npm进行包依赖管理,安装node时默认安装 116 | 常用命令: 117 | - 在项目文件夹下安装包 `npm [install/i] -g [package_name]`，加-g添加到全局 118 | - 显示帮助，使用`npm help <command>`可查看某条命令的详细帮助，例如`npm help install`。 119 | - 列出项目的包结构 `npm list` 120 | - 互动式地生成一份最简单的 package.json 文件 `npm init` 121 | - 安装包，并自动将依赖写入到 package.json文件中 `npm install express utility --save` 122 | - 删除包,`npm uninstall express',响应的也可以加-g选项 123 | - 使用`--registry`指定安装时候的源,如:`--registry=https://registry.npm.taobao.org` 124 | - 在package.json所在目录下使用`npm install . -g`可先在本地安装当前命令行程序，可用于发布前的本地测试。 125 | - 使用`npm update <package>`可以把当前目录下node_modules子目录里边的对应模块更新至最新版本 126 | - 使用`npm update <package> -g`可以把全局安装的对应命令行程序更新至最新版。 127 | - 使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人 128 | - 使用npm unpublish <package>@<version>可以撤销发布自己发布过的某个版本代码。 129 | - 使用npm adduser 创建用户，用`npm whoami`测试是否已取得账户 130 | - 在 package.json 所在目录下运行 npm publish,发布包,访问 <http://search.npmjs.org/> 就可以找到自己刚刚发布的包了 131 | - 如果你的包将来有更新,只需要在 package.json 文件中修改 version 字段,然后重新 使用 npm publish 命令就行了。 132 | - 使用`npm update -g npm` 更新npm 133 | 134 | 135 | ### 为什么使用全局模式 136 | 为什么要使用全局模式呢?多数时候并不是因为许多程序都有可能用到它,为了减少多重副本而使用全局模式, 137 | 而是因为本地模式不会注册 PATH 环境变量。举例说明,我们安装 supervisor 是为了在命令行中运行它, 138 | 譬如直接运行 supervisor script.js,这时就需要在 PATH 环境变量中注册 supervisor 139 | 140 | ### 创建全局链接 141 | npm 提供了一个有趣的命令 `npm link`,它的功能是在本地包和全局包之间创建符号链 接。 142 | 我们说过使用全局模式安装的包不能直接通过 require 使用, 143 | 但通过` npm link命令 `可以打破这一限制。举个例子,我们已经通过 `npm install -g express` 安装了 express, 144 | 这时在工程的目录下运行命令: 145 | ``` 146 | $ npm link express 147 | ./node_modules/express -> /usr/local/lib/node_modules/express 148 | ``` 149 | 我们可以在 node_modules 子目录中发现一个指向安装到全局的包的符号链接。通过这 种方法,我们就可以把全局包当本地包来使用了。 150 | 除了将全局的包链接到本地以外,使用 npm link命令还可以将本地的包链接到全局。 使用方法是在包目录( package.json 所在目录)中运行 npm link 命令。如果我们要开发 一个包,利用这种方法可以非常方便地在不同的工程间进行测试。 151 | 152 | 153 | ###使用package.json文件管理项目的依赖 154 | - 使用`npm init` 生成最简单的package.json文件 155 | - 使用`--save` 参数将安装的包自动写入到package.json文件中 156 | - 使用`–save-dev`标示符，它用来告诉npm将我们添加的依赖模块放入package.json文件的devDependencies字段中 157 | 158 | ### 使用supervisor来监视对代码的改动,自动重启Node.js 159 | ``` 160 | $ npm install -g supervisor 161 | #安装 162 | $ supervisor app.js 163 | #使用,当代码被改动时,运行的脚本会被终止,然后重新启动 164 | ``` 165 | 166 | ###node常用命令 167 | - 运行node app `node app.js` 168 | - 把要执行的语句作为 node -e 的参数直接执行。 169 | ``` 170 | $ node -e "console.log('Hello World');" 171 | Hello World 172 | ``` 173 | - REPL模式,运行无参node,进入交互式shell。 174 | 175 | 176 | ### 调试 177 | - `node debug debug.js` 启动调试工具 178 | - 在命令行下使用以下两个语句之一可以打开调试服务器: 179 | ``` 180 | node --debug[=port] script.js 脚本会正常 执行,但不会暂停 181 | node --debug-brk[=port] script.js 这时调试服务器在启动后会立刻暂停 执行脚本,等待调试客户端连接。 182 | ``` 183 | 当调试服务器启动以后,可以用命令行调试工具作为调试客户端连接,例如: 184 | ``` 185 | //在一个终端中 186 | $ node --debug-brk debug.js debugger listening on port 5858 187 | //在另一个终端中 188 | $ node debug 127.0.0.1:5858 connecting... ok 189 | debug> n 190 | break in /home/byvoid/debug.js:2 191 | 1 var a = 1; 192 | 2 var b = 'world'; 193 | 3 var c = function (x) { 194 | 4 console.log('hello ' + x + a); 195 | debug> 196 | ``` 197 | - 使用 node-inspector 调试 Node.js 198 | 199 | 首先,使用 npm install -g node-inspector 命令安装 node-inspector,然后在 200 | 终端中通过 `node --debug-brk=5858 debug.js` 命令连接你要除错的脚本的调试服务器, 201 | 启动 node-inspector: 202 | ``` 203 | $ node-inspector 204 | ``` 205 | 在浏览器中打开 <http://127.0.0.1:8080/debug?port=5858>,即可显示出优雅的 Web 调试工 具 206 | 207 | 208 | ## 全局对象 209 | - Nodejs中的全局对象是global,在浏览器中是window,所有全局变量(除了 global 本身以外)都是 global 对象的􏱅性。 210 | 211 | ### process 212 | - process.argv 命令行参数数组，第一个参数是node,第二个参数是脚本文件名，第三个运行参数起每一个元素是一个运行参数 213 | - process.stdout是标准输出流 214 | - process.stdin是标准输入流 215 | - process.nextTick(callback)的功能是为事件􏰜环设置一项任务 216 | - 详细:<http://nodejs.org/api/process.html > 217 | 218 | 219 | ### console 220 | - console.log():􏰑标准输出流打􏰒字符并以􏲛行符结􏲜 221 | 222 | - console.error():与 console.log() 用法􏲥同,只是􏰑标准错误流输出 223 | 224 | - console.trace():􏰑标准错误流输出􏰝前的调用􏲦 225 | 226 | ## 常用工具util 227 | - util.inherits(constructor, superConstructor)是一个实现对象间􏰨􏰡继承的函数。 228 | - util.inspect(object,[showHidden],[depth],[colors])是一个将任意对象􏲰􏲛 为字符􏲟的方法,通常用于调试和错误输出。 229 | - 除了以上我们介绍的几个函数之外,util还提供了util.isArray()、util.isRegExp()、 util.isDate()、util.isError() 􏲾个􏲠􏰡􏲿试工具,以及 util.format()、util. debug() 等工具 230 | - 详细: <http://nodejs.org/api/util.html > 231 | 232 | ## 事件驱动 events 233 | 234 | events 模块只提供了一个对象: events.EventEmitter。EventEmitter 的核心就 是事件发射与事件􏳎听器功能的􏳏装。 235 | ### 事件发􏳌射器 236 | - EventEmitter.on(event, listener) 为指定事件注􏳐一个􏳎监听器,接受一个字符event 和一个回调函数listener。 237 | - EventEmitter.emit(event, [arg1], [arg2], [...]) 发射 event 事件,传递若干􏲝􏲞可􏰻参数到事件􏳎听器的参数表。 238 | - EventEmitter.once(event, listener) 为指定事件注􏳐一个􏱹􏳒􏳎听器,􏱆􏳎听器最多只会触发一次,触发后􏱼􏰤解除该􏳎听器。 239 | - EventEmitter.removeListener(event, listener) 􏳓除指定事件的􏳔个􏳎听器,listener 􏰗􏰘是该事件已经注􏳐过的􏳎听器 240 | - EventEmitter.removeAllListeners([event]) 􏳓除所有事件的所有􏳎听器, 如果指定 event,则􏳓除指定事件的所有􏳎听器。 241 | - 详细<http://nodejs.org/api/events.html> 242 | 243 | ### error事件 244 | emitter.emit('error') 发射error事件，学会为error事件添加监听器，避免异常退出 245 | 246 | ### 􏳝􏳞继承EventEmitter 247 | 大多数时􏱺我们不会􏱊接使用 EventEmitter,而是在对象中继􏲬它。包括 fs、net、 http 在内的,只要是支持事件􏰛应的核心模块都是 EventEmitter 的􏳑􏲠。 248 | 249 | ## 文件 fs 250 | 与其他模块不同的是,fs 模块中所有的操作都提供了异步的和 同步的两个版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync()。 251 | - fs.readFile(filename,[encoding],[callback(err,data)]) 不指定编码则以 Buffer 形式表示二􏰌进制数据 252 | - fs.readFileSync 同步版本,你需要使用 try 和 catch 􏴐􏴑并处理异常,读取到的文件内容会以函数􏴅回值的形式􏴅回 253 | - fs.open(path, flags, [mode], [callback(err, fd)])，它接受两个􏰗􏰻参数,path 为文件的路􏴕, flags 可以是以下值:r,r+,w,w+,a,a+ 254 | - fs.read(fd, buffer, offset, length, position, [callback(err, bytesRead, buffer)]) 255 | - ... 256 | 257 | ## http 服务器 258 | - http.Server 的􏳀􏳁事件,包括 request,connection,close,请求处理函数接受两个参数,分别是请求对象( req )和响􏰛应对象 ( res ) 259 | 260 | 261 | ###常用包 262 | - [express](https://github.com/strongloop/express) tj大神的快速应用框架,现在好像转交给StrongLoop管理了. 263 | - [utility](https://github.com/node-modules/utility) 定义了很多常用且比较杂的辅助方法,包括md5,sha1等. 264 | - [superagent](http://visionmedia.github.io/superagent/) 265 | > $ http 方面的库，可以发起 get 或 post 请求 266 | - [cheerio](https://github.com/cheeriojs/cheerio) 267 | > $ Node.js 版的 jquery,从网页中以 css selector 取数据，使用方式跟 jquery 一样一样的。 268 | - [async](https://github.com/caolan/async) 269 | > $ 异步并发控制工具 270 | - [mocha](https://github.com/mochajs/mocha) 271 | > $ nodejs测试框架 272 | - [should](https://github.com/tj/should.js) 273 | > $ nodejs断言工具 274 | - [istanbul](https://github.com/gotwarlost/istanbul) 275 | > $ js 代码覆盖工具 276 | - [chai](https://github.com/chaijs/chai) 277 | > $ 全栈断言库 278 | - [supertest](https://github.com/visionmedia/supertest) 279 | > $ supertest 是 superagent 的孪生库呢，因为他们的 API 是一模一样的。superagent 是用来抓取页面用的，而 supertest，是专门用来配合 express （准确来说是所有兼容 connect 的 web 框架）进行集成测试的。 280 | - [nodemon]( https://github.com/remy/nodemon) 281 | > $ 这个库是专门调试时候使用的，它会自动检测 node.js 代码的改动，然后帮你自动重启应用。在调试时可以完全用 nodemon 命令代替 node 命令。 282 | - [benchmark](https://github.com/bestiejs/benchmark.js) 283 | > $ 测试哪个方法更快 284 | - [showdown](https://github.com/showdownjs/showdown) 285 | > $ 一款markdown to html的js转换包 286 | - [markx](https://github.com/jgallen23/markx) 287 | > $ 一款将md，jade文件转换成html的命令行工具 288 | - [socket.io](https://github.com/socketio/socket.io) 289 | > $ 实时通信应用架构 for nodejs 290 | - [passport](https://github.com/jaredhanson/passport) 291 | > $ 基于Nodejs的认证中间件,只是为了“登陆认证” 292 | - [later](https://github.com/bunkat/later) 293 | > $ Later 是一个基于Nodejs的工具库，用最简单的方式执行定时任务 294 | - [browserify](https://github.com/substack/node-browserify) 295 | > $ Browserify 的出现可以让Nodejs模块跑在浏览器中，用require()的语法格式来组织前端的代码，加载npm的模块。 296 | 在浏览器中，调用browserify编译后的代码，同样写在<script>标签中。 297 | - [commander.js](https://github.com/tj/commander.js) 298 | > $ 轻巧的nodejs模块，提供了用户命令行输入和参数解析强大功能。 299 | - [tty](https://github.com/chjj/tty.js/) 300 | > $ 一个支持在浏览器中运行的命令行窗口，基于node.js平台，依赖socket.io库，通过websocket与Linux系统通信。 301 | - [node-webkit](https://github.com/nwjs/nw.js) 302 | > $ NodeJS与WebKit技术的融合，提供一个跨Windows、Linux平台的客户端应用开发的底层框架，利用流行的Web技术（Node.JS，JavaScript，HTML5）来编写应用程序的平台。应用程序开发人员可以轻松的利用Web技术来实现各种应用程序。 303 | - [nodeos](https://github.com/nodeos/nodeos) 304 | > $ 采用NodeJS开发的一款友好的操作系统，该操作系统是完全建立在Linux内核之上的，并且采用shell和NPM进行包管理 305 | - [lodash](https://lodash.com/docs#pick) 306 | > $ 这是一个封装了很多js方法的工具类，underscore的代替者 307 | - [colors](https://www.npmjs.com/package/colors) 308 | > $ 在命令行中打印有颜色的输出 309 | - [bcrypt](https://www.npmjs.com/package/bcrypt) 310 | > $ Lib to help you hash passwords. node下的加密解密工具 311 | - [body-parser](https://www.npmjs.com/package/body-parser) 312 | > $ Node.js body parsing middleware. body请求转换中间件，一般和connect中间件和express一起适用 313 | - [morgan](https://www.npmjs.com/package/morgan) 314 | > $ mHTTP request logger middleware for node.js ,也就是在收到Http请求之后输出该请求的信息 315 | 316 | - [validator](https://www.npmjs.com/package/validator) 317 | > $ A library of string validators and sanitizers. 各种验证器，如isEmail 318 | 319 | - [Leaflet](https://github.com/Leaflet/Leaflet) 320 | > $ JavaScript library for mobile-friendly interactive maps http://leafletjs.com 321 | - [node-uuid](https://github.com/broofa/node-uuid) 322 | > $ Generate RFC-compliant UUIDs in JavaScript 可以用来生成token 323 | - $[connect-flash](https://www.npmjs.com/package/connect-flash) 324 | > 325 | 326 | ###术语 327 | - REPL(read–eval–print loop) 读取﹣求值﹣输出循环 328 | 329 | - CSRF（Cross-site request forgery跨站请求伪造，也被称为“one click attack”或者session riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。 330 | - query 331 | 332 | - body 333 | > req.body 就是 POST 请求􏰥􏰦解析过后的对象 334 | 335 | - md5 336 | > MD5消息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数， 337 | 可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。 338 | 1996年后被证实存在弱点，可以被加以破解，对于需要高度安全性的数据，专家一般建议改用其他算法， 339 | 如SHA-1。2004年，证实MD5算法无法防止碰撞，因此无法适用于安全性认证，如SSL公开密钥认证或是数字签章等用途。 340 | 341 | - sha1 342 | > 安全散列算法（英语：Secure Hash Algorithm）是一种能计算出一个数字消息所对应到的，长度固定的字符串（又称消息摘要）的算法。 343 | 且若输入的消息不同，它们对应到不同字符串的概率很高；而SHA是FIPS所认证的五种安全散列算法。这些算法之所以称作“安全”是基于以下两点（根据官方标准的描述）： 344 | 由消息摘要反推原输入消息，从计算理论上来说是很困难的。 345 | 想要找到两组不同的消息对应到相同的消息摘要，从计算理论上来说也是很困难的。任何对输入消息的变动，都有很高的概率导致其产生的消息摘要迥异。 346 | 347 | - OCD 348 | > $ Obsessive–compulsive disorder 强迫症, tj的twitter介绍 349 | 350 | - MIME 351 | > MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。 352 | 353 | - BSON 354 | > BSON（）是一种类json的一种二进制形式的存储格式，简称Binary JSON，它和JSON一样，支持内嵌的文档对象和数组对象，但是BSON有JSON没有的一些数据类型，如Date和BinData类型。 355 | Mongodb中的文档实际上是指BSON 356 | 357 | - orm 358 | > 全称是 Object-Relational Mapping,对象关系映射 359 | 360 | - odm 361 | > Object-Document Mapping，对象文档映射。它的作用就是，在程序代码中，定义一下数据库中的数据格式，然后取数据时通过它们，可以把数据库中的 document 映射成程序中的一个对象，这个对象有 .save .update 等一系列方法，和 .title .author 等一系列属性。在调用这些方法时，odm 会根据你调用时所用的条件，自动转换成相应的 mongodb shell 语句帮你发送出去。自然地，在程序中链式调用一个个的方法要比手写数据库操作语句具有更大的灵活性和便利性。 362 | 363 | - 阻塞 364 | > 什么是阻塞(block)呢?线程在执行中如果遇到磁盘读写或网络通信(统称为 I/O 操作), 通常要耗费较长的时间,这时操作系统会剥夺这个线程的 CPU 控制权,使其暂停执行,同 时将资源让给其他的工作线程,这种线程调度方式称为 阻塞。当 I/O 操作完毕时,操作系统 将这个线程的阻塞状态解除,恢复其对CPU的控制权,令其继续执行。这种 I/O 模式就是通 常的同步式 I/O(Synchronous I/O)或阻塞式 I/O (Blocking I/O)。 365 | 366 | - dist 367 | > 很多项目中的dist文件夹是做什么的？ 368 | 全称是distribution。在某些框架中，因为开发和发布是的内容或者代码形式是不一样的（比如利用Grunt压缩等等)，这时候就需要一个存放最终发布版本的代码，这就是dist文件夹的用处。 369 | 370 | - FP 371 | > 函数式编程,具体请看 [傻瓜函数式编程](https://github.com/justinyhuang/Functional-Programming-For-The-Rest-of-Us-Cn/blob/master/FunctionalProgrammingForTheRestOfUs.cn.md) 372 | 373 | - i18n 374 | > i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。在资讯领域，国际化(i18n)指让产品（出版物，软件，硬件等）无需做大的改变就能够适应不同的语言和地区的需要。对程序来说，在不修改内部代码的情况下，能根据不同语言及地区显示相应的界面。 在全球化的时代，国际化尤为重要，因为产品的潜在用户可能来自世界的各个角落。通常与i18n相关的还有L10n（“本地化”的简称）。 375 | 376 | - RTFM 377 | > 是一个网络语言，意思是：“去读那些他妈的手册”（Read The Fucking Manual） 378 | 379 | ##学习资源 380 | - [nodejs 包教不包会](https://github.com/alsotang/node-lessons) 381 | - [使用 Express + MongoDB 搭建多人博客](https://github.com/nswbmw/N-blog) 382 | - [七天学会NodeJS](https://nqdeng.github.io/7-days-nodejs/) 383 | - [Node入门](http://www.nodebeginner.org/index-zh-cn.html) 384 | - [Nodejs学习路线图](http://blog.fens.me/nodejs-roadmap/) 385 | - [阮一峰老师的标准参考教程](http://javascript.ruanyifeng.com/) 386 | - [tj大神的medium](https://medium.com/@tjholowaychuk) 387 | - [scotch教程，强烈推荐，简直漂亮](https://scotch.io) 388 | - [正则表达式30分钟入门教程](http://deerchao.net/tutorials/regex/regex.htm) 389 | - [正则表达式之：零宽断言不『消费』](http://fxck.it/post/50558232873) 390 | - [mongodb 小黄书](https://github.com/justinyhuang/the-little-mongodb-book-cn/blob/master/mongodb.md) 391 | - [redis 小黄书](https://github.com/JasonLai256/the-little-redis-book/blob/master/cn/redis.md) 392 | - [用npm-run自动化任务](http://segmentfault.com/a/1190000000344102) 393 | ## 网站工具 394 | - [所见即所得的正则表达式测试网站](http://refiddle.com/) 395 | - [在线分享js benchmark](http://jsperf.com/) 396 | - [travis-ci](https://travis-ci.org/) 397 | > $ 帮你生成github项目中常有的 build passing图标,持续集成平台：travis 398 | - [coveralls](https://coveralls.io/) 399 | > $ 帮你生成github项目中常有的 coverage 100% 图标 400 | 401 | 402 | ## 常见问题 403 | - process.env.PORT是什么意思? 404 | > 启动node进程携带的变量 405 | 在linux下 406 | 只设置一次有效 $ PORT=1234 node xxoo.js 407 | 只设置永久有效 $ export PORT=1234 408 | 在window下 409 | 默认是永久情况 410 | set PORT=1234 411 | node xxoo.js 412 | -------------------------------------------------------------------------------- /Nodejs/srqc-nodejs.md: -------------------------------------------------------------------------------- 1 | 深入浅出Node.js笔记 2 | ========= 3 | 4 | # 第一章 5 | ## 异步I/O 6 | - Don't call me,I will call you 原则 7 | - 事件,回调,异步 8 | - 单线程 -> 子进程 -> 将大计算量分发到各个子进程，通过进程事件消息传递结果 9 | - 适合处理I/O密集型应用场景，根本没有I/O的场景（纯计算）更适合使用多线程的方式。 ->开子线程，用C/C++扩展 10 | 11 | # 第二章 12 | ## 模块机制 13 | - commonJS ->让JS能够在任何地方运行 14 | - require - > module代表模块自身，exports对象是唯一导出的出口，一个文件就是一个模块。 15 | - require('模块'),这里模块可以是一个小驼峰(如:strLength)命名的字符串，可以是相对路径，可以是绝对路径，可以没有文件名后缀.js 16 | - 模块分为核心模块和文件模块，核心模块引入要优先与文件模块 17 | - Node引入的模块都会缓存，减少二次引用的开销。 18 | - 自定义模块指的是非核心模块，其查找规则基于模块路径。如果标示符中不包括扩展名，那么node会按.js,.json,.node的次序补足进行尝试。这里用了fs模块同步阻塞判断文件是否存在，存在性能问题。因此如果是.node和.json文件,带上扩展名会加快一点速度。 19 | - 每个模块都有require,exports,module这3个变量，在编译过程中，Node对获取到的JS文件内容进行了头尾包装,如: 20 | ``` 21 | (function (exports, require, module, __filename, __dirname) { 22 | var math = require('math'); 23 | exports.area = function(radius){ 24 | return Math.PI * radius * radius; 25 | }; 26 | }) 27 | ``` -------------------------------------------------------------------------------- /Others/hadoop-note.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Others/hadoop-note.md -------------------------------------------------------------------------------- /Others/happy-note.md: -------------------------------------------------------------------------------- 1 | 记录一些激励自己的话，别人的话 2 | 3 | # 邱俊涛 4 | - 多阅读 5 | - 多练习 6 | 7 | 首先，尽可能的保持兴趣，并追随你的兴趣。比如你发现一个很有趣的新东西：一个语言或者框架，甚至一个好看的网页，就去学习，过程中你会发现很多之前不会的，或者压根没有注意到的新东西。这些也需要你一并学习，并尽可能在过程中有记录。 8 | 9 | 其次，要记录你的学习轨迹，比如你在学一门新的语言，就应该把这些信息记录在文字上。比如记录在博客上，笔记里。当你把一个已经掌握的东西写出来的时候，会发现很多环都缺失了，这又会驱动你去学习更多，并将那些却掉的环补起来。 10 | 11 | 最后，多练习事实上是程序员提高的最佳路径。不会的东西，写几次就会了。要做到这一点，有很多种方式，比如参加开源项目，比如自己“重新发明”轮子（前端模板，ORM，一个MVC框架等等）。 12 | 13 | 如果说还有一些独门的方法（之所以说独门，完全是我个人经验，而且并不客观，仅供参考），那它们就是： 14 | 15 | 1. 远离Windows，对，M$ Windows，远离它的一切 16 | 2. 使用Linux或者OSX，熟悉Shell编程环境 17 | 3. 多用键盘，少用鼠标 18 | 4. 学习一两门多范式的脚本语言（Ruby/Python, JavaScript） 19 | 5. 学习一门主流的编程语言，比如Java 20 | 6. 如果你是前端，就学习写后端的东西，反之亦然，不要因为角色而限制自己 21 | 7. 学习如何写测试，如何把软件质量提高 22 | 23 | 希望对你有所帮助。 24 | -------------------------------------------------------------------------------- /Others/webGL-note.md: -------------------------------------------------------------------------------- 1 | title: "webGL note" 2 | tags: 3 | --- 4 | 5 | ## live webGL 6 | - [官方例子](http://app2.live2d.com/a/wg/ie.html) 7 | - [关于HTML5 AVG(GalGame)游戏引擎TyranoScript](http://www.xrpmoon.com/blog/archives/jripple803.html) 8 | 9 | ## html5游戏引擎 10 | - [cocos2d-js](http://cn.cocos2d-x.org/tutorial/index?type=cocos2d-js) 目前看上去最靠谱 11 | - [egret](http://www.egret-labs.org/) 不靠谱 12 | - [sirius2d](http://www.sirius2d.com/) 13 | - [Construct3](https://www.construct3.com/) 国外的，看上去不错 14 | - [Construct2](https://www.scirra.com/?utm_source=LandingPage&utm_medium=C2OutTheLoop&utm_campaign=Construct3.com) 15 | 16 | ## 好的教程网站 17 | - [tizen](https://developer.tizen.org/zh-hans/community/tip-tech) 18 | 很多教程和文章 19 | 20 | - [WebGL学习教程](https://csgrandeur.github.io/WebGL_Learn_Code/Application/Test/6.html) 21 | - [英文版webgl学习教程](http://learningwebgl.com/blog/) 22 | 23 | ## 视频教程 24 | - [入门](http://www.bilibili.com/video/av2159115/) 25 | - [关于矢量建模](http://www.bilibili.com/video/av666719/) 26 | 27 | 28 | ## Unity3D教程 29 | - [优三帝同学](http://www.u3dc.com/) 30 | 31 | 32 | ## 各种教程 33 | - [CCIUP插画杂志](http://cciup.com/archives/category/teach) 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TechStack 2 | 每个人都有自己的技术栈，这是我的技术笔记和学习资料,边学边完善,大部分来自浏览的网站以及阅读的书,一些内容比较多的整理成markdown,部分内容已发表在我的[blog](http://www.mclspace.com)中。 3 | # 目录结构 4 | ``` 5 | . 6 | ├── Algorithms 7 | │   └── 算法.md 8 | ├── DataBase 9 | │   └── mongo-note.md 10 | ├── Design 11 | │   ├── DMMT思维导图.png 12 | │   ├── books.md 13 | │   └── design-note.md 14 | ├── Env 15 | │   ├── README.md 16 | │   ├── docker-file-note.md 17 | │   └── docker-note.md 18 | ├── FrontEnd 19 | │   ├── 3-web-designs-in-3-weeks.pdf 20 | │   ├── README.md 21 | │   ├── angularjs-note.md 22 | │   ├── css-note.md 23 | │   ├── ejs-note.md 24 | │   ├── emmet-note.md 25 | │   ├── fe-note.md 26 | │   ├── html-note.md 27 | │   ├── html5_cheatsheet.jpg 28 | │   ├── meteor-note.md 29 | │   └── sass-note.md 30 | ├── Languages 31 | │   ├── README.md 32 | │   ├── books.md 33 | │   ├── c-note.md 34 | │   ├── cpp-note.md 35 | │   ├── fe_skill_set.jpeg 36 | │   ├── js in one pic.png 37 | │   └── js-note.md 38 | ├── Mobile 39 | │   ├── README.md 40 | │   ├── adb-note.md 41 | │   ├── ios-note.md 42 | │   └── producter_1.5.pdf 43 | ├── Nodejs 44 | │   ├── books.md 45 | │   ├── express-note.md 46 | │   ├── flash-note.md 47 | │   ├── lodash-note.md 48 | │   ├── nodejs-note.md 49 | │   └── srqc-nodejs.md 50 | ├── Others 51 | │   ├── hadoop-note.md 52 | │   ├── happy-note.md 53 | │   └── webGL-note.md 54 | ├── README.md 55 | ├── Shell 56 | │   ├── README.md 57 | │   ├── abs-note.md 58 | │   ├── bash-note.md 59 | │   ├── books.md 60 | │   ├── busybox-note.md 61 | │   ├── makefile-note.md 62 | │   ├── scripts 63 | │   │   ├── 2_2_2.sh 64 | │   │   ├── cleanup.sh 65 | │   │   ├── cleanup1.sh 66 | │   │   ├── cleanup2.sh 67 | │   │   ├── log 68 | │   │   └── log.txt 69 | │   └── shell-note.md 70 | ├── Test 71 | │   ├── appium-note.md 72 | │   ├── mocha-test.md 73 | │   ├── monkey-note.md 74 | │   └── test-note.md 75 | ├── Tools 76 | │   ├── README.md 77 | │   ├── atom-note.md 78 | │   ├── docker-create-nodejs-mongodb-image.md 79 | │   ├── docker-file-note.md 80 | │   ├── docker-note.md 81 | │   ├── framer-note.md 82 | │   ├── git-note.md 83 | │   ├── gulp-note.md 84 | │   ├── mac-latex-note.md 85 | │   ├── nginx-note.md 86 | │   ├── pm2-note.md 87 | │   ├── sketch-note.md 88 | │   ├── sublime-note.md 89 | │   ├── vgod-vim-cheat-sheet-full.pdf 90 | │   └── vim-note.md 91 | └── readme.sh 92 | 93 | 14 directories, 72 files 94 | ``` 95 | -------------------------------------------------------------------------------- /Shell/README.md: -------------------------------------------------------------------------------- 1 | Shell相关 2 | ===== 3 | 4 | # 目录树 5 | ├── README.md 6 | ├── notes 7 | │   ├── abs-note.md 8 | │   ├── bash-note.md 9 | │   ├── busybox-note.md 10 | │   ├── makefile-note.md 11 | │   └── shell-note.md 12 | ├── resources 13 | │   ├── Advanced\ Bash-Scripting\ Guide_cn.pdf 14 | │   └── bash_cheat_sheet.pdf 15 | └── scripts 16 | ├── 2_2_2.sh 17 | ├── cleanup.sh 18 | ├── cleanup1.sh 19 | ├── cleanup2.sh 20 | ├── log 21 | │   ├── messages 22 | │   └── wtmp 23 | └── log.txt -------------------------------------------------------------------------------- /Shell/abs-note.md: -------------------------------------------------------------------------------- 1 | 2 | ----- 3 | 4 | > 本篇为advanced-bash-scripting-guide的笔记,记录那些有用的脚本,最佳实践等。具体的脚本会在本文件夹的scripts目录下 5 | 6 | # 教程 7 | - [Advanced Bash-Scripting Guide](http://tldp.org/LDP/abs/html/),上面的教程大多应该来自该书 8 | - [ABS github翻译](https://imcmy.gitbooks.io/advanced-bash-scripting-guide-in-chinese/content/source/part1/01_shell_programming.html) 9 | ,这是ABS的翻译项目，赶脚还不错,就是没完成 10 | 11 | # 惯例 & 最佳实践 12 | ## 起始行 13 | ``` 14 | #!/bin/bash 15 | # Bash脚本标准起始行。 16 | ``` 17 | 18 | ## 变量 19 | ``` 20 | LOG_DIR=/var/log 21 | # 变量比硬编码（hard-coded）要更合适一些 22 | ``` 23 | 24 | ## 命令分隔符; 25 | 命令分隔符[分号]。允许在同一行内放置两条或更多的命令。 26 | 注意在分号以后有一个空格 27 | 28 | ## 句点命令 `.` 29 | 句点命令[句点],等价于source命令,这是一个bash的内建命令。 30 | 31 | ## 逗号运算符。 32 | 逗号运算符将一系列的算术表达式串联在一起。所有的算术表达式都会被执行，但只有最后一个被计算的表达式的值将会被返回。 33 | ``` 34 | let "t2 = ((a = 9, 15 / 3))" 35 | # 设定 "a = 9" 与 "t2 = 15 / 3" 36 | ``` 37 | 38 | ## : 39 | 40 | 空命令[冒号]。它在shell中等价于"NOP"（即no op，空操作），同时也被认为是shell内建命令true的同义词。它本身是Bash的内建命令，返回值是true（0）。 41 | ``` 42 | : 43 | echo $? # 0 44 | ``` 45 | 它在死循环中的情况： 46 | ``` 47 | while : 48 | do 49 | operation-1 50 | operation-2 51 | ... 52 | operation-n 53 | done 54 | 55 | # 等价于 56 | # while true 57 | # do 58 | # ... 59 | # done 60 | ``` 61 | 它在 if/then 中作为占位符的情况： 62 | ``` 63 | if condition 64 | then : # 什么都不做，只是建立一个分支 65 | else 66 | take-some-action 67 | fi 68 | ``` 69 | 70 | 与>重定向操作符结合，可以在不改变权限的情况下清空文件。如果文件不存在，那么将会创建这个文件。 71 | ``` 72 | : > data.xxx # 文件 "data.xxx" 已经被清空 73 | 74 | # 与 cat /dev/null >data.xxx 作用相同 75 | # 但是这个操作并不会产生一个新的进程，因为 ":" 是一个内建命令。 76 | ``` 77 | 78 | ## * 79 | 80 | 算术运算符。在进行算术运算时，* 代表乘法运算。 81 | 82 | ** 双星号可以表示乘方运算或扩展文件匹配 83 | 84 | ## () 85 | 86 | 命令组。 87 | ``` 88 | (a=hello; echo $a) 89 | 90 | notice 通过括号执行一系列命令会产生一个子shell（subshell）。 91 | 92 | 在括号中的变量，即在子shell中的变量，在脚本的其他部分是不可见的。父进程脚本不能访问子进程（子shell）中所创建的变量。 93 | 94 | a=123 95 | ( a=321; ) 96 | 97 | echo "a = $a" # a = 123 98 | ``` 99 | 100 | 在括号中的 "a" 看起来像一个局部变量。 101 | 102 | ## {xxx,yyy,zzz,...} 103 | 104 | 大括号扩展结构。 105 | ``` 106 | echo \"{These,words,are,quoted}\" # " 将会作为单词的前缀和后缀 107 | # "These" "words" "are" "quoted" 108 | 109 | 110 | cat {file1,file2,file3} > combined_file 111 | # 将 file1, file2 与 file3 拼接在一起后写入 combined_file 中。 112 | 113 | cp file22.{txt,backup} 114 | # 将 "file22.txt" 拷贝为 "file22.backup" 115 | ``` 116 | ## {a..z} 117 | 118 | 扩展大括号扩展结构。 119 | ``` 120 | echo {a..z} # a b c d e f g h i j k l m n o p q r s t u v w x y z 121 | # 输出 a 到 z 之间所有的字母。 122 | 123 | echo {0..3} # 0 1 2 3 124 | # 输出 0 到 3 之间所有的数字。 125 | 126 | 127 | base64_charset=( {A..Z} {a..z} {0..9} + / = ) 128 | # 使用扩展大括号扩展符初始化一个数组。 129 | ``` 130 | 131 | ## 离开脚本 132 | ``` 133 | exit # 这是正确终止脚本的方式。 134 | # 不带参数的exit返回的是上一条命令的结果。 135 | ``` 136 | 137 | ## 运行脚本 138 | 不推荐使用sh scriptname来调用脚本，因为这会禁用脚本从标准输入（stdin）中读入数据。更好的方法是 139 | ``` 140 | 执行命令： 141 | 142 | chmod 555 scriptname（给予所有用户读取和执行的权限）2 143 | 144 | 或者 145 | 146 | chmod +rx scriptname（给予所有用户读取和执行的权限） 147 | 148 | chmod u+rx scriptname（仅给予脚本所有者读取和执行的权限） 149 | ``` 150 | 151 | 然后直接使用./scriptname3进行调用测试了 152 | 153 | ## 放到系统文件夹 154 | 当你在完成调试与测试后，你可能会将脚本文件移至/usr/local/bin（使用root权限）文件夹中，使得脚本可以被所有用户以系统调用的方式进行调用。那么你可以在命令行中输入scriptname [ENTER]直接调用脚本。 155 | -------------------------------------------------------------------------------- /Shell/bash-note.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Shell/bash-note.md -------------------------------------------------------------------------------- /Shell/books.md: -------------------------------------------------------------------------------- 1 | Advanced Bash-ScriptingGuide_cn.pdf 2 | bash_cheat_sheet.pdf -------------------------------------------------------------------------------- /Shell/busybox-note.md: -------------------------------------------------------------------------------- 1 | Busybox笔记 2 | ===== 3 | 4 | # 什么是busybox 5 | BusyBox 是标准 Linux 工具的一个单个可执行实现。BusyBox 包含了一些简单的工具，例如 cat 和 echo，还包含了一些更大、更复杂的工具，例如 grep、find、mount 以及 telnet。有些人将 BusyBox 称为 Linux 工具里的瑞士军刀.简单的说BusyBox就好像是个大工具箱，它集成压缩了 Linux 的许多工具和命令 6 | 7 | # 安装 8 | http://jingyan.baidu.com/article/6f2f55a1a000ceb5b83e6c74.html?st=3&net_type=1&bd_page_type=1&os=0&showimg=1&rst=2 9 | 10 | # 使用技巧 11 | 1. busybox 里有 ash 和 hush 还有 sh 这几种 shell，在命令行输入 ash 或 hush，可以像在 bash 里那样，通过按上下键选择刚才输入的命令。 12 | 2. android系统本身就有ls命令，busybox里也有ls，输入ls时调用的是android的ls，那么想用busybox的ls就要每次都在前面加个busybox吗？不用，使用alias命令可以搞定。 13 | alias ls='busybox ls' 14 | 同样的，cp、mv等二者都有的命令都可以这样搞定。也可以通过修改 /init.rc 来解决。 15 | 16 | # 命令 17 | 18 | -------------------------------------------------------------------------------- /Shell/makefile-note.md: -------------------------------------------------------------------------------- 1 | 2 | > 会不会写makefile，从一个侧面说明了一个人是否具备完成大型工程的能力 3 | 4 | 查看[Makefile经典教程](http://blog.csdn.net/ruglcc/article/details/7814546) 5 | 程浩老师把原来blog的内容整理成了[电子书](https://htwm.readthedocs.org/zh_CN/latest/),我觉得非常好 6 | 7 | # 基本 8 | - Makefile中的命令，必须以[Tab]键开始 9 | - 注释为# 10 | - 变量用$(val)的方式调用 11 | - .PHONY代表伪目标文件，如clean, .PHONY”来显示地指明一个目标是“伪目标”，向make说明，不管是否有这个文件，这个目标就是“伪目标”。只要有这个声明，不管是否有“clean”文件，要运行“clean”这个目标，只有“make clean”这样。 12 | - clean从来都是放在文件的最后 13 | - 在rm命令前面加了一个小减号的意思就是，也许某些文件出现问题，但不要管，继续做后面的事。 14 | - 一般命名为Makefile(推荐),或makefile 15 | - 第一条规则中的目标将被确立为最终的目标 16 | - 如果命令太长，你可以使用反斜框（‘\’）作为换行符 17 | - <"~" $HOME目录> <"*" 通配符> 18 | 19 | # 一个例子 20 | 一个典型的Makefile如下: 21 | 22 | ``` 23 | edit : main.o kbd.o command.o display.o \ 24 | insert.o search.o files.o utils.o 25 | cc -o edit main.o kbd.o command.o display.o \ 26 | insert.o search.o files.o utils.o 27 | 28 | main.o : main.c defs.h 29 | cc -c main.c 30 | kbd.o : kbd.c defs.h command.h 31 | cc -c kbd.c 32 | command.o : command.c defs.h command.h 33 | cc -c command.c 34 | display.o : display.c defs.h buffer.h 35 | cc -c display.c 36 | insert.o : insert.c defs.h buffer.h 37 | cc -c insert.c 38 | search.o : search.c defs.h buffer.h 39 | cc -c search.c 40 | files.o : files.c defs.h buffer.h command.h 41 | cc -c files.c 42 | utils.o : utils.c defs.h 43 | cc -c utils.c 44 | clean : 45 | rm edit main.o kbd.o command.o display.o \ 46 | insert.o search.o files.o utils.o 47 | ``` 48 | 49 | 使用变量进行简化: 50 | 51 | ``` 52 | objects = main.o kbd.o command.o display.o \ 53 | insert.osearch.o files.o utils.o 54 | edit : $(objects) 55 | cc -o edit $(objects) 56 | main.o : main.c defs.h 57 | cc -c main.c 58 | kbd.o : kbd.c defs.h command.h 59 | cc -c kbd.c 60 | command.o : command.c defs.h command.h 61 | cc -c command.c 62 | display.o : display.c defs.h buffer.h 63 | cc -c display.c 64 | insert.o : insert.c defs.h buffer.h 65 | cc -c insert.c 66 | search.o : search.c defs.h buffer.h 67 | cc -c search.c 68 | files.o : files.c defs.h buffer.h command.h 69 | cc -c files.c 70 | utils.o : utils.c defs.h 71 | cc -c utils.c 72 | clean : 73 | rm edit $(objects) 74 | ``` 75 | 76 | 使用自动推倒以及伪目标: 77 | 78 | ``` 79 | objects = main.o kbd.o command.o display.o \ 80 | insert.o search.o files.o utils.o 81 | 82 | edit : $(objects) 83 | cc -o edit $(objects) 84 | 85 | main.o : defs.h 86 | kbd.o : defs.h command.h 87 | command.o : defs.h command.h 88 | display.o : defs.h buffer.h 89 | insert.o : defs.h buffer.h 90 | search.o : defs.h buffer.h 91 | files.o : defs.h buffer.h command.h 92 | utils.o : defs.h 93 | 94 | .PHONY : clean 95 | clean : 96 | rm edit $(objects) 97 | ``` -------------------------------------------------------------------------------- /Shell/scripts/2_2_2.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # 请尝试写一个脚本。 4 | # 当调用脚本时会显示当前的时间和日期 5 | # ，所有已登录的用户和系统的正常运行时间。 6 | # 然后将这些信息保存到一个文件中。 7 | CUR_DIR=`pwd` 8 | FILE="$CUR_DIR/log.txt" 9 | 10 | echo `date` >> $FILE 11 | 12 | echo `who` >> $FILE 13 | 14 | echo `uptime` >> $FILE 15 | -------------------------------------------------------------------------------- /Shell/scripts/cleanup.sh: -------------------------------------------------------------------------------- 1 | cd /var/log 2 | cat /dev/null > messages 3 | cat /dev/null > wtmp 4 | echo "Log files cleaned up." -------------------------------------------------------------------------------- /Shell/scripts/cleanup1.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # Bash脚本标准起始行。 3 | 4 | # Cleanup, version 2 5 | 6 | # 使用root权限运行。 7 | # 在这里插入代码用来打印错误信息，并且在未使用root权限时退出。 8 | 9 | LOG_DIR=/Users/Calvin/Develop/githubs/TechStack/shell/scripts/log 10 | 11 | cd $LOG_DIR 12 | 13 | cat /dev/null > messages 14 | 15 | cat /dev/null > wtmp 16 | 17 | echo "Logs cleaned up." 18 | 19 | exit -------------------------------------------------------------------------------- /Shell/scripts/cleanup2.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | LOG_DIR=/Users/Calvin/Develop/githubs/TechStack/shell/scripts/log 4 | ROOT_UID=0 5 | LINES=50 6 | E_XCD=86 7 | E_NOTROOT=87 8 | 9 | if [ "$UID" -ne "$ROOT_UID" ] 10 | then 11 | echo "Must be root to run this script" 12 | exit $E_NOTROOT 13 | fi 14 | 15 | if [ -n "$1" ] 16 | then 17 | lines=$1 18 | else 19 | lines=$LINES 20 | fi 21 | 22 | cd $LOG_DIR 23 | 24 | if [ `pwd` != "$LOG_DIR" ] 25 | then 26 | echo "Can't change to $LOG_DIR" 27 | exit $E_XCD 28 | fi 29 | 30 | tail -n $lines messages > msg.tmp 31 | mv msg.tmp messages 32 | 33 | cat /dev/null > wtmp 34 | echo "Log files cleaned up." 35 | 36 | exit 0 -------------------------------------------------------------------------------- /Shell/scripts/log.txt: -------------------------------------------------------------------------------- 1 | 2015年10月14日 星期三 11时03分18秒 CST 2 | _mbsetupuser console Oct 13 22:04 Calvin console Oct 13 22:04 Calvin ttys000 Oct 14 10:00 3 | 11:03 up 13 hrs, 3 users, load averages: 1.39 1.45 1.43 4 | -------------------------------------------------------------------------------- /Shell/scripts/log/messages: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Shell/scripts/log/messages -------------------------------------------------------------------------------- /Shell/scripts/log/wtmp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Shell/scripts/log/wtmp -------------------------------------------------------------------------------- /Shell/shell-note.md: -------------------------------------------------------------------------------- 1 | 2 | # 教程 3 | - [c语言中文网shell教程](http://c.biancheng.net/cpp/view/6994.html),以下大部分内容来自该网 4 | 5 | # 资源 6 | - [awesome-shell](https://github.com/alebcay/awesome-shell/blob/master/README_ZH-CN.md) 7 | > 各种bash资源 8 | - [Laptop](https://github.com/thoughtbot/laptop) 9 | > A shell script which turns your OS X laptop into an awesome web development machine. 10 | 11 | #第一个shell脚本 12 | ``` 13 | #!/bin/bash 14 | echo "Hello World !" 15 | ``` 16 | 17 | #常识 18 | - shell的扩展名一般是sh(sh代表shell),但扩展名并不影响脚本执行 19 | - `#!` 是一个约定的标记，它告诉系统这个脚本需要什么解释器来执行，即使用哪一种Shell。 20 | - 一个使用/bin/sh作为解释器的脚本是不是可以省去第一行呢？是的。 21 | 22 | # 运行shell 23 | - 作为可执行程序,第一行一定要写对，好让系统查找到正确的解释器 24 | ``` 25 | chmod +x test.sh #使脚本具有执行权限 26 | ./test.sh #执行脚本,用`./`告诉系统就在当前目录找 27 | ``` 28 | 29 | - 作为解释器参数,直接运行解释器，其参数就是shell脚本的文件名,这种方式运行的脚本，不需要在第一行指定解释器信息，写了也没用 30 | ``` 31 | /bin/sh test.sh 32 | /bin/php test.php 33 | ``` 34 | 35 | # 变量 36 | ## 定义变量 variableName="" 37 | ``` 38 | variableName="value" # 变量名和等号之间不能有空格,等号和值之间也不能有空格 39 | # 首个字符必须为字母（a-z，A-Z）。 40 | # 中间不能有空格，可以使用下划线（_）。 41 | ``` 42 | 43 | ## 使用变量 $variableName,${variableName} 44 | ``` 45 | # 使用一个定义过的变量，只要在变量名前面加美元符号（$）即可 46 | your_name="rdmclin2" 47 | echo $your_name 48 | echo ${your_name} #变量名外面的花括号是可选的，加不加都行，加花括号是为了帮助解释器识别变量的边界 49 | # 推荐给所有变量加上花括号，这是个好的编程习惯。 50 | ``` 51 | 52 | ## 重新定义变量 53 | 已定义的变量，可以被重新定义,重新赋值即可,注意不要加$ 54 | 55 | ## 只读变量 readonly variable_name 56 | ``` 57 | #!/bin/bash 58 | myName="rdmclin2" 59 | readonly myName # 使用 readonly 命令可以将变量定义为只读变量，只读变量的值不能被改变。 60 | myName="rdmclin" #该句报错 : ./3.sh: line 4: myName: readonly variable 61 | ``` 62 | 63 | ## 删除变量 unset variable_name 64 | ``` 65 | 66 | #!/bin/sh 67 | 68 | myUrl="http://mclspace.com" 69 | unset myUrl # 变量被删除后不能再次使用；unset 命令不能删除只读变量。 70 | echo $myUrl # 无任何输出 71 | ``` 72 | 73 | ## 变量类型 74 | 运行shell时，会同时存在三种变量： 75 | 1) 局部变量 76 | 77 | 局部变量在脚本或命令中定义，仅在当前shell实例中有效，其他shell启动的程序不能访问局部变量。 78 | 2) 环境变量 79 | 80 | 所有的程序，包括shell启动的程序，都能访问环境变量，有些程序需要环境变量来保证其正常运行。必要的时候shell脚本也可以定义环境变量。 81 | 3) shell变量 82 | 83 | shell变量是由shell程序设置的特殊变量。shell变量中有一部分是环境变量，有一部分是局部变量，这些变量保证了shell的正常运行 84 | 85 | ## 特殊变量 86 | 变量名只能包含数字、字母和下划线，因为某些包含其他字符的变量有特殊含义，这样的变量被称为特殊变量。 87 | - $$ 表示当前Shell进程的ID，即pid,对于 Shell 脚本，就是这些脚本所在的进程ID 88 | - $0 当前脚本的文件名 89 | - $n 传递给脚本或函数的参数。n 是一个数字，表示第几个参数。例如，第一个参数是$1，第二个参数是$2 90 | - $# 传递给脚本或函数的参数个数 91 | - $* 传递给脚本或函数的所有参数 92 | - $@ 传递给脚本或函数的所有参数。被双引号(" ")包含时，与 $* 稍有不同 93 | - $? 上个命令的退出状态，或函数的返回值,上一个命令执行后的返回结果,一般情况下，大部分命令执行成功会返回 0，失败返回 1 94 | 95 | # $* 和 $@ 的区别 96 | $* 和 $@ 都表示传递给函数或脚本的所有参数，不被双引号(" ")包含时，都以"$1" "$2" … "$n" 的形式输出所有参数。 97 | 但是当它们被双引号(\" \")包含时，\"$\*\" 会将所有的参数作为一个整体，以"$1 $2 … $n"的形式输出所有参数；"$@" 会将各个参数分开，以"$1" "$2" … "$n" 的形式输出所有参数。 98 | ``` 99 | echo "print each param from \"\$*\"" 100 | for var in "$*" 101 | do 102 | echo "$var" 103 | done 104 | 105 | echo "print each param from \"\$@\"" 106 | for var in "$@" 107 | do 108 | echo "$var" 109 | done 110 | 111 | 112 | # 结果 113 | print each param from "$*" 114 | a b c d 115 | print each param from "$@" 116 | a 117 | b 118 | c 119 | d 120 | ``` 121 | 122 | #例子 123 | ``` 124 | #!/bin/bash 125 | echo "What is your name?" 126 | read PERSON 127 | echo "Hello, $PERSON" 128 | ``` 129 | 130 | # 替换 131 | ## 转义字符 132 | - "\\n" 换行 133 | - "\\\\" 反斜杠 134 | - "\\a" 警报，响铃 135 | - "\\b" 退格 136 | - "\\f" 换页 137 | - "\\r" 回车 138 | - "\\t" 制表符 139 | - "\\v" 垂直制表符,显示屏无效，只有打印机能体现出来 140 | 141 | > 换行和回车有啥区别? 换行好理解，就是跳到下一行嘛,回车嘛,在计算机还没有出现之前，有一种叫做电传打字机（Teletype Model 33）的玩意，每秒钟可以打10个字符。但是它有一个问题，就是打完一行换行的时候，要用去0.2秒，正好可以打两个字符。要是在这0.2秒里面，又有新的字符传过来，那么这个字符将丢失。于是，研制人员想了个办法解决这个问题，就是在每行后面加两个表示结束的字符。一个叫做“回车”，告诉打字机把打印头定位在左边界；另一个叫做“换行”，告诉打字机把纸向下移一行。这就是“换行”和“回车”的来历，从它们的英语名字上也可以看出一二。后来，计算机发明了，这两个概念也就被般到了计算机上。那时，存储器很贵，一些科学家认为在每行结尾加两个字符太浪费了，加一个就可以。于是，就出现了分歧。Unix系统里，每行结尾只有“<换行>”，即“\n”；Windows系统里面，每行结尾是“<换行><回车 >”，即“\n\r”；Mac系统里，每行结尾是“<回车>”。一个直接后果是，Unix/Mac系统下的文件在Windows里打开 的话，所有文字会变成一行；而Windows里的文件在Unix/Mac下打开的话，在每行的结尾可能会多出一个^M符号。 142 | 143 | 144 | ``` 145 | #!/bin/bash 146 | 147 | a=10 148 | echo "Value of a is $a \n" 149 | ``` 150 | 151 | ## 命令替换 \`command\` 152 | 命令替换是指Shell可以先执行命令，将输出结果暂时保存，在适当的地方输出,例如 153 | 154 | ``` 155 | #!/bin/bash 156 | 157 | DATE=`date` 158 | echo "Date is $DATE" 159 | ``` 160 | 161 | ## 变量替换 162 | - ${var} 变量本来的值 163 | - ${var:-word} 如果变量 var 为空或已被删除(unset)，那么返回 word，但不改变 var 的值。 164 | - ${var:=word} 如果变量 var 为空或已被删除(unset)，那么返回 word，并将 var 的值设置为 word。 165 | - ${var:?message} 如果变量 var 为空或已被删除(unset)，那么将消息 message 送到标准错误输出，可以用来检测变量 var 是否可以被正常赋值。 166 | - 若此替换出现在Shell脚本中，那么脚本将停止运行。 167 | - ${var:+word} 如果变量 var 被定义，那么返回 word，但不改变 var 的值。 168 | 169 | # 运算符 170 | 原生bash不支持简单的数学运算，但是可以通过其他命令来实现，例如 awk 和 expr，expr 最常用。 171 | ``` 172 | #!/bin/bash 173 | 174 | val=`expr 2 + 2` # 表达式和运算符之间要有空格 175 | echo "Total value : $val" 176 | ``` 177 | 178 | ## 算数运算符 179 | - 运算符 说明 举例 180 | - + 加法 `expr $a + $b` 结果为 30。 181 | - - 减法 `expr $a - $b` 结果为 10。 182 | - * 乘法 `expr $a \* $b` 结果为 200。 #注意乘法要用\\* 183 | - / 除法 `expr $b / $a` 结果为 2。 184 | - % 取余 `expr $b % $a` 结果为 0。 185 | - = 赋值 a=$b 将把变量 b 的值赋给 a。 186 | - == 相等。用于比较两个数字，相同则返回 true。 [ $a == $b ] 返回 false。 # 条件表达式要放在方括号之间，并且要有空格 187 | - != 不相等。用于比较两个数字，不相同则返回 true。 [ $a != $b ] 返回 true。 188 | 189 | ## 关系运算符 190 | - 运算符 说明 举例 191 | - -eq 检测两个数是否相等，相等返回 true。 [ $a -eq $b ] 返回 true。 192 | - -ne 检测两个数是否相等，不相等返回 true。 [ $a -ne $b ] 返回 true。 193 | - -gt 检测左边的数是否大于右边的，如果是，则返回 true。 [ $a -gt $b ] 返回 false。 194 | - -lt 检测左边的数是否小于右边的，如果是，则返回 true。 [ $a -lt $b ] 返回 true。 195 | - -ge 检测左边的数是否大等于右边的，如果是，则返回 true。 [ $a -ge $b ] 返回 false。 196 | - -le 检测左边的数是否小于等于右边的，如果是，则返回 true。 [ $a -le $b ] 返回 true。 197 | 198 | ## 布尔运算符 199 | - 运算符 说明 举例 200 | - ! 非运算，表达式为 true 则返回 false，否则返回 true。 [ ! false ] 返回 true。 201 | - -o 或运算，有一个表达式为 true 则返回 true。 [ $a -lt 20 -o $b -gt 100 ] 返回 true。 202 | - -a 与运算，两个表达式都为 true 才返回 true。 [ $a -lt 20 -a $b -gt 100 ] 返回 false。 203 | 204 | ## 字符串运算符 205 | - 运算符 说明 举例 206 | - = 检测两个字符串是否相等，相等返回 true。 [ $a = $b ] 返回 false。 207 | - != 检测两个字符串是否相等，不相等返回 true。 [ $a != $b ] 返回 true。 208 | - -z 检测字符串长度是否为0，为0返回 true。 [ -z $a ] 返回 false。 209 | - -n 检测字符串长度是否为0，不为0返回 true。 [ -z $a ] 返回 true。 210 | - str 检测字符串是否为空，不为空返回 true。 [ $a ] 返回 true。 211 | 212 | ## 文件测试运算符 213 | - 操作符 说明 举例 214 | - -b file 检测文件是否是块设备文件，如果是，则返回 true。 [ -b $file ] 返回 false。 215 | - -c file 检测文件是否是字符设备文件，如果是，则返回 true。 [ -b $file ] 返回 false。 216 | - -d file 检测文件是否是目录，如果是，则返回 true。 [ -d $file ] 返回 false。 217 | - -f file 检测文件是否是普通文件（既不是目录，也不是设备文件），如果是，则返回 true。 [ -f $file ] 返回 true。 218 | - -g file 检测文件是否设置了 SGID 位，如果是，则返回 true。 [ -g $file ] 返回 false。 219 | - -k file 检测文件是否设置了粘着位(Sticky Bit)，如果是，则返回 true。 [ -k $file ] 返回 false。 220 | - -p file 检测文件是否是具名管道，如果是，则返回 true。 [ -p $file ] 返回 false。 221 | - -u file 检测文件是否设置了 SUID 位，如果是，则返回 true。 [ -u $file ] 返回 false。 222 | - -r file 检测文件是否可读，如果是，则返回 true。 [ -r $file ] 返回 true。 223 | - -w file 检测文件是否可写，如果是，则返回 true。 [ -w $file ] 返回 true。 224 | - -x file 检测文件是否可执行，如果是，则返回 true。 [ -x $file ] 返回 true。 225 | - -s file 检测文件是否为空（文件大小是否大于0），不为空返回 true。 [ -s $file ] 返回 true。 226 | - -e file 检测文件（包括目录）是否存在，如果是，则返回 true。 [ -e $file ] 返回 true。 227 | 228 | # 注释 229 | 以“#”开头的行就是注释，会被解释器忽略。 230 | 231 | sh里没有多行注释，只能每一行加一个#号。 232 | 233 | 如果在开发过程中，遇到大段的代码需要临时注释起来，过一会儿又取消注释，怎么办呢？每一行加个#符号太费力了，可以把这一段要注释的代码用一对花括号括起来，定义成一个函数，没有地方调用这个函数，这块代码就不会执行，达到了和注释一样的效果。 234 | 235 | # 字符串 236 | 字符串可以用单引号，也可以用双引号，也可以不用引号 237 | ## 单引号 str=\'this is a string\' 238 | 单引号字符串的限制： 239 | - 单引号里的任何字符都会原样输出，单引号字符串中的变量是无效的； 240 | - 单引号字串中不能出现单引号（对单引号使用转义符后也不行）。 241 | 242 | ## 双引号 243 | ``` 244 | your_name='qinjx' 245 | str="Hello, I know your are \"$your_name\"! \n" 246 | ``` 247 | 双引号的优点： 248 | - 双引号里可以有变量 249 | - 双引号里可以出现转义字符 250 | 251 | ## 字符串拼接 252 | ``` 253 | your_name="qinjx" 254 | greeting="hello, "$your_name" !" 255 | greeting_1="hello, ${your_name} !" 256 | 257 | echo $greeting $greeting_1 258 | ``` 259 | 260 | ## 获取字符串长度 261 | ``` 262 | string="abcd" 263 | echo ${#string} #输出 4 264 | ``` 265 | 266 | ## 提取子字符串 267 | ``` 268 | string="alibaba is a great company" 269 | echo ${string:1:4} #输出liba 270 | ``` 271 | 272 | ## 查找字符串 273 | ``` 274 | string="alibaba is a great company" 275 | echo `expr index "$string" is` 276 | ``` 277 | 注意mac下的expr不支持 278 | 279 | # 数组 280 | bash支持一维数组（不支持多维数组），并且没有限定数组的大小。 281 | 282 | ## 定义数组 283 | ``` 284 | array_name=(value0 value1 value2 value3) 285 | 286 | # or 287 | array_name=( 288 | value0 289 | value1 290 | value2 291 | value3 292 | ) 293 | 294 | # or 295 | array_name[0]=value0 296 | array_name[1]=value1 297 | array_name[2]=value2 298 | # 可以不使用连续的下标，而且下标的范围没有限制 299 | ``` 300 | 301 | ## 读取数组 302 | 读取数组元素值的一般格式是：${array_name[index]} 303 | ``` 304 | NAME[0]="Zara" 305 | echo "First Index: ${NAME[0]}" 306 | ``` 307 | 使用@ 或 * 可以获取数组中的所有元素，例如： 308 | ``` 309 | #!/bin/sh 310 | 311 | NAME[0]="Zara" 312 | NAME[1]="Qadir" 313 | NAME[2]="Mahnaz" 314 | NAME[3]="Ayan" 315 | NAME[4]="Daisy" 316 | echo "First Method: ${NAME[*]}" 317 | echo "Second Method: ${NAME[@]}" 318 | ``` 319 | 输出 320 | ``` 321 | $./test.sh 322 | First Method: Zara Qadir Mahnaz Ayan Daisy 323 | Second Method: Zara Qadir Mahnaz Ayan Daisy 324 | ``` 325 | 326 | ## 获取数组的长度 327 | ``` 328 | # 取得数组元素的个数 329 | length=${#array_name[@]} 330 | # 或者 331 | length=${#array_name[*]} 332 | # 取得数组单个元素的长度 333 | lengthn=${#array_name[n]} 334 | ``` 335 | 336 | # echo 337 | echo是Shell的一个内部指令，用于在屏幕上打印出指定的字符串。命令格式： 338 | `echo arg` 339 | 您可以使用echo实现更复杂的输出格式控制。 340 | ## 显示转义字符 341 | 342 | echo "\"It is a test\"" 343 | 344 | 结果将是： 345 | "It is a test" 346 | 347 | 双引号也可以省略。 348 | 349 | ## 显示变量 350 | 351 | name="OK" 352 | echo "$name It is a test" 353 | 结果将是： 354 | OK It is a test 355 | 356 | 同样双引号也可以省略。 357 | 358 | 如果变量与其它字符相连的话，需要使用大括号（{ }）： 359 | mouth=8 360 | echo "${mouth}-1-2009" 361 | 结果将是： 362 | 8-1-2009 363 | 364 | ## 显示换行 365 | 366 | echo "OK!\n" 367 | echo "It is a test" 368 | 输出： 369 | OK! 370 | It is a test 371 | 372 | ## 显示不换行 373 | 374 | echo "OK!\c" 375 | echo "It is a test" 376 | 输出： 377 | OK!It si a test 378 | 379 | ## 显示结果重定向至文件 380 | 381 | echo "It is a test" > myfile 382 | 383 | ## 原样输出字符串 384 | 385 | 若需要原样输出字符串（不进行转义），请使用单引号。例如： 386 | echo '$name\"' 387 | 388 | ## 显示命令执行结果 389 | 390 | echo `date` 391 | 结果将显示当前日期 392 | 393 | 从上面可看出，双引号可有可无，单引号主要用在原样输出中。 394 | 395 | # printf 396 | printf 命令的语法： 397 | `printf format-string [arguments...]` 398 | 399 | 这里仅说明与C语言printf()函数的不同： 400 | - printf 命令不用加括号 401 | - format-string 可以没有引号，但最好加上，单引号双引号均可。 402 | - 参数多于格式控制符(%)时，format-string 可以重用，可以将所有参数都转换。 403 | - arguments 使用空格分隔，不用逗号。 404 | 405 | ``` 406 | # format-string为双引号 407 | $ printf "%d %s\n" 1 "abc" 408 | 1 abc 409 | # 单引号与双引号效果一样 410 | $ printf '%d %s\n' 1 "abc" 411 | 1 abc 412 | # 没有引号也可以输出 413 | $ printf %s abcdef 414 | abcdef 415 | # 格式只指定了一个参数，但多出的参数仍然会按照该格式输出，format-string 被重用 416 | $ printf %s abc def 417 | abcdef 418 | $ printf "%s\n" abc def 419 | abc 420 | def 421 | $ printf "%s %s %s\n" a b c d e f g h i j 422 | a b c 423 | d e f 424 | g h i 425 | j 426 | # 如果没有 arguments，那么 %s 用NULL代替，%d 用 0 代替 427 | $ printf "%s and %d \n" 428 | and 0 429 | # 如果以 %d 的格式来显示字符串，那么会有警告，提示无效的数字，此时默认置为 0 430 | $ printf "The first program always prints'%s,%d\n'" Hello Shell 431 | -bash: printf: Shell: invalid number 432 | The first program always prints 'Hello,0' 433 | $ 434 | ``` 435 | > 注意，根据POSIX标准，浮点格式%e、%E、%f、%g与%G是“不需要被支持”。这是因为awk支持浮点预算，且有它自己的printf语句。这样Shell程序中需要将浮点数值进行格式化的打印时，可使用小型的awk程序实现。然而，内建于bash、ksh93和zsh中的printf命令都支持浮点格式。 436 | 437 | # if else 438 | - if ... fi 语句； 439 | - if ... else ... fi 语句； 440 | - if ... elif ... else ... fi 语句 441 | - test 命令用于检查某个条件是否成立，与方括号([ ])类似 442 | 语法 443 | ``` 444 | if [ expression ] 445 | then 446 | Statement(s) to be executed if expression is true 447 | fi 448 | ``` 449 | expression 和方括号([ ])之间必须有空格，否则会有语法错误 450 | 451 | # case 452 | ``` 453 | echo 'Input a number between 1 to 4' 454 | echo 'Your number is:\c' 455 | read aNum 456 | case $aNum in 457 | 1) echo 'You select 1' 458 | ;; 459 | 2) echo 'You select 2' 460 | ;; 461 | 3) echo 'You select 3' 462 | ;; 463 | 4) echo 'You select 4' 464 | ;; 465 | *) echo 'You do not select a number between 1 to 4' 466 | ;; 467 | esac 468 | ``` 469 | 470 | # for 471 | ``` 472 | for 变量 in 列表 473 | do 474 | command1 475 | command2 476 | ... 477 | commandN 478 | done 479 | ``` 480 | 481 | # while 482 | ``` 483 | while command 484 | do 485 | Statement(s) to be executed if command is true 486 | done 487 | ``` 488 | 例如: 489 | ``` 490 | COUNTER=0 491 | while [ $COUNTER -lt 5 ] 492 | do 493 | COUNTER='expr $COUNTER+1' 494 | echo $COUNTER 495 | done 496 | ``` 497 | 或者用来读取信息 498 | ``` 499 | echo 'type <CTRL-D> to terminate' 500 | echo -n 'enter your most liked film: ' 501 | while read FILM 502 | do 503 | echo "Yeah! great film the $FILM" 504 | done 505 | ``` 506 | 507 | # until 508 | until 循环执行一系列命令直至条件为 true 时停止。 509 | ``` 510 | until command 511 | do 512 | Statement(s) to be executed until command is true 513 | done 514 | ``` 515 | 例如: 516 | ``` 517 | #!/bin/bash 518 | 519 | a=0 520 | 521 | until [ ! $a -lt 10 ] 522 | do 523 | echo $a 524 | a=`expr $a + 1` 525 | done 526 | ``` 527 | 528 | # break & continue 529 | break命令允许跳出所有循环（终止执行后面的所有循环）。break 命令后面还可以跟一个整数，表示跳出第几层循环. 530 | continue命令与break命令类似，只有一点差别，它不会跳出所有循环，仅仅跳出当前循环。 531 | ``` 532 | #!/bin/bash 533 | while : 534 | do 535 | echo -n "Input a number between 1 to 5: " 536 | read aNum 537 | case $aNum in 538 | 1|2|3|4|5) echo "Your number is $aNum!" 539 | ;; 540 | *) echo "You do not select a number between 1 to 5, game is over!" 541 | break 542 | ;; 543 | esac 544 | done 545 | ``` 546 | 547 | # 函数 548 | ``` 549 | Shell 函数的定义格式如下： 550 | function_name () { 551 | list of commands 552 | [ return value ] 553 | } 554 | 如果你愿意，也可以在函数名前加上关键字 function： 555 | function function_name () { 556 | list of commands 557 | [ return value ] 558 | } 559 | 函数返回值，可以显式增加return语句；如果不加，会将最后一条命令运行结果作为返回值。 560 | Shell 函数返回值只能是整数，一般用来表示函数执行成功与否，0表示成功，其他值表示失败。如果 return 其他数据，比如一个字符串，往往会得到错误提示：“numeric argument required”。 561 | 如果一定要让函数返回字符串，那么可以先定义一个变量，用来接收函数的计算结果，脚本在需要的时候访问这个变量来获得函数返回值。 562 | 563 | ``` 564 | 565 | ## 调用函数 566 | 调用函数只需要给出函数名，不需要加括号。 567 | 568 | ## 删除函数 569 | 像删除变量一样，删除函数也可以使用 unset 命令，不过要加上 .f 选项，如下所示： 570 | ``` 571 | $unset .f function_name 572 | ``` 573 | 574 | ## 函数参数 575 | 在Shell中，调用函数时可以向其传递参数。在函数体内部，通过 $n 的形式来获取参数的值，例如，$1表示第一个参数，$2表示第二个参数... 576 | $10 不能获取第十个参数，获取第十个参数需要${10}。当n>=10时，需要使用${n}来获取参数。 577 | 另外，还有几个特殊变量用来处理参数，前面已经提到： 578 | - $# 传递给函数的参数个数。 579 | - $* 显示所有传递给函数的参数。 580 | - $@ 与`$*`相同，但是略有区别，请查看Shell特殊变量。 581 | - $? 函数的返回值。 582 | 583 | # 输入输出重定向 584 | ## 输出重定向 585 | ``` 586 | $ command > file # 输出重定向会覆盖文件内容 587 | ``` 588 | or 589 | ``` 590 | $ command >> file # 如果不希望文件内容被覆盖，可以使用 >> 追加到文件末尾 591 | ``` 592 | 593 | ## 输入重定向 594 | ``` 595 | command < file 596 | ``` 597 | 598 | ## 标准错误文件stderr 599 | 标准错误文件(stderr)：stderr的文件描述符为2，Unix程序会向stderr流中写入错误信息。 600 | ``` 601 | $command 2 > file # stderr 重定向到 file 602 | ``` 603 | or 604 | ``` 605 | $command 2 > file # stderr 追加到 file 文件末尾 606 | ``` 607 | or 608 | ``` 609 | $command > file 2>&1 # 将 stdout 和 stderr 合并后重定向到 file 610 | ``` 611 | or 612 | ``` 613 | $command >> file 2>&1 614 | ``` 615 | or 616 | ``` 617 | $command < file1 >file2 # 对 stdin 和 stdout 都重定向 618 | ``` 619 | 620 | ## 嵌入文档 621 | ``` 622 | command << delimiter 623 | document 624 | delimiter 625 | ``` 626 | 627 | ## /dev/null 文件 628 | 如果希望执行某个命令，但又不希望在屏幕上显示输出结果，那么可以将输出重定向到 /dev/null： 629 | ``` 630 | $ command > /dev/null # 将命令的输出重定向到它，会起到”禁止输出“的效果。 631 | ``` 632 | 如果希望屏蔽 stdout 和 stderr，可以这样写： 633 | ``` 634 | $ command > /dev/null 2>&1 635 | ``` 636 | 637 | # shell文件包含 638 | . filename 639 | 或 640 | source filename 641 | 642 | 643 | # 常用脚本 644 | 获取busybox的命令并用alias输出，存到一个sh文件中，通过source命令执行即可完成命令映射 645 | ``` 646 | #!/bin/sh 647 | 648 | for var in $(adb shell busybox | sed -n "$[$(adb shell busybox | sed -n '/Currently\ defined\ functions/=')+1],$ p") ; 649 | do 650 | echo ${var} | awk -F',' '{printf("alias %s=\047busybox %s\047\n",$1,$1)}' 651 | done 652 | ``` 653 | -------------------------------------------------------------------------------- /Test/appium-note.md: -------------------------------------------------------------------------------- 1 | title: "appium note" 2 | tags: 3 | --- 4 | 5 | 6 | ## 检测环境 7 | - appium-doctor --android 8 | > 检测android安装环境 9 | 10 | - appium-doctor --ios 11 | > 检测ios安装环境 12 | 13 | ## 安装 14 | 使用npm 安装 15 | ``` 16 | npm install -g appium 17 | ``` 18 | 注意不能用sudo 19 | 20 | ## 运行 21 | ``` 22 | appium & 23 | ``` 24 | > just only & it means, whatever command/script you entered, all of them will be executed in the background and will act independently from other each other (multi-commands/scripts). 25 | 26 | ## 执行测试 27 | - [教程](https://github.com/appium/appium/blob/master/docs/cn/writing-running-appium/running-tests.cn.md) 28 | 29 | ## 开始 30 | 31 | ## JsonWireProtocol 32 | https://code.google.com/p/selenium/wiki/JsonWireProtocol 33 | 34 | ## 遇到的问题 35 | - appium 安装不能在sudo模式下，然而直接安装的node用npm装必须要用sudo否则无法安装 36 | >解决的方式是用homebrew装nvm, nvm 装node 37 | -------------------------------------------------------------------------------- /Test/mocha-test.md: -------------------------------------------------------------------------------- 1 | 使用Mocha对Nodejs服务器进行测试 2 | ==== 3 | 4 | # 返回204编码的时候不需要对content-type进行验证，因为204代表无内容，不存在内容类型。 -------------------------------------------------------------------------------- /Test/monkey-note.md: -------------------------------------------------------------------------------- 1 | Monkey 笔记 2 | ==== 3 | 4 | # Monkey链接 5 | - [monkey](http://developer.android.com/intl/zh-cn/tools/help/monkey.html) 6 | - [monkeyrunner](http://developer.android.com/intl/zh-cn/tools/help/monkeyrunner_concepts.html) 7 | 8 | # 教程 9 | - [使用 monkeyrunner](http://www.cnblogs.com/youxilua/archive/2011/11/12/2246576.html) 10 | - [androidmonkey](https://code.google.com/p/androidmonkey/) -- Tester/User can easily use the library to create random test cases to test android apps with GUI. -[使用的例子](http://blog.csdn.net/itfootball/article/details/45697575#t0) - 这就是一个典型的使用monkey源码的例子啊 11 | - [极客学院monkey学习视频](http://www.jikexueyuan.com/course/1851.html) 12 | 13 | # 用shell管理monkey 14 | [shell 管理 monkey 压力测试](https://testerhome.com/topics/3553) 15 | 16 | # Motivation 17 | 为类似QQ这样不能重新签名的Android应用编写自动化测试用例……能够满足这个要求的测试技术只有monkey。可是不知道Google是出于什么考虑，只把monkey设计成一个随机发送按键消息的程序 – 跟猴子一样，在手机键盘上乱敲乱点；而没有给monkey加上类似Instrumentation的抓取控件的支持。 18 | 19 | 20 | # 让Monkey获得控件的方法 21 | - [使用 ViewServer](http://www.cnblogs.com/vowei/archive/2012/10/12/2721846.html) 22 | - [使用Dump命令]() 23 | 24 | 25 | # Android注入事件的三种方法 26 | - 内部API - 只能在自己的应用中 27 | - instrumentation - 在应用内操作的话完全没有问题，但一旦跳出这个应用去触发按键事件的话就会崩溃。 28 | - 直接注入事件到设备/dev/input/eventX 29 | 30 | ``` 31 | 需要root 32 | 设备文件eventX默认是被设置为660这个权限的(Owner和同组成员有读写，而owner是root)。为了向这个设备注入事件，你必须让它能可写 33 | 34 | adb shell 35 | su 36 | chmod 666 /dev/input/event3 37 | ``` 38 | 39 | # Monkey用法 40 | ## 命令列表 41 | 42 | ``` 43 | usage: monkey [-p ALLOWED_PACKAGE [-p ALLOWED_PACKAGE] ...] 44 | [-c MAIN_CATEGORY [-c MAIN_CATEGORY] ...] 45 | [--ignore-crashes] [--ignore-timeouts] 46 | [--ignore-security-exceptions] 47 | [--monitor-native-crashes] [--ignore-native-crashes] 48 | [--kill-process-after-error] [--hprof] 49 | [--pct-touch PERCENT] [--pct-motion PERCENT] 50 | [--pct-trackball PERCENT] [--pct-syskeys PERCENT] 51 | [--pct-nav PERCENT] [--pct-majornav PERCENT] 52 | [--pct-appswitch PERCENT] [--pct-flip PERCENT] 53 | [--pct-anyevent PERCENT] [--pct-pinchzoom PERCENT] 54 | [--pkg-blacklist-file PACKAGE_BLACKLIST_FILE] 55 | [--pkg-whitelist-file PACKAGE_WHITELIST_FILE] 56 | [--wait-dbg] [--dbg-no-events] 57 | [--setup scriptfile] [-f scriptfile [-f scriptfile] ...] 58 | [--port port] 59 | [-s SEED] [-v [-v] ...] 60 | [--throttle MILLISEC] [--randomize-throttle] 61 | [--profile-wait MILLISEC] 62 | [--device-sleep-time MILLISEC] 63 | [--randomize-script] 64 | [--script-log] 65 | [--bugreport] 66 | [--periodic-bugreport] 67 | COUNT 68 | 69 | 常用选项及参数说明 70 | -p 允许的包名列表，可同时指定多个包名，每个包都需要使用“-p”参数指定。包名的获取，可参考 python 脚本get_package_name.py 71 | —ignore-crashes 忽视应用 crash 报错，不指定该参数时，应用出现 crash，monkey 会自动停止发送事件，指定该参数后，mongkey 会在 crash 后也一直发送事件，知道所有事件发送完成 72 | —ignore-timeouts 忽视超时导致的错误，即ANR的错误 73 | —ignore-security-exceptions 忽视权限方面的错误 74 | —monitor-native-crashes 监控由 C/C++ 代码引起的 crash 75 | —ignore-native-crashes 忽视由 C/C++ 代码引起的 crash 76 | —kill-process-after-error 当出现错误后杀掉应用的进程 77 | —hprof 指定该选项后，monkey会在发送事件完成后生成性能报告，报告一般存放于/data/misc目录下，对报告的分析，需要使用Traceview 78 | —pct-touch 设定 touch 事件比例 79 | —pct-motion 设定手势事件比例，例如滑动事件 80 | —pct-trackball 设定跟踪球事件的比例 81 | —pct-syskeys 设定系统按键事件的比例，如 Home、Back、音量+/-等 82 | —pct-nav 设定”基本”导航事件的比例 83 | —pct-majornav 设定”主要”导航事件比例 84 | —pct-appswitch 设定启动 Activity 的事件比例 85 | —pct-pinchzoom 设定缩放事件比例 86 | —pct-anyevent 设定其他事件比例 87 | -s 设定种子数，方便用于重现 bug 88 | -v 设定输出信息的详细级别，1个 -v 表示级别为1，2个 -v 表示级别为2 89 | —throttle 设定事件之间的延时，单位为毫秒 90 | COUNT 事件数目 91 | 92 | ``` 93 | 94 | ## 基本用法 95 | - adb shell monkey [options] <event-count> 96 | - 例如:adb shell monkey -p com.android.settings 1000 97 | - []代表可选参数，<>代表一定要填的参数 98 | 99 | ### 两种运行方式 100 | 一种是PC端直接运行`adb shell monkey [options] <event-count> > d:\monkey.txt`,这样输入输出流在PC端，直接保存在PC端的文件中即可。 101 | 102 | 另一种是先用`adb shell`进入手机shell,然后调用`monkey [options] <event-count> > mnt/sdcard/monkey.txt`,这样输入输出流在手机端，应保存在手机的文件中。 103 | 104 | 另外linux系统中有标准输出流（默认为1）和标准错误流（默认为2），我们可以将这两种输出流分别重定向。例如： 105 | 106 | ``` 107 | monkey -p com.chuanwg.chuanwugong -v -v -v 1000 1>/mnt/sdcard/monkey.txt 2>/mnt/sdcard/error.txt 108 | ``` 109 | 在船务工的error.txt中输出 110 | 111 | ``` 112 | shell@hwH60:/mnt/sdcard $ cat error.txt 113 | Can't open carrierweekinfo-conf.xml 114 | ``` 115 | 在monkey.txt中输出 116 | ``` 117 | :Sending Touch (ACTION_MOVE): 0:(493.87717,1677.6576) 118 | :Sending Touch (ACTION_MOVE): 0:(512.0884,1702.0065) 119 | :Sending Touch (ACTION_MOVE): 0:(519.83636,1724.2574) 120 | Events injected: 1000 121 | :Sending rotation degree=0, persist=false 122 | :Dropped: keys=0 pointers=1 trackballs=0 flips=0 rotations=0 123 | ## Network stats: elapsed time=9539ms (0ms mobile, 0ms wifi, 9539ms not connected) 124 | // Monkey finished 125 | ``` 126 | 127 | 测试中发现，在船务工运行过程中接受到了短信，导致了crash。 128 | 129 | ### 基本参数 130 | - -p 指定包名，包名可以用`pm list packages`列出所有包名 131 | - -c 指定catalog，如果应用没有这个标签是起不来的，我们可以自定义这个catalog，也可以测试。 132 | - -s 指定伪随机数，指定随机数相同将生成相同的测试序列，可以重复 133 | - —-throttle 设定事件之间的延时，单位为毫秒 134 | - --randomize-throttle 和throttle配合使用 ，随机延时，0-throttle 135 | 136 | ``` 137 | —pct-touch 设定 touch 事件比例 类型0 138 | —pct-motion 设定手势事件比例，例如滑动事件 类型1 139 | —pct-trackball 设定跟踪球事件的比例，早期的手机有，现在应该都没了，可以设成0 类型3 140 | —pct-syskeys 设定系统按键事件的比例，如 Home、Back、音量+/-，startcall等 类型7 141 | —pct-nav 设定”基本”导航事件的比例，如上下左右，来自方向输入设备，好像是以前手机的上下左右，似乎没卵用，设成0 类型5 142 | —pct-majornav 设定”主要”导航事件比例，如中间按键，回退，菜单等可能引发图形界面中动作的事件，好像也是以前手机的事件 类型6 143 | —pct-appswitch 设定启动 Activity 的事件比例，作为最大覆盖包种全部Activity的一个方法。 类型8 144 | —pct-pinchzoom 设定缩放事件比例 类型2 145 | —pct-anyevent 设定其他事件比例 类型10 146 | -pct-rotation 旋转 类型4 147 | -pct -pinch 软键盘 类型9 148 | ``` 149 | - 以上设置每种事件的比率,所有事件加起来不能超过100 150 | 151 | 152 | ### 调试参数 153 | 控制测试过程 154 | 155 | - --dbg-no-events,进入Activity不进一步生成测试用例 156 | - --hprof 生成profile ，分析意义不大 157 | - —ignore-crashes 忽视应用 crash 报错，不指定该参数时，应用出现 crash，monkey 会自动停止发送事件，指定该参数后，mongkey 会在 crash 后也一直发送事件，直到所有事件发送完成 158 | —ignore-timeouts 忽视超时导致的错误，即ANR的错误 159 | 以上两个在平常测试过程中都要加上去。 160 | 161 | - —ignore-security-exceptions 忽视权限方面的错误 162 | - —monitor-native-crashes 监控由 C/C++ 代码引起的 crash 163 | - —ignore-native-crashes 忽视由 C/C++ 代码引起的 crash 164 | - —kill-process-after-error 当出现错误后杀掉应用的进程 165 | 166 | 验收测试，一旦出现错误马上终止。一般情况下都会忽略这些crash。 167 | 168 | ### 黑白名单 169 | 黑名单：不测试的应用 170 | 白名单：只测试的应用 和-p 效果一致 171 | 172 | 只能使用一个 173 | 174 | - [--pkg-blacklist-file PACKAGE_BLACKLIST_FILE] 175 | - [--pkg-whitelist-file PACKAGE_WHITELIST_FILE] 176 | 177 | 用txt一行存一个包名即可，然后用adb push <source> <dest>即可，一般用/data/loal/tmp/ 178 | 179 | ## 如何结束Monkey运行 180 | 181 | 执行 Monkey 的过程中如果想中途停止 Monkey 程序的运行，需要将 Monkey 的进程杀掉。 182 | windows 下使用findstr，linux/mac 下用grep 183 | 执行adb shell ps | grep monkey 第一个数字即进程号 184 | 获取到 monkey 进程的 pid 之后运行adb shell kill 进程ID 185 | 186 | ## ANR输出异常格式 187 | `System.err.println("//NOT RESPONDING: "+processName+"(pid "+ pid + ")" )` 188 | 189 | ``` 190 | ANR输出输出LOG： // NOT RESPONDING: com.android.quicksearchbox (pid 6333) ANR in com.android.quicksearchbox (com.android.quicksearchbox/.SearchActivity) CPU usage from 8381ms to 2276ms ago: procrank: adb shell procrank anr traces: 保存于/data/anr/traces.txt meminfo: adb shell dumpsys meminfo Bugreport adb bugreport 可选通过 --bugreport 参数控制 191 | ``` 192 | 193 | ## Crash输出格式 194 | ``` 195 | System.err.println("// CRASH: " + processName + " (pid " + pid + ")"); System.err.println("// Short Msg: " + shortMsg); System.err.println("// Long Msg: " + longMsg); System.err.println("// Build Label: " + Build.FINGERPRINT); System.err.println("// Build Changelist: " + Build.VERSION.INCREMENTAL); System.err.println("// Build Time: " + Build.TIME); System.err.println("// " + stackTrace.replace("\n", "\n// ")); 196 | ``` 197 | 198 | ``` 199 | CRASH输出输出LOG： // CRASH: com.android.quicksearchbox (pid 1699) // Short Msg: java.lang.NullPointerException // Long Msg: java.lang.NullPointerException: Attempt to invoke virtual method 'com.android.quicksearchbox.SourceResult com.android.quicksearchbox.Suggestions.getResult()' on a null object reference // Build Label: generic/vbox86p/vbox86p:5.0/LRX21M/buildbot12160004:userdebug/test-keys // Build Changelist: eng.buildbot.20141216.000103 // Build Time: 1418684697000 // java.lang.RuntimeException: Unable to stop activity {com.android.quicksearchbox/com.android.quicksearchbox.SearchActivity}: java.lang.NullPointerException: Attempt to invoke virtual method 'com.android.quicksearchbox.SourceResult com.android.quicksearchbox.Suggestions.getResult()' on a null object reference // at android.app.ActivityThread.performStopActivityInner(ActivityThread.java:3344) // at android.app.ActivityThread.handleStopActivity(ActivityThread.java:3390) // at android.app.ActivityThread.access$1100(ActivityThread.java:144) // at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1307) // at android.os.Handler.dispatchMessage(Handler.java:102) // at android.os.Looper.loop(Looper.java:135) 200 | ``` 201 | anr traces: 保存于/data/anr/traces.txt 202 | 203 | 204 | ## 测试船务工过程中的bug 205 | - Can't open carrierweekinfo-conf.xml 206 | - 转到注册界面 -> 收到短信 -> crash -------------------------------------------------------------------------------- /Test/test-note.md: -------------------------------------------------------------------------------- 1 | 2 | --------- 3 | 4 | ## Android测试 5 | - [AndroidViewClient](https://github.com/dtmilano/AndroidViewClient/wiki) 这个东西的dump工具挺好用的。 6 | - busybox 作为一个小型的linux系统可以提供比android得shell更加强大的功能,非常强大，建议安装,安装教程参考[百度经验](http://jingyan.baidu.com/article/6f2f55a1a000ceb5b83e6c74.html?st=3&net_type=1&bd_page_type=1&os=0&showimg=1&rst=2) 7 | 8 | 9 | 10 | ## 单元测试 11 | > 单元测试在软件项目中扮演着举足轻重的角色，是几种软件质量保证的方法中投入产出比最高的一种 12 | 13 | ### TDD 测试驱动开发 14 | 15 | ### BDD 行为驱动开发 16 | > wiki: BDD is a second-generation, outside–in, pull-based, multiple-stakeholder, multiple-scale, high-automation, agile methodology.It describes a cycle of interactions with well-defined outputs, resulting in the delivery of working, tested software that matters. 17 | 18 | - [Cucumber入门2 - 啥是BDD？](http://www.cnblogs.com/jarodzz/archive/2012/07/26/2610617.html) 19 | 20 | ### 断言 21 | > 断言用于检查程序在运行时是否满足期望 22 | 23 | ### 测试框架 24 | 25 | ### 测试报告 26 | 27 | ### 测试覆盖率 28 | 29 | ### mock 30 | 31 | ## 性能测试 32 | 33 | ## 安全测试 34 | 35 | ## 功能测试 36 | -------------------------------------------------------------------------------- /Tools/README.md: -------------------------------------------------------------------------------- 1 | 记录常用的开发工具 2 | ======= 3 | 4 | # 编辑器 5 | - atom 6 | - sublime 7 | - vim 8 | 9 | # 版本控制工具 10 | - git 11 | 12 | 13 | # 监控工具 14 | - pm2 - nodejs监控工具 15 | 16 | # 设计工具 17 | - sketch 界面设计 18 | - framer 原型设计 19 | 20 | # 代码构建工具 21 | - gulp js代码构建 -------------------------------------------------------------------------------- /Tools/atom-note.md: -------------------------------------------------------------------------------- 1 | title: "atom-note" 2 | tags: [atom] 3 | --- 4 | 5 | ##设置 6 | - 如果开启了 Soft Wrap 选项，Atom 会在一行中的文本超出屏幕显示范围时将其折为两行，如果禁用了这个选项，过长的行将简单地超出屏幕显示范围，你必须要横向移动滚动条才能看到剩余的部分。如果 Soft Wrap At Preferred Line Length 选项被开启，则总是会在 80 个字符处折行，你也可以设置一个自定义的长度来替换掉默认的 80 个字符。 7 | 8 | ##如何解决中文无法正确折行的问题 9 | 安装atomicchar插件，在设置中选中soft wrap以及soft wrap at Preferred line length 将上面的Preferred line length设置为110左右，留出minimap的宽度. 10 | 11 | ##插件 12 | -------------------------------------------------------------------------------- /Tools/docker-create-nodejs-mongodb-image.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Tools/docker-create-nodejs-mongodb-image.md -------------------------------------------------------------------------------- /Tools/docker-file-note.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Tools/docker-file-note.md -------------------------------------------------------------------------------- /Tools/docker-note.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Tools/docker-note.md -------------------------------------------------------------------------------- /Tools/framer-note.md: -------------------------------------------------------------------------------- 1 | title: "Framer笔记" 2 | tags: 3 | --- 4 | 5 | 6 | > framer js是一个原型设计工具，用编程的方式 7 | 8 | ## 资源 9 | - [官网](http://framerjs.com/) 10 | - [github](https://github.com/koenbok/Framer) 11 | - [framer中文网](https://framerjscn.github.io/) 12 | - []() 13 | ## 教程 14 | - [新手教程](https://medium.com/@designforhuman/new-to-framer-just-3-things-to-get-you-started-47397f27c71e) 15 | - [很不错的slides](http://nlevin.com/framer) 16 | --- 17 | 18 | > from 19 | 20 | ## 资源 21 | - [官网](http://www.relativewave.com/form/) 22 | - [pixate](http://www.pixate.com/) 23 | 24 | 25 | ## framer 注册 26 | > mojado@gnu.org 27 | 959267c9140c1bd8b7b68e3b64219e 28 | 29 | ## 注意 30 | - Framer 只能识别到 Sketch 中的图层组 31 | - opacity为0时为透明，为1时为完全不透明 32 | - default状态默认存在 33 | 34 | ## 技巧 35 | 以下内容提炼于 36 | 下面以example这个sketch文件为例,该sketch的结构如下: 37 | --Circles 38 | |-Circle1 39 | |-Circle2 40 | |-Circle3 41 | 42 | ### import 从sketch 中import 会生成以下代码 43 | ``` 44 | example = Framer.Importer.load "imported/Example" 45 | ``` 46 | 47 | ### 获取Circles对象: 48 | ``` 49 | example.Circles 50 | example.Circle1 51 | example.Circle2 52 | example.Circle3 53 | # 不需要像example.Circles.Circle1...这样获取对象 54 | ``` 55 | 然后可以对它进行一系列操作 56 | ``` 57 | example.Circles.scale = 1.2 //所有圆放大1.2倍 58 | example.Circle1.opacity = 0.5 //将圆1的透明度设为0.5 59 | example.Circle1.rotation = 90 //将圆1旋转90度 60 | ``` 61 | 62 | ### 动画 63 | 动画涉及到3方面的东西: Layer,Event,State 64 | 接下来的内容的材料来自于[该sketch](https://www.dropbox.com/s/4d95mgf76vvkmxb/framer101_inbox.sketch?dl=0) 65 | 66 | ### 层Layer 67 | 一般在层不要自己创建，除非需要特殊的效果的时候。 68 | 在sketch中进行UI方面的制作，交互交给framer来做。 69 | 导入sketch文件的时候framer会自动帮你创建层结构，和sketch中你定义的文件想对应 70 | 例如 71 | ``` 72 | inbox = Framer.Importer.load "imported/framer101_inbox" 73 | inbox.fab.scale = 1.2 74 | inbox.overlay.opacity = 0.5 75 | ``` 76 | 你可以用inbox对象获得所有的层,并对层的属性进行改变 77 | 78 | ### 事件Event 79 | Click, TouchStart, TouchEnd, Drag, Scroll等 80 | 81 | - 点击事件Click 82 | ``` 83 | inbox.fab.on Events.Click, -> 84 | inbox.fab.opacity = 0 // 点击后fab按钮消失 85 | ``` 86 | 87 | - 点按下去TouchStart 88 | ``` 89 | inbox.fab.on Events.TouchStart, -> 90 | inbox.fab.opacity = 0 // 按下去的时候fab按钮消失 91 | ``` 92 | 93 | - 点按放开TouchEnd 94 | ``` 95 | inbox.fab.on Events.TouchEnd, -> 96 | inbox.fab.opacity = 1 //放开的时候fab按钮显示 97 | ``` 98 | 99 | 以上两个连起来就是按下去的时候fab按钮消失，抬起来的时候又出现 100 | 101 | - 输出print 102 | ``` 103 | inbox.fab.on Events.Click, -> 104 | print "clicked" // 在右边页面显示控制台，打印clicked 105 | inbox.fab.opacity = 0 106 | ``` 107 | 108 | ### 状态State 109 | 如果初始的层的状态是stateA,我们添加stateB，可以把状态想象成A和B之间预置的动画。 110 | - 添加状态 111 | ``` 112 | inbox.fab.states.add 113 | fadeout: //状态B的名称fadeout,A的名称为default 114 | opacity: 0 115 | scale: 1.5 116 | ``` 117 | - 切换状态 118 | ``` 119 | inbox.fab.on Events.Click, -> 120 | inbox.fab.states.switch("fadeout") 121 | //或者用.next()也可以 122 | ``` 123 | 切换状态时产生动画 124 | - 改变动画效果 125 | ``` 126 | inbox.fab.on Events.Click, -> 127 | inbox.fab.states.animationOptions=curve:"spring(300,30,0)" //spring为弹跳效果，三个参数分别为张力(tension)，摩擦力(friction)和速度(velocity) 128 | inbox.fab.states.switch("fadeout") 129 | ``` 130 | 131 | ### 一个完整地实例 132 | ``` 133 | # This imports all the layers for "framer101_inbox" into framer101_inboxLayers 134 | inbox = Framer.Importer.load "imported/framer101_inbox" 135 | 136 | initFaceScale =0.5 137 | inbox.face1.scale = initFaceScale 138 | inbox.face2.scale = initFaceScale 139 | inbox.face3.scale = initFaceScale 140 | inbox.face4.scale = initFaceScale 141 | inbox.face5.scale = initFaceScale 142 | 143 | inbox.options.opacity = 0 144 | inbox.overlay.opacity = 0 145 | inbox.icon_write.opacity = 0 146 | inbox.icon_write.rotation = -90 147 | 148 | inbox.face1.states.add 149 | on: 150 | scale : 1 151 | inbox.face1.states.animationOptions=curve:"spring(500,30,0)" 152 | 153 | inbox.face2.states.add 154 | on: 155 | scale : 1 156 | inbox.face2.states.animationOptions=curve:"spring(500,30,0)" 157 | 158 | inbox.face3.states.add 159 | on: 160 | scale : 1 161 | inbox.face3.states.animationOptions=curve:"spring(500,30,0)" 162 | 163 | inbox.face4.states.add 164 | on: 165 | scale : 1 166 | inbox.face4.states.animationOptions=curve:"spring(500,30,0)" 167 | 168 | inbox.face5.states.add 169 | on: 170 | scale : 1 171 | inbox.face5.states.animationOptions=curve:"spring(500,30,0)" 172 | 173 | inbox.icon_write.states.add 174 | on: 175 | opacity : 1 176 | rotation: 0 177 | inbox.icon_write.states.animationOptions=curve:"spring(500,30,0)" 178 | 179 | inbox.icon_plus.states.add 180 | on: 181 | opacity : 0 182 | rotation: 90 183 | inbox.icon_plus.states.animationOptions=curve:"spring(500,30,0)" 184 | 185 | inbox.options.states.add 186 | on: 187 | opacity : 1 188 | inbox.options.states.animationOptions=curve:"spring(300,30,0)" 189 | 190 | inbox.overlay.states.add 191 | on: 192 | opacity : 1 193 | inbox.overlay.states.animationOptions=curve:"spring(300,30,0)" 194 | 195 | inbox.fab.on Events.Click, -> 196 | inbox.overlay.states.switch("on") 197 | inbox.options.states.switch("on") 198 | inbox.icon_write.states.switch("on") 199 | inbox.icon_plus.states.switch("on") 200 | inbox.face1.states.switch("on") 201 | inbox.face2.states.switch("on") 202 | inbox.face3.states.switch("on") 203 | inbox.face4.states.switch("on") 204 | inbox.face5.states.switch("on") 205 | 206 | inbox.overlay.on Events.Click, -> 207 | inbox.overlay.states.switch("default") 208 | inbox.options.states.switch("default") 209 | inbox.icon_write.states.switch("default") 210 | inbox.icon_plus.states.switch("default") 211 | inbox.face1.states.switch("default") 212 | inbox.face2.states.switch("default") 213 | inbox.face3.states.switch("default") 214 | inbox.face4.states.switch("default") 215 | inbox.face5.states.switch("default") 216 | 217 | 218 | 219 | ``` 220 | -------------------------------------------------------------------------------- /Tools/git-note.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Tools/git-note.md -------------------------------------------------------------------------------- /Tools/gulp-note.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Tools/gulp-note.md -------------------------------------------------------------------------------- /Tools/mac-latex-note.md: -------------------------------------------------------------------------------- 1 | title: "Mac中nju-thesis latex模板食用指南" 2 | tags: 3 | --- 4 | 5 | > Nju-thesis 是南京大学学位论文XeLaTeX模板，由本校优秀博士胡海星制作分享，该模板严格遵循南京大学学术委员会对学位论文的排版格式要求以及相应的国家标准规范，可帮助南京大学的同学们方便地排版出漂亮的学位论文。目前该模板支持排版博士、硕士和学士的学位论文。虽然该模板主要用于排版南京大学的学位论文，但亦可经过简单的设置或修改用于排版国内其他大学的学位论文。 6 | 7 | 8 | # 安装Texlive2015 9 | <http://tug.org/mactex/morepackages.html> 10 | 如果你用basic版本参考[这篇教程](http://www.readern.com/sublime-text-latex-chinese-under-mac.html)进行设置即可，注意里面的`subprocess.Popen([‘open’] + [pdffile])`用的单引号有问题,注意替换。不过basic版本中很多宏包不存在之后还是会有问题，需要自己安装宏包。所以初学者还是建议安装完全版。 11 | 12 | # 设置环境变量 13 | 在.zshrc中添加环境变量如下: 14 | ``` 15 | LATEX_HOME=/usr/local/texlive/2015/bin/x86_64-darwin 16 | PATH=$PATH:$LATEX_HOME 17 | ``` 18 | 19 | # 下载配置 Nju-thesis 20 | [github地址](https://github.com/Haixing-Hu/nju-thesis)，下载完成后需要一定的配置才能编译成功,在该文件目录下修改`sample.tex`文件，将第一行的代码进行如下修改: 21 | 22 | ``` 23 | \documentclass[macfonts,master]{njuthesis} 24 | ``` 25 | 添加macfonts代表使用mac下的字体，在其他系统下请参照手册fonts相关部分，master代表生成硕士论文,相应的也可以设置其他的如`phd/master/bachelor 选择博士/硕士/学士论文` 26 | 然后 27 | ``` 28 | $ make clean 29 | $ make sample 30 | ``` 31 | 即可成功编译该文档 32 | 33 | 34 | # 模板基本使用 35 | ## 注意点 36 | 特殊字符如$,_等需要转义 37 | 38 | ## 标题组织 39 | ``` 40 | \chapter{引言}\label{chapter_introduction} # 章 41 | \section{项目背景} # 节 42 | \subsection{IaaS云中心} # 子小节 43 | ``` 44 | 45 | # 代码 46 | 使用listings宏包，在文档前添加宏包,fontspec 选字体,Menlo是Mac下的一种字体格式，可以不添加这两个包 47 | 48 | ``` 49 | \usepackage{listings} 50 | 51 | \usepackage{fontspec} 52 | 53 | \newfontfamily\menlo{Menlo} 54 | ``` 55 | 56 | 如果要设置代码格式（要定制化可以google）,在`\begin{document}`前添加 57 | 58 | ``` 59 | \lstset{ % 60 | backgroundcolor=\color{white}, % choose the background color 61 | basicstyle=\small\menlo, % size of fonts used for the code 62 | columns=fullflexible, 63 | breaklines=true, % automatic line breaking only at whitespace 64 | captionpos=b, % sets the caption-position to bottom 65 | tabsize=4, 66 | escapeinside={\%*}{*)}, % if you want to add LaTeX within your code 67 | keywordstyle=\color{blue}, % keyword style 68 | frame=single, 69 | rulesepcolor=\color{red!20!green!20!blue!20}, 70 | % identifierstyle=\color{red}, 71 | language=JavaScript, 72 | numberstyle=\tiny\menlo 73 | } 74 | ``` 75 | 76 | 然后通过以下代码的格式进行调用 77 | 78 | ``` 79 | \begin{lstlisting}[language=JavaScript] 80 | var http = require('http'); 81 | 82 | http.createServer(function (req, res) { 83 | res.writeHead(200, {'Content-Type': 'text/plain'}); 84 | res.end('Hello World\n'); 85 | }).listen(1337, "127.0.0.1"); 86 | 87 | console.log('Server running at http://127.0.0.1:1337/'); 88 | \end{lstlisting} 89 | ``` 90 | 91 | 如果listings中没有你想要得代码格式（例如我想用Javascript）,你可以在listings的包中进行设置,以texlive2015为例,路径为`/usr/local/texlive/2015/texmf-dist/tex/latex/listings`中修改`listlang1.sty`文件，添加如下代码 92 | 93 | ``` 94 | \lst@definelanguage{JavaScript}% 95 | {morekeywords={typeof,new,true,false,catch,function,return,null,catch,switch,var,if,in,while,do,else,case,break},% 96 | morecomment=[l]//,% 97 | morecomment=[s]{/*}{*/},% 98 | morestring=[b]",% 99 | morestring=[b]',% 100 | }[keywords,comments,strings]% 101 | ``` 102 | 103 | ##参考文献 104 | 105 | ### 列表枚举 106 | ``` 107 | \begin{enumerate} 108 | \item 分类号 在左上角注明分类号，便于信息交换和处理。一般应注明《中国图书资 109 | 料分类法》的类号，同时应注明《国际十进分类法UDC》的类号； 110 | \item 密级 在右上角注明密级； 111 | \item “博士学位论文”用大号字标明； 112 | \item 题名和副题名 用大号字标明； 113 | \item 作者姓名； 114 | \item 学科专业名称； 115 | \item 研究方向； 116 | \item 导师姓名，职称； 117 | \item 日期包括论文提交日期和答辩日期； 118 | \item 学位授予单位。 119 | \end{enumerate} 120 | ``` 121 | 122 | ### 引用 123 | 例如 124 | ``` 125 | \cite{baike1} 126 | ``` 127 | 128 | ### 书籍 129 | ``` 130 | @book{book1, 131 | title={Google Android 开发入门与实战}, 132 | author={靳岩,姚尚朗}, 133 | year={2009}, 134 | publisher={人民邮电出版社}, 135 | address={北京}, 136 | } 137 | ``` 138 | ### 网页 139 | ``` 140 | @webpage{baike1, 141 | title = {{hybrid app}}, 142 | author = {{百度百科贡献者}}, 143 | publisher = {百度百科}, 144 | year = {2015}, 145 | url = {http://baike.baidu.com/link?url=D2o0b8jhdREb7o4cysYKmU-oH9BZVTWAp1LxI9-zK_CNly3A7RQgEPIF-ptnGpdjrgvUVz_HE1UOscnSsdNbFa}, 146 | modifydate = {2015/09/23}, 147 | citedate = {2015/10/21} 148 | } 149 | ``` 150 | 151 | ## 插图 152 | ``` 153 | \begin{figure}[htbp] 154 | \centering 155 | \includegraphics[width= 0.5\textwidth]{njuname.eps}\\ 156 | \caption{测试插图}\label{fig:test1} 157 | \end{figure} 158 | ``` 159 | 引用插图 160 | ``` 161 | 图\ref{fig:test1}所示为传统IaaS云中心网络结构的一部分。 162 | ``` 163 | 164 | ## 表格 165 | ``` 166 | \begin{table} 167 | \centering 168 | \begin{tabular}{cccp{38mm}} 169 | \toprule 170 | \textbf{文档域类型} & \textbf{Java类型} & \textbf{宽度(字节)} & \textbf{说明} \\ 171 | \midrule 172 | BOOLEAN & boolean & 1 & \\ 173 | CHAR & char & 2 & UTF-16字符 \\ 174 | BYTE & byte & 1 & 有符号8位整数 \\ 175 | SHORT & short & 2 & 有符号16位整数 \\ 176 | INT & int & 4 & 有符号32位整数 \\ 177 | LONG & long & 8 & 有符号64位整数 \\ 178 | STRING & String & 字符串长度 & 以UTF-8编码存储 \\ 179 | DATE & java.util.Date & 8 & 距离GMT时间1970年1月1日0点0分0秒的毫秒数 \\ 180 | BYTE\_ARRAY & byte$[]$ & 数组长度 & 用于存储二进制值 \\ 181 | BIG\_INTEGER & java.math.BigInteger & 和具体值有关 & 任意精度的长整数 \\ 182 | BIG\_DECIMAL & java.math.BigDecimal & 和具体值有关 & 任意精度的十进制实数 \\ 183 | \bottomrule 184 | \end{tabular} 185 | \caption{测试表格}\label{table:test2} 186 | \end{table} 187 | ``` 188 | 189 | ## 定义 190 | ``` 191 | \begin{definition}[节点之间的距离] 192 | 网络中两个节点$i$和$j$之间的距离(distance)$d_{ij}$定义为连接这两个节点 193 | 的最短路径上的边数。 194 | \end{definition} 195 | ``` 196 | 197 | ## 等式 198 | ``` 199 | \begin{equation}\label{eq:dimension} 200 | D = \max_{i,j} d_{ij} 201 | \end{equation} 202 | ``` 203 | 204 | # png/jpg -> eps 在线转换工具 205 | 论文中使用图片需要使用eps格式的图片，不过我们的图片格式一般是jpg/png格式的，转换格式有多重方式，推荐在线转换工具: 206 | <http://www.tlhiv.org/cgi-bin/rast2vec/index.cgi> 207 | 208 | 209 | 210 | # 其他latex模板 211 | [Ieee模板](http://www.ieee.org/conferences_events/conferences/publishing/templates.html) 212 | 213 | # 参考文献 214 | - [知乎](http://www.zhihu.com/question/30957600) 215 | - [LaTeX技巧32：LaTeX程序代码排版，Listings宏包](http://blog.sina.com.cn/s/blog_5e16f1770100fw83.html) 216 | - -------------------------------------------------------------------------------- /Tools/nginx-note.md: -------------------------------------------------------------------------------- 1 | Nginx 笔记 2 | ========= 3 | 4 | # Mac安装nginx 5 | 使用`brew`安装 6 | ``` 7 | $ brew install nginx 8 | ``` 9 | 10 | 然后运行 11 | ``` 12 | $ sudo nginx 13 | ``` 14 | 15 | 使用 16 | ``` 17 | http://localhost:8080 18 | ``` 19 | 进行测试 20 | 21 | 关闭命令 22 | ``` 23 | $ sudo nginx -s stop 24 | ``` 25 | 26 | 默认用brew安装的nginx配置文件在: 27 | ``` 28 | /usr/local/etc/nginx/nginx.conf 29 | ``` 30 | 31 | 修改端口为80 32 | ``` 33 | server { 34 | listen 8080; 35 | server_name localhost; 36 | 37 | #access_log logs/host.access.log main; 38 | 39 | location / { 40 | root html; 41 | index index.html index.htm; 42 | } 43 | ``` 44 | 将8080改成80 45 | 46 | 修改服务器文件位置,例如`/Users/xajler/www`; 47 | ``` 48 | server { 49 | listen 80; 50 | server_name localhost; 51 | 52 | #access_log logs/host.access.log main; 53 | 54 | location / { 55 | root /Users/xajler/www; 56 | index index.html index.htm; 57 | } 58 | ``` -------------------------------------------------------------------------------- /Tools/pm2-note.md: -------------------------------------------------------------------------------- 1 | PM2 笔记 2 | ======== 3 | 4 | 安装 5 | ``` 6 | $ npm install pm2 -g 7 | ``` 8 | 9 | 启动 10 | ``` 11 | $ pm2 start app.js 12 | ``` 13 | App会在后台运行，被监控，并一直存货 14 | 15 | 16 | 更新 17 | ``` 18 | # Install latest pm2 version 19 | $ npm install pm2 -g 20 | # Save process list, exit old PM2 & restore all processes 21 | $ pm2 update 22 | ``` -------------------------------------------------------------------------------- /Tools/sketch-note.md: -------------------------------------------------------------------------------- 1 | title: "sketch note" 2 | tags: 3 | --- 4 | 5 | ## sketch技巧 6 | - 毛玻璃效果（模糊）的background blur 上得图层不能填充任何颜色 7 | - 删除效果，首先取消复选框，然后点击+旁边的垃圾箱 8 | - 按住Shift＋上下左右箭头将以10px单位移动选中图层 9 | - 双击，或者选中后按enter(return)”键都可以改变形状 10 | 11 | 12 | ## 解决字体缺失问题 13 | - 一般是Google Fonts缺失,用下面的命令下载 14 | ``` 15 | curl https://raw.githubusercontent.com/qrpike/Web-Font-Load/master/install.sh | sh 16 | ``` 17 | 另外[github地址](https://github.com/google/fonts) 18 | > 如果是Mac的话，最好在System Preferences / General里启用“Ask to keep changes when closing documents”。不然的话一旦点击“Open Anyway...”，Sketch就会用Lucida Grande字体对缺失的字体进行替换，并在退出时保存，这样好好的.sketch文件就损坏了。 19 | 20 | 21 | ## 快捷键 22 | - o 椭圆 23 | - cmd + G : 创建分组 24 | - alt 显示智能引导线 25 | -------------------------------------------------------------------------------- /Tools/sublime-note.md: -------------------------------------------------------------------------------- 1 | title: "sublime-note" 2 | tags: 3 | --- 4 | 5 | #注册码: 6 | ``` 7 | —– BEGIN LICENSE —– 8 | Andrew Weber 9 | Single User License 10 | EA7E-855605 11 | 813A03DD 5E4AD9E6 6C0EEB94 BC99798F 12 | 942194A6 02396E98 E62C9979 4BB979FE 13 | 91424C9D A45400BF F6747D88 2FB88078 14 | 90F5CC94 1CDC92DC 8457107A F151657B 15 | 1D22E383 A997F016 42397640 33F41CFC 16 | E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D 17 | 5CDB7036 E56DE1C0 EFCC0840 650CD3A6 18 | B98FC99C 8FAC73EE D2B95564 DF450523 19 | —— END LICENSE —— 20 | ``` 21 | 22 | # 设置 23 | ``` 24 | { 25 | "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", 26 | "create_window_at_startup": false, 27 | "font_size": 15.0, 28 | "highlight_line": true, 29 | "highlight_modified_tabs": true, 30 | "ignored_packages": 31 | [ 32 | ], 33 | "open_files_in_new_window": false, 34 | "original_color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", 35 | "show_encoding": true, 36 | "translate_tabs_to_spaces": true 37 | } 38 | ``` 39 | 40 | #必装包 41 | - sublimeLinter 42 | - jsformat 43 | - Bracket Highlighter 44 | - emmet 45 | - jquery 46 | - nodejs 47 | - docblocker 自动生成代码注释 48 | - 不要安装markdown preivew会导致存储md文件时的卡顿 49 | - sass 50 | - SublimeBlockCursor - 让vim模式的光标变成块状 51 | - HTML-CSS-JS Prettify 52 | - GitGutter 53 | 54 | # 技巧 55 | 输入lorem,然后tab会将lorem替换成一段lorem开头的文字，在web设计的时候非常方便 56 | -------------------------------------------------------------------------------- /Tools/vgod-vim-cheat-sheet-full.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/Tools/vgod-vim-cheat-sheet-full.pdf -------------------------------------------------------------------------------- /Tools/vim-note.md: -------------------------------------------------------------------------------- 1 | 2 | # vim cheat sheet 3 | ![](images/vim-cs.png) 4 | 5 | # vim笔记 6 | - w 前单字 7 | - b 后单字 8 | - e 单字尾端 9 | - 0 行头 10 | - $ 行尾 11 | - { 上一段 12 | - } 下一段 13 | - % 对应括号 14 | - H 屏幕顶端 15 | - M 屏幕中间 16 | - L 屏幕底部 17 | - /xxx 搜寻xxx 18 | - n 下一个搜索结果 19 | - N 上一个搜索结果 20 | - a 在游标后附加 21 | - A 在行末附加 22 | - D 删除至行末 23 | - p 贴上 24 | - u 回复上一命令 25 | -------------------------------------------------------------------------------- /readme.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | TITLE="# TechStack" 4 | INTRO="每个人都有自己的技术栈，这是我的技术笔记和学习资料,边学边完善,大部分来自浏览的网站以及阅读的书,一些内容比较多的整理成markdown,部分内容已发表在我的[blog](http://www.mclspace.com)中。" 5 | INDEX="# 目录结构" 6 | 7 | rm README.md 8 | touch README.md 9 | echo ${TITLE} >> README.md 10 | echo ${INTRO} >> README.md 11 | echo ${INDEX} >> README.md 12 | echo "\`\`\`" >> README.md 13 | tree -N -L 3 >> README.md 14 | echo "\`\`\`" >> README.md 15 | exit 0 -------------------------------------------------------------------------------- /tmpfile: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdmclin2/TechStack/1cc0ca08c513d0c2902d04fef6575f56db9b4bb5/tmpfile --------------------------------------------------------------------------------