鄙人自封公司第一跨域解决大师，的确需要写一下关于跨域的事情。

前端调试，跨域太常见了。如下图：

跨域的原因，是浏览器的安全机制，不允许跨域互相调用，会提高网站的安全性。

前端跨域的最大模块，是ajax接口跨域

1、最简单的解决方法：jsonp

虽然jquery将jsonp封装到了ajax方法里面，但是底层的代码调用，完全不是一样。
jsonp的原理，就是通过script标签进行回调，原生的jsonp开发，会明显一些。

1
2
3
4
5
6

// 定义好回调方法
function qqq(data){
// do something
}
<script scr='http://xxx.com?callback=qqq'></script>>

也就是相当于，服务端返回的代码，使用了qqq包了起来，然后调用了上面定义的那个qqq方法，实现了数据的跨域调用。

阅读全文

最根本的原则

• 就是代码后端直出，不管是jsp、php、还是nodejs的直出，都OK，简单来说，就是右击查看源代码，可以看到dom结构
• 如果是使用的模板引擎，只渲染了json数据到界面上，dom结构需要JS再行渲染的话，也是不行的
• iframe嵌套的，seo不会去抓
• JS渲染的，不会去抓
• 嵌套的flash、图片，更不会去抓

网站布局优化

阅读全文

最近开发了浙江广电的蓝TV项目，成功上线运行，网址http://tv.cztv.com/。
合作的统计提供端——国双科技，提供一份需要SEO优化的文档，主要包括如下内容：

1、网站地图分类列表页Title及URL优化

• 将<title>综艺 - - 中国蓝TV</title>修改为<title>综艺-网站地图-中国蓝TV</title>
• http://list.cztv.com/sitemap/c11_s_t_a_y_f_st_vt_ph_lg_tv_sp_md_o9_d_p.html 这种URL过长，需要优化

2、专题页面URL优化（避免直接使用搜索URL作为页面URL）

• 将http://so.cztv.com/pc/s?wd=中国梦想秀替换为http://tv.cztv.com/zongyi/zzmxx

3、播放页相关剧集内容可见性优化

阅读全文

    从C、C++的学生时代，到刚工作的Java时代，又到现在的JS时代，使用了VC6、vs系列、eclipse、webstorm、atom等N多代码编辑器，最终因为速度与可玩性，选择了sublime。下面是根据自己的习惯，推荐常用的sublime插件。

• All Autocomplete

    自动提示插件，但是不是像webstorm那样搜索全部的文件，这个只搜索现在打开的文件

阅读全文

公司8g内存的惠普笔记本，带webstorm（后面简称为WS）已经带不动了，因为我经常打开N个功能用于跑代码。
于是，换回了之前使用的sublime。

两款经典开发工具对比

功能齐全

WS完胜，sublime需要自己挨个去下载插件，去配置相关使用。
换句话说，WS是个IDE，sublime就是个代码编辑器

速度

sublime完胜，sublime既没有自动保存，也没有自带的自动补全，更没有删除时的相关引用提示。

阅读全文

最近被大家推荐使用webstorm（后面简称为WS）来做前端开发，用了N久，总结如下：
首先是优点：

1、功能齐全

• 集成了N多有用的功能，集成了git、svn、ant、命令行等功能
• 自动化提示优秀
• 可以从某个文件的方法，点击至调用的方法中
• 可以自动保存
• 可以保存历史记录

阅读全文

最近接触H5界面开发较多，也认识了一个前端开发调试利器——fiddler。

抓包

fiddler的一大重要功能就是抓包，类似于chrome的network，但是功能更加强大

• fiddler可以抓本电脑所有的网络请求
• fiddler抓包查看的细节更多、格式更全面
• fiddler可以使用多种自定义过滤的方式抓包

本地文件替换

阅读全文

html5引入了localStorage来做缓存，又感觉只支持key-value的方式，有所局限，所以又添加了本地数据库的支持。

1、Web SQL

w3c最早提出的本地数据库方案是Web SQL，但是现在已经停止了对其的更新
功能要点，也是H5 Sqlite数据库三个核心API：

• 打开数据库
• 执行SQL语言
  • 创建数据表table
  • 增加、修改、删除数据
  • 获取数据
  • 清空数据
• 事务处理

阅读全文

localStorage作为cookie的替代品，可以对前端性能优化做一些文章。

缓存普通数据

由于不会被http请求带上，localStorage本事对性能就算优化了一层

缓存接口

这个业内使用的也比较多，对那些请求量比较大、而且改动不算频繁的接口，可以通过localStorage缓存到本地

大体思路：

• 第一次请求接口时，正常请求并存入localStorage，同时存入当前时间戳
• 再次使用该接口时，对比当前时间与存入的时间戳，如果未到存储时间的话，直接从缓存中取数据
• 如果时间超时，再次正常请求接口，并更新时间、接口内容到缓存

下面是我封装了一个getLocalOrRemote.js

阅读全文

最近做一个项目，可以只兼容现代的浏览器，客户端存储就使用了localStorage。

localStorage与sessionStorage作为客户端存储数据的手段，是cookie这方面的替代品，与cookie相比，localStorage有明显的优点。

cookie vs localStorage

阅读全文