陈材华
# JS-SDK ### 约定 - 只注入一个对象：HJApp, 示例：HJApp.navigator_setTitle() - 异步callback - 命名空间：navigator、ui等 - 参数：(JSON jsonString, Callback callbackString) - 重载（callback可传，可不传） - 容错处理 ### callback定义： ``` javascript { "status": 0, "message": "xxx", "data":...
前端静态资源发生的异常一般是图片加载失败，JS脚本执行错误，AJax执行错误等。 [支持图片加载失败，JS脚本错误捕获](https://github.com/mishe/badJS/blob/master/monitor.js) ## 目前功能： - 检测图片加载 - 跟踪JS执行 - 记录错误列表并实施并发发送 - 分段发送报告到服务端，以免URL超长造成数据丢失 ## TODO - 页面关闭时把检测到的错误保存到本地 - 在页面打开时，检测本地的未发送的错误，并发送到服务端
# mobileUpload [使用File API+实现文件上传](https://github.com/mishe/Imageupload) 目前支持各种格式的文件上传，图片文件支持canvas 压缩再上传服务端 文件依赖 JQUERY ## 参数API - loading:'.loading', 页面显示loading的图标selector - url:'', 接收数据的api接口地址 - maxFileSize:10_1024_1024, 服务端支持的最大单文件大小 - format:/^image/i, 支持的文件格式 - isCompress:true, 如果是图片，可以开启客户端压缩，减少传输的数据文件 - compressNum:0.6, 图片的压缩率，0~1 设置为1可能最终结果比未压缩还大，请慎用1. -...
先占坑，慢慢完善 1. 从15年8月份开始，对移动端的页面进行了重构（全新开发），基础采用了个人比较擅长的backbone，外加jQuery，加上个人的写的一些工具函数，再加上webpack的使用，采用commonJS规范。 2. backbone 和underscore 个人对TA进行了阉割，删除了model和collection 参见#72 删除理由是： - 这些代码很多，实用性不高 - 没有实现任何的数据绑定，视图绑定的功能； - 可以由view来实现数据的绑定 - 可以降低backbone的使用和学习成本
# popWindow的使用 所有content都支持是html文本 ## 模拟Alert框 ### 方式一 基本alert框（只有alert内容） ``` javascript $.popWindow({ content:'window1', type:2 }) ``` ### 方式二， 有标题的alert框 ``` javascript $.popWindow({ title:'title', content:'window1', type:2 }) ``` ### 方式三 带回调的aler框 ```...
## localstorage本地缓存方案 具体代码参见 https://github.com/mishe/store ### 解决数据过期问题 本地实际应用建议绑定当前的用户，解决不能用户看到不同的缓存，可以做下适当的包装，比如： ``` javascript setCache:function(key,value,exp){ //过期时间默认1天 exp=exp||86400; store.set(key+'_'+curUserID, value,exp); }, getCache:function(key){ return store.get(key+'_'+curUserID); } ``` ### todo： 另外还又可以尝试结合一些简单的加解密技术，来保证客户端缓存数据的相对安全，但势必会造成性能上的损失。 ## 简单API ### 设置缓存 ``` javascript //简单的缓存...
## 前言 阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化。以下是我们根据实际经验总结的优化指南，希望对大家有所帮助。 第一部分仅包括数据加载期优化。 ## 图片控制 对于网页特别是电商类页面来说，图片通常会占据了大量的视觉空间,是页面中最为重要的展现内容，并且占据网页传输字节的大部分。因此，对图片的优化是我们性能优化的重点. ## 启用WebP [WebP](http://isux.tencent.com/introduction-of-webp.html)是一种支持有损压缩和无损压缩的图片文件格式，派生自视频编码格式 VP8。根据 Google 官方的数据，无损压缩后的 WebP 比 PNG 文件少了 26％ 的文件大小，有损压缩在具有同等SSIM索引的情况下WebP 比 JPEG 文件少25-34%的文件大小。WebP支持无损透明度（也叫做alpha通道），支持动画格式Animated WebP 。 虽然目前仅Android系统原生支持WebP格式， 但由于其对页面性能优化的巨大意义， 我们会在页面加载时进行环境探测, 如页面渲染环境支持WebP我们会替换页面中的图片链接为WebP格式的版本。 如果页面专门用于可控的客户端内(我们能在客户端中放置专门的WebP decoder)，就算是iOS环境我们也会启用WebP....
找了很多资料结果发现很多配置都是不成功的，只能琢磨着自己整整了。 配置如下： 打开WebStorm，点File-->Settings,找到File Watchers,点右侧的“+”，选择LESS,更改对应项的设置如下： Program:E:\nodejs\node.exe Arguments:E:\nodejs\node_modules\less\bin\lessc $FileName$ $FileDir$\css\$FileNameWithoutAllExtensions$.css Working directory:$FileDir$ Output paths to refresh:为空就好了 之后，所有的less文件，在创建和修改时都会自动编译成对应文件名的css文件，放入工程文件的css目录下。
现在 CSS3 越来越流行，CSS3 动画效果更是给开发者带来了很多便利，我们可以很方便的使用 CSS3 和 JavaScript 来做出很酷炫的加载动画，推荐两个css3 loading 动画集合 1.一个是令人愉快的和表现力丰富的纯CSS加载动画：https://connoratherton.com/loaders 2.Tim Holman在codepen.io上收集的css3 loading动画集合：http://codepen.io/collection/HtAne/
## 要考虑Android低端机与2G网络场景下性能 - 发布前必要检查项 - 所有图片必须有进行过压缩 - 考虑适度的有损压缩，如转化为80%质量的jpg图片 - 考虑把大图切成多张小图，常见在banner图过大的场景 - 加载性能优化, 达到打开足够快 - 数据离线化，考虑将数据缓存在 localStorage - 初始请求资源数 < 4 注意！ - 图片使用CSS Sprites 或 DataURI - 外链 CSS 中避免...