自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 桌面Web Electron

electron demo:https://github.com/saoraozhe3hao/electronDemo/tree/master 安装: 1、到官网 electron.atom.io 下载脚手架。尝试安装,安装不成功则尝试翻墙、设置npm镜像、关闭https 2、上一步安装失败,则到...

2020-05-11 14:45:51 601 0

原创 动画 与 过渡

CSS3 transition 过渡 缓动效果:线性、慢进、慢出、贝塞尔曲线cubic-bezier Vue中, 使用<transition>可以在 元素插入和移除时,添加过渡效果 CSS3 animation 关键帧动画 效果:可以设置多个关键帧 Vue中, 使用<trans...

2020-02-23 11:02:32 39 0

原创 屏幕适配

参考:https://github.com/amfe/article/issues/17 弹性布局:flex、grid、居中 样式选择:媒体查询、设置<html [dpr=默认dpr]>作为选择器前缀 相对尺寸:%,设置作为rem基准 屏幕像素 px(pixels):物理像素,硬件像素...

2019-08-07 12:10:54 40 0

原创 webpack loader编写 与 npm module上传

目标:打不同环境的包,对文件进行特定处理 案例:打生成环境包时,删除掉mock相关代码 成果:https://www.npmjs.com/package/profile-loader 1、webpack配置 resolveLoader:{ // 去哪些目录下寻找 Loader...

2019-07-23 11:38:16 58 0

原创 RP、PS、AI、AE、XD、蓝湖、墨刀

原型与设计 PRD:Product Requirements Document,产品需求文档 原型图:线框图、低保真 设计稿:视觉稿,高保真 UI设计师(美工)的工作:原型图 -> 设计稿 -> 标注、切图 切图:从设计稿中抽出前端开发所需的图片 原型图工具:Axure R...

2019-07-02 08:41:42 1701 1

原创 国际化

1、main.js中 import VueI18n from 'vue-i18n' new Vue({ i18n: new VueI18n({ locale: localStorage.getItem('locale') || '...

2019-06-20 14:56:20 26 0

原创 Canvas

Canvas框架分类 通用类:Knova.js、createjs、SpriteJS、EaeslJS 游戏类、3D类、图表类 字体库:有字库

2019-06-11 08:02:17 38 0

原创 新兴前端技术

React Native:Facebook推出的Native App方案,使用React框架开发 Weex:阿里推出的Native App方案,使用Vue框架开发 Flutter:Google推出的Native App方案,使用Dart语言开发 WebAssembly:将编译型语言编译成We...

2019-06-02 11:23:53 292 0

原创 小程序、快应用

运行平台 小程序平台:百度智能小程序、支付宝小程序、微信小程序、字节跳动小程序 快应用平台:努比亚手机、联想手机、一加手机、小米手机、vivo手机、华为手机、OPPO手机、金立手机、魅族手机、中兴手机 跨平台框架 腾讯 WePY(类vue):支持输出微信小程序 腾讯 OMI(类react...

2019-01-29 11:28:27 375 0

原创 图片前端压缩

基础知识 Data URL 格式:data:image/jpeg;base64,Base64字符串       data:text/csv;charset=utf-8,内容 来源:FileReader.readAsDataURL()、canvas.toDataURL()、btoa()     ...

2019-01-09 15:18:01 427 0

原创 正则表达式

POSIX(UNIX操作系统接口标准)定义了两种正则表达式语法,基本正则表达式(Basic Regular Expression,BRE)和扩展正则表达式(Extended Regular Expression,ERE) 正则表达式的用途 用于查找和替换:在一行里查找匹配模式的字符串 linux...

2018-07-17 11:51:03 89 0

原创 微信公众号、微信小程序

微信公众号网页开发 授权流程 1、设置授权回调域名:微信公众平台-接口权限-网页授权获取用户基本信息 2、自定义菜单:微信公众平台-自定义菜单 或者 微信公众平台接口调试工具-发送请求 方案一:菜单的URL设置为 https://open.weixin.qq.com/connect/oauth2...

2018-06-25 11:29:34 115 0

原创 IdexedDB

// 参数为数据库名,版本号;得到IDBOpenDBRequest的实例var request = window.indexedDB.open("db_name", 3); request.onerror = function(event){    // IDB打开失败回调}r...

2018-05-18 22:04:27 77 0

原创 ECMAScript 6

 参考:http://es6.ruanyifeng.com/  ES6支持:http://kangax.github.io/compat-table/es6/   一、新增类型 1、Symbol类型实例,用来当作唯一值 对象成员的key有两种,一种是字符串,一种是Symbol let s...

2018-05-15 22:28:22 59 0

原创 PWA

Progressive Web APP 渐进式Web应用:用于实现离线加载能力、离线使用能力、消息推送能力的一套技术方案应用缓存:Application cache,由于编程能力差、无法清理缓存、没有路由机制,将被废弃缓存控制:service worker + cache storage本地存储:...

2018-05-08 13:41:56 388 0

原创 Angular 4 + Webpack 4

Angular 4 + Webpack 4 Demohttps://github.com/saoraozhe3hao/angluar4Demonpm installnpm install -g webpack-clinpm run webpack-server访问 http://localhost...

2018-04-29 22:50:11 1260 0

原创 CSS变量

CSS:root{ // css变量的作用域,这里是根元素    --font-size: 20px; // --开头的属性就是CSS变量}div{    font-size: var(--font-size, 24px)  // 使用CSS变量,--font-size无效时使用默认值24px  ...

2018-04-23 22:27:58 266 0

原创 移动端H5调试

Chrome Remote Debug参考:https://developers.google.com/chrome-developer-tools/docs/remote-debuggingPC准备:1、安装chrome2、chrome 打开 Remote devices,勾选 Discover...

2018-04-15 16:23:39 2223 1

原创 进程与线程

浏览器进程 1、Brower进程:负责Tab之间的公共功能 2、Render进程:一个Tab对应一个进程,也可能几个进程被合并 3、GPU进程:负责3D绘制 4、第三方插件进程 Render进程 1、GUI渲染线程:负责布局、绘制、重绘Repain、回流Reflow 2、JS引擎线程...

2018-04-12 21:24:00 56 0

原创 可访问性 Accessibility

1、语义化 选择合适的结构和标签,便于其他开发者、搜索引擎爬虫、屏幕阅读器 阅读。 2、键盘操作 给非输入框标签添加 tabindex="0",使得他能被键盘tab键聚焦。监听按钮 press 事件,使得能被键盘 Enter 键点击。 3、屏幕阅读器

2017-12-30 10:01:58 211 0

原创 本地调试

http 服务期(web容器) http-server 全局安装:npm install -g http-server 启动:http-server -p 端口 IDE 桩

2017-08-26 12:03:22 131 0

原创 前端测试

单元测试(测试function,输入为参数): Mocha、Jasmine 浏览器环境自动化测试(测试页面,输入为事件):(Selenium 2.0)WebDriver(JAVA/Python/C#) 、PhantomJS(nodeJS) PhontomJS var page = requir...

2017-08-06 16:59:55 284 1

原创 常用算法

最多保留四位小数: Math.round(sum * 10000) / 10000; 强制保留四位小数:sum .toFixed(4) 字符串判重 或 字符个数统计:用JS对象自带的map功能 或者 Set 字符替换: var name = 'aaa bbb ccc'...

2017-05-18 10:27:57 151 0

原创 vue 2 + Webpack 4

demo: https://github.com/saoraozhe3hao/vueDemo 常用组件 路由:vue-router 状态管理:vuex 服务器端渲染SSR:nuxt 移动端组件库:Mint UI(饿了么)、vonic、vux (WeUI规范)、京东 NutUI、滴滴 ...

2017-04-19 11:46:41 530 0

原创 Web Components

shadow DOM 用chrome查看shadow-dom, 先设置 settings -> Show user agent shadow DOM 下面 有 #shadow-root , #shadow-root 下面即 shadow-dom,即 的具体实现。每个shadow-d...

2017-03-25 16:10:59 404 0

原创 cnpm 、yarn

cnpm 安装:npm install -g cnpm 淘宝镜像:cnpm 和 npm 的命令一样,只不过仓库用的是npm仓库在国内的镜像 yarn 安装: npm install -g yarn npm命令对应的yarn命令 npm init ------   yarn init np...

2017-03-20 15:56:11 1332 0

原创 JavaScript 模式

参考《JavaScript》模式 模块 命名空间 一个对象即这个对象的所有属性的命名空间,因为这些属性可以与其他对象的属性重名,而又是不同的变量。例如 $ 是 $.trim 的命名空间。 构造函数 构造函数返回的是对象,那么它构造的就是这个对象。如果没返回或者返回非对象,那么相当于返回的是thi...

2016-07-03 20:17:01 235 0

原创 字符集、编码、转码、转义

编码、转码、转义 16进制编码(转码),每个字节用两个16进制数表示,即每4比特转成一个1-16的数字,再找到对应的16进制数 escape: 不编码范围{ ASCII字母 数字 @*/+ },用于字符串编码(unicode编码)。unescape解码 encodeURI: 不编码范围{ ASCI...

2016-06-24 15:34:28 1001 0

原创 reactjs、webpack、babel、eslint

demo:https://github.com/saoraozhe3hao/webpackDemo react的优点:组件式开发,高复用、低耦合 react生命周期 render: getDefaultProps、getInitialState、componentWillMount、r...

2016-05-09 19:17:02 499 0

原创 图片

JPEG:有损压缩,线条和文字容易产生锯齿 PNG:无损压缩,支持透明度 GIF:无损压缩,支持动画,只支持256种颜色,只支持全透明 根据dpr区分下载图片: 1、background: image-set(url(foo.png) 1x,url(foo@2x.png) 2x); 2、媒体查询

2016-04-18 15:11:12 157 0

原创 加载,渲染,绘制

浏览器加载过程(1)、浏览器通过DNS获取域名对应IP(2)、建立TCP连接(3)、发送http请求(4)、html边下载边渲染(5)、碰到内嵌JS 和 CSS,启动新的连接下载,阻塞渲染和JS执行(因此要把脚本放后面)(6)、获取到CSS后,重新渲染(7)、JS按标签顺序下载并执行(8)、碰到内...

2016-04-18 15:10:00 291 0

原创 组件,控件,插件

组件的概率 包含 控件、插件 根据功能分,可以分为 控件 和 工具 根据实现方式分,可以分为 基础 和 插件 demo: https://github.com/saoraozhe3hao/BackboneDemo 控件:  树:ztree 表格 :DataTables 工具: 时间:m...

2016-03-18 16:03:41 633 0

原创 backbone.js / underscore.js / sea.js / html2js

demo : https://github.com/saoraozhe3hao/BackboneDemo

2016-03-16 16:03:48 287 0

原创 事件

事件模型与事件委托 事件模型:捕获模型,冒泡模型;IE8以及之前不支持捕获模型 先捕获阶段,再冒泡阶段;addEventListener(“事件名”,方法名,事件模型 );第三个参数为true即在事件的捕获阶段执行事件处理函数为先添加先执行,event.stopPropagation(); 停止冒...

2016-03-11 11:09:37 313 0

原创 文件API

参考 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 获取文件 //FileReader 为 HTML5新增对象 var fileReader = new FileReader(); 1、从表单中读取 var file...

2016-02-28 10:43:18 263 0

原创 MV*(MVC、MVP、MVVM)

参考:http://blog.csdn.net/kevin_1025745654/article/details/45815109 MV* 已知:M(数据与数据逻辑,例如ajax、本地存储模块) 后端的MVC:M提供数据API;V 即模板,可以直接从M获取数据,C 即控制显示哪个模板 前端...

2016-02-27 22:09:14 879 0

原创 ECMAScript 5

ES(ECMAScript)Ecma国际制订的脚本标准ECMA(European Computer Manufacturers Association,欧洲计算机制造商协会) ECMAScript 1.0 1997 ECMAScript 2.0 1998 ECMAScript 3.0 1999 E...

2016-02-17 20:13:04 745 0

原创 笔试面试总结

1、Array API :join,pop,push,shift(从头删除),unshift(从头插入),sort,reserve(反转),slice(返回一段),splice(删除一段) 2、string API: charAt,contact,indexOf(查询字符串),lastIndexO...

2016-02-16 21:20:43 450 0

原创 图片定位与裁剪

案例一:给定图片 和 图片上人脸的位置,要求框出人脸 思路:先确定图片的显示模式,计算出图片左上角的坐标 和 图片缩放比,再画框 <!-- 微信小程序中的 aspectFit 模式,即 将最长边显示完全,且短边贴边 --> <img class="origin-i...

2016-01-13 11:46:43 305 0

原创 移动端 web

总体认识 存在形式: Web App: 移动浏览器,小程序,PWA Hybrid App: webview(android:WebView 、IOS:UIWebView),cordova(phoneGap) Native App: React Native,weex 资源: Apach...

2015-10-28 10:30:11 593 0

提示
确定要删除当前文章?
取消 删除