2017-09-14 16:44:58来自分类 前端
目录 1. [React 相关](#react) 2. [Vue 相关](#vue) - [Vue 组件库](#vue-components-) - [Vue 表单](#vue-form-) - [Vue 操作](#vue-handle-) - [Vue 图片](#vue-image-) - [Vue 通知](#vue-notice-) - [Vue 其他](#vue-other-) 3. [前端 UI 框架](#ui) 4. [CSS 相关](#css-) 5. [单页](#spa-) 6. [表单相关](#form-) 7. [弹出相关](#dialog-) 8. [开发工具](#devtools-) 9. [移动端相关](#mobile-) 10. [鼠标相关](#mouse-) 11. [数据处理](#data-) 12. [图片相关](#image-) 13. [动画相关](#animation-) 14. [项目资料](#information-) 15. [其他相关](#other-) # react React 相关 ===实例=== https://gi...
2017-04-08 17:29:12来自分类 前端
用了很久的 atom 了, 对于在 .vue 里不能用 emmet 一直感到很郁闷, 今天在看 emmet-atom 的 issue 时, 无意中发现了解决方法: https://github.com/emmetio/emmet-atom/issues/364 点击`文件 - 用户键盘映射`打开配置文件 在配置文件的最后添加 ``` 'atom-text-editor[data-grammar~="vue"]:not([mini])': 'tab': 'emmet:expand-abbreviation-with-tab' ``` 注意: 如果配置文件中已经有`'atom-text-editor[data-grammar~="vue"]:not([mini])':`的其他配置, 那么要在其他配置的下面直接添加`'tab': 'emmet:expand-abbreviation-with-tab'`, 而不能直接添加上面的两行, 不然会报错 重启编辑器 这样就可以愉快的玩耍了......
2016-12-07 22:12:00来自分类 前端
[Async 文档](http://blog.fens.me/nodejs-async/) [Bootstrap 中文文档](http://www.bootcss.com/) [CSS参考手册](http://css.doyoe.com/) [cooking 中文文档](http://cookingjs.github.io/zh-cn/index.html) [DevDocs API文档](http://devdocs.io/) [Emmet 文档](http://docs.emmet.io/cheat-sheet/) [ESLint 中文文档](http://eslint.cn/docs/rules/) [Flex 布局教程](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) [iScroll 5 API 中文版](https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/index.html) [JavaScript 中文文档](https://d...
2016-12-07 22:12:00来自分类 前端
#### 一、校验数字的表达式 * 数字:`^[0-9]*$` * n位的数字:`^\d{n}$` * 至少n位的数字:`^\d{n,}$` * m-n位的数字:`^\d{m,n}$` * 零和非零开头的数字:`^(0|[1-9][0-9]*)$` * 非零开头的最多带两位小数的数字:`^([1-9][0-9]*)+(.[0-9]{1,2})?$` * 带1-2位小数的正数或负数:`^(-)?\d+(.\d{1,2})?$` * 正数、负数、和小数:`^(-|+)?\d+(.\d+)?$` * 有两位小数的正实数:`^[0-9]+(.[0-9]{2})?$` * 有1~3位小数的正实数:`^[0-9]+(.[0-9]{1,3})?$` * 非零的正整数:`^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]*$` * 非零的负整数:`^-[1-9][0-9]*$ 或 ^-[1-9]\d$`` * 非负整数:`^\d+$ 或 ^[1-9]\d*|0$` * 非正整数:`^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$`` * 非负...
2016-12-07 22:12:00来自分类 前端
在 html 页面的 head 区域加入以下代码: ```html <meta http-equiv="Content-Security-Policy" content="script-src 'self' data: 'unsafe-eval' 'unsafe-inline'; frame-src 'self'" /> ``` 其实也就是定义csp的头, 一般来说, 我们只要限制 script 和 iframe 就好了...加入上面的代码后, 网站内被加入非本站域名下的 js 文件, 就不被执行, 如果你有用 cdn, 那么可以把 cdn 的域名加入上面的白名单, 如: ```html <meta http-equiv="Content-Security-Policy" content="script-src 'self' data: 'unsafe-eval' 'unsafe-inline' http://*.baidu.com; frame-src 'self'" /> ```...
2016-12-07 22:12:00来自分类 前端
之前的编辑器一直用的是simditor, 但是问题也不少, 之后觉得换成markdown编辑器, 首选当然就是editor.md, 主要原因就是界面美观, 功能全面... 但是editor.md问题也有, 比如图片上传, 不知道为什么作者会用那么蛋疼的表单上传, 难道只是为了兼容IE8? 看了github上的维护时间, 最后一次维护差不多半年了, 想让作者来改, 可能性是不大了, 那么就只能自己来了... editor.md的图片上传是以插件的形式存在的, 文件在`./plugins/image-dialog/image-dialog.js`, 我们就拿这个文件开刀. ```javascript exports.fn.imageDialog = function () { var cm = this.cm var lang = this.lang var editor = this.editor var settings = this.settings var cursor = cm.getCursor() var selectio...
2016-12-07 22:12:00来自分类 前端
# Atom-beautify * 格式化代码,更统一的代码风格。 https://atom.io/packages/atom-beautify # Atom-ternjs * js,nodejs,es6补全 https://atom.io/packages/atom-ternjs # Autocomplete-paths * Adds path autocompletion to autocomplete+ https://atom.io/packages/autocomplete-paths # Autoprefixer * Prefix CSS and SCSS https://atom.io/packages/autoprefixer # Dash Dash documentation integration with Atom https://atom.io/packages/dash # DocBlockr * A helper package for writing documentation https://atom.io/packages/docblockr...
2016-12-07 22:12:00来自分类 前端
```html <p><a href="xxx://app/question/95">点击跳转,直接回帖报名</a></p> ``` ```javascript /* global navigator, document, window */ var UA = { App: navigator.userAgent.indexOf('naitangApp') >= 0, WeiXin: navigator.userAgent.indexOf('MicroMessenger') >= 0, Android: navigator.userAgent.indexOf('Android') >= 0, iPhone: navigator.userAgent.indexOf('iPhone') >= 0 } var timeout function replaceSchema(href) { var schema = [ ['xxx://app/question/', 'http://www.xxx.com/question/'] ...
2016-12-07 22:12:00来自分类 前端
# 1. 安装 nodejs 和 webstorm 下载地址: https://www.jetbrains.com/webstorm/ 激活码: http://idea.qinxi1992.cn/ (偷偷的用, 打枪地不要) # 2. 安装 eslint 和 相关插件 ```bash npm install -g eslint npm install -g eslint-config-standard npm install -g eslint-plugin-html npm install -g eslint-plugin-promise npm install -g eslint-plugin-standard npm install -g eslint-plugin-sort-class-members npm install -g babel-eslint ``` # 3. 配置 webstorm ``` 文件 - 默认设置 - 语言和框架 - Javascript - Code Quality Tools - EsLint ``` 1. 勾选 `Enble` 复选框 2....
2016-12-07 22:12:00来自分类 前端
#### 2017.02.22 更新 随着项目依赖的npm包数量越来越多, 使用npm自带的`npm update`更新起来就麻烦的很, 下面就推荐一个可以批量检查更新, 批量检查丢失包, 批量升级包的工具: `yarn` 和 `npm-check` # yarn 首先先安装: ```bash npm install -g yarn ``` 或者到官网下载安装包: https://yarnpkg.com/en/docs/install 安装成功后, 使用`yarn upgrade_interactive`可以检测有那些包可以升级 ![](http://ww1.sinaimg.cn/large/4134bc4agy1fcze0vbudwj21f80pkdqb) 按`空格键`可以一个一个选择, 按`a`键可以全选, 选中需要升级的包后, 按`回车`开始升级 注意: 用`yarn upgrade`也可以升级依赖, 但是只会升级依赖, 和更新`lock`文件, 而`yarn upgrade_interactive`命令, 还可以把新版本号写到`package.json`里 # ...