├── Front-end ├── JSON.md ├── Markdown.md ├── Node.md ├── advanced-git-commands.md ├── css.md ├── js.md ├── pageswitch.js │ ├── demo.html │ ├── images │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── example.png │ │ └── example2.png │ ├── jquery-1.11.2.min.js │ └── pageswitch.js ├── qq.md ├── readme.md ├── reg.md ├── ui.md └── vuejs.md ├── Interview ├── README.md └── course │ ├── ×狐网，JS面试题 │ ├── ×狐网，JS面试题 - 第 1 题.html │ ├── ×狐网，JS面试题 - 第 2 题.html │ └── ×狐网，JS面试题 - 第 3 题.html │ ├── 优雅的代码为面试加分 链式调用让面试官更青睐你的代码 │ └── demo │ │ └── index.html │ ├── 如何写一份专业的简历，秒杀面试官！ │ ├── 如何写一份专业的简历，秒杀面试官！（1）.pptx │ ├── 课程中所用资料 │ │ ├── 个人简历（案例）.doc │ │ ├── 优秀的个人简历.doc │ │ └── 大学生的最普通的简历.jpg │ └── 课程资料 │ │ ├── 个人简历（案例）.doc │ │ ├── 优秀的个人简历 (2).doc │ │ └── 优秀的个人简历.doc │ ├── 就这几招，大幅提高面试成功几率，作用域和作用链也就这么回事儿 │ ├── demo │ │ └── index.html │ └── scope.png │ ├── 帮你理解JavaScript严格模式及如何应对面试中的相关问题（上）demo │ ├── demo1.html │ ├── demo2.html │ ├── demo3.html │ ├── demo4.html │ ├── demo5.html │ └── index.html │ ├── 帮你理解JavaScript严格模式及如何应对面试中的相关问题（下）demo │ ├── demo10.html │ ├── demo11.html │ ├── demo12.html │ ├── demo13.html │ ├── demo14.html │ ├── demo6.html │ ├── demo7.html │ ├── demo8.html │ └── demo9.html │ ├── 彪悍的继承(上) │ └── demo │ │ ├── 01.html │ │ ├── 02.html │ │ ├── 03.html │ │ └── 04.html │ ├── 彪悍的继承(下) │ └── demo │ │ ├── 08.html │ │ ├── 09.html │ │ └── 10.html │ ├── 彪悍的继承(中) │ └── demo │ │ ├── 05.html │ │ ├── 06.html │ │ └── 07.html │ ├── 猪都笑了，面试中那些坑爹的面试题 │ └── demo │ │ ├── demo1.html │ │ ├── demo2.html │ │ ├── demo3.html │ │ ├── demo4.html │ │ ├── demo5.html │ │ ├── demo6.html │ │ ├── demo7.html │ │ └── demo8.html │ ├── 菜鸟老鸟都受益的面试题目 │ └── demo │ │ └── index.html │ ├── 谨防 “数组去重” 中的圈套 │ └── demo │ │ └── index.html │ ├── 面试中JS对象克隆，背后的秘密 │ └── demo │ │ └── index.html │ ├── 面试中，为何工程师常常栽在call,apply,bind这些函数上？(上) │ ├── demo │ │ └── index.html │ └── 面试中，为何工程师常常栽在call,apply,bind这些函数上？.pptx │ ├── 面试中，为何工程师常常栽在call,apply,bind这些函数上？(下) │ ├── demo │ │ └── index.html │ └── 面试中，为何工程师常常栽在call,apply,bind这些函数上？.pptx │ ├── 面试中，重载并不难，难的是不会，教你如何实现JS中的重载？ │ └── demo │ │ └── index.html │ ├── 面试题 - 面试中常问到的this，你真的懂吗？(上) │ ├── demo │ │ ├── 1.html │ │ └── 2.html │ └── 面试题 - 面试中常问到的this，你真的懂吗？(01).pptx │ └── 面试题 - 面试中常问到的this，你真的懂吗？(下) │ ├── demo │ ├── 1.html │ ├── 2.html │ ├── 3.html │ └── 4.html │ └── 面试题 - 面试中常问到的this，你真的懂吗？(02).pptx ├── PHP ├── CodeIgniter.md ├── ComputerEnglish.md ├── Development_process.md ├── Interview.md ├── PHP-Interview.md ├── Redis.md ├── htaccess.md ├── php.md ├── 开发流程.md └── 开发规范.md ├── README.md ├── csscommon.css └── images ├── 4419740-c4edd0e7b79b3735.png ├── 4419740-f75633394853f74b.png ├── alipay_origin.jpeg ├── avatar ├── 2511906352.jpg └── 489350924.jpg ├── code ├── box-sizing.jpg ├── css布局.jpg ├── git命令.jpg ├── ie.jpg ├── mac快捷键.png ├── vim.png ├── vue生命周期.png ├── w3c.jpg ├── 数据处理.jpg └── 面向对象程序设计.png ├── mean.png ├── network-show.png ├── pay ├── alipay_origin.jpeg ├── alipay_qrcode.jpeg ├── wechatpay_origin.jpeg └── wechatpay_qrcode.jpeg ├── picgo └── 202111041222706.png ├── wechatId.jpg └── wechatpay_origin.jpeg /Front-end/JSON.md: -------------------------------------------------------------------------------- 1 | #JSON 2 | 3 | * JSON不是一种“轻量级的数据交换格式”，一种很容易将服务器端数据结构转成Javascript对象的数据格式。 4 | 直接访问JSON对象的静态方法： 5 | 6 | 1. JSON.parse 7 | 8 | 2. JSON.stringify 9 | -------------------------------------------------------------------------------- /Front-end/Markdown.md: -------------------------------------------------------------------------------- 1 | 标题1 2 | ====== 3 | 4 | 标题2 5 | ----- 6 | 7 | ## 大标题 ## 8 | ### 小标题 ### 9 | 10 | # 一级标题 11 | ## 二级标题 12 | ### 三级标题 13 | #### 四级标题 14 | 15 | - 列表文本前使用 [减号+空格] 16 | + 列表文本前使用 [加号+空格] 17 | * 列表文本前使用 [星号+空格] 18 | 19 | * 无序列表 20 | * 子列表 21 | * 子列表 22 | * 无序列表 23 | * 无序列表 24 | 25 | 1. 有序列表1，**粗体** 26 | 2. 有序列表2,*斜体* 27 | 3. 有序列表3，`高亮` 28 | 29 | *斜体文本* _斜体文本_ 30 | **粗体文本** __粗体文本__ 31 | ***粗斜体文本*** ___粗斜体文本___ 32 | 33 | #### 有序列表和无序列表 34 | 35 | 1. 列出所有元素： 36 | - 无序列表元素 A 37 | 1. 元素 A 的有序子列表 38 | - 前面加四个空格 39 | 2. 列表里的多段换行： 40 | 前面必须加四个空格， 41 | 这样换行，整体的格式不会乱 42 | 3. 列表里引用： 43 | 44 | > 前面空一行 45 | > 仍然需要在 > 前面加四个空格 46 | 47 | 4. 列表里代码段： 48 | 49 | ``` 50 | 前面四个空格，之后按代码语法 ``` 书写 51 | ``` 52 | 53 | 或者直接空八个，引入代码块 54 | 55 | #### 引用 56 | 57 | > 例如这样引用 [大于号+空格] 58 | 59 | 要注意符号和文本的空格 60 | 61 | > 最外层引用 62 | > > 多一个 > 嵌套一层引用 63 | > > > 可以嵌套很多层 64 | 65 | #### 插入链接 66 | 67 | 内链 68 | [baidu](http://baidu.com) 69 | 70 | 外链 71 | I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3]. 72 | 73 | [1]: http://google.com/ "Google" 74 | [2]: http://search.yahoo.com/ "Yahoo Search" 75 | [3]: http://search.msn.com/ "MSN Search" 76 | 77 | #### 插入图片 78 | 79 | ![junhey](http://p0.qhimg.com/dmt/73_73_/t014cc06b3b8a313cd9.jpg?size=178x178&phash=-7000483754967890781) 80 | 81 | ####分割线 82 | 83 | *** 84 | 85 | ####下划线 86 | 87 | --- 88 | 89 | #### 代码：关于作者 90 | 行内代码： `var a=1` 91 | 92 | 代码区块： 93 | ```javascript 94 | var ihubo = { 95 | nickName : "junhey", 96 | site : "http://www.junhey.com" 97 | } 98 | ``` 99 | #### 表格 100 | 101 | | Tables | Are | Cool | 102 | | ------------- |:-------------:| -----:| 103 | | col 3 is | right-aligned | $1600 | 104 | | col 2 is | centered | $12 | 105 | | zebra stripes | are neat | $1 | 106 | 107 | #### 符号转义 108 | 109 | \_不想这里的文本变斜体\_ 110 | \*\*不想这里的文本被加粗\*\* 111 | 112 | #### 公式 113 | 114 | $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$ 115 | 116 | $$ 117 | x \href{why-equal.html}{=} y^2 + 1 118 | $$ 119 | 120 | 121 | 122 | #例如 123 | 124 | 写上你的标题 125 | ============ 126 | 127 | 开始书写正文吧 128 | 129 | 当然也可以用 *列表* 的形式： 130 | * 列表项目 131 | * 还是列表项目 132 | -------------------------------------------------------------------------------- /Front-end/Node.md: -------------------------------------------------------------------------------- 1 | > nodejs、mongodb、git、linux和一些其他常用的命令 2 | 3 | nodejs 4 | 5 | 淘宝npm镜像 6 | 7 | npm install -g cnpm --registry=https://registry.npm.taobao.org 8 | 全局安装后以后就可以 cnpm install 了，在国内npm不稳定的时候cpm极其管用！ 9 | npm 参数 10 | 11 | -g 全局 12 | --save 安装后并且把信息存入 package.json中的dependencies 13 | --save-dev 安装后并且把信息存入 package.json中的devDependencies 14 | package 15 | 16 | nvm 多版本node管理 17 | 18 | node-dev 实时重启node应用 19 | node-dev app.js 20 | mongodb 21 | 22 | 安装使用 23 | 24 | 1、下载mongodb到任意目录（以'D:\MongoDB'为例） 25 | 2、进入D:\MongoDB目录，新建data和logs文件夹作为数据和日志输出目录 26 | 3、命令窗口进入D:\MongoDB\bin目录，启动，命令如下： 27 | mongod --dbpath="D:\MongoDB\data" --logpath="D:\MongoDB\logs\mongodb.log" 28 | 4、启动成功后，默认的port一般为27017 29 | 注：mongodb每次需要手动输入命令启动，比较麻烦，可以写一个.bat或者.sh来快捷启动mongodb 30 | 备份/还原 31 | 32 | 1、备份，命令如下： 33 | mongodump -h 数据库地址 -d 数据库名 -o 输出路径 34 | 2、还原，命令如下： 35 | mongorestore -h 数据库地址 -d 数据库名 输入路径 36 | 3、eg. 数据库地址 localhost:27017 数据库名 blog 输出路径 "D:\MongoDB\export" 输入路径 "D:\MongoDB\import" 37 | 工具 38 | 39 | 一个GUI管理工具，Robomongo，类似于mysql的phpmyadmin。 40 | git 41 | 42 | 常用命令 43 | 44 | 配置 45 | git config --global user.name "hbmu" 46 | git config --global user.email "mhbseal@163.com" 47 | git config --global color.ui true 48 | git config --global alias.co checkout 命令行代理 49 | git config --global alias.ci commit 50 | git config --global alias.st status 51 | git config --global alias.br branch 52 | git config -l 配置详情 53 | 54 | 提交纪录 55 | git log 查看所有提交纪录 56 | git log 该文件的提交纪录 57 | git log --online 每条记录单行显示 58 | git log --graph 分支合并图 59 | git reflog 查看历史提交纪录（从本地仓库创建之后的所有纪录，包括本地删除过的commit） 60 | 61 | 文件操作 62 | git checkout -- 撤销工作区某个文件的修改 63 | git checkout . 撤销工作区的修改 64 | git add 提交工作区的某个文件到暂存区（新增和修改） 65 | git add . 提交工作区的所有文件（新增、修改）到暂存区 66 | git add -u 提交工作区的所有文件（修改、删除）到暂存区 67 | git add -A 提交工作区的所有文件（新增、修改、删除）到暂存区 68 | git rm 从工作区中删除某文件 69 | git rm --cached 从工作区中删除某文件，但不删除文件实体 70 | git commit 提交暂存区的某个文件到本地分支 71 | git commit 提交暂存区的所有文件到本地分支 72 | git commit -m 'comment' 同上，加注释 73 | git commit . 相当于git add -u + git commit 74 | git commit -a 同上 75 | git commit -am 'comment' 同上，加注释 76 | git commit --amend 修改commit的注释(vim) 77 | git commit --amend -m 'updatecomment' 修改commit的注释(直接) 78 | git reset -- 撤销出暂存区某个文件的add 79 | git reset 撤销出暂存区的add 80 | git reset --hard HEAD^ 撤销最后一次commit 81 | git reset --hard <$id> 恢复到某次commit的状态 82 | 83 | 查看diff 84 | git diff 查看（某个文件）工作区和本地分支的diff 85 | git diff --staged 查看（某个文件）暂存区和本地分支的diff 86 | git diff --cached 同上 87 | git diff <$id> <$id> 查看两次commit之间的diff 88 | 89 | 分支管理 90 | git branch 查看本地分支 91 | git branch -r 查看远程分支 92 | git branch -v 查看本地各个分支最后提交信息 93 | git branch -a 查看所有分支 94 | git branch --merged 查看已经被合并到当前分支的分支 95 | git branch --no-merged 查看尚未被合并到当前分支的分支 96 | git branch 基于当前分支来新建分支 97 | git checkout -b 同上，并且切换到新分支 98 | git branch 基于另一个起点（分支名称，提交名称或标签名称）来新建的分支 99 | git checkout -b 同上，并且切换到新分支 100 | git branch -f 同上上，强制 101 | git branch -d 删除某个分支 102 | git branch -D 强制同上的操作（未被合并的分支不提示合并直接删除） 103 | git branch -m 移动或重命名分支 104 | git branch -M 强制同上的操作 105 | git branch --set-upstream-to / 关联originbranch和localbranch 106 | 107 | 分支合并 108 | git merge 将分支合并到当前分支 109 | git merge --no-ff 将分支合并到当前分支，非Fast-Foward方式 110 | git merge 将远程分支合并到当前分支 111 | 112 | 缓存工作区的修改（不指定的情况下默认为最新的） 113 | git stash 保存当前到缓存 114 | git stash list 列出所有缓存 115 | git stash apply 恢复缓存的内容 116 | git stash pop 恢复缓存的内容，并删除缓存 117 | git stash drop 删除缓存 118 | git stash clear 删除所有缓存 119 | 120 | 远程分支 121 | git pull 拉取远程仓库所有分支，并且auto merged 122 | git pull --no-ff 拉取远程仓库所有分支并且auto merged，非Fast-Foward方式 123 | git pull 拉取远程仓库某个分支到本地 124 | git pull : 同上，自定义本地分支名称 125 | git fetch 拉取远程仓库所有分支，fetch和pull的区别就是不auto merged 126 | git push 推送当前分支到与远程matching的分支 127 | git push 将本地分支推送到与远程matching的分支，远程没有则创建与本地同名分支 128 | git push -u 同上，并且建立关联 129 | git push : 同上，自定义远程分支名称 130 | git push : 删除远程分支 131 | 132 | 远程仓库 133 | git clone 克隆仓库到本地 dir（可选） 134 | git remote 查看远程仓库名称 135 | git remote -v 查看远程仓库名称、地址、权限 136 | git remote show 查看远程仓库状态 137 | git remote add 添加远程仓库 138 | git remote set-url 修改远程仓库地址 139 | git remote rm 删除远程仓库 140 | linux 141 | 142 | 常用命令 143 | 144 | tar -zcvf 压缩后的文件(后缀名.tar.gz,.tar等) 被压缩文件 压缩 145 | tar -zxvf 被解压文件(后缀名.tar.gz,.tar等) 解压 146 | 147 | ln -s sourcefile targetfile 软连接，类似win下快捷方式 148 | other 149 | 150 | ssh/scp 151 | 152 | ssh user@host ssh远程 153 | scp localpath user@host:remotepath 上传 154 | scp user@host:remotepath localpath 下载 -------------------------------------------------------------------------------- /Front-end/advanced-git-commands.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhey/studyNotes/3d92c53c6a3316783c9a753eaaf2b6c783c1af2b/Front-end/advanced-git-commands.md -------------------------------------------------------------------------------- /Front-end/css.md: -------------------------------------------------------------------------------- 1 | ### 以下是常用的代码收集，没有任何技术含量，只是填坑的积累。转载请注明出处，谢谢。 2 | 3 | #### 1. css 2.x 4 | - 文字换行 5 | ```css 6 | /*强制不换行*/ 7 | white-space:nowrap; 8 | /*自动换行*/ 9 | word-wrap: break-word; 10 | word-break: normal; 11 | /*强制英文单词断行*/ 12 | word-break:break-all; 13 | ``` 14 | 15 | - 两端对齐 16 | ```css 17 | text-align:justify;text-justify:inter-ideogra 18 | ``` 19 | 20 | - [去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框](http://www.cnblogs.com/niao/archive/2012/09/07/2674511.html) 21 | ```css 22 | input,button,select,textarea{ outline:none;} 23 | textarea{ font-size:13px; resize:none;} 24 | ``` 25 | 26 | - [去掉chrome记住密码后自动填充表单的黄色背景](http://www.tuicool.com/articles/EZ777n ) 27 | 28 | - ie6: position:fixed 29 | ```css 30 | .fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0; } 31 | * html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} 32 | *html{background-image:url(about:blank);background-attachment:fixed;} 33 | ``` 34 | 35 | - clearfix 36 | ```css 37 | .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} 38 | .clearfix{display:inline-block;} 39 | html[xmlns] .clearfix{display:block;} 40 | * html .clearfix{height:1%;} 41 | 42 | .clearfix{*zoom: 1;} 43 | .clearfix:after{clear:both;display:table;content:"”;} 44 | 45 | .clearfix{overflow:hidden;_zoom:1;} 46 | ``` 47 | [http://www.daqianduan.com/3606.html](http://www.daqianduan.com/3606.html) 48 | 49 | - seperate-table 50 | ```css 51 | .tab{border-collapse:separate;border:1px solid #e0e0e0;} 52 | .tab th,.tab td{padding:3px;font-size:12px;background:#f5f9fb;border:1px solid;border-color:#fff #deedf6 #deedf6 #fff;} 53 | .tab th{background:#edf4f0;} 54 | .tab tr.even td{background:#fff;} 55 | ``` 56 | ```html 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
111222
111222
67 | ``` 68 | 69 | - min-height: 最小高度兼容代码 70 | ```css 71 | .minheight500{min-height:500px;height:auto !important;height:500px;overflow:visible;} 72 | ``` 73 | - 鼠标不允许点击 74 | ```css 75 | cursor:not-allowed; 76 | ``` 77 | - mac font: osx平台字体优化 78 | ```css 79 | font-family:"Hiragino Sans GB","Hiragino Sans GB W3",'微软雅黑'; 80 | ``` 81 | 82 | - 文字过多后显示省略号 83 | ```css 84 | .ellipsis,.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} 85 | ``` 86 | 87 | #### 2. css 3 88 | 89 | - title 换行 90 | ```html 91 | 92 | ``` 93 | 94 | - 关闭 x 符号 95 | ```html 96 | × 97 | ``` 98 | 99 | - 投影 100 | ```css 101 | .b{box-shadow:inset 1px -1px 0 #f1f1f1;text-shadow:1px 1px 0px #630;} 102 | filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');background:rgba(0,0,0,.6); 103 | 104 | background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#50000000',endColorstr='#50000000')\9; 105 | ``` 106 | - [search占位](http://www.qianduan.net/search-box-style-custom-webkit.html) 107 | ```css 108 | ::-webkit-input-placeholder {} 109 | ::-moz-input-placeholder {} 110 | input:focus::-webkit-input-placeholder { color: transparent; } 111 | -webkit-appearance:none; google边框去除 112 | input[type="search"]{-webkit-appearance:textfield;} // 去除chrome默认样式 113 | http://i.wanz.im/2011/02/04/remove_border_from_input_type_search/ 114 | http://blog.csdn.net/do_it__/article/details/6789699 115 | line-height: normal; /* for non-ie */ 116 | line-height: 22px\9; /* for ie */ 117 | ``` 118 | 119 | - [全部浏览器的兼容代码生成](http://www.colorzilla.com/gradient-editor/ ) 120 | [CSS 实现 textArea 的 placeholder 换行](http://segmentfault.com/a/1190000000362621) 121 | 122 | - 阻止默认事件 123 | ```css 124 | pointer-events:none; 125 | ``` 126 | 127 | - [去掉输入框聚焦时候的白色背景](http://ntesmailfetc.blog.163.com/blog/static/20628706120139184457401/) 128 | ```css 129 | -webkit-user-modify: read-write-plaintext-only; 130 | ``` 131 | 132 | - [input:focus时input不随软键盘升起而抬高的情况](http://www.cnblogs.com/hongru/archive/2013/02/06/2902938.html) 133 | ```css 134 | :focus{-webkit-tap-highlight-color:rgba(255, 255, 255, 0); 135 | -webkit-user-modify:read-write-plaintext-only;} 136 | ``` 137 | 138 | - 变灰 gray 139 | ```css 140 | html{ 141 | filter: grayscale(100%); 142 | -webkit-filter: grayscale(100%); 143 | -moz-filter: grayscale(100%); 144 | -ms-filter: grayscale(100%); 145 | -o-filter: grayscale(100%); 146 | filter: url("data:image/svg+xml;utf8,#grayscale"); 147 | filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 148 | -webkit-filter: grayscale(1); 149 | } 150 | ``` 151 | - firefox 阻止选中 152 | ```css 153 | -moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none; 154 | ``` 155 | - 箭头 156 | ```css 157 | display:block;border:solid transparent;line-height: 0;width:0; height:0;border-top:solid #0288ce;border-width:8px 6px 0 6px; 158 | 159 | border-style:solid; border-width:7px; border-color:transparent transparent transparent #ff7020; 160 | position:absolute;top: 0;left: 0;border-width:20px;border-style:solid;border-color:#d1ddde transparent transparent #d1ddde; 161 | ``` 162 | ie6 bug测试，把border-style设为dashed. 163 | 164 | - 取消textarea右下角可拖动手柄 165 | ```css 166 | resize:none 167 | ``` 168 | - 取消chrome form表单的聚焦边框 169 | ```css 170 | input,button,select,textarea{outline:none} 171 | textarea{resize:none} 172 | ``` 173 | - 取消a链接的黄色边框 174 | ```css 175 | a{-webkit-tap-highlight-color:rgba(0,0,0,0);} 176 | ``` 177 | - 取消input,button焦点或点击时蓝色边框 178 | ```css 179 | input{outline:none;} 180 | ``` 181 | - webkit 水平居中 182 | ```css 183 | display:-webkit-box;-webkit-box-pack:center; -webkit-box-align: center; 184 | position:absolute; top:50%;left:50%;transform:translate(-50%,-50%); 185 | ``` 186 | - 取消chrome 搜索x提示 187 | ```css 188 | input[type=search]::-webkit-search-decoration, 189 | input[type=search]::-webkit-search-cancel-button, 190 | input[type=search]::-webkit-search-results-button, 191 | input[type=search]::-webkit-search-results-decoration { 192 | display: none; 193 | } 194 | ``` 195 | - [chrome取消默认黄色背景](http://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css) 196 | ```css 197 | input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;} 198 | input:-webkit-autofill, 199 | textarea:-webkit-autofill, 200 | select:-webkit-autofill { 201 | -webkit-box-shadow: 0 0 0 1000px white inset; 202 | } 203 | autocomplete="off" 204 | ``` 205 | - 手机版本网页a标记虚线框问题 206 | ```css 207 | a:focus {outline:none;-moz-outline:none;} 208 | ``` 209 | - 焦点去除背景 210 | ```css 211 | -webkit-tap-highlight-color:rgba(255, 255, 255, 0); 212 | -webkit-tap-highlight-color:transparent; // i.e. Nexus5/Chrome and Kindle Fire HD 7'' 213 | ``` 214 | - placeholder占位符颜色自定义 215 | ```css 216 | input:-moz-placeholder {color: #369;} 217 | ::-webkit-input-placeholder {color:#369;} 218 | ``` 219 | 220 | - [IOS 禁用高亮](http://hi.barretlee.com/2014/03/31/tap-highlight-in-webview/) 221 | ```css 222 | -webkit-tap-highlight-color:rgba(255,0,0,0.5);-webkit-tap-highlight-color:transparent; /* For some Androids */ 223 | ``` 224 | 225 | - IOS iframe 滚动 [滚动回弹特效](http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html) 226 | ```css 227 | -webkit-overflow-scrolling:touch;overflow-y:scroll; 228 | ``` 229 | 230 | - [禁止选中文本](http://www.qianduan.net/introduce-user-select/) 231 | ```css 232 | -moz-user-select:none; 233 | -webkit-user-select:none; 234 | -ms-user-select:none; 235 | user-select:none; 236 | ``` 237 | - [模糊(毛玻璃)效果1](http://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A8%A1%E7%B3%8A%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/) 238 | - [模糊(毛玻璃)效果2](http://mao.li/css3-blur-filter-pratice/) 239 | - [模糊(毛玻璃)逼真效果](http://codepen.io/ariona/pen/geFIK) 240 | ```css 241 | .blur { 242 | -webkit-filter: blur(10px); /* Chrome, Opera */ 243 | -moz-filter: blur(10px); 244 | -ms-filter: blur(10px); 245 | filter: blur(10px); 246 | } 247 | ``` 248 | ```html 249 | 250 | 251 | ``` 252 | 253 | - 显示旋转加载图片，[下拉加载数据](https://github.com/chalecao/chale/blob/master/iscroll.js) 254 | ```css 255 | #pullDown .pullDownIcon{display:inline-block;vertical-align:middle;width:40px;height:40px;background:url(https://github.com/chalecao/chale/blob/master/pull-icon%402x.png) 0 0 no-repeat;-webkit-background-size:40px 80px;background-size:40px 80px;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:250ms} 256 | #pullDown .pullDownIcon{-webkit-transform:rotate(0deg) translateZ(0)} 257 | #pullDown .pullDownLabel{display:inline-block;vertical-align:middle;margin-left:5px;} 258 | #pullDown.flip .pullDownIcon{-webkit-transform:rotate(-180deg) translateZ(0)} 259 | #pullDown.loading .pullDownIcon{background-position:0 100%;-webkit-transform:rotate(0deg) translateZ(0);-webkit-transition-duration:0ms;-webkit-animation-name:loading;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear} 260 | @-webkit-keyframes loading{ 261 | from{-webkit-transform:rotate(0deg) translateZ(0)} 262 | to{-webkit-transform:rotate(360deg) translateZ(0)} 263 | } 264 | 265 | ``` 266 | 267 | ```html 268 |
269 | 正在载入中... 270 |
271 | ``` 272 | 273 | - 手机多终端适配 media query[web app iphone4 iphone5 iphone6 响应式布局 适配代码](http://club.zoomla.cn/PItem?id=12594) 274 | ```css 275 | @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ 276 | .class{} 277 | } 278 | @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */ 279 | .class{} 280 | } 281 | @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */ 282 | .class{} 283 | } 284 | @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */ 285 | .class{} 286 | } 287 | ``` 288 | 289 | - 屏蔽苹果浏览器对数字的识别[Meta标签中的format-detection属性及含义](http://blog.sina.com.cn/s/blog_51048da70101cgea.html) 290 | ```html 291 | 292 | ``` 293 | 294 | - 移除HTML5 input在type="number"时的上下小箭头 295 | - 在chrome下： 296 | ```css 297 | input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ 298 | -webkit-appearance: none !important; 299 | margin: 0; 300 | } 301 | ``` 302 | - Firefox下： 303 | ```css 304 | input[type="number"]{-moz-appearance:textfield;} 305 | ``` 306 | 307 | - 第二种方案： 308 | - 将type="number"改为type="tel"，同样是数字键盘，但是没有箭头。 309 | 310 | - [HTML5手机浏览直接给一个号码打电话，发短信](http://java-er.com/blog/html5-mobile-call-sms/) 311 | 312 | ```html 313 | 移动WEB页面JS一键拨打号码咨询功能 314 | 移动WEB页面JS一键发送短信咨询功能 315 | 316 | 317 | 318 | ``` 319 | 320 | - [CSS判断横屏竖屏](http://www.w3cways.com/1772.html) 321 | ```css 322 | @media screen and (orientation: portrait) { 323 | /*竖屏 css*/ 324 | } 325 | @media screen and (orientation: landscape) { 326 | /*横屏 css*/ 327 | } 328 | ``` 329 | 330 | ```javascript 331 | //判断手机横竖屏状态： 332 | window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { 333 | if (window.orientation === 180 || window.orientation === 0) { 334 | alert('竖屏状态！'); 335 | } 336 | if (window.orientation === 90 || window.orientation === -90 ){ 337 | alert('横屏状态！'); 338 | } 339 | }, false); 340 | //移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。 341 | ``` 342 | 343 | - rem 适配，内容太多，只贴网址 344 | 345 | - [rem自适应方案](https://github.com/imweb/mobile/issues/3) 346 | - [html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式](http://www.cnblogs.com/willian/p/3573353.html) 347 | - [移动端高清、多屏适配方案](http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041) 348 | - [通过rem布局+media-query:aspect-ratio实现移动端全机型适配覆盖](http://xiaoyuze88.github.io/blog/2015/05/12/%E9%80%9A%E8%BF%87rem%E5%B8%83%E5%B1%80+media-query%E7%9A%84aspect-ratio%E5%AE%9E%E7%8E%B0%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%85%A8%E6%9C%BA%E5%9E%8B%E9%80%82%E9%85%8D%E8%A6%86%E7%9B%96/) 349 | - [web app变革之rem](http://isux.tencent.com/web-app-rem.html) 350 | - [手机淘宝的flexible设计与实现](http://www.html-js.com/article/2402) 351 | - [移动端自适应方案](https://github.com/amfe/lib-flexible) 352 | - [【原创】移动端高清、多屏适配方案](http://www.html-js.com/article/3041) 353 | - [6个html5页面适配iphone6的技巧](http://qietuwang.baijia.baidu.com/article/73861) 354 | - [关于移动端 rem 布局的一些总结](http://segmentfault.com/a/1190000003690140) 355 | - [从网易与淘宝的font-size思考前端设计稿与工作流](http://www.cnblogs.com/lyzg/p/4877277.html) 356 | - [移动端自适应方案](http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/) 357 | - [MobileWeb 适配总结](http://www.w3ctech.com/topic/979) 358 | - [移动端web app自适应布局探索与总结](http://www.html-js.com/article/JavaScript-learning-notes%203234) 359 | - 公式 360 | 361 | ```javascript 362 | var PAGE_MAX_WIDTH = 1280, 363 | BASE_FONT_SIZE = 50; 364 | (function() { 365 | function n() { 366 | e.fontSize = Math.min(window.innerWidth / PAGE_MAX_WIDTH * BASE_FONT_SIZE, BASE_FONT_SIZE) + "px" 367 | } 368 | var e = document.documentElement.style; 369 | window.addEventListener("load", n), 370 | window.addEventListener("resize", n), 371 | n(); 372 | }()); 373 | ``` 374 | -------------------------------------------------------------------------------- /Front-end/js.md: -------------------------------------------------------------------------------- 1 | ### 以下是常用的代码收集，没有任何技术含量，只是填坑的积累。转载请注明出处，谢谢。 2 | 3 | #### 1. PC - js 4 | - 返回指定范围的随机数(m-n之间)的公式 5 | ```javascript 6 | Math.random()*(n-m)+m 7 | ``` 8 | 9 | - [return false](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) 10 | - [return false](http://www.75team.com/archives/201) 11 | ```javascript 12 | // event.preventDefault()会阻挡预设要发生的事件. 13 | // event.stopPropagation()会阻挡发生冒泡事件. 14 | // 而return false则是前面两者的事情他都会做： 15 | // 他会做event.preventDefault(); 16 | // 他会做event.stopPropagation(); 17 | // 停止callback function的执行并且立即return回来 18 | ``` 19 | 20 | - 防止被Iframe嵌套 21 | ```javascript 22 | if(top != self){ 23 | location.href = ”about:blank”; 24 | } 25 | ``` 26 | 27 | - 两种图片lazy加载的方式 28 | 第一个By JS中级交流群 成都-猎巫 第二个By 上海-zenki 29 | ```javascript 30 | // @description 准备为图片预加载使用的插件 31 | // 使用的图片容器css类名为lazy-load-wrap 32 | // 图片真实地址为data-lazy-src 33 | // 当lazy-load-wrap容器进入视口，则开始替换容器内所有需要延迟加载的图片路径，并更改容器的加载状态 34 | //第一种方法 35 | $.fn.compassLazyLoad=function(){ 36 | var _HEIGHT=window.innerHeight, 37 | _lazyLoadWrap=$('.lazy-load-wrap'); 38 | 39 | var methods={ 40 | setOffsetTop:function(){ 41 | $.each(_lazyLoadWrap,function(i,n){ 42 | $(n).attr({ 43 | 'top':n.offsetTop-_HEIGHT, 44 | 'status':'wait' 45 | }); 46 | }) 47 | }, 48 | isShow:function(){ 49 | var _scrollTop=$(window).scrollTop; 50 | //利用image容器判断是否进入视口，而非image本身 51 | $.each(_lazyLoadWrap,function(){ 52 | var _that=$(this); 53 | if (_that.attr('status')==='done') { 54 | return; 55 | }; 56 | if (_that.attr('top')<=_scrollTop) { 57 | _that.find('img[data-lazy-src]').each(function(i,n){ 58 | n.src=$(n).data('lazy-src'); 59 | }); 60 | _that.attr('status','done'); 61 | }; 62 | }) 63 | }, 64 | scroll:function(){ 65 | $(window).on('scroll',function(){ 66 | methods.isShow(); 67 | }); 68 | }, 69 | init:function(){ 70 | methods.setOffsetTop(); 71 | methods.isShow(); 72 | methods.scroll(); 73 | } 74 | }; 75 | methods.init(); 76 | 77 | } 78 | 79 | 80 | //第二种方法 81 | 82 | var exist=(function($){ 83 | var timer=null, 84 | temp=[].slice.call($('.container')); 85 | ret={}; 86 | 87 | for(var i=0,len=temp.length-1;i<=len;i++){ 88 | ret[i]=temp[i]; 89 | } 90 | var isExist=function(winTop,winEnd){ 91 | for(var i in ret){ 92 | console.log(ret); 93 | var item=ret[i], 94 | eleTop=item.offsetTop, 95 | eleEnd=eleTop+item.offsetHeight; 96 | 97 | if((eleTop>winTop&&eleTop<=winEnd)||(eleEnd>winTop&&eleEnd<=winEnd)){ 98 | $(item).css('background','none'); 99 | new Tab($(item).attr('id'),data).init; 100 | delete ret[i]; 101 | } 102 | } 103 | } 104 | return { 105 | timer:timer; 106 | isExist:isExist; 107 | }; 108 | })($); 109 | 110 | 111 | 112 | //第三种方法 113 | Zepto(function ($) { 114 | var swiper = new Swiper('.swiper-container', { 115 | pagination: '.swiper-pagination', 116 | paginationClickable: true, 117 | autoplay: 3000, 118 | loop: true, 119 | autoplayDisableOnInteraction: false 120 | }); 121 | (function lazyLoad() { 122 | var imgs = $(".lazyLoad"); 123 | var src = ''; 124 | $.each(imgs, function (index, item) { 125 | src = $(item).attr('data-src'); 126 | $(item).attr('src', src); 127 | }); 128 | })(); 129 | }); 130 | $(function () { 131 | var lazyLoadTimerId = null; 132 | /// 智能加载事件 133 | $(window).bind("scroll", function () { 134 | clearTimeout(lazyLoadTimerId); 135 | lazyLoadTimerId = setTimeout(function () { 136 | // 延迟加载所有图片 137 | var isHttp = (location.protocol === "http:"); 138 | $("#ym_images img").each(function () { 139 | var self = $(this); 140 | if (self.filter(":above-the-fold").length > 0) { 141 | var originUrl = self.attr("data-original"); 142 | self.attr("src", originUrl); 143 | } 144 | }); 145 | }, 500); 146 | }); 147 | }); 148 | 149 | ``` 150 | 151 | - 某年某月的1号为星期几 152 | ```javascript 153 | var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; 154 | weekday[new Date(2015, 9, 1).getDay()]; //2015年10月1号 155 | ``` 156 | 157 | #### 2. Mobile - js 158 | 159 | - [js 判断IOS, 安卓](http://caibaojian.com/browser-ios-or-android.html) 160 | ```javascript 161 | var u = navigator.userAgent, app = navigator.appVersion; 162 | var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 163 | var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 164 | alert('是否是Android：'+isAndroid); 165 | alert('是否是iOS：'+isiOS); 166 | ``` 167 | 168 | #### 3. [微信 weixin](http://loo2k.com/blog/detecting-wechat-client/) 169 | 170 | - UserAgent 判断微信客户端 171 | ```javascript 172 | // Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12F70 MicroMessenger/6.1.5 NetType/WIFI 173 | function isWechat() { 174 | var ua = navigator.userAgent.toLowerCase(); 175 | return /micromessenger/i.test(ua) || /windows phone/i.test(ua); 176 | } 177 | ``` 178 | 179 | - JS接口安全域名不填写，分享onMenuShareAppMessage直接会取默认值。 180 | ```javascript 181 | // 分享onMenuShareAppMessage直接会取默认值 182 | ``` 183 | 184 | - 关闭当前页面 185 | ```javascript 186 | WeixinJSBridge.call('closeWindow'); 187 | ``` 188 | 189 | - [支付接口方法调用必须在addevent里边调用](http://www.cnblogs.com/true_to_me/p/3565039.html) 190 | ```javascript 191 | document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){ 192 | that.initOrder(); 193 | }, false); 194 | ``` 195 | 196 | - 支付接口方法调用必须在 197 | ```javascript 198 | WeixinJSBridge.invoke('getBrandWCPayRequest', d, function(res){ 199 | if(res.err_msg == "get_brand_wcpay_request:ok"){ 200 | // alert("支付成功"); 201 | // union.release(d.orderId); 202 | resetUrl(); 203 | paySuccess('home', d.orderId); 204 | } else { 205 | cancelOrder(d.orderId); 206 | // alert(res.err_msg); 207 | } 208 | loading.hide(); 209 | }); 210 | ``` 211 | 212 | - 瀑布流无限加载实例 213 | ```javascript 214 | // be dependent on jquery & jquery.infinitescroll.min.js 215 | // insert this '
' to your page.html 216 | (function($){ 217 | $(function(){ 218 | var $container = $('.list-wrap-gd'); 219 | function layOutCallBack() { 220 | $container.imagesLoaded(function(){ 221 | $container.masonry({ 222 | itemSelector: '.item-bar', 223 | gutter: 10 224 | }); 225 | }); 226 | $container.imagesLoaded().progress( function() { 227 | $container.masonry('layout'); 228 | }); 229 | } 230 | 231 | layOutCallBack(); 232 | 233 | $container.infinitescroll({ 234 | navSelector : "#more", 235 | nextSelector : "#more a", 236 | itemSelector : ".item-bar", 237 | pixelsFromNavToBottom: 300, 238 | loading:{ 239 | img: "/images/masonry_loading.gif", 240 | msgText: ' ', 241 | finishedMsg: "已经到最后一页", 242 | finished: function(){ 243 | $("#more").remove(); 244 | $("#infscr-loading").hide(); 245 | } 246 | }, 247 | errorCallback:function(){ 248 | $(window).unbind('.infscr'); 249 | }, 250 | pathParse: function (path, nextPage) { 251 | var query = ""; 252 | var keyword=$("#search_keyword").val(); 253 | var cat_id=$("#cat_id").val(); 254 | var brand_id=$("#brand_id").val(); 255 | var country_id = $("#country_id").val(); 256 | query = query + "&namekeyword="+keyword; 257 | query = query +"&cat_id="+cat_id 258 | query = query + "&brand_id=" + brand_id; 259 | query = query + "&country_id=" + country_id; 260 | path = [path,query]; 261 | return path; 262 | } 263 | }, 264 | 265 | function(newElements) { 266 | var $newElems = $( newElements ).css({ opacity: 0 }); 267 | $newElems.imagesLoaded(function(){ 268 | $newElems.animate({ opacity: 1 }); 269 | $container.masonry( 'appended', $newElems, true ); 270 | layOutCallBack(); 271 | }); 272 | }); 273 | }); 274 | })(jQuery); 275 | ``` 276 | 277 | - [iOS，Safari浏览器，input等表单focus后fixed元素错位问题](https://www.snip2code.com/Snippet/176582/--iOS-Safari----input---focus-fixed-----) 278 | ```javascript 279 | if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) { 280 | $(document).on('focus', 'input, textarea', function() 281 | { 282 | $('header').css("position", 'absolute'); 283 | $('footer').css("position", 'absolute'); 284 | 285 | }); 286 | 287 | $(document).on('blur', 'input, textarea', function() 288 | { 289 | $('header').css("position", 'fixed'); 290 | $('footer').css("position", 'fixed'); 291 | 292 | }); 293 | } 294 | 295 | ``` 296 | 297 | - 得到地理位置 298 | ```javascript 299 | function getLocation(callback){ 300 | if(navigator.geolocation){ 301 | navigator.geolocation.getCurrentPosition( 302 | function(p){ 303 | callback(p.coords.latitude, p.coords.longitude); 304 | }, 305 | function(e){ 306 | var msg = e.code + "\n" + e.message; 307 | } 308 | ); 309 | } 310 | } 311 | ``` 312 | 313 | - [rem计算适配](http://isux.tencent.com/web-app-rem.html) 314 | ```javascript 315 | (function(doc, win){ 316 | var docEl = doc.documentElement, 317 | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 318 | recalc = function(){ 319 | var clientWidth = docEl.clientWidth; 320 | if(!clientWidth) return; 321 | docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 322 | }; 323 | 324 | if(!doc.addEventListener) return; 325 | win.addEventListener(resizeEvt, recalc, false); 326 | doc.addEventListener('DOMContentLoaded', recalc, false); 327 | })(document, window); 328 | ``` 329 | 330 | - [另外一种rem方案](http://www.html-js.com/article/3041) 331 | ```javascript 332 | var dpr, rem, scale; 333 | var docEl = document.documentElement; 334 | var fontEl = document.createElement('style'); 335 | var metaEl = document.querySelector('meta[name="viewport"]'); 336 | 337 | dpr = window.devicePixelRatio || 1; 338 | rem = docEl.clientWidth * 2 / 10; 339 | scale = 1 / dpr; 340 | 341 | 342 | // 设置viewport，进行缩放，达到高清效果 343 | metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); 344 | 345 | // 设置data-dpr属性，留作的css hack之用 346 | docEl.setAttribute('data-dpr', dpr); 347 | 348 | // 动态写入样式 349 | docEl.firstElementChild.appendChild(fontEl); 350 | fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; 351 | 352 | // 给js调用的，某一dpr下rem和px之间的转换函数 353 | window.rem2px = function(v) { 354 | v = parseFloat(v); 355 | return v * rem; 356 | }; 357 | window.px2rem = function(v) { 358 | v = parseFloat(v); 359 | return v / rem; 360 | }; 361 | 362 | window.dpr = dpr; 363 | window.rem = rem; 364 | ``` 365 | 366 | - 获取js所在路径 367 | ```js 368 | function getJsDir (src) { 369 | var script = null; 370 | 371 | if (src) { 372 | script = [].filter.call(document.scripts, function (v) { 373 | return v.src.indexOf(src) !== -1; 374 | })[0]; 375 | } else { 376 | script = document.scripts[document.scripts.length - 1]; 377 | } 378 | 379 | return script ? script.src.substr(0, script.src.lastIndexOf('/')) : script; 380 | } 381 | ``` 382 | 383 | - 从全局捕获错误 384 | ```js 385 | window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) { 386 | setTimeout(function () { 387 | var rst = { 388 | "错误信息：": errMsg, 389 | "出错文件：": scriptURI, 390 | "出错行号：": lineNumber, 391 | "出错列号：": columnNumber, 392 | "错误详情：": errorObj 393 | }; 394 | 395 | alert(JSON.stringify(rst, null, 10)); 396 | }); 397 | }; 398 | ``` 399 | 400 | - [如何通过 js 修改微信浏览器的title?](https://www.zhihu.com/question/26228251/answer/32405529) 401 | ```javascript 402 | var $body = $('body'); 403 | document.title = 'title'; // hack在微信等webview中无法修改document.title的情况 404 | var $iframe = $('').on('load', function(){ 405 | setTimeout(function(){ 406 | $iframe.off('load').remove() 407 | }, 0) 408 | }).appendTo($body) 409 | ``` 410 | 411 | #### 1. 常用方法 - js 412 | - 字符串长度截取 413 | ```js 414 | function cutstr(str, len) { 415 | var temp, 416 | icount = 0, 417 | patrn = /[^\x00-\xff]/， 418 | strre = ""; 419 | for (var i = 0; i < str.length; i++) { 420 | if (icount < len - 1) { 421 | temp = str.substr(i, 1); 422 | if (patrn.exec(temp) == null) { 423 | icount = icount + 1 424 | } else { 425 | icount = icount + 2 426 | } 427 | strre += temp 428 | } else { 429 | break; 430 | } 431 | } 432 | return strre + "..." 433 | } 434 | ``` 435 | 436 | - 替换全部 437 | ```js 438 | String.prototype.replaceAll = function(s1, s2) { 439 | return this.replace(new RegExp(s1, "gm"), s2) 440 | } 441 | ```` 442 | 443 | - 清除空格 444 | ```js 445 | String.prototype.trim = function() { 446 | var reExtraSpace = /^\s*(.*?)\s+$/; 447 | return this.replace(reExtraSpace, "$1") 448 | } 449 | ``` 450 | 451 | - 清除左空格/右空格 452 | ```js 453 | function ltrim(s){ return s.replace( /^(\s*|　*)/, ""); } 454 | function rtrim(s){ return s.replace( /(\s*|　*)$/, ""); } 455 | ``` 456 | - 判断是否以某个字符串开头 457 | ```js 458 | String.prototype.startWith = function (s) { 459 | return this.indexOf(s) == 0 460 | } 461 | ``` 462 | - 判断是否以某个字符串结束 463 | ```js 464 | String.prototype.endWith = function (s) { 465 | var d = this.length - s.length; 466 | return (d >= 0 && this.lastIndexOf(s) == d) 467 | } 468 | ``` 469 | - 转义html标签 470 | ```js 471 | function HtmlEncode(text) { 472 | return text.replace(/&/g, '&').replace(/\"/g, '"').replace(//g, '>') 473 | } 474 | ``` 475 | - 时间日期格式转换 476 | ```js 477 | Date.prototype.Format = function(formatStr) { 478 | var str = formatStr; 479 | var Week = ['日', '一', '二', '三', '四', '五', '六']; 480 | str = str.replace(/yyyy|YYYY/, this.getFullYear()); 481 | str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100)); 482 | str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1)); 483 | str = str.replace(/M/g, (this.getMonth() + 1)); 484 | str = str.replace(/w|W/g, Week[this.getDay()]); 485 | str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate()); 486 | str = str.replace(/d|D/g, this.getDate()); 487 | str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours()); 488 | str = str.replace(/h|H/g, this.getHours()); 489 | str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes()); 490 | str = str.replace(/m/g, this.getMinutes()); 491 | str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds()); 492 | str = str.replace(/s|S/g, this.getSeconds()); 493 | return str 494 | } 495 | ``` 496 | - 判断是否为数字类型 497 | ```js 498 | function isDigit(value) { 499 | var patrn = /^[0-9]*$/; 500 | if (patrn.exec(value) == null || value == "") { 501 | return false 502 | } else { 503 | return true 504 | } 505 | } 506 | ``` 507 | - 设置cookie值 508 | ```js 509 | function setCookie(name, value, Hours) { 510 | var d = new Date(); 511 | var offset = 8; 512 | var utc = d.getTime() + (d.getTimezoneOffset() * 60000); 513 | var nd = utc + (3600000 * offset); 514 | var exp = new Date(nd); 515 | exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000); 516 | document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;" 517 | } 518 | ``` 519 | - 获取cookie值 520 | ```js 521 | function getCookie(name) { 522 | var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); 523 | if (arr != null) return unescape(arr[2]); 524 | return null 525 | } 526 | ``` 527 | - 加载样式文件表 528 | ```js 529 | function LoadStyle(url) { 530 | try { 531 | document.createStyleSheet(url) 532 | } catch(e) { 533 | var cssLink = document.createElement('link'); 534 | cssLink.rel = 'stylesheet'; 535 | cssLink.type = 'text/css'; 536 | cssLink.href = url; 537 | var head = document.getElementsByTagName('head')[0]; 538 | head.appendChild(cssLink) 539 | } 540 | } 541 | ``` 542 | - 返回脚本内容 543 | ```js 544 | function evalscript(s) { 545 | if(s.indexOf(']*?>([^\x00]*?)<\/script>/ig; 547 | var arr = []; 548 | while(arr = p.exec(s)) { 549 | var p1 = /]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i; 550 | var arr1 = []; 551 | arr1 = p1.exec(arr[0]); 552 | if(arr1) { 553 | appendscript(arr1[1], '', arr1[2], arr1[3]); 554 | } else { 555 | p1 = /([^\x00]+?)<\/script>/i; 556 | arr1 = p1.exec(arr[0]); 557 | appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1); 558 | } 559 | } 560 | return s; 561 | } 562 | ``` 563 | - 清除脚本内容 564 | ```js 565 | function stripscript(s) { 566 | return s.replace(/.*?<\/script>/ig, ''); 567 | } 568 | ``` 569 | - 动态加载脚本文件 570 | ```js 571 | function appendscript(src, text, reload, charset) { 572 | var id = hash(src + text); 573 | if(!reload && in_array(id, evalscripts)) return; 574 | if(reload && $(id)) { 575 | $(id).parentNode.removeChild($(id)); 576 | } 577 | 578 | evalscripts.push(id); 579 | var scriptNode = document.createElement("script"); 580 | scriptNode.type = "text/javascript"; 581 | scriptNode.id = id; 582 | scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset); 583 | try { 584 | if(src) { 585 | scriptNode.src = src; 586 | scriptNode.onloadDone = false; 587 | scriptNode.onload = function () { 588 | scriptNode.onloadDone = true; 589 | JSLOADED[src] = 1; 590 | }; 591 | scriptNode.onreadystatechange = function () { 592 | if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) { 593 | scriptNode.onloadDone = true; 594 | JSLOADED[src] = 1; 595 | } 596 | }; 597 | } else if(text){ 598 | scriptNode.text = text; 599 | } 600 | document.getElementsByTagName('head')[0].appendChild(scriptNode); 601 | } catch(e) {} 602 | } 603 | ``` 604 | - 返回按ID检索的元素对象 605 | ```js 606 | function $(id) { 607 | return !id ? null : document.getElementById(id); 608 | } 609 | ``` 610 | - 检验URL链接是否有效 611 | ```js 612 | function getUrlState(URL){ 613 | var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); 614 | xmlhttp.Open("GET",URL, false); 615 | try{ 616 | xmlhttp.Send(); 617 | }catch(e){ 618 | }finally{ 619 | var result = xmlhttp.responseText; 620 | if(result){ 621 | if(xmlhttp.Status==200){ 622 | return(true); 623 | }else{ 624 | return(false); 625 | } 626 | }else{ 627 | return(false); 628 | } 629 | } 630 | } 631 | ``` 632 | - 获取当前路径 633 | ```js 634 | var currentPageUrl = ""; 635 | if (typeof this.href === "undefined") { 636 | currentPageUrl = document.location.toString().toLowerCase(); 637 | }else { 638 | currentPageUrl = this.href.toString().toLowerCase(); 639 | } 640 | ``` 641 | - 获取页面高度 642 | ```js 643 | function getPageHeight(){ 644 | var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat" 645 | ? a 646 | : g.documentElement; 647 | return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight); 648 | } 649 | ``` 650 | - 获取页面可视宽度 651 | ```js 652 | function getPageViewWidth(){ 653 | var d = document, a = d.compatMode == "BackCompat" ? 654 | d.body: d.documentElement; 655 | return a.clientWidth; 656 | } 657 | ``` 658 | - 获取页面宽度 659 | ```js 660 | function getPageWidth(){ 661 | var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"? 662 | a: g.documentElement; 663 | return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth); 664 | } 665 | ``` 666 | - 随机数时间戳 667 | ```js 668 | function uniqueId(){ 669 | var a=Math.random,b=parseInt; 670 | return Number(new Date()).toString()+b(10*a())+b(10*a())+b(10*a()); 671 | } 672 | ``` 673 | - 日期格式化函数 674 | ```js 675 | Date.prototype.format = function(format){ 676 | var o = { 677 | "M+" : this.getMonth()+1, //month 678 | "d+" : this.getDate(), //day 679 | "h+" : this.getHours(), //hour 680 | "m+" : this.getMinutes(), //minute 681 | "s+" : this.getSeconds(), //second 682 | "q+" : Math.floor((this.getMonth()+3)/3), //quarter 683 | "S" : this.getMilliseconds() //millisecond 684 | }; 685 | if(/(y+)/.test(format)) format=format.replace(RegExp.$1, 686 | (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 687 | for(var k in o){ 688 | if(new RegExp("("+ k +")").test(format)) 689 | format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] :("00"+ o[k]).substr((""+ o[k]).length)); 690 | } 691 | return format; 692 | } 693 | //调用 694 | //new Date().format("yyyy-MM-dd hh:mm:ss"); 695 | ``` 696 | - 返回顶部的通用方法 697 | ```js 698 | function backTop(btnId) { 699 | var btn = document.getElementById(btnId); 700 | var d = document.documentElement; 701 | var b = document.body; 702 | window.onscroll = set; 703 | btn.style.display = "none"; 704 | btn.onclick = function() { 705 | btn.style.display = "none"; 706 | window.onscroll = null; 707 | this.timer = setInterval(function() { 708 | d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); 709 | b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); 710 | if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set); 711 | }, 10); 712 | }; 713 | function set() { 714 | btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none" 715 | } 716 | }; 717 | backTop('goTop'); 718 | ``` 719 | - 获得URL中GET参数值 720 | ```js 721 | // 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"] 722 | function get_get(){ 723 | querystr = window.location.href.split("?") 724 | if(querystr[1]){ 725 | GETs = querystr[1].split("&"); 726 | GET = []; 727 | for(i=0;i= 0) { 787 | bn = source[0].charAt(len - i - 1); //取得某个位数前一位上的数字 788 | } 789 | sum = sum + Number(n); 790 | if (sum != 0) { 791 | str = dw[Number(n)].concat(str); //取得该数字对应的大写数字，并插入到str字符串的前面 792 | if (n == '0') sum = 0; 793 | } 794 | if (len - i - 1 >= 0) { //在数字范围内 795 | if (k1 != 3) { //加小单位 796 | if (bn != 0) { 797 | str = dw1[k1].concat(str); 798 | } 799 | k1++; 800 | } else { //不加小单位，加大单位 801 | k1 = 0; 802 | var temp = str.charAt(0); 803 | if (temp == "万" || temp == "亿") //若大单位前没有数字则舍去大单位 804 | str = str.substr(1, str.length - 1); 805 | str = dw2[k2].concat(str); 806 | sum = 0; 807 | } 808 | } 809 | if (k1 == 3){ //小单位到千则大单位进一 810 | k2++; 811 | } 812 | } 813 | //转换小数部分 814 | var strdig = ""; 815 | if (dig != "") { 816 | var n = dig.charAt(0); 817 | if (n != 0) { 818 | strdig += dw[Number(n)] + "角"; //加数字 819 | } 820 | var n = dig.charAt(1); 821 | if (n != 0) { 822 | strdig += dw[Number(n)] + "分"; //加数字 823 | } 824 | } 825 | str += "元" + strdig; 826 | } catch(e) { 827 | return "0元"; 828 | } 829 | return str; 830 | } 831 | //拆分整数与小数 832 | function splits(tranvalue) { 833 | var value = new Array('', ''); 834 | temp = tranvalue.split("."); 835 | for (var i = 0; i < temp.length; i++) { 836 | value = temp; 837 | } 838 | return value; 839 | } 840 | ``` 841 | -------------------------------------------------------------------------------- /Front-end/pageswitch.js/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 页面切换 6 | 148 | 149 | 150 |
151 |
152 |
153 |

switchPage

154 |

Create Beautiful Fullscreen Scrolling Websites

155 |
156 |
157 |
158 |
159 |

Example

160 |

HTML markup example to define 4 sections

161 | 162 |
163 | 164 |
165 |
166 |
167 |

Example

168 |

The plug-in configuration parameters

169 | 170 |
171 |
172 |
173 |
174 |

THE END

175 |

Everything will be okay in the end. If it's not okay, it's not the end.

176 |
177 |
178 |
179 | 180 | 181 | 190 | 191 | -------------------------------------------------------------------------------- /Front-end/pageswitch.js/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhey/studyNotes/3d92c53c6a3316783c9a753eaaf2b6c783c1af2b/Front-end/pageswitch.js/images/1.jpg -------------------------------------------------------------------------------- /Front-end/pageswitch.js/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhey/studyNotes/3d92c53c6a3316783c9a753eaaf2b6c783c1af2b/Front-end/pageswitch.js/images/2.jpg -------------------------------------------------------------------------------- /Front-end/pageswitch.js/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhey/studyNotes/3d92c53c6a3316783c9a753eaaf2b6c783c1af2b/Front-end/pageswitch.js/images/3.jpg -------------------------------------------------------------------------------- /Front-end/pageswitch.js/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhey/studyNotes/3d92c53c6a3316783c9a753eaaf2b6c783c1af2b/Front-end/pageswitch.js/images/4.jpg -------------------------------------------------------------------------------- /Front-end/pageswitch.js/images/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhey/studyNotes/3d92c53c6a3316783c9a753eaaf2b6c783c1af2b/Front-end/pageswitch.js/images/example.png -------------------------------------------------------------------------------- /Front-end/pageswitch.js/images/example2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhey/studyNotes/3d92c53c6a3316783c9a753eaaf2b6c783c1af2b/Front-end/pageswitch.js/images/example2.png -------------------------------------------------------------------------------- /Front-end/pageswitch.js/pageswitch.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | var defaults = { 3 | 'container' : '#container',//容器 4 | 'sections' : '.section',//子容器 5 | 'easing' : 'ease',//特效方式，ease-in,ease-out,linear 6 | 'duration' : 1000,//每次动画执行的时间 7 | 'pagination' : true,//是否显示分页 8 | 'loop' : false,//是否循环 9 | 'keyboard' : true,//是否支持键盘 10 | 'direction' : 'vertical',//滑动的方向 horizontal,vertical, 11 | 'onpageSwitch' : function(pagenum){} 12 | }; 13 | 14 | var win = $(window), 15 | container,sections; 16 | 17 | var opts = {}, 18 | canScroll = true; 19 | 20 | var iIndex = 0; 21 | 22 | var arrElement = []; 23 | 24 | var SP = $.fn.switchPage = function(options){ 25 | opts = $.extend({}, defaults , options||{}); 26 | 27 | container = $(opts.container), 28 | sections = container.find(opts.sections); 29 | 30 | sections.each(function(){ 31 | arrElement.push($(this)); 32 | }); 33 | 34 | return this.each(function(){ 35 | if(opts.direction == "horizontal"){ 36 | initLayout(); 37 | } 38 | 39 | if(opts.pagination){ 40 | initPagination(); 41 | } 42 | 43 | if(opts.keyboard){ 44 | keyDown(); 45 | } 46 | }); 47 | } 48 | 49 | //滚轮向上滑动事件 50 | SP.moveSectionUp = function(){ 51 | if(iIndex){ 52 | iIndex--; 53 | }else if(opts.loop){ 54 | iIndex = arrElement.length-1; 55 | } 56 | scrollPage(arrElement[iIndex]); 57 | }; 58 | 59 | //滚轮向下滑动事件 60 | SP.moveSectionDown = function(){ 61 | if(iIndex<(arrElement.length-1)){ 62 | iIndex++; 63 | }else if(opts.loop){ 64 | iIndex = 0; 65 | } 66 | scrollPage(arrElement[iIndex]); 67 | }; 68 | 69 | //私有方法 70 | //页面滚动事件 71 | function scrollPage(element){ 72 | var dest = element.position(); 73 | if(typeof dest === 'undefined'){ return; } 74 | initEffects(dest,element); 75 | } 76 | 77 | //重写鼠标滑动事件 78 | $(document).on("mousewheel DOMMouseScroll", MouseWheelHandler); 79 | function MouseWheelHandler(e) { 80 | e.preventDefault(); 81 | var value = e.originalEvent.wheelDelta || -e.originalEvent.detail; 82 | var delta = Math.max(-1, Math.min(1, value)); 83 | if(canScroll){ 84 | if (delta < 0) { 85 | SP.moveSectionDown(); 86 | }else { 87 | SP.moveSectionUp(); 88 | } 89 | } 90 | return false; 91 | } 92 | 93 | //横向布局初始化 94 | function initLayout(){ 95 | var length = sections.length, 96 | width = (length*100)+"%", 97 | cellWidth = (100/length).toFixed(2)+"%"; 98 | container.width(width).addClass("left"); 99 | sections.width(cellWidth).addClass("left"); 100 | } 101 | 102 | //初始化分页 103 | function initPagination(){ 104 | var length = sections.length; 105 | if(length){ 106 | 107 | } 108 | var pageHtml = '
  • '; 109 | for(var i=1;icurrentWidth/2 && iIndex <(arrElement.length-1)){ 182 | iIndex ++; 183 | } 184 | }else{ 185 | var offsetTop = element.offset().top; 186 | if(Math.abs(offsetTop)>currentHeight/2 && iIndex <(arrElement.length-1)){ 187 | iIndex ++; 188 | } 189 | } 190 | if(iIndex){ 191 | paginationHandler(); 192 | var cuerrentElement = arrElement[iIndex], 193 | dest = cuerrentElement.position(); 194 | initEffects(dest,cuerrentElement); 195 | } 196 | } 197 | 198 | //绑定键盘事件 199 | function keyDown(){ 200 | var keydownId; 201 | win.keydown(function(e){ 202 | clearTimeout(keydownId); 203 | keydownId = setTimeout(function(){ 204 | var keyCode = e.keyCode; 205 | if(keyCode == 37||keyCode == 38){ 206 | SP.moveSectionUp(); 207 | }else if(keyCode == 39||keyCode == 40){ 208 | SP.moveSectionDown(); 209 | } 210 | },150); 211 | }); 212 | } 213 | })(jQuery); -------------------------------------------------------------------------------- /Front-end/readme.md: -------------------------------------------------------------------------------- 1 | # 说明 2 | 学习 WEB 需要的内容整理，包括前端思想、框架、css、js（框架）、http协议等等 …… 3 | 欢迎 `fork` 后贡献 `PR` ，一起努力打造更好的 `web` 学习资料~ 4 | 5 | # HTTP 协议 6 | ## HTTP Response Code 7 | - [理解HTTP/304响应](http://www.cnblogs.com/ziyunfei/archive/2012/11/17/2772729.html) English version [Understanding HTTP/304 Responses](http://www.telerik.com/blogs/understanding-http-304-responses) 8 | 9 | ## HTTPS 10 | 什么是HTTPS？ [zh-wikipedia 超文本传输安全协议](http://zh.wikipedia.org/zh/%E8%B6%85%E6%96%87%E6%9C%AC%E4%BC%A0%E8%BE%93%E5%AE%89%E5%85%A8%E5%8D%8F%E8%AE%AE) （目前大陆已经被封需要翻墙才能阅读，可以阅读英文版[en-wikipedia HTTPS](http://en.wikipedia.org/wiki/HTTPS)） 11 | 12 | 微博[@BAIDU罗成](http://weibo.com/u/1822556675)的一篇文章 [中国互联网全站HTTPS的时代已经到来](http://blog.csdn.net/luocn99/article/details/39777707)对HTTPS的原理、遇到的问题、有哪些影响做出了介绍，比较容易理解。 13 | 14 | 百度在2015年3月份全站正式转入HTTPs，下面的几篇文章正是其运维团队的总结经验，很有阅读价值。 15 | - [全站 https 时代的号角 : 大型网站的 https 实践系列](http://op.baidu.com/2015/04/https-index/) 16 | - [大型网站的 HTTPS 实践（一）—— HTTPS 协议和原理](http://op.baidu.com/2015/04/https-s01a01/) 17 | - [大型网站的 HTTPS 实践（二）——HTTPS 对性能的影响](http://op.baidu.com/2015/04/https-s01a02/) 18 | - [大型网站的 HTTPS 实践（三）——基于协议和配置的优化](http://op.baidu.com/2015/04/https-s01a03/) 19 | - [大型网站的 HTTPS 实践（四）——协议层以外的实践](http://op.baidu.com/2015/04/https-s01a04/) 20 | 21 | #### 既然 HTTPS 解决了我们关注的隐私、安全问题，那么为什么这么少的网站使用呢？ 22 | - [Stackoverflow.com: the road to SSL](http://nickcraver.com/blog/2013/04/23/stackoverflow-com-the-road-to-ssl/) statckoverflow 的创始人解答，大型网站的转型需要众多依赖的组件、服务商都支持HTTPS，最关键的还是CA证书问题。 23 | - [知乎-如何看待百度全站搜索进入 HTTPS 时代？](http://www.zhihu.com/question/28379088) 24 | 25 | 26 | #### 业界的支持 27 | - [HTTPS as a ranking signal](http://www.googlewebmastercentral.blogspot.ch/2014/08/https-as-ranking-signal.html) 2014-08 google宣布全站HTTPS化，并且调整page rank 算法，搜索中支持搜索 HTTPS 的站点。 28 | - 2015-03 月份百度全站 HTTPS 化，并且在2015-05-25日宣布[百度开放收录https站点公告](http://zhanzhang.baidu.com/wiki/392)，从此百度也能搜索HTTPS的站点内容了。 29 | 30 | #### 如何申请 31 | - [https的免费申请流程](http://ljinkai.github.io/2015/06/30/https-2/) 32 | 33 | ## HTTP/2 34 | - [Home page for http/2](http://http2.github.io/) http/2 协议官网发布网站，内容更新均在此发布 35 | - [Http/2 wikipedia](http://en.wikipedia.org/wiki/HTTP/2) 维基百科 http/2 资料，很多参考连接 36 | - [http2 详解（中文）](https://www.gitbook.com/book/ye11ow/http2-explained)， English version follow this [http2 explained](http://daniel.haxx.se/http2/)，详细讲述http/1.1 的各种不足以及http/2所有的各种优化等，值得一看。github地址为[http2-explained-chinese](https://github.com/ye11ow/http2-explained-chinese) 37 | 38 | [@qgy18](https://twitter.com/qgy18)在他的小站中写了三篇对比 HTTP1 和 HTTP2 性能优化的文章，对比两种协议里面为了共同的浏览体验、性能所做出的不同的优化，值得看一看。同时，他的小站已经全面支持 HTTPS，赞一个！ 39 | - [HTTP/2 与 WEB 性能优化（一）](https://www.imququ.com/post/http2-and-wpo-1.html) 40 | - [HTTP/2 与 WEB 性能优化（二）](https://www.imququ.com/post/http2-and-wpo-2.html) 41 | - [HTTP/2 与 WEB 性能优化（三）](https://www.imququ.com/post/http2-and-wpo-3.html) 42 | 43 | # 前端学习 44 | - [前端学习路线图](https://github.com/unruledboy/WebFrontEndStack) 文章解释说明[Web前端开发大系概览 （前端开发技术栈）](http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html) 45 | - [前端技能汇总 Frontend Knowledge Structure --github](https://github.com/JacksonTian/fks) 由阿里前端两位杰出的工程师维护的关于前端的知识图谱 [@JacksonTian](https://github.com/JacksonTian) [@jayli（拔赤）](https://github.com/jayli/) 46 | - [Web前端知识体系大全](http://www.cnblogs.com/wangfupeng1988/p/4649709.html) cnblog 上的一哥们写的，挺全面的。 47 | - [Web 基本法则-现代 web 开发最佳实践](https://developers.google.com/web/fundamentals/) google 官方现代多设备 web 开发指南，特别是针对pc web、移动端的设计原则实践，值得每个web开发人员仔细阅读。 48 | - [前端代码规范及最佳实践](http://coderlmn.github.io/code-standards/) [Isobar公司](http://www.isobar.com/global/)的创意技术部（前端工程）开发web应用的规范，此连接为中文翻译版本，英文版本见 [github-isobar-idev](https://github.com/isobar-idev/code-standards) 49 | - [前端开发-好习惯、用法](http://coderlmn.github.io/Front-End-Development-Guidelines/) 一些不错的建议，很多在前面的文章中也有描述。 50 | - [比较全面的前端面试资料收集](https://github.com/hawx1993/Front-end-Interview-questions) 主要是原理层面，知识点的理解。 51 | - [Front-end-Web-Development-Interview-Question](https://github.com/paddingme/Front-end-Web-Development-Interview-Question) 包含笔试题、面试题以及简历的一些技巧。 52 | - [如何挑选适合的前端框架？](http://www.csdn.net/article/2015-05-11/2824656-fontend-Frameworks) Angular Js、backbone等各种各样的前端MVVM框架层出不穷，移动端友好、SEO 友好，面临这些需求，有哪些原则、挑战，如何筛选？去哪儿网前端架构师司徒正美分析了各主流行框架优劣点、适用场景，并针对不同规模的公司、项目给出了相应的前端技术选择方案。 53 | - [浏览器缓存知识小结及应用](http://www.cnblogs.com/lyzg/p/5125934.html) 关于浏览器缓存，讲解的很清楚、细致。 54 | 55 | 56 | ## 开发调试 57 | - Chrome开发者工具不完全指南 [基础篇](http://web.jobbole.com/82558/)、[进阶篇](http://web.jobbole.com/82562/)、[性能篇](http://web.jobbole.com/82576/)、[性能进阶篇](http://web.jobbole.com/82590/)、[移动篇](http://web.jobbole.com/82612/)、[插件篇](http://web.jobbole.com/82701/) 从头介绍如何使用 chrome 进行 web 开发中的调试工作，包括 source、console、性能、profile、移动端调试、常用插件等的介绍，适合想更全面的了解强大的chrome 工具的同学。 58 | - [Collection of links to assist you in web design and development](https://github.com/noahbuscher/Inspire) 前端设计、框架工具、打包工具、团队协作等一些资料工具使用。 59 | 60 | 61 | ## javascript 62 | - [MDN javascript资料](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) firefox js 资料库 63 | - [ECMAScript 6](https://zh.wikipedia.org/wiki/ECMAScript) 新一代的 javascript 标准，带来很多先进的理念和特性，查看阮一峰写的电子书《[ECMAScript 6入门](http://es6.ruanyifeng.com/)》进行学习，或者查看 mozilla 的系列文章《[ES6 In Depth Articles](https://hacks.mozilla.org/category/es6-in-depth/)》 中文翻译由CSDN极客头条[探秘ES6](http://www.csdn.net/tag/%E6%8E%A2%E7%A7%98es6/news)。 64 | - [JavaScript Patterns Collection](http://shichuan.github.io/javascript-patterns/) js 的开发规模式或者说推荐的写法。 65 | 66 | ## html5 67 | - [极客学院-h5学习计划系列视频](http://e.jikexueyuan.com/html5.html?hmsr=osc_word_html5_07.01) 68 | 69 | # 性能优化 70 | 71 | - [书籍：高性能网站建设](http://book.douban.com/subject/26411563/)，[高性能网站-Web开发者性能优化最佳实践](http://book.douban.com/subject/4719162/) 72 | - [书籍：High Performance Browser Networking](http://book.douban.com/subject/25856314/) 全书以性能优化为主线，从TCP、UDP 和TLS 协议讲起，解释了如何针对这几种协议和基础设施来优化应用。然后深入探讨了无线和移动网络的工作机制。最后，揭示了HTTP 协议的底层细节，同时详细介绍了HTTP 2.0、 XHR、SSE、WebSocket、WebRTC 和DataChannel 等现代浏览器新增的具有革命性的新能力。（-豆瓣简介） 73 | - [Web性能优化：What? Why? How?](http://www.cnblogs.com/dojo-lzz/p/4591446.html) 文章从`减少http请求`、`页面内优化`、`启用缓存`、`减少下载量`、`网络优化`等几个方面进行阐述如何让页面加载更快！ 74 | - [毫秒必争，前端网页性能最佳实践法则](http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html) 从网页内容、服务器端、图片、cookie、css、js等角度阐述优化的实践内容。 75 | - [Google - PageSpeed Insights规则](https://developers.google.com/speed/docs/insights/rules) 76 | - [Yahoo - Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html) ， [中文翻译](http://dudo.org/archives/2008051211216.html) 77 | - [Web前端优化最佳实践及工具集锦](http://www.csdn.net/article/2013-09-23/2817020-web-performance-optimization) 对上两条 google 和 yahoo 理论的实践文章，并提供一些调试优化的前端工具。 78 | - [网页性能管理详解-阮一峰](http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html) 详述页面加载的原理机制及优化场景。 79 | 80 | ## 工具利器 81 | - [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) Google的工具很是方便，极力推荐。 82 | - [阿里测](http://www.alibench.com/) 帮助分析排查页面的性能优化点 83 | - [爱前端-前端测试服务](http://itest.aliyun.com/index.htm) UI自动化测试、多浏览器检测（js\css脚本错误等）、页面坏死链检测等，方便在多浏览器的兼容性测试过程中快速发现定位问题，节约时间。或者这个也不错[前端测试服务](http://fts.aliyun.com/index.htm?spm=0.0.0.0.IDYSmX) 84 | - [阿里移动质量中心](http://mqc.aliyun.com/?spm=0.0.0.0.id9E8r) 安卓、ios、h5兼容性测试，可以很方便的适配多种安卓终端、ios的多个版本吧兼容性等，很是方便。 85 | - [JavaScript 堆内存分析新工具 OneHeap](http://www.html-js.com/article/3091)、[OneProfile](http://www.html-js.com/article/3083) 86 | - [web以及移动端安全测试工具-HiTest 安全测试服务](http://sts.aliyun.com/index.html?spm=0.0.0.0.boVYwN) 87 | 88 | # 前后端交互 89 | - [Rest - Representational state transfer](https://en.wikipedia.org/wiki/Representational_state_transfer) wikipedia 介绍，[中文在此](https://zh.wikipedia.org/wiki/REST) 90 | - [理解 RESTFul 架构](http://gold.xitu.io/entry/56c29d7079bc4400540773e4?utm_source=leopost&utm_medium=20160221&utm_campaign=weibo) 或者简单的阅读[阮一峰 - 理解RESTful架构](http://www.ruanyifeng.com/blog/2011/09/restful.html) 91 | - [撰写合格的REST API：设计准则](http://mp.weixin.qq.com/s?__biz=MzA3NDM0ODQwMw==&mid=208060670&idx=1&sn=ce67b8896985e8448137052b338093e0) 从RFC一致性、接口的安全性、丰富的接口文档、访问限制等方面进行阐述，通俗易懂，很是推荐阅读。 92 | - [Restful Api 安全设计参考](http://drops.wooyun.org/web/9737?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 93 | - [Web 研发模式演变 - 为什么要进行前后端分离？](https://github.com/lifesinger/blog/issues/184) [@玉伯](https://github.com/lifesinger) 前端模块化开发[sea.js](http://seajs.org/docs/#intro)的维护者，推荐阅读。 94 | - [基于NodeJS的前后端分离(Taobao UED)](http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/) 淘宝 @常胤 整理的对前后端交互的问题进行说明和提出解决方法，值得推荐阅读。 95 | 96 | 97 | ## 常用 CDN 服务 98 | - [百度静态资源公共库](http://cdn.code.baidu.com/) 99 | - [360 网站卫士常用前端公共库 CDN 服务](http://libs.useso.com/) 100 | - [Bootstrap 中文网开源项目免费 CDN 服务](http://www.bootcdn.cn/) 101 | - [CDN公共库-插件库](http://www.jq22.com/cdn/) 102 | - [jQuery CDN](http://code.jquery.com/) 103 | -------------------------------------------------------------------------------- /Front-end/reg.md: -------------------------------------------------------------------------------- 1 | ### 以下是常用的代码收集，没有任何技术含量，只是填坑的积累。转载请注明出处，谢谢。 2 | 3 | ###常用的js正则表达式 4 | 5 | ```js 6 | //正整数 7 | /^[0-9]*[1-9][0-9]*$/; 8 | //负整数 9 | /^-[0-9]*[1-9][0-9]*$/; 10 | //正浮点数 11 | /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/; 12 | //负浮点数 13 | /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; 14 | //浮点数 15 | /^(-?\d+)(\.\d+)?$/; 16 | //email地址 17 | /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; 18 | //url地址 19 | /^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/; 20 | 或：^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$ 21 | //年/月/日（年-月-日、年.月.日） 22 | /^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/; 23 | //匹配中文字符 24 | /[\u4e00-\u9fa5]/; 25 | //匹配帐号是否合法(字母开头，允许5-10字节，允许字母数字下划线) 26 | /^[a-zA-Z][a-zA-Z0-9_]{4,9}$/; 27 | //匹配空白行的正则表达式 28 | /\n\s*\r/; 29 | //匹配中国邮政编码 30 | /[1-9]\d{5}(?!\d)/; 31 | //匹配身份证 32 | /\d{15}|\d{18}/; 33 | //匹配国内电话号码 34 | /(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/; 35 | //匹配IP地址 36 | /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/; 37 | //匹配首尾空白字符的正则表达式 38 | /^\s*|\s*$/; 39 | //匹配HTML标记的正则表达式 40 | < (\S*?)[^>]*>.*?|< .*? />; 41 | //sql 语句 42 | ^(select|drop|delete|create|update|insert).*$ 43 | //提取信息中的网络链接 44 | (h|H)(r|R)(e|E)(f|F) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)? 45 | //提取信息中的邮件地址 46 | \w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 47 | //提取信息中的图片链接 48 | (s|S)(r|R)(c|C) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)? 49 | //提取信息中的 IP 地址 50 | (\d+)\.(\d+)\.(\d+)\.(\d+) 51 | //取信息中的中国手机号码 52 | (86)*0*13\d{9} 53 | //提取信息中的中国邮政编码 54 | [1-9]{1}(\d+){5} 55 | //提取信息中的浮点数（即小数） 56 | (-?\d*)\.?\d+ 57 | //提取信息中的任何数字 58 | (-?\d*)(\.\d+)? 59 | //电话区号 60 | ^0\d{2,3}$ 61 | //腾讯 QQ 号 62 | ^[1-9]*[1-9][0-9]*$ 63 | //帐号（字母开头，允许 5-16 字节，允许字母数字下划线） 64 | ^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 65 | //中文、英文、数字及下划线 66 | ^[\u4e00-\u9fa5_a-zA-Z0-9]+$ 67 | ``` -------------------------------------------------------------------------------- /Front-end/ui.md: -------------------------------------------------------------------------------- 1 | # UI交流群规 2 | [在线地址](http://t.cn/RL2NtqX) `http://t.cn/RL2NtqX` 3 | 4 | UI设计交流◑﹏◐1群 92588284 5 | 群介绍： 6 | 此群藏龙卧虎，国内一线资深设计师都藏匿于此。 7 | 此群高手甚多，全球顶尖理念传道大道尽汇于此。 8 | 群背景：此群是有丰富移动UI-APP设计经验的群主[静]建立的供大家学习交流的一个平台，我们的目的是资源能够共享，使思维能够碰撞，使传播能够长远，使分享更加的容易。 9 | 由于我群是以UI为交集使大伙聚在一起，所以要让我们共同的价值观更加的融会爆发，不建议探讨非UI之外的话题，尤其是代码或后台开发相关的。 10 | 11 | --- 12 | 13 | ###一. 如何提问: 14 | 1. 请组织好相关文字，用专业的语言描述错误发生的场景。比如：在此操作中，用了选择工具不能移动图层。等等。 15 | 2. 文字描述不清的bug，用截图示意，且要说明两种状态：现状或期望的状态。 16 | 17 | 参考： 18 | 19 | - [X-Y 问题](http://coolshell.cn/articles/10804.html) 20 | - [向别人求助时有哪些「潜」规则？](http://www.zhihu.com/question/21218381) 21 | - [如何在知乎提一个好问题？](http://www.zhihu.com/question/19555761) 22 | - [如何优雅地向前辈或者高手请教技术问题？](http://www.zhihu.com/question/25464141) 23 | - [提问的艺术-ZZ](http://www.awflasher.com/blog/archives/200) 24 | 25 | ###二. 禁问: 26 | 日常生活废话禁问，主观性的问题禁问，概念性的问题禁问。 27 | 28 | - 早上问早，晚上道晚安。聊天起于问早，止于呵呵。 29 | - 有没有人在？ 30 | - 谁能帮我解决一个问题？ 31 | - 有没有jQuery高手在等？ 32 | - 群里有人做过XX的东西吗？等等类似的问题。 33 | - 编辑器哪个工具好用？webstorm还是sublime还是vim？ 34 | - 什么是Javascript？什么是Ajax? 35 | 36 | 建议的问法是： 37 | - 1. 有问题直接问。比如：前端的岗位特点是什么？ 38 | - 2. 直接说场景：我在做xx端东西的时候，在window 7平台的IE7版本下遇到了左右不对齐问题，具体如图所示img，代码地址：http://www.jsbin.com/xxxx，在百度中找到的答案，试了之后还是有同样的问题。请有空的同学帮我看看是什么问题？ 39 | 如果你的问题暂时没人理，那表示有空的同学都未涉猎，赶紧找其它办法。 40 | 41 | ###三. 禁发: 42 | 43 | - 广告，招聘，找工作，找实习，找私活者，接私活，推广(如极客邀请加入)，明星八卦，禁群内签到，假红包，禁语音，禁打开视频，等与前端技术或职业探讨主题无关的内容或行为，禁发超过一屏的长代码，不太习惯自己退，违者踢。 44 | - 禁发无意义的大图片，建议发qq提供的默认的等于行距表情，约束这个目的在于： 45 | 1. 人脑对图片的接受速度明显快于文字，过多的无意义图片会分散讨论的主题。 46 | 2. 不方便回查，或聊天记录中寻找有价值的消息。 47 | 3. 另外这是一个信息爆炸时代，人脑的接收是有上限的，过多的垃圾信息会占用有限的带宽。 48 | - 禁止在群邮件中无意义回复，每次一个人回复是一次消息的广播，每个人都会收到，会产生信息垃圾。 49 | - 禁止在群邮件中回复招聘或其它通知邮件。因为你的每一次回复将会有2000多人同时收到，而这条回复对其它人是没有任何意义的。 50 | - 本群不欢迎纯hr的交流，公司技术人员内推招聘发群邮件，如有违反，直接踢，不另行引导或通知。 51 | - 禁发超过文本行距的大gif。 52 | 53 | ###四. 警告: 54 | 55 | - 字体：微软雅黑，10，禁加粗，禁加斜，禁加下划线，字体颜色不建议特别刺眼的颜色。 56 | - 禁止闲聊，或无意义回复。 57 | - 提问之前最好百度，google过，着重培养的是一种能力或方法，不是一个结果。 58 | - 不建议直接索要代码，可以追问技术实现的思路或方法。 59 | 60 | ###五. 资源教程: 61 | 62 | 1. 综合类 63 | 64 | - [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html) 65 | 66 | 2. 入门类 67 | 68 | - [前端入门教程](http://www.cnblogs.com/jikey/p/3613082.html) 69 | 70 | 3. 效果类 71 | 72 | - [弹出层](http://www.imooc.com/learn/58) 73 | - [焦点图轮播特效](http://www.imooc.com/learn/18) 74 | 75 | 4. 工具类 76 | 77 | - [css sprite 雪碧图制作](http://www.imooc.com/learn/93) 78 | - [版本控制入门 – 搬进 Github](http://www.imooc.com/learn/390) 79 | - [Grunt-beginner前端自动化工具](http://www.imooc.com/learn/30) 80 | 81 | 5. 慕课专题 82 | 83 | - [张鑫旭 - 慕课系列](http://www.imooc.com/space/teacher/id/197450) 84 | - [lyn - 慕课系列](http://www.imooc.com/space/teacher/id/104593) 85 | - [艾伦 - 慕课系列](http://www.imooc.com/space/teacher/id/290139) 86 | - [碧仔 - Hello，移动WEB](http://www.imooc.com/view/494) 87 | 88 | ###六. 作品展示: 89 | 90 | ###七. 设计门户网站 91 | 92 | 1. 集合网站 93 | - [设计师导航网站](http://hao.uisdc.com/) 94 | - [uehtml网络收藏](http://so.uehtml.com/) 95 | 96 | 2. 门户网站 97 | 98 | - [最流行的PHP 代码规范](http://www.zcool.com.cn/) 99 | - [最流行的PHP 代码规范](http://www.ui.cn/) 100 | 101 | 3. 英文设计网站 102 | 103 | - [【敏捷开发】Android团队开发规范](http://www.cnblogs.com/lcw/p/3619181.html) 104 | - [Android 开发规范与应用](http://www.jianshu.com/p/4390f4fe19b3) 105 | 106 | 4. 其它网站 107 | 108 | - [涂鸦网站](http://www.poocg.com/) 109 | 110 | ###八. 素材网站 111 | 112 | ####1. ICON搜索 113 | 114 | - [Facebook Projects](https://code.facebook.com/projects/web/) 115 | - [百度web前端研发部](http://fex.baidu.com/) 116 | - [百度EFE](http://efe.baidu.com/) 117 | - [百度github](https://github.com/fex-team/) 118 | - [alloyteam](http://www.alloyteam.com/) 119 | - [alloyteam-github](http://alloyteam.github.io/) 120 | - [alloyteam-AlloyGameEngine](https://github.com/AlloyTeam/AlloyGameEngine) 121 | - [AlloyDesigner](http://alloyteam.github.io/AlloyDesigner/) 即时修改，即时保存，设计稿较正，其它开发辅助工具 122 | - [H5交互页编辑器AEditor介绍](http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/) H5动画交互页开发的工具介绍 123 | - [AEditor](http://aeditor.alloyteam.com/) H5动画交互页开发的工具 124 | - [maka](http://forum.maka.im/wordpress/) 125 | - [值得订阅的weekly](https://github.com/fenbility/weekly-feed) 126 | - [腾讯html5](http://cube.qq.com/) 127 | - [奇舞团开源项目](http://75team.github.io/) 128 | - [Qunar UED](http://ued.qunar.com/) 129 | 130 | ####2. PSD其它搜索 131 | 132 | 1. 常用 133 | 134 | - [ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性](http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome/) 135 | - [模拟键盘](http://mottie.github.io/Keyboard/) 136 | - [拼音](https://github.com/hotoo/pinyin) 137 | - [中国个人身份证号验证](https://github.com/mc-zone/IDValidator) 138 | 139 | 2. 算法 140 | 141 | - [数据结构与算法 JavaScript 描述. 章节练习](https://github.com/Ralph-Wang/algorithm.in.js) 142 | - [常见排序算法（JS版）](https://github.com/twobin/twobinSort) 143 | - [经典排序](https://github.com/luofei2011/jsAgm/blob/master/js/sort.js) 144 | - [常见排序算法-js版本](https://github.com/hechangmin/jssort) 145 | - [JavaScript 算法与数据结构 精华集](https://github.com/lightningtgc/JavaScript-Algorithms) 146 | - [面试常考算法题精讲](http://www.nowcoder.com/live/courses) 147 | - []() 148 | 149 | 3. 移动端 150 | 151 | - [fastclick](https://github.com/ftlabs/fastclick) 152 | - [no-click-delay](https://github.com/mmastrac/jquery-noclickdelay) 153 | 154 | 4. JSON 155 | 156 | - [模拟生成JSON数据](http://beta.json-generator.com/) 157 | - [返回跨域JSONAPI](http://jsonp.afeld.me/) 158 | 159 | ####3. Html5 160 | - [HTML5 有哪些让你惊艳的 demo？](http://www.zhihu.com/question/24398907) 161 | 162 | ####4. CSS 163 | - [browserhacks](http://browserhacks.com/) 164 | - []() 165 | 166 | ####5. jQuery 167 | 168 | 1. 焦点图 169 | 170 | - [myfocus](https://github.com/koen301/myfocus) 171 | - [myfocus-官方演示站](http://www.chhua.com/myfocus/) 172 | - [SuperSlidev2.1 -- 大话主席](http://www.superslide2.com/) 173 | - [soChange](http://www.bujichong.com/sojs/soChange/index.html) 174 | 175 | ####6. Ext, EasyUI, J-UI 及其它各种UI方案 176 | 177 | 1. Ext 178 | 179 | - [extjs](https://www.sencha.com/products/extjs/) 180 | - [ext4英文api](http://docs.sencha.com/extjs/4.0.7/) 181 | - [ext4中文api](http://extjs-doc-cn.github.io/ext4api/) 182 | - []() 183 | 184 | 2. EasyUI 185 | 186 | - [jquery easyui 未压缩源代码](http://jquery-easyui.googlecode.com/svn/trunk/src/) 187 | 188 | 3. J-UI 189 | 190 | - [J-UI](http://www.j-ui.com) 191 | 192 | 4. Other 193 | 194 | - [MUI-最接近原生APP体验的高性能前端框架](http://dcloudio.github.io/mui/) 195 | - [Amaze UI | 中国首个开源 HTML5 跨屏前端框架](http://amazeui.org/) 196 | - [淘宝 HTML5 前端框架](http://m.sui.taobao.org/) 197 | - [KISSY - 阿里前端JavaScript库](http://docs.kissyui.com/) 198 | - [网易Nej - Nice Easy Javascript](http://nej.netease.com/) 199 | - [Kendo UI MVVM Demo](http://demos.telerik.com/kendo-ui/mvvm/index) 200 | - [Bootstrap](http://www.bootcss.com/) 201 | - [Smart UI](http://smartui.chinamzz.com/) 202 | - [雅虎UI - CSS UI](http://developer.yahoo.com/yui/grids/) 203 | 204 | ####7. 页面 社会化 分享功能 205 | 206 | - [百度分享](http://share.baidu.com/) pc端 207 | - [JiaThis](http://jiathis.com/) pc端 208 | - [社会化分享组件](http://developer.baidu.com/soc/share) 移动端 209 | - [ShareSDK 轻松实现社会化功能](http://www.mob.com/#/index) 移动端 210 | - [友盟分享](http://dev.umeng.com/social/android/quick-integration) 移动端 211 | 212 | ####8. 富文本编辑器 213 | 214 | - [百度 ueditor](http://ueditor.baidu.com/website/) 215 | - [经典的ckeditor](http://ckeditor.com/) 216 | - [经典的kindeditor](http://kindeditor.net/) 217 | - [wysiwyg](http://www.bootcss.com/p/bootstrap-wysiwyg/) 218 | - [一个有情怀的编辑器。Bach's Editor](http://integ.github.io/BachEditor/) 219 | - [tower用的编辑器](https://github.com/mycolorway/simditor) 220 | - [summernote 编辑器](https://github.com/summernote/summernote) 221 | - [html5编辑器](http://neilj.github.io/Squire/) 222 | - [XEditor](http://lab.hustlzp.com/XEditor/) 223 | - [wangEditor](https://github.com/wangfupeng1988/wangEditor ) 224 | 225 | ####9. 日历 226 | 227 | 1. PC 228 | 229 | - [经典my97](http://www.my97.net/dp/demo/index.htm) 230 | - [强大的独立日期选择器](http://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html) 231 | - [fullcalendar](http://arshaw.com/fullcalendar/) 232 | - [fullcalendar日历控件知识点集合 ](http://blog.csdn.net/francislaw/article/details/7740630) 233 | - [中文api](http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html) 234 | - [农历日历](https://github.com/zzyss86/LunarCalendar) 235 | - [超酷的仿百度带节日日历老黄历控件](http://www.sucaisj.com/jiaoben/date/201509/16856.html) 236 | - [日期格式化](http://momentjs.com/) 237 | - [大牛日历控件](https://github.com/Johnqing/QPAYCalendar/) 238 | - [我群某管理作品](https://github.com/Iamlars/dateMarker) 239 | - [input按位替换-官网](http://digitalbush.com/projects/masked-input-plugin/) 240 | - [input按位替换-github](https://github.com/digitalBush/jquery.maskedinput/tree/1.2.2) 241 | - [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker) 242 | - [国外30个插件集合](http://www.vandelaydesign.com/30-best-free-jquery-plugins/) 243 | - [JavaScript datepicker](http://dbushell.com/2012/10/09/pikaday-javascript-datepicker/) 244 | - [Datepair.js](http://jonthornton.github.io/Datepair.js/) 245 | - [一个风格多样的日历](https://github.com/glad/glDatePicker) 246 | - [弹出层式的全日历](http://amsul.ca/pickadate.js/date/) 247 | - [jquery双日历](http://www.daterangepicker.com/) 248 | 249 | 2. 移动 250 | 251 | - [大气实用jQuery手机移动端日历日期选择插件](http://www.frankdemo.cn/index.php?c=content&a=show&id=115) 252 | - [jQuery Mobile 移动开发中的日期插件Mobiscroll ](https://mobiscroll.com/) 253 | 254 | 255 | 3. Date library 256 | 257 | - [Datejs](https://github.com/datejs/Datejs) 258 | - [sugarjs](http://sugarjs.com/api/Date) 259 | 260 | ####10. 综合效果搜索平台 261 | 262 | - [效果网](http://www.jq22.com) 263 | - [17素材](http://www.17sucai.com/) 264 | - [常用的JavaScript代码片段](http://microjs.com/) 265 | 266 | ####11. 前端工程化 267 | 268 | 1. 概述 269 | 270 | - [前端工具大全](http://www.awesomes.cn/) 271 | - [什么是前端工程化](https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0#) 272 | 273 | 2. Gulp 274 | 275 | - [Gulp官网](http://gulpjs.com/) 276 | - [Gulp中文网](http://www.gulpjs.com.cn/) 277 | - [gulp资料收集](https://github.com/Platform-CUF/use-gulp) 278 | - [Gulp：任务自动管理工具 - ruanyifeng](http://javascript.ruanyifeng.com/tool/gulp.html) 279 | - [Gulp插件](http://gulpjs.com/plugins/) 280 | - [Gulp不完全入门教程](http://www.ido321.com/1622.html) 281 | - [为什么使用gulp?](https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33) 282 | - [Gulp安装及配合组件构建前端开发一体化](http://www.dbpoo.com/getting-started-with-gulp/) 283 | - [Gulp 入门指南](https://github.com/nimojs/gulp-book) 284 | - [Gulp 入门指南 - nimojs](https://github.com/nimojs/blog/issues/19) 285 | - [Gulp入门教程](http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/) 286 | - [Gulp in Action](http://www.imooc.com/video/5692) 287 | - [Gulp开发教程（翻译）](http://www.w3ctech.com/topic/134) 288 | - [前端构建工具gulpjs的使用介绍及技巧](http://www.cnblogs.com/2050/p/4198792.html) 289 | 290 | 3. Grunt 291 | 292 | - [gruntjs](http://gruntjs.com/) 293 | - [Grunt中文网](http://www.gruntjs.net/) 294 | 295 | 4. Fis 296 | 297 | - [fis 官网](http://fex-team.github.io/fis-site/index.html) 298 | - [fis](http://fis.baidu.com/) 299 | 300 | ####12. 轮播图 301 | 302 | 1. pc图轮 303 | 304 | - [单屏轮播sochange](http://www.jsfoot.com/jquery/demo/2011-09-20/192.html) 305 | - [左右按钮多图切换](http://bxslider.com/examples/carousel-demystified) 306 | - [fullpage全屏轮播](https://github.com/alvarotrigo/fullPage.js/) 307 | 308 | 2. 移动端 309 | 310 | - [无缝切换](http://www.swipejs.com/) 311 | - [滑屏效果](http://www.idangero.us/swiper) 312 | - [全屏fullpage](https://github.com/peunzhang/fullpage) 313 | - [单个图片切换](https://github.com/qiqiboy/touchslider) 314 | - [单个全屏切换](https://github.com/peunzhang/slip.js) 315 | - [百度的切换库](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group) 316 | - [单个全屏切换](https://github.com/peunzhang/iSlider) 317 | - [滑屏效果](https://github.com/saw/touch-interfaces) 318 | - [旋转拖动设置](http://baijs.com/tinycircleslider/) 319 | - [类似于swipe切换](http://touchslider.com/) 320 | - [支持多种形式的触摸滑动](http://www.swiper.com.cn/demo/index.html) 321 | - [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html) 322 | - [大话主席pc移动图片轮换](http://www.superslide2.com/) 323 | - [滑屏效果](https://github.com/hahnzhu/parallax.js) 324 | - [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage) 325 | - [[WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应](http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html) 326 | - [判断微信客户端的那些坑](http://loo2k.com/blog/detecting-wechat-client/) 327 | - [可以通过javascript直接调用原生分享的工具](https://github.com/JefferyWang/nativeShare.js) 328 | - [JiaThis 分享到微信代码](http://www.jiathis.com/help/html/weixin-share-code) 329 | - [聊聊移动端跨平台开发的各种技术](http://fex.baidu.com/blog/2015/05/cross-mobile/) 330 | - [前端自动化测试](http://www.zhihu.com/question/29922082) 331 | - [多种轮换图片](http://ajccom.github.io/niceslider/) 332 | - [滑动侧边栏](https://mango.github.io/slideout/) 333 | 334 | ####13. 文件上传 335 | 336 | - [百度上传组件](http://fex.baidu.com/webuploader/) 337 | - [上传](https://blueimp.github.io/jQuery-File-Upload/) 338 | - [flash 头像上传](http://www.hdfu.net/) 339 | - [图片上传预览](http://www.dropzonejs.com/) 340 | - [图片裁剪](http://elemefe.github.io/image-cropper/) 341 | - [图片裁剪-shearphoto](http://www.shearphoto.com/) 342 | - [jQuery图片处理](http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2) 343 | - []() 344 | 345 | ####14. 模拟select 346 | 347 | - [糖饼 select](http://aui.github.io/popupjs/doc/selectbox.html) 348 | - [flexselect](https://github.com/rmm5t/jquery-flexselect) 349 | - [双select](http://loudev.com/) 350 | - [select2](http://select2.github.io/) 351 | - []() 352 | 353 | ####15. 取色插件 354 | 355 | - [类似 Photoshop 的界面取色插件](http://www.jq22.com/plugin/367) 356 | - [jquery color](https://github.com/jquery/jquery-color/) 357 | - [取色插件集合](http://www.oschina.net/project/tag/287/color-picker) 358 | - [farbtastic 圆环＋正方形](https://github.com/mattfarina/farbtastic) 359 | - []() 360 | 361 | ####16. 城市联动 362 | 363 | - [jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果](http://www.ijquery.cn/?p=360) 364 | - []() 365 | 366 | ####17. 剪贴板 367 | 368 | - [剪贴板](https://github.com/zeroclipboard/zeroclipboard) 369 | - [clipboard 最新的剪切方案](http://zenorocha.github.io/clipboard.js/) 370 | - [不是Flash的剪贴板](https://github.com/zenorocha/clipboard.js) 371 | 372 | ####18. 简繁转换 373 | 374 | - [简繁转换](https://github.com/BYVoid/OpenCC) 375 | 376 | ####19. 表格 Grid 377 | 378 | - [facebook表格](http://facebook.github.io/fixed-data-table/) 379 | - [类似于Excel编辑表格-handsontable](http://handsontable.com/) 380 | - [bootstrap-table插件](http://bootstrap-table.wenzhixin.net.cn/) 381 | - [datatables](https://www.datatables.net/) 382 | 383 | ####20. 在线演示 384 | 385 | - [js 在线编辑 - runjs](http://runjs.cn/) 386 | - [js 在线编辑 - jsbin](http://jsbin.com/) 387 | - [js 在线编辑 - codepen](http://codepen.io/) 388 | - [js 在线编辑 - jsfiddle](http://jsfiddle.net/) 389 | - [java 在线编辑 - runjs](http://ideone.com/) 390 | - [js 在线编辑 - hcharts](http://code.hcharts.cn/) 391 | - [js 在线编辑 - jsdm](http://jsdm.com/) 392 | - [sql 在线编辑 - sqlfiddle](http://sqlfiddle.com/) 393 | - [mozilla 在线编辑器](https://thimble.mozilla.org) 394 | 395 | ####21. 播放器 396 | 397 | - [Html5 VideoPlayer](https://github.com/zmmbreeze/DeadSimpleVideoPlayer) 398 | 399 | ####22. 粒子动画 400 | 401 | - [Proton 烟花](http://a-jie.github.io/Proton/#example) 402 | 403 | ###九. Nodejs 404 | 405 | - [nodejs 篇幅比较巨大](http://liuqing.pw/) 406 | - [Node.js 包教不包会](https://github.com/alsotang/node-lessons) 407 | - [篇幅比较少](http://rainweb.cn/article/category/Nodejs) 408 | - [node express 入门教程](http://www.w3cfuns.com/article-5598538-1-1.html) 409 | - [nodejs定时任务](http://my.oschina.net/u/568264/blog/193773) 410 | - [一个nodejs博客](http://60sky.com/) 411 | - [【NodeJS 学习笔记04】新闻发布系统](http://www.cnblogs.com/yexiaochai/p/3536547.html) 412 | - [过年7天乐，学nodejs 也快乐](http://www.cnblogs.com/qqloving/p/3541099.html) 413 | - [七天学会NodeJS](https://github.com/nqdeng/7-days-nodejs) 414 | - [Nodejs学习笔记（二）--- 事件模块](http://www.cnblogs.com/zhongweiv/p/nodejs_events.html) 415 | - [nodejs入门](http://www.cnblogs.com/liusuqi/p/3735491.html) 416 | - [angularjs nodejs](https://github.com/zensh/jsgen) 417 | - [从零开始nodejs系列文章](http://blog.fens.me/series-nodejs/) 418 | - [理解nodejs](http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb) 419 | - [nodejs事件轮询](http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/) 420 | - [node入门](http://www.nodebeginner.org/index-zh-cn.html) 421 | - [nodejs cms](http://ourjs.com/detail/53e1f281c5910a9806000001) 422 | - [Node初学者入门，一本全面的NodeJS教程](http://ourjs.com/detail/529ca5950cb6498814000005) 423 | - [NodeJS的代码调试和性能调优](http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line/) 424 | 425 | ###十. 工具网站 426 | 427 | 1. 常规优化 428 | 429 | - [Javascript高性能动画与页面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering) 430 | - [移动H5前端性能优化指南](http://isux.tencent.com/h5-performance.html) 431 | - [5173首页前端性能优化实践](http://ued.5173.com/?p=1731) 432 | - [给网页设计师和前端开发者看的前端性能优化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers) 433 | - [复杂应用的 CSS 性能分析和优化建议](http://www.orzpoint.com/profiling-css-and-optimization-notes/) 434 | - [张鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/) 435 | - [前端性能监控总结](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html) 436 | - [网站性能优化之CSS无图片技术](http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF/) 437 | - [web前端性能优化进阶路](http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html) 438 | - [前端技术：网站性能优化之CSS无图片技术](http://my.eoe.cn/tuwandou/archive/4544.html) 439 | - [浏览器的加载与页面性能优化](http://www.baiduux.com/blog/2011/02/15/browser-loading/) 440 | - [页面加载中的图片性能优化](http://www.w3ctech.com/p/1503) 441 | - [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD) 442 | - [html优化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/) 443 | - [99css——性能](http://www.99css.com/archives/tag/%E6%80%A7%E8%83%BD) 444 | - [Yslow——性能优化](http://www.yslow.net/category.php?cid=20) 445 | - [YSLOW中文介绍](http://www.cnblogs.com/yslow/) 446 | - [转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化](http://www.360ito.com/article/40.html) 447 | - [Yahoo!团队实践分享：网站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml) 448 | - [网站性能优化指南：什么使我们的网站变慢？](http://blog.jiasule.com/i/153) 449 | - [网站性能优化实践，减少加载时间，提高用户体验](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html) 450 | - [浅谈网站性能优化 前端篇](http://www.umtry.com/archives/747.html) 451 | - [前端重构实践之如何对网站性能优化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html) 452 | - [前端性能优化：使用媒体查询加载指定大小的背景图片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/) 453 | - [网站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html) 454 | - [加载，不只是少一点点](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml) 455 | - [前端性能的测试与优化](http://mzhou.me/article/95310/) 456 | - [分享网页加载速度优化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/) 457 | - [页面加载中的图片性能优化](http://www.f2es.com/images-bytes-opt/) 458 | - [web前端优化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html) 459 | - [网站性能优化工具大全](http://www.qianduan.net/website-performance-optimization-tool.html) 460 | - [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/) 461 | - [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/) 462 | - [由12306谈谈网站前端性能和后端性能优化](http://coolshell.cn/articles/6470.html) 463 | - [AlloyTeam——前端优化](http://www.alloyteam.com/category/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/) 464 | - [毫秒必争，前端网页性能最佳实践](http://www.cnblogs.com/developersupport/p/3248695.html) 465 | - [网站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html) 466 | - [前端工程与性能优化（上）：静态资源版本更新与缓存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1) 467 | - [前端工程与性能优化（下）：静态资源管理与模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2) 468 | - [HTTPS连接的前几毫秒发生了什么](http://blog.jobbole.com/48369/) 469 | - [Yslow](http://uicss.cn/yslow/#more-12319) 470 | - [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/) 471 | - [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/) 472 | - [YUISlide,针对移动设备的动画性能优化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html) 473 | - [Improving Site Performance](http://joelglovier.com/improving-site-performance/) 474 | - [让网站提速的最佳前端实践](http://blog.segmentfault.com/laopopo/1190000000367899) 475 | - [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/) 476 | - [Need for Speed – How to Improve your Website Performance](http://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/) 477 | - [阿里无线前端性能优化指南 (Pt.1 加载期优化) ](https://github.com/amfe/article/issues/1) 478 | - []() 479 | 480 | 2. 优化工具 481 | 482 | - [JavaScript 性能分析新工具 OneProfile](http://www.html-js.com/article/3083) 483 | - [JavaScript 堆内存分析新工具 OneHeap](http://www.html-js.com/article/3091) 484 | 485 | 3. 在线工具 486 | 487 | - [google在线工具](https://developers.google.com/speed/pagespeed/insights/) 488 | - [阿里测](http://www.alibench.com/) 489 | - [阿里-免费测试服务](http://itest.aliyun.com/) 490 | - [阿里-F2etest多浏览器兼容性测试解决方案](https://github.com/alibaba/f2etest) 491 | - [js性能测试](http://jsperf.com/) 492 | - []() 493 | 494 | ###十一. 个人优秀设计网站 495 | 496 | - [技术架构](http://www.zhihu.com/topic/19612641) 497 | - [前端架构](http://saito.im/note/The-Architecture-of-F2E/) 498 | - [如何成为前端架构师](http://www.zhihu.com/question/24092572) 499 | - [关于前端架构-张克军](http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html) 500 | - [百度腾讯offer比较（腾讯游戏VS百度基础架构）](http://www.zhihu.com/question/25583350) 501 | - []() 502 | 503 | 504 | ###十二. 代码分享 505 | 506 | ####1. 推荐作品 507 | 508 | - [winter代码片段需要翻墙](https://gist.github.com/wintercn) 509 | - [fgm](http://www.fgm.cc/learn/) 510 | - [岑安作品集](https://github.com/hongru/hongru.github.com) 511 | - [当耐特demo集合](http://kmdjs.github.io/) 512 | - [米空格 js作品](http://www.laoshu133.com/Lab/) 513 | - [myFocus](http://koen301.github.io/) 514 | - [jssdk flash开发组件　抽奖转盘](http://jssdk.sinaapp.com/) 515 | - [SeaJS组件库](http://panxuepeng.github.io/seajslib/) 516 | - [颜海镜作品](http://yanhaijing.com/myProject/) 517 | - [脚儿网作品](http://jo2.org/category/myworks/) 518 | - [javascript个人作品](http://www.cnitblog.com/yemoo/category/3107.html) 519 | - [妙味的雷东升游戏作品](http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790) 520 | - [javascript作品集](http://bbs.csdn.net/topics/380227212) 521 | - [云五笔，灰度产生生成工具](https://github.com/TooBug/works) 522 | - [项目主页](http://koen301.github.io/) 523 | - [个性的作品主页](http://zaole.net/) 524 | - [播放器](http://static.tingall.com/v2/player/) 525 | - [ucren js demos 集](http://ucren.com/blog/demos) 526 | - [智能社](http://www.zhinengshe.com/works_list.html) 527 | - [实例陈列架](http://demos.shizuwu.cn/) 528 | - [zoye demo](http://zoye.sinaapp.com/demo) 529 | - [王员外](http://lab.wangyuanwai.com/) 530 | - [平凡](http://pingfan1990.sinaapp.com) 531 | - [jyg 游戏案例](http://www.lovewebgames.com/) 532 | - [很多jquery插件](http://www.helloweba.com/list.html) 533 | - [不羁虫 - soJs 作品系列](http://www.bujichong.com/sojs/api/index.html) 534 | - [frozenui](http://frozenui.github.io/case.html) 535 | - [黑白棋](http://js-game.github.io/othello/) 536 | - [fromone](http://yansm.github.io/fromone/index.html) 537 | 538 | ####2. 群员作品 539 | 540 | - [MDialog - [合肥-M.J]](http://demo.webjyh.com/) 541 | - [轮播图 - [上海－冷静]](http://sandbox.runjs.cn/show/do6zlrrk ) 542 | - [[广州—坚壳]](http://www.replace5.com/) 543 | - [[成都 - 无痕]　感恩节专题](http://www.seejs.com/demos/) 544 | - [[球霸天]](http://hacke2.github.io/works) 545 | - [[北京-小数]](http://www.cnblogs.com/mcat/) 546 | - [[ptf] Magix 工具](http://thx.github.io/magix/) 547 | - [[杭州-Pft] Magix 基于 MVC 结构和 Hash 驱动的 OPOA（One Page One Application）应用](http://thx.github.io/magix/) 548 | - [[上海-剧中人]-实验室](http://bh-lay.com/labs/) 549 | - [[上海-豪情 ] 作品集合](http://jikeytang.github.io) 550 | - [[成都-feeling]](http://guoshan.sinaapp.com/) 551 | - [[上海-angela]](http://www.cnblogs.com/liyunhua/) 552 | - [[海南-hank]作品](http://hcjp.github.io/work/demo/) 553 | - [[上海-张力]博客](https://github.com/yibuyisheng/blogs/issues) 554 | - [[上海-zenki]作品](http://zkske121.github.io/) 555 | - [移动端图案解锁](http://01google.sinaapp.com/locker.html) 556 | - [[合肥-M.J] - MPreview 移动端图片预览组](https://github.com/webjyh/MPreview.mobile) 557 | - [[合肥-M.J] - Mexam 移动端在线做题组](https://github.com/webjyh/Mexam) 558 | - [[北京-苏瑞] - dancer小人](http://letyougo.github.io/dancer/) 559 | - [[上海-玄沐]- 个人网站](http://k.swao.cn/js/) 560 | - [[厦门-二哲]- 个人博客](http://www.meckodo.com/) 561 | 562 | ####3. 国外大牛精品 563 | 564 | - [pazguille](http://pazguille.me/) 565 | 566 | ###十三. 简历模板 567 | 568 | - [不错的个人简历](http://learnshare.github.io/about/index.html) 569 | - [简历](http://hcy2367.github.io/resume/) 570 | - [张伦](http://ncuey.sinaapp.com/CrispElite/ ) 571 | - [简历](https://github.com/hacke2/ResumeSample) 572 | - [翁天信](http://blog.dandyweng.com/2013/07/how-my-website-was-created/) 573 | - [动画方式的简历](http://www.webhek.com/misc/interactive-resume/) 574 | - [组件丰富简历](http://www.linqing07.com/resume.html) 575 | - [简历池](http://www.mojianli.com/resume/view) 576 | - [haorooms博客](http://www.haorooms.com/about) 577 | - [Justin Young](http://cv.youngdze.com/) 578 | - []() 579 | 580 | ###十四. 面试题 581 | 582 | - [那几个月在找工作（百度，网易游戏）](http://www.nowcoder.com/discuss/3196) 583 | - [2014最新面试题](http://www.html-js.com/article/1743) 584 | - [阿里前端面试题](http://www.w3cfuns.com/thread-5598563-2-1.html) 585 | - [2016校招内推 -- 阿里巴巴前端 -- 三面面试经历 ](http://www.cnblogs.com/imwtr/p/4685546.html) 586 | - [腾讯面试题](http://www.w3cfuns.com/article-5599657-1-1.html) 587 | - [年后跳槽那点事：乐视+金山+360面试之行](http://www.cnblogs.com/lvdabao/p/3660707.html) 588 | - [阿里前端面试题上线](http://fatesinger.com/2722.html) 589 | - [拉勾网js面试题](http://www.cnblogs.com/52cik/p/js-question-lg.html) 590 | - [前端面试](http://www.cnblogs.com/allenxing/p/3724382.html) 591 | - [Web开发笔试面试题 大全](http://mianshiti.diandian.com/) 592 | - [前端开发面试题](http://segmentfault.com/a/1190000000465431) 593 | - [2014最新前端面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions) 594 | - [百度面试](https://github.com/fex-team/interview-questions) 595 | - [面试题](http://www.w3cfuns.com/forum.php?mod=forumdisplay&fid=51&filter=typeid&typeid=177) 596 | - [前端工作面试问题](https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Chinese) 597 | - [前端开发面试题](http://segmentfault.com/a/1190000000465431) 598 | - [5个经典的前端面试问题](http://ourjs.com/detail/5%E4%B8%AA%E7%BB%8F%E5%85%B8%E7%9A%84%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98) 599 | - [最全前端面试问题及答案总结 ](http://segmentfault.com/a/1190000002562454) 600 | - [如何面试一名前端开发工程师？](http://www.html-js.com/article/Large-search-front-team-column%202961) 601 | - [史上最全 前端开发面试问题及答案整理](https://github.com/hawx1993/Front-end-Interview-questions) 602 | - [前端实习生面试总结 ](http://www.cnblogs.com/xiaoruo/p/4665163.html) 603 | - [史上最全 前端开发面试问题及答案整理](https://github.com/hawx1993/Front-end-Interview-questions) 604 | - [BAT及各大互联网公司2014前端笔试面试题：JavaScript篇](http://blog.jobbole.com/78738/) 605 | - [前端开发面试题大收集](https://github.com/paddingme/Front-end-Web-Development-Interview-Question) 606 | - [收集的前端面试题和答案](https://github.com/qiu-deqing/FE-interview) 607 | - [如何面试前端工程师](http://www.zhihu.com/question/19568008) 608 | - [前端开发面试题](https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md) 609 | - [牛客网-笔试面经](http://www.nowcoder.com/discuss?type=2) 610 | 611 | ###十五. iconfont 612 | 613 | 614 | ###十六. 开发工具类 615 | 616 | 1. 前端开发工具 617 | 618 | - [IntelliJ IDEA 简体中文专题教程](https://github.com/judasn/IntelliJ-IDEA-Tutorial) 619 | - [Webstorm,InterllIdea,Phpstorm](http://t.cn/8kZZ1Uy) 620 | - [SublimeText](https://github.com/jikeytang/sublime-text) 621 | - [Atom](https://atom.io/) 622 | - [visual studio code](https://code.visualstudio.com/) 623 | 624 | 2. Chrome, Firebug, Filddle 调试 625 | 626 | 1. Fiddler 627 | - [Fiddler调式使用知多少(一)深入研究](http://www.cnblogs.com/tugenhua0707/p/4623317.html) 628 | - [微信fiddle](http://www.cnblogs.com/strick/p/4570006.html) 629 | - [微信fiddle](http://gaoboy.com/article/26.html) 630 | - []() 631 | 632 | 2. Chrome 633 | - [Google Chrome 官方](https://developer.chrome.com/devtools) 634 | - [Chrome - 基础](http://www.cnblogs.com/constantince/p/4565261.html) 635 | - [Chrome - 进阶](http://www.cnblogs.com/constantince/p/4579121.html) 636 | - [Chrome - 性能](http://www.cnblogs.com/constantince/p/4585983.html) 637 | - [Chrome - 性能进阶](http://www.cnblogs.com/constantince/p/4607497.html) 638 | - [Chrome - 移动](http://www.cnblogs.com/constantince/p/4624241.html) 639 | - [Chrome - 使用技巧](http://www.cnblogs.com/liyunhua/p/4544738.html) 640 | - [Chrome - Console控制台不完全指南](http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html) 641 | - [Chrome - Workspace使浏览器变成IDE](http://c7sky.com/chrome-devtools-workspace.html) 642 | - [network面板](http://www.html-js.com/article/Nothing-blind%202975) 643 | - [chrome开发工具快捷键](http://anti-code.com/devtools-cheatsheet/) 644 | - [chrome调试工具常用功能整理](http://www.html-js.com/article/2327) 645 | - [Chrome 开发工具 Workspace 使用](http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/) 646 | - [Chrome神器Vimium快捷键学习记录 ](http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html) 647 | - [sass调试-w3cplus](http://www.w3cplus.com/sassguide/debug.html) 648 | - [如何更专业的使用Chrome开发者工具-w3cplus](http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html) 649 | - [chrome调试canvas](http://sentsin.com/web/253.html) 650 | - [chrome profiles1](https://developer.chrome.com/devtools/index) 651 | - [chrome profiles2](http://h5dev.uc.cn/article-25-1.html) 652 | - [chrome profiles3](http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles) 653 | - [chrome移动版调试](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation) 654 | - [chrome调试](http://ued.taobao.org/blog/?p=5534) 655 | - [chrome的调试](http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html) 656 | - [chrome console 命令详解](https://developers.google.com/chrome-developer-tools/docs/commandline-api) 657 | - [查看事件绑定1](http://www.cnblogs.com/leonkao/p/3809655.html) 658 | - [查看事件绑定2](http://www.cnblogs.com/xiaoyao2011/p/3447421.html) 659 | - [神器——Chrome开发者工具(一)](http://segmentfault.com/blog/xuelang/1190000000683599) 660 | - [奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)](https://xinranliu.me/2015-05-22-qiqu-performance/) 661 | - [chrome 开发者工具的 15 个小技巧](http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html) 662 | - [Chrome开发者工具不完全指南](http://1ke.co/course/361) 663 | - [Chrome 开发者工具使用技巧](http://segmentfault.com/a/1190000003882567) 664 | 665 | 3. Firebug 666 | - [firebug视频教程](http://www.imooc.com/learn/137) 667 | - [firefox 模拟器](https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE) 668 | - [console.log 命令详解](http://www.cnblogs.com/ctriphire/p/4116207.html) 669 | - [Firebug入门指南](http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html) 670 | - [Firebug控制台详解](http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html) 671 | - []() 672 | 673 | 4. 移动,微信调试 674 | - [浏览器端调试安卓](https://openstf.github.io/) 675 | - [移动端前端开发调试](http://yujiangshui.com/multidevice-frontend-debug/) 676 | - [使用 Chrome 远程调试 Android 设备](https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md) 677 | - [mac移动端调试](http://plus.uc.cn/document/webapp/doc5.html) 678 | - [mac移动端调试](http://www.mihtool.com/) 679 | - [无线调试攻略](http://thx.github.io/mobile/debugging-in-mobile/) 680 | - [无线调试攻略](http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile/) 681 | - [屌爆了,完美调试 微信webview(x5)](http://www.jianshu.com/p/ccf124f1f74b) 682 | - [微信调试的那些事](http://liyaodong.com/2015/07/06/%E5%BE%AE%E4%BF%A1%E8%B0%83%E8%AF%95%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B/) 683 | - [远程console](http://jsconsole.com/) 684 | - [微信调试工具](http://blog.qqbrowser.cc/) 685 | - [各种真机远程调试方法汇总](https://github.com/jieyou/remote_inspect_web_on_real_device) 686 | 687 | 5. iOS Simulator 688 | - [Simulator](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html) 689 | - [Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得](http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary/) 690 | 691 | 3. img 692 | 693 | - [loading img](http://preloaders.net/en/circular) 694 | - [智图-图片优化平台](http://zhitu.isux.us/) 695 | - [在线png优化](https://tinypng.com/) 696 | 697 | 4. 生成二维码 698 | 699 | - [生成二维码](http://cli.im/) 700 | 701 | 5. 浏览器同步 702 | - [puer](https://github.com/leeluolee/puer) 703 | - [liveReload](http://livereload.com/) 704 | - [f5](http://getf5.com/) 705 | - [File Watchers](http://geek100.com/2608/) 706 | 707 | 6. 在线PPT制作 708 | - [PPT](https://github.com/ksky521/nodePPT) 709 | - [reveal](https://github.com/hakimel/reveal.js/) 710 | - [slippy](https://github.com/Seldaek/slippy) 711 | 712 | ###十七. 前端导航网站 713 | 714 | 715 | ###十八. 常用CDN 716 | 717 | 718 | ###十九. Git,SVN,Github 719 | 720 | 721 | -------------------------------------------------------------------------------- /Front-end/vuejs.md: -------------------------------------------------------------------------------- 1 | # Vuejs-QQ群(364912432) 2 | 3 | ![联盟群](http://box.kancloud.cn/2016-01-21_56a04aa7296c5.jpg) 4 | 5 | 阅读此群规之前先学习总群群规：[联盟群群规](http://www.kancloud.cn/jikeytang/qq/87646)，没有加入的可以私聊群主[豪情](http://jikey.cnblogs.com)加入。 6 | 7 | 加入等级参考[JS高级前端开发群加群说明](http://www.cnblogs.com/jikey/p/4426105.html)。 8 | 9 | 跟Vuejs群的区别： 10 | 11 | - 异：工作时间综合性技术话题为主，包括框架，非框架的，业余时间产品，市场，运营创业话题为副。 12 | - 同：都是高质量技术交流群，业余时间可以交流产品，市场，运营创业等话题。 13 | 14 | 核心点：任何时间禁止闲聊，禁止技术无关的讨论，禁止技术无关的大表情 15 | ---- 16 | 17 | ###如何优雅地使用此文档 18 | 1. 入门先从官网文档入手，粗略过一遍有个影响，力求回查时能找到对应的关键字或位置。 19 | - [中文官网](http://cn-stage.vuejs.org/) 20 | - [vuejs](http://cn.vuejs.org/) 21 | - [vuejs组织](https://github.com/vuejs) 22 | 2. 发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。 23 | 3. 珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。尤其是具备解决问题能力的人，通常时间都很宝贵。 24 | 4. 先搜索，再思考，最后再提问，很多人把这个顺序搞反了。 25 | 5. - [如何优雅地向前辈或者高手请教技术问题？](https://www.zhihu.com/question/25464141) 26 | 以上部分观点出自此文 [如何优雅地使用 Stack Overflow](http://www.zhihu.com/question/20824615) 27 | 28 | ###一. 资源教程 29 | 30 | 1. 综合类 31 | - [vuejs 英文资料](https://github.com/vuejs/awesome-vue) 32 | - [Vue中文资料总汇](https://shimo.im/s/ab53739d-ca98-bd1e-aea0-fcc7378c6bb3) 33 | - [Vue.js 的一些资源索引](http://segmentfault.com/a/1190000000411057) 34 | - [vue资料](http://www.jianshu.com/p/afd8e1db7d9b) 35 | 36 | 2. 入门类 37 | - [vue 快速入门](http://segmentfault.com/a/1190000003968020) 38 | - [Vue.js 中文系列视频教程](https://laravist.com/series/vue-js-1-0-in-action-series) on Laravist 39 | 40 | 3. 英文教程 41 | - [Learning Vue 1.0: Step By Step](https://laracasts.com/series/learning-vue-step-by-step/) 42 | 43 | 4. 社区 44 | - [sf - vue标签](http://segmentfault.com/t/vue.js) 45 | - [知乎 - vue标签](https://www.zhihu.com/topic/20022242/questions) 46 | - [Vue.js专业中文社区](http://vue-js.com/) 47 | - [vue - issues](https://github.com/vuejs/vue/issues) 48 | 49 | ###二. 文档 50 | 51 | - API 52 | - [Vue.js - API](http://cn-stage.vuejs.org/api/) 53 | - router 54 | - [vue-router文档](http://router.vuejs.org/zh-cn/index.html) 55 | 56 | ###三. 组件 57 | 58 | #### 1. 官方组件 59 | 60 | - Loader 61 | - [html loader module for webpack](https://github.com/vuejs/vue-html-loader) 62 | - Router 63 | - [vue-spa-demo](https://github.com/lazyhero/vue-spa-demo) 64 | - Vuex：专门为 Vue.js 应用设计的状态管理架构 65 | - [vuex](http://vuex.vuejs.org/zh-cn/intro.html) 66 | - Ajax 67 | - [vue + ajax](https://github.com/vuejs/vue-hackernews/blob/gh-pages/src/components/NewsView.vue#L61) 68 | - [vue + ajax](https://github.com/vuejs/vue-resource) 69 | - [vue-async-data](https://github.com/vuejs/vue-async-data) 70 | - Vue-cli 71 | - [Simple CLI for scaffolding Vue.js projects](https://github.com/vuejs/vue-cli) 72 | 73 | 74 | #### 2. 其它组件 75 | 76 | - UI类 77 | - [VueStrap：使用 Vue.js 和纯 JavaScript 构建的 Bootstrap 组件](https://github.com/yuche/vue-strap) 78 | - [针对 Vue 框架移植的 We UI 框架的适配，让 mobile开发过程成为一种享受](https://github.com/aidenzou/vue-weui) 79 | - [vue bootstrap](http://yuche.github.io/vue-strap/) 80 | - [基于Vue、Bootstrap的一套MVVM组件，简单、易用、功能强大](https://github.com/bravf/VueUI) 81 | - [用VUE 和 SUI-Mobile 写了一个移动端demo - vue-sui-demo](https://github.com/eteplus/vue-sui-demo) 82 | - [Mobile web UI based on Vue and Weui](https://github.com/airyland/vux) 83 | - 表格 84 | - [ZEE大神作品 - vue-editable](https://github.com/jinzhe/vue-editable) 85 | - 分页 86 | - [vue入门－实现一个分页组件(1.0.3版本)](http://segmentfault.com/a/1190000003931500) 87 | - [vue(1.0.3) 分页组件](https://github.com/cycgit/vue-pagination) 88 | - [分页组件 -- 命令方式，支持多个，主要靠配置](https://www.npmjs.com/package/vue-pagination) 89 | - 移动 90 | - [Hammer.js wrapper for Vue.js](https://github.com/vuejs/vue-touch) 91 | - [vue的tap手势插件](https://github.com/MeCKodo/vue-tap) 92 | - 微信 93 | - [为微信Web服务量身设计](http://aidenzou.github.io/vue-weui/) 94 | - 日历 95 | - [ZEE大神作品 - vue-calendar](https://github.com/jinzhe/vue-calendar) 96 | - [Awe - 日历组件](https://github.com/hilongjw/vue-datepicker) 97 | - 进度条 98 | - [vue 进度条](https://github.com/greyby/vue-spinner) 99 | - 验证 100 | - [Validator component for VueJS](https://github.com/vuejs/vue-validator) 101 | - [form validator for vue 0.11](https://github.com/xrado/vue-validator) 102 | - Lazyload 103 | - [图片的lazyload](https://github.com/hilongjw/vue-lazyload) 104 | - Loader 105 | - [【vue】vue组件化开发初体验-示例vue-loader-example学习记录](http://segmentfault.com/a/1190000004060034) 106 | - Uploader 107 | - [vue-file-upload](https://www.npmjs.com/package/vue-file-upload) 108 | - [vue-file-upload-component](https://www.npmjs.com/package/vue-file-upload-component) 109 | - Slide 110 | - [vue-onlySlider-x](https://github.com/guan6/vue-onlySlider-x) 111 | - Drag 112 | - [vue-drag-and-drop](https://github.com/james2doyle/vue-drag-and-drop) 113 | 114 | ###四. 示例 115 | 116 | - 综合示例 117 | - [官方例子 - 包括Markdown编辑器，表格组件等](http://cn-stage.vuejs.org/examples/) 118 | - [Vue, vue-router, Webpack 和 vue-loader](https://github.com/vingojw/vue-vueRouter-webpack) 119 | - [简单的vuejs例子 - 群内高手X-Roy大作](https://github.com/KennyWho/vue-chestnut) 120 | - [vue single page app example](https://github.com/toplan/vue-spa-example) 121 | - [使用node+vue.js实现SPA应用](http://segmentfault.com/a/1190000004372736) 122 | - Ajax 123 | - [A Vue.js component for creating simple AJAX forms.](https://github.com/james2doyle/vue-ajax-form-component) 124 | - Webpack 125 | - [Vue + webpack 项目实践](http://jiongks.name/blog/just-vue/) 126 | - [基于vue.js和webpack的Chat示例](http://segmentfault.com/a/1190000003630417) 127 | - [Vue.js 和 Webpack（一）](http://djyde.github.io/2015/08/29/vuejs-and-webpack-1/) 128 | - [Vue.js 和 Webpack（二）](http://djyde.github.io/2015/08/30/vuejs-and-webpack-2/) 129 | - [Vue.js 和 Webpack（三）](http://djyde.github.io/2015/08/31/vuejs-and-webpack-3/) 130 | - [二哲 - 结合具体项目的webpack配置](https://github.com/MeCKodo/webpack) 131 | - Gulp 132 | - [vue-gulp-webpack单页面组件开发](https://github.com/JsAaron/vue-gulp-webpack) 133 | - Tab 134 | - [vue tab](http://yuche.github.io/vue-strap/#tabs) 135 | - 其它 136 | - [Ant Design 的 Vue 实现](http://okoala.github.io/vue-antd/#!/docs/introduce) 137 | - [基于vue.js重写Cnodejs.org社区的webapp](https://github.com/shinygang/Vue-cnodejs) 138 | 139 | ###五. 开发工具相关 140 | 141 | 1. Atom 142 | - [atom vue 代码高亮](https://github.com/CYBAI/language-vue-component) 143 | - [如何发布一个Atom的package](http://www.jianshu.com/p/98f99c20493c) 144 | - [vue-format](https://atom.io/packages/vue-format) 145 | 2. Sublime-text 146 | - [Vue Syntax Highlight](https://github.com/vuejs/vue-syntax-highlight) 147 | 3. Webstorm 148 | - [webstorm添加*.vue文件支持](http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%81/) 149 | 150 | ###六. 答疑 151 | 152 | - [Vue.js为什么不支持templateUrl模式](http://www.jianshu.com/p/7f7f050c9edf) 153 | - [实现了vuejs组件之间的通讯问题](https://github.com/jrainlau/vuejs-demo) 154 | - [国内有哪些公司在用Vue.js，有什么心得](https://www.zhihu.com/question/38213423) 155 | - [vue 支持服务器端渲染吗](https://www.zhihu.com/question/39149401) 156 | - [Vue.js 和 Webpack](http://div.io/topic/1343) 157 | 158 | ###七. 源码学习 159 | 160 | - [Vue.js 源码学习笔记](http://jiongks.name/blog/vue-code-review) 161 | - [VUE 源码分析](http://www.cnblogs.com/sskyy/p/3695003.html) 162 | - [vue源码分析之如何实现observer和watcher](http://segmentfault.com/a/1190000004384515) 163 | 164 | ###八. 框架相关 165 | 166 | - [尤小右 - 4-1 Vue.js-数据驱动的组件化前端开...](http://www.imooc.com/video/6346) 167 | - [Evan You - Diving Deep into Vue.js](https://simplecast.fm/s/5e60d9be) -------------------------------------------------------------------------------- /Interview/README.md: -------------------------------------------------------------------------------- 1 | # 前端面试 2 | 3 | ### 前言 4 | 5 | 这里会写这篇文档的初衷 6 | 7 | ### 面试注意点 8 | 9 | 这里会写面试过程中的注意点 10 | 11 | 12 | ### 前端面试知识点 13 | 14 | 这里主要写一些面试总结题 15 | 16 | 17 | > 欢迎star和提交issues 18 | 19 | ### 更新时间:2016-10-29 20 | 21 | 22 | 23 | - [git命令](https://github.com/junhey/studyNotes/blob/master/Front-end/Markdown.md) 24 | 25 | - [Markdown常用](https://github.com/junhey/studyNotes/blob/master/Front-end/Markdown.md) 26 | 27 | - [Json知识](https://github.com/junhey/studyNotes/blob/master/Front-end/JSON.md) 28 | 29 | 30 | - [.htaccess设置](https://github.com/junhey/studyNotes/blob/master/PHP/htaccess.md) 31 | 32 | - [php常见问题](https://github.com/junhey/studyNotes/blob/master/PHP/php.md) 33 | 34 | - [redis学习](https://github.com/junhey/studyNotes/blob/master/PHP/Redis.md) 35 | 36 | 37 | - [开发流程](https://github.com/junhey/studyNotes/blob/master/PHP/Development_process.md) 38 | 39 | - [CodeIgniter](https://github.com/junhey/studyNotes/blob/master/PHP/CodeIgniter.md) 40 | 41 | 42 | # Front-end-Developer-Interview 43 | 44 | 根据github上的面试题整理 ​前端工程师面试问题 45 | 46 | 前端问答 47 | 48 | Q:从浏览器地址输入url到显示页面的步骤（以HTTP为例） 49 | 50 | A: 51 | 1. 浏览器输入URL 52 | 2. 浏览器查看缓存，如果请求资源在缓存中并且最新，跳转到转码步骤，如果请求资源没有缓存，发起新请求，其中检查是否最新是通过两个HTTP头进行控制Expires和Cache-control 53 | 3. 浏览器解析URL获取协议，主机端口，path 54 | 4. 浏览器组装一个HTTP（GET）请求报文 55 | 5. 浏览器获取主机ip地址，其中经的过程：浏览器缓存-本机缓存-hosts文件-路由器缓存-ISP DNS缓存-DNS递归查询(可能负载均衡导致每次ip不一样) 56 | 6. 打开一个socket与目标ip地址，端口建立TCP链接，三次握手 57 | 7. TCP链接建立后发送HTTP请求 58 | 8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序 59 | 9. 服务端检查HTTP请求头是否包含缓存验证信息，如果验证缓存信息是最新的，返回304等对应的状态码 60 | 10. 处理程序读取完整的请求并准备HTTP响应，可能需要查询数据库等操作 61 | 11. 服务器响应报文通过TCP连接发送回浏览器 62 | 12. 浏览器接收到HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手 63 | 13. 浏览器检查响应状态码是否为1XX，3XX，4XX，5XX这些情况与2XX处理不同 64 | 14. 如果资源可缓存，进行缓存 65 | 15. 对响应进行解码（gzip压缩） 66 | 16. 根据资源类型决定如果处理 67 | 17. 解析HTML文档，构建DOM树，下载资源，构造CSSOM树，执行js脚本 68 | 18. 显示页面（HTML解析过程中会逐步显示页面） 69 | 70 | 71 | Q:前端需要注意的seo 72 | 73 | A: 74 | 1. 合理的title\description\keywords，搜索对三个的权重逐个减少 75 | 2. 语义化的HTML代码，符合W3C规范，语义化的代码可以让搜索引擎容易理解网页 76 | 3. 重要的内容HTML代码放前面，搜索引擎抓取HTML顺序是从上往下的，有的搜索引擎对抓取的长度有限制。 77 | 4. 重要内容不要用js输出，爬虫不会执行js来获取内容。 78 | 5. 少用iframe，搜索引擎不会抓取iframe中的内容 79 | 6. 非装饰性的图片必须加alt（img图片内容的等价描述），title（提高附加的advisory information，通常鼠标滑过元素上显示） 80 | 7. 提高网站速度，网站速度是搜索引擎排序的一个重要指标 81 | 82 | Q:web开发中会话跟踪有哪些方法 83 | 84 | A: 85 | 1. cookie 86 | 2. session 87 | 3. URL重写 88 | 4. 隐藏input 89 | 5. ip地址 90 | 91 | - HTML 92 | 93 | Q：HTML5新增了哪些内容或API，使用过哪些 94 | 95 | A： 96 | 页面可见性API--page Visbility 97 | 全屏API --full Screen 98 | 获取MediaAPI--getUserMedia 99 | 电池API --battery 100 | 资源预加载API--link Prefetching 101 | 页面可见性API--Page Visibility 102 | 103 | 使用方法见为[w3c](https://www.w3.org) 104 | 105 | Q：input和textarea的区别 106 | 107 | A： 108 | 是一个单行输入框，有value属性，但是它不能自动换行。 109 |