cczhumin-CSDN博客

转载 Meta标签大集合

Meta 标签<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="your,keywords,here,comma,separated,no,spaces"><meta name="description" content="150 words"><meta name="subject" content="

2016-04-25 13:35:14 5862

原创关于邮箱前端架构的一些思考（续一）--功能模块

1.功能模块的封装在这一块，是考验一个FEer的基本功的地方，一个功能模块在实现了产品的业务逻辑与众多功能点的同时，又保证了其模块的内部结构组织的清晰，明了，这需要FEer在coding过程中不断的去总结和思考的。我在coding的过程中，有两三次曾推倒了之前的设计，因为在直接的结构上，这个功能模块的耦合性太高了，导致后续涉及到此功能模块的其他模块的封装成本太高，或者是执行效率太低。不过切记，千万不要怕重构你的模块，因为大多数功能你已经实现了，就是在模块的组织上面需要花费一点功夫，这才是你能力提升的一

2016-04-24 10:06:24 1138

原创关于邮箱前端架构的一些思考

因为此次邮箱采用的是前后分离的开发方式，考虑的东西实在是太多太杂了，像什么拦截器啊，前端数据缓存，路由，模块之间的交互，公共组件，项目管理，版本控制等等都需要涉及到，这就给我出了一个难题，如何实现，组织，完善各个模块是我在邮箱开发过程中不断思考的问题。下面我来分享一些我在邮箱前端架构中的一些体会和心得1.项目目录结构清晰明了，基于项目所使用的框架的功能来组件项目目录。2.项目按功能模块进行开发与版本控制工具git3.各功能模块的交互与邮箱系统的鉴权

2016-04-17 13:58:32 2914

原创 angularJS中的拦截器

有没有这样一种场景，在使用ajax请求的时候，服务端需要验证header中的token和cookie，所以每次请求的时候都需要加上这个token，cookie不用加，每次请求的时候浏览器都会帮你带上，所以你就需要在有ajax的地方都添加一段向header中写token的代码，是不是觉得挺闹心的？别怕，我来帮你解决这个问题。在angularJS官方api中$http处有这么一段话：For purposes of global error handling, authentication, or any

2016-04-10 11:49:54 2606

原创转战gulp，实现前端静态资源的压缩，加MD5戳，替换引用，加CDN前缀

相信前端er在发布自己的代码时如果不使用前端一些构建工具的话，对频繁上线的项目来说，自己手动压缩打包替换CDN前缀那是一件多么恐怖的事情！所以采用gulp前端构建工具是一个非常明智的选择。首先来说说发布项目时前端需要进行哪些操作：1.对静态资源的压缩合并2.对js,css，img等资源加MD5戳3.对引用了以上加MD5戳的HTML文件进行替换文件内的引用。4.为HTML文件内的引用加CDN前缀

2016-03-27 11:17:27 8845 1

原创在循环中解决不能静态快照的问题

用let声明的就可以完美的解决不能静态快照的问题。let 是ES6 的新标准，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。

2016-03-27 10:20:28 510

原创 canvas实现图片尺寸等比压缩并转换为base64字符串

这里的img_this是一个img对象，首先我们先得到这个图片的宽高比，然后指定canvas的宽度为720，高度由之前的宽高比来定。这里指定了canvas的宽度为720后，将图片画在canvas里面后转成的base64的宽度也会为720。我们用drawImage方法将图片的（0,0）坐标到(0 + width , 0+ height)坐标也就是整张图片画到 canvas（0,0）到（width1，height1）也就是整个canvas内。然后使用toDataUrl将图片转换成jpeg的格式，后面0.7为

2016-03-27 09:56:19 26278 3

原创 grunt-contrib-connect 中间件middleware属性

说道这个属性，简直就是这个插件的神来之笔，这个属性可扩展自己在本地的静态文件服务器。用处太大了。第一次接触到这个属性是因为想搭一个可以按下ctrl+s之后浏览器自动刷新页面的一个功能，在网上找了找，发现前辈们已经实现了这个功能，而这个技术的关键点就是通过middleware与长连接，grunt-contrib-watch结合，实现静态注入浏览器中打开的html长连接，非常实用，听到这个功能还不错的话可以到菜单中的grunt中找找。好了，如正文了，我们这篇文章要实现一个类似于模板加载引擎的功能（将文件中的

2016-02-25 13:00:51 909

原创实现一个简单的摄像功能（不带传输数据）代码片段

下面用H5的video实现了简单的录像功能，没涉及到数据的传输，因为没有后端，只是一个简单的demo，想做视屏的同学可以用来参考参考。技术的关键点在就在navigator上，因为navigator在不同浏览器对于打开摄像头的属性是不一样的，详情请看以下代码：<!DOCTYPE html><html><head><title>camera</title></head><body><video id="video" autoplay></video></body><script type=

2016-02-25 12:57:57 409

原创 js关于静态快照（snapshot）的问题

有这么一个情景，JS代码如下：var map = ['Mr' : 'Mr' , 'Ms' : 'Ms'];//可能有很多个var hello = [];function say(call , name){ console.log(call + " : " + name );} //补全代码bababa~~~~//补全代码hello.Mr('JuMorZhu') // 控制台输出 Mr ： JuMorZhuhello.Ms('Fan BingBing') // 控制台 Ms :

2016-02-25 12:54:58 4010

原创 Js实现浏览器下标签页间切换触发的事件

visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，现在主流的浏览器都支持该消息了，例如Chrome, Firefox, IE10等。var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHi

2016-02-25 12:53:20 14761

原创 Canvas画布的一些实用技巧

实现这个的函数就是 drawImage（params_0 --- params_8)他的参数最多有九个，最少有三个，具体用法自查，比较简单，介绍下9个参数时候具体的参数。dramImage（image,src_X,src_Y,src_width,src_height,des_X,des_Y,des_width,des_height）image是一个image对象，使用new Image(),创建的对象，需要制定该对象的src，就是你要处理的图片。src_X,src_Y 对应的是你image.src

2016-02-25 12:49:53 889

cczhumin的博客