helondeng 于 1年前发表 7333 4 1
最近做产品小A的需求,设计到图片的上传问题,整理一下。 PC上传图片 基本结构 1. form[enctype="multipart/form-data"] 2. input[type="file"] 3. 上传完毕后,获取图片url,显示到页面上 问题 1. 图片要上传完毕后,才能显示 2. 压缩上传 H5 如何解决 1. FileReader 2. canvas FILEREADER FileReader可以将File对象转化成base64,这样可以优先展示图片,然后处理上传操作。 var fr = new FileReader(); fr.readAsDataURL(file); fr.onload = function(e) { $('img').attr('src', e.target.result); }; FORMDATA 实际的上传操作,大多是ajax处理的,FormData可以用来构建form表单。 var fd = new FormData(); fd.append('filename', file); $.ajax({
1年前
HTML&HTML5
ouven ,https://ouvens.github.io/ 于 2年前发表 6626 4 0
一、安装 * 安装初始化 npm i -g fis3 fis3 -v fis3 init 二、配置 类似Gruntfile.js或Gulpfile.js,新建fis-config.js文件 配置api介绍如下: FIS.SET(KEY, VALUE) 设置一些配置,如系统内置属性 project、namespace、modules、settings。 fis.set 设置的值通过fis.get()获取 FIS.GET(KEY) 获取已经配置的属性,和 fis.set() 成对使用 FIS.MATCH(SELECTOR, PROPS, [, IMPORTANT]) 给匹配到的文件分配属性,文件属性决定了这个文件进行怎么样的操作;fis.match 模拟一个类似 css 的覆盖规则,负责给文件分配规则属性,这些规则属性决定了这个文件将会被如何处理;另外,后面分配到的规则会覆盖前面的; fis.match('{a,b}.js', { release: '/static/\$0' }); fis.match('b.js', {
2年前
构建工具
ShiJianwen 于 8个月前发表 6284 3 1
REACT React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: * 组件化 * 利用 props 形成单向的数据流 * 根据 state 的变化来更新 view * 利用虚拟 DOM 来提升渲染性能 [http://7tszky.com1.z0.glb.clouddn.com/FgHh-hjZfigrSqf_9MZhjgmknC5N] 前面说到 React 能够根据 state 的变化来更新 view,一般来说引起 state 变化的动作除了来自外部(如服务器),大部分都来自于页面上的用户活动,那页面上的用户活动怎样对 state 产生作用呢?React 中每个组件都有 setState 方法用于改变组件当前的 state,所以可以把更改 state 的逻辑写在各自的组件里,但这样做的问题在于,当项目逻辑变得越来越复杂的时候,将很难理清 state 跟 view 之间的对应关系(一个 state 的变化可能引起多个 view 的变化,一个 view 上面触发的事件可能引起多个 state 的改变)。我们需要对所有引起 state
8个月前
javascript技术
ouven ,https://ouvens.github.io/ 于 2年前发表 6169 0 0
1. 什么是MOCKJS http://mockjs.com/ [http://mockjs.com/] Mockjs是个能够拦截页面ajax请求并模拟返回数据的小工具,借助Mockjs,前端开发中在后台测试接口还没有给的时候就可以自己拦截请求模拟数据进行愉快的开发了,所以只要制定好了协议,前后端分离开发的成本可以降到基本为0,也不需要联调工具了 2,MOCKJS主要功能 * 基于数据模板生成模拟数据 * 基于html模板申城模拟数据 * 拦截并模拟ajax请求 当然mock模拟的数据不只是随便的输出字符串,它包含了各种格式的模拟数据,例如姓名,段落,时间,日期,图片地址,身份证号,电话,邮箱,ip等等,所以以后搞数据自动校验什么的再也不用手动输入测试了。也就是Mock自动了做了很多测试调试中的那部分体力活,我们只需要安静的写代码就好了。 数据模板则是根据一个模板自动根据某个规则产生数据,例如序号产生自增的数组等 数据模板定义 DTD数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值: 'name|rule': value 例如:
2年前
前端库
daihuimi 于 2年前发表 6155 3 4
学习整理了web缓存的一些策略,如有不正确的地方,欢迎指正。 缓存策略 [http://thumbsnap.com/i/bTOegvzm.png?0809] 浏览器端的缓存规则 对于浏览器端的缓存来讲,这些规则是在 HTTP协议头 和 HTML页面的Meta标签 中定义的。他们分别从 新鲜度 和 校验值 两个维度来规定浏览器是否可以直接使用缓存中的副本,还是需要去源服务器获取更新的版本。 新鲜度(过期机制) :也就是缓存副本有效期。一个缓存副本必须满足以下条件,浏览器会认为它是有效的,足够新的: * 含有完整的过期时间控制头信息(HTTP协议报头),并且仍在有效期内; * 浏览器已经使用过这个缓存副本,并且在一个会话中已经检查过新鲜度 满足以上两个情况的一种,浏览器会直接从缓存中获取副本并渲染。 校验值(验证机制) :服务器返回资源的时候有时在控制头信息带上这个资源的实体标签 Etag(Entity Tag) ,它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配,说明资源已经被修改或过期,浏览器需求重新获取资源内容。 一个重要的概念
2年前
HTTP网络
ouven ,https://ouvens.github.io/ 于 1年前发表 6054 4 1
2015-2016前端架构体系技术精简版 [http://7tszky.com1.z0.glb.clouddn.com/FsPayu9dzc8ecy1M16qQl5zmQe01] 点击查看github高清图 [https://github.com/ouvens/frontend-system-map] 点击查看完整版 [https://ouvens.github.io/frontend-resource/2016/01/26/front-end-learning-list.html] 一、框架与组件 **bootstrap等UI框架设计与实现 * 伸缩布局:grid网格布局 * 基础UI样式:元素reset、按钮、图片、菜单、表单 * 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 * 响应式布局:布局、结构、样式、媒体、javascript响应式 * 第三方插件:插件管理 **jQuery、zepto使用原理以及插件开发 * 支持amd、cmd、全局变量的模块化封装
1年前
浏览器
link ,除了分享,也是知识管理。 于 1年前发表 6023 0 0
概述 PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.( http://phantomjs.org/) [http://phantomjs.org/)] PhantomJS是一个无界面的webkit内核浏览器,你可以把它当作一个没有界面的Safari。 安装 目前PhantomJS的最新版本的2.0,官方文档中有提到说:如果在使用老版本时碰到一些难解的bug,可以升级到最新版试试。 WINDOWS 直接下载 phantomjs-2.0.0-windows.zip
1年前
nodeJS全栈
张颖 ,认真认真 于 1年前发表 5934 5 1
VIDEO标签属性和事件介绍 为了文章的完整性,首先还是列举一下video标签的属性: * src :视频的属性 * poster:视频封面,没有播放时显示的图片 * preload:预加载 * autoplay:自动播放 * loop:循环播放 * controls:浏览器自带的控制条 * width:视频宽度 * height:视频高度 Video 对象属性: * audioTracks: 返回表示可用音频轨道的 AudioTrackList 对象。 * autoplay: 设置或返回是否在就绪(加载完成)后随即播放视频。 * buffered: 返回表示视频已缓冲部分的 TimeRanges 对象。 * controller: 返回表示视频当前媒体控制器的 MediaController 对象。 * controls: 设置或返回视频是否应该显示控件(比如播放/暂停等)。 * crossOrigin: 设置或返回视频的 CORS 设置。 * currentSrc: 返回当前视频的 URL。
1年前
HTML&HTML5
daihuimi 于 2年前发表 5841 1 0
本文从新人角度讲一讲对angular中MVVM模式的理解,以及angular特性的源码实现。img [https://angularjs.org/img/AngularJS-large.png] MVVM核心原理 MVVM模式是 Model-View-ViewMode (模型-视图-视图模型)模式的简称,其最早出现在微软的WPF和Silverlight框架中。MVVM模式利用框架内置的双向绑定技术对MVP(Model-View-Presenter)模式的变型,引入了专门的ViewModel(视图模型)来实现View和Model的粘合,让View和Model的进一步分离和解耦。 主要思想其实也很简单:在ViewModel中构建一组状态数据(state data),作为View状态的抽象。然后通过双向数据绑定(data binding)使ViewModel中的状态数据(state data)与View中的显示状态(screen state)保持一致。这样,ViewModel中的展示逻辑只需要修改对应的状态数据,就可以控制View的状态,从而避免在View上开发大量的接口。
2年前
前端库
黄龙 于 1年前发表 5615 0 0
Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器。 本文将通过简单实用的方法来带你学习 Atom 编译器的使用。 常用的插件 * emmet: 提高开发效率 * atom-ternjs: JS代码智能提示补全 * file-icons: 文件图标 * linter-jscs: jscs验证插件 linter-jscs的配置: 1.打开设置【win: ctrl+, 】【mac: commond+, 】 2.点击packages,里面就是已经安装好的插件 [http://7tszky.com1.z0.glb.clouddn.com/FiRXCJcyNUW2keVZLrXA3oN6JtCw] 插件自带按jscs格式化的功能,保存的时候自动格式化,非常方便.如果团队没有自己的代码规范的话插件默认自带了一些规范可供选择其中有airbnb、google、jquery、grunt等代码规范可选。
1年前
调试
link ,除了分享,也是知识管理。 于 1年前发表 5565 5 4
WHY REGULAR EXPRESSION 我们先来看看,我们干哈要学正则表达式这玩意儿: * 复杂的字符串搜寻、替换工作,无法用简单的方式(类似借助标准库函数)达成。 * 能够帮助你进行各种字符串验证。 * 不止应用于编程语言中: JavaScript、JAVA、Perl、PHP、C#... * 也应用于许多操作系统的主流指令中: Linux/Unix、Mac、Windows PowerScript 在我们常用的开发工具中,如Fiddler Willow、WebStorm、Vim,正则表达式也能帮助我们方便的进行Find>Replace的工作。 由于正则表达式的流派很多,这篇文章主要是描述JavaScript中的正则表达式。 介绍点语法 定义 所谓正则表达式,就是一种描述字符串结构模式的形式化表达方法。 这是 《精通正则表达式》 [https://book.douban.com/subject/2154713/] 对于它的定义,反正我看了这句话还是不知道正则表达式是干嘛用的,不过没关系,下面我们先来看一下JavaScript的正则表达式中一些常用的语法。 创建方式
1年前
javascript技术
link ,除了分享,也是知识管理。 于 1年前发表 5512 4 3
2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路上看过的,以及道听途说的一些书,基本上按照由浅入深来介绍。 JAVASCRIPT 入门 《JavaScript权威指南(第六版)》 ★★★★★ JavaScript权威指南(第六版) [http://img3.douban.com/lpic/s8958854.jpg] 淘宝前端团队翻译的,看译者列表都是一堆大神。这本书又叫犀牛书,号称javascript开发者的圣经,网上对此书评价很多,大概意思都是说这本书是一本JavaScript文档手册,没有完整看过一遍此书的都不能算是一名合格的前端工程师。 我也是从这本书开始接触前端开发的,当时还是华章出版社的校园大使,免费申请到了这本书,可惜的是两年来我一直把它作为一本cookbook来查阅,一直没有好好通读一遍。个人感觉这本书还是写得枯燥了些,不过内容绝对是五颗星,无可挑剔! 《JavaScript高级程序设计》 ★★★★★ JavaScript高级程序设计 [http://img3.douban.com/lpic/s8958650.jpg]
1年前
javascript技术