最近要做个简单的类似 CNZZ 和百度统计的统计器，不可避免地遇到 JS 文件异步加载 和 给 JS 文件传参 的问题。
参考了 CNZZ 的代码以后，在 Chrome 的控制台发现以下警告：
A Parser-blocking, cross-origin script, http://s4.cnzz.com/stat.php?***, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. See https://www.chromestatus.com/feature/5718547946799104 for more details.
Paul Kinlan 给出了解释，是因为使用了 document.write() 的方式输出了 <script src="***" /> HTML DOM，建议改成 document.appendChild() 或 parentNode.insertBefore()，最好的例子就是 Google Analytics。
<!-- Google Analytics -->
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->上述 JavaScript 跟踪代码段可以确保该脚本在所有浏览器中加载和异步执行。
加了一些注释，便于理解，官方英文版。
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
// console.log(window['GoogleAnalyticsObject']) // 'ga'
// console.log(i[r]) // undefined
i[r] = i[r] || function () { // i[r] 就是 window['ga']，定义了一个函数
(i[r].q = i[r].q || []).push(arguments) // 往 ga.q 这个数组中增加一项
},
i[r].l = 1 * new Date(); // 时间戳，写法等同于 new Date().getTime()
// console.log(i[r]) // window['ga'] 就是上面那个 function
a = s.createElement(o), // 创建一个 script 元素
m = s.getElementsByTagName(o)[0]; // 文档中的第一个脚本（文档中肯定至少已有一个脚本了）
a.async = 1; // 异步加载
a.defer = 1; // 兼容旧浏览器（我自己加的）
a.src = g;
m.parentNode.insertBefore(a, m) // 将 a 脚本插入到 m 脚本之前
})(window, document, 'script', 'http://***/***.js', 'ga');
// i s o g r
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');过程是：
创建了一个 <script> 元素，并异步加载 http://***/***.js；初始化了一个全局函数 ga；在 ga() 命令队列中添加了两条命令。
现在我们可以在这个外部 js 中使用 ga.q 这个对象中的数据了，示例：
;(function () {
console.log(ga.q);
})(window);简单补充下，async 是 HTML5 属性，使支持异步加载 JS 文件；defer 只支持 IE，作用类似。
测试异步只需要将 js 文件换成服务端页面，并人为设置 sleep 时间即可，阻塞式调用的话会在加载 js 时暂停后续页面的渲染。
收录了一些个人觉得不错的网页开发插件。
由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。
| 插件 | 简介 | 备注 |
| 框架 | ||
| jQuery | 最流行的 JS 框架 | 下载、中文文档、英文整合文档、中文整合文档，浏览器支持、来自 css88 的文档 官方建议 IE 6-8 使用 1.12.4 |
| Angular、中文版 AngularJS (version 1.x) | 一套框架，多种平台同时适用手机与桌面 | MVC 架构，使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易 |
| Vue.js | 是一套用于构建用户界面的渐进式框架。 | |
| Bootstrap、中文版 | 简洁、直观、强悍的前端开发框架 | 英文文档、v3中文文档、v2中文文档、视频教程，主题和模板 |
| jQuery UI | 为 jQuery 提供更丰富的功能 | 示例：Datepicker、Color Animation、Shake Effect |
| 功能 | ||
| jQuery File Upload | jQuery 文件上传 | 英文文档 |
| jQuery Cookie | 读取、写入和删除 cookie | 浏览器支持，文档 |
| json2.js | json 操作库 | 已弃用，旧 IE 用 jQuery 的 parseJSON，HTML 5 用 JSON.parse |
| Lightbox | 老牌图片浏览插件 推荐使用更强大的 Viewer.js | |
| Swiper、中文版 | 最现代的移动触摸滑块（Most Modern Mobile Touch Slider） | 英文文档，中文文档，旧浏览器支持版本：2.x.x，Swiper 2 英文文档，中文文档 |
| jquery-cropper | 图片裁剪 | |
| FastClick | 用于消除手机浏览器上触摸事件触发之间的 300 毫秒延迟 | 用法，不应用的场景 |
| PACE | 页面加载进度条 | 文档，IE8+ |
| toastr | jQuery 通知 | 文档 |
| Autosize | 一款小巧的，可自动调整 textarea 高度的独立脚本 | IE9+ |
| X-editable | 允许您在页面上创建可编辑元素 | 文档，Demo |
| select2 | 一款提供搜索过滤、自定义样式的下拉框插件 | |
| jQuery Tags Input | 标签输入框 | 用法 |
| Viewer.js | 图片浏览插件 | GitHub（viewerjs）、GitHub（jquery-viewer） jquery-viewer 是 viewerjs 的 jQuery 插件，即在 jQuery 环境中要同时引用这两个脚本。 |
| PDF.js | A general-purpose, web standards-based platform for parsing and rendering PDFs. | |
| 编辑器 | ||
| UEditor | 百度在线编辑器 | GitHub 下载、文档、ASP.NET 部署教程 |
| 日期时间 | ||
| bootstrap-datepicker | Bootstrap 日期选择器 | Online Demo |
| DateTimePicker | 日期时间选择 | |
| MultiDatesPicker | 多日期选择 | |
| FullCalendar | 日历日程事件工作表 | IE 9+, jQuery 2.0.0+ |
| TimeTo | 计时、倒计时 | |
| 图表 | ||
| D3.js | D3.js 是基于数据驱动文档工作方式的一款 JavaScript 函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一。 | |
| Highcharts、中文版 | 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库 | 文档 |
| ECharts | 百度图表控件 | |
| AntV | 来自蚂蚁金服的专业、简单、无限可能的可视化解决方案 G2 - 专业易用的可视化类库 G2-mobile - 移动端高性能可视化类库 G6 - 关系图可视化类库 | 流程图, 关系图, 可视化规范, 地图, 河流图, 力导图, 网络图, UML图, 业务流程图, 时序图 |
| SyntaxHighlighter | 功能齐全的代码语法高亮插件（JS） | |
| 动态排名数据可视化 | 将历史数据排名转化为动态柱状图图表 开源代码，非插件，修改使用 | GitHub、视频教程、EV录屏、网页示例、视频效果 |
| 图标 | ||
| Font Awesome | 完美的图标字体 | IE 8+，v3.2.1 支持 IE 7，进阶用法（定宽/边框/动画/旋转/叠加） |
| Glyphicons | 图标字体 | 作为 Bootstrap 组件 |
| Iconfont | 阿里巴巴矢量图标库 | 用户可以自定义下载多种格式的 icon，也可将图标转换为字体，便于前端工程师自由调整与调用 |
| UI 框架 | ||
| WeUI | 同微信原生视觉体验一致的基础样式库 | Demo、Wiki |
| Apple UI Design Resources | 苹果用户界面设计资源 | |
Android 系统要求每一个安装进系统的应用程序都是经过数字证书签名的，数字证书的私钥则保存在程序开发者的手中。Android 系统将数字证书用于在应用程序的作者和应用程序之间建立信任关系，但并不用于决定最终用户可以安装哪些应用程序。这个数字证书并不需要权威的数字证书签名机构认证，它只是用于应用程序包自我认证的。
Android 数字证书包含以下几个要点：
（1）所有的应用程序都必须有数字证书，Android 系统不会安装一个没有数字证书的应用程序
（2）Android 程序包使用的数字证书可以是自签名的，不需要一个权威的数字证书机构签名认证
（3）如果要正式发布一个 Android 应用程序安装包，必须使用一个合适的私钥生成的数字证书来给程序签名，而不能使用如 ant 工具等生成的调试证书来发布。
（4）数字证书包含应用程序所有者姓名，所在组织，国家，证书创建时间，证书有效期等信息。
（5）Android 使用标准的 Java 工具 Keytool and Jarsigner 来生成数字证书，并给应用程序包签名。
（6）Android 数字证书跟包名无关，多个不同包名的应用程序安装包可使用同一个数字证书对其进行签名。
（7）Android 系统不会覆盖安装运行包名相同，签名证书不同的两个安装包。
注意：如果您的 App 已经上线 Android 市场，或者已经正式发布，有用户已经正式使用了，切勿再更换签名证书，否则，App 在自动更新覆盖安装升级时，Android 系统将会认为新签名证书的 App 安装包是“非法签名”的 App，而不予安装，导致更新失败，流失用户。
jQuery 请求代码：
$.ajax({
url: "xxxxxx",
//method: "GET", // 默认 GET（当 dataType 为 jsonp 时此参数无效，始终以 GET 方式请求）
data: $('#myForm').serialize(), // 要传递的参数，这里提交表单 myForm 的内容
dataType: "jsonp"
//, jsonp: "callback" // 请求中的回调函数的参数名，默认值 callback
//, jsonpCallback: "jQuery_abc" // 本地回调函数名，不指定则随机
})
.done(function () {
alert("done");
if (true) {
$('#myForm')[0].reset();
}
})
.fail(function () { alert("fail"); })
.always(function () { alert("complete"); });
ASP.NET 处理代码：
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(new { result = new { success = true, msg = "成功" } });
if (!string.IsNullOrWhiteSpace(Request["callback"])
&& Regex.IsMatch(Request["callback"], @"[_$a-zA-Z][$\w]*"))
{
Response.ContentType = "application/javascript; charset=utf-8";
Response.Write(json + Request["callback"] + "(" + json + ")");
}
else
{
Response.ContentType = "application/json; charset=utf-8";
Response.Write(json);
}
Response.End();
1. 跨子域的iframe高度自适应
2. 完全跨域的iframe高度自适应
同域的我们可以轻松的做到
1. 父页面通过iframe的contentDocument或document属性访问到文档对象，进而可以取得页面的高度，通过此高度值赋值给iframe tag。
2. 子页面可以通过parent访问到父页面里引入的iframe tag，进而设置其高度。
但跨域的情况则不允许对子页面或父页面的文档进行访问（返回undefined），所以我们要做的就是打通或间接打通这个壁垒。
一、跨子域的iframe高度自适应
比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html'，这种跨子域的页面
3.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
4.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
可以看到与上一篇对比，只要在两个页面里都加上document.domain就可以了
二、完全跨域的iframe高度自适应
分别有以下资源
- 页面 A：http://snandy.github.io/lib/iframe/A.html
- 页面 B：http://snandy.github.io/lib/iframe/B.html
- 页面 C：http://snandy.jd-app.com
- D.js：http://snandy.github.io/lib/iframe/D.js
这四个资源有如下关系
1. A里嵌入C，A和C是不同域的，即跨域iframe
2. C里嵌入B，C和B是不同域的，但A和B是同域的
3. C里嵌入D.js，D.js放在和A同域的项目里
通过一个间接方式实现，即通过一个隐藏的B.html来实现高度自适应。
A.html
嵌入页面C: http://snandy.jd-app.com
|
1 2 3 4 5 6 7 8 9 10 |
|
B.html
嵌入在C页面中，它是隐藏的，通过parent.parent访问到A，再改变A的iframe(C.html)高度，这是最关键的，因为A，B是同域的所以可以访问A的文档对象等。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
C.html
嵌入在A中，和A不同域，要实现C的自适应，C多高则A里的iframe就设为多高。C里嵌入B.html 和 D.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
D.js
在页面C载入后计算其高度，然后将计算出的height赋值给C里引入的iframe（B.html）的src
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
线上示例：http://snandy.github.io/lib/iframe/A.html
Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images!
Things to Consider When Adding Retina Images
The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. If you’re creating something that will be used more often on a WI-FI connection or have an application that is deserving of the extra wait for hi-res graphics these steps below will help you target only hi-res capable devices.
Simple Retina Images
The basic concept of a Retina image is that your taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and setting the image to fill half of that space (100 x 100 pixels). This can be done manually by setting the height and width in HTML to half the size of your image file.
<img src="my200x200image.jpg" width="100" height="100">
If you’d like to do something more advanced keep reading below for how you can apply this technique using scripting.
Creating Retina Icons for Your Website
When users add your website or web app to their homescreen it will be represented by an icon. These sizes for regular and Retina icons (from Apple) are as follows:
| iPhone | 57 x 57 |
|---|---|
| Retina iPhone | 114 x 114 |
| iPad | 72 x 72 |
| Retina iPad | 144 x 144 |
For each of these images you create you can link them in the head of your document like this (if you want the device to add the round corners remove -precomposed):
<link href="touch-icon-iphone.png" rel="apple-touch-icon-precomposed" />
<link href="touch-icon-ipad.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href="touch-icon-iphone4.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href="touch-icon-ipad3.png" rel="apple-touch-icon-precomposed" sizes="144x144" />
If the correct size isn’t specified the device will use the smallest icon that is larger than the recommended size (i.e. if you left out the 114px the iPhone 4 would use the 144px icon).
Retina Background Images
Background images that are specified in your CSS can be swapped out using media queries. You’ll first want to generate two versions of each image. For example ‘bgPattern.png’ at 100px x 100px and ‘bgPattern@2x.png’ at 200px x 200px. It will be useful to have a standard naming convention such as adding @2x for these retina images. To add the new @2x image to your site simply add in the media query below (You can add any additional styles that have background images within the braces of the same media query):
.repeatingPattern {
background: url(../images/bgPattern.png) repeat;
background-size: 100px 100px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.repeatingPattern {
background: url(../images/bgPattern@2x.png) repeat;
}
}
JavaScript for Retina Image Replacement
For your retina images that aren’t backgrounds the best option seems to be either creating graphics with CSS, using SVG, or replacing your images with JavaScript. Just like the background images, you’ll want to create a normal image and one ‘@2x’ image. Then with JavaScript you can detect if the pixel ratio of the browser is 2x, just like you did with the media query:
if (window.devicePixelRatio == 2) {
//Replace your img src with the new retina image
}
If you’re using jQuery you could quickly replace all your images like this very basic example below. It’s a good idea to add a class to identify the images with hi-res versions so you don’t replace any others by mistake. I’ve added a class=”hires” for this example. Also make sure you have the standard (non-retina) image height and width set in the HTML:
<img class="hires" alt="" src="search.png" width="100" height="100" />
<script type="text/javascript">
$(function () {
if (window.devicePixelRatio == 2) {
var images = $("img.hires");
// loop through the images and make them hi-res
for(var i = 0; i < images.length; i++) {
// create new image name
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += "@2x" + imageType;
//rename image
images[i].src = imageName;
}
}
});
</script>
Server-Side Retina Images
If you’d like to implement a server-side retina image solution, I recommend checking out Jeremy Worboys’ Retina Images (which he also posted in the comments below). His solution uses PHP code to determine which image should be served. The benefit of this solution is that it doesn’t have to replace the small image with the retina one so you’re using less bandwidth, especially if you have lots of images that you’re replacing.
Website Optimization for Retina Displays
If you’re looking for additional information on creating Retina images, I’ve recently had a short book published called Website Optimization for Retina Displays that covers a range of related topics. It contains some of what is above, but also includes samples for many different situations for adding Retina images. It explains the basics of creating Retina images, backgrounds, sprites, and borders. Then it talks about using media queries, creating graphics with CSS, embedding fonts, creating app icons, and more tips for creating Retina websites.
SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server.
一般来说，我们在写博客或做网站时都需要对插图做一些效果，比如增加阴影、图片圆角、倒映等等。这些效果一般可以用3个方法实现，一是用PS实现对图片进行修改，二是使用CSS，三是使用JavaScript。使用PS会破坏原图，而且要花费一定的时间。Netzgesta上有很多实现图片特效的JavaScript提供下载，很多效果都是相当漂亮的。
1、水倒映
这个js将为图片添加水倒映的特效，时下web2.0站点很喜欢这种效果。
如果你喜欢在线生成水倒映效果，可以参考这里。
2、圆角+阴影
或许你记得用RoundPic能在线生成圆角图片，事实上用这个js也可以实现效果。
3、高光圆角阴影
这个效果可以用来做按钮。是我最喜欢的特效之一。
4、斜光阴影效果
和上面的效果看起来非常相似，但也有不同的地方。
5、相框效果
如果你在做图片博客，可以你会喜欢这个js，使用后博客文章内的图片都有相框的效果。
6、黑色相框
不喜欢白色没有立体感的相框，那试试这个立体感充足的js效果吧。
7、放大镜
一个很有趣的js，实现放大镜效果。记得在去年Google开发者日的时候，某个主讲人也有说到在GMaps里实现放大镜的有趣效果。具体效果点击这里。
8、菲林效果
如果你在写一个电影博客，这个效果或许会让你喜欢。
9、花边效果
很简单的图片花边效果。
10、翻页效果
翻页效果是很常见的，Google一下你会发现有很多相关的教程，如果你不想花时间去学，直接下载这个js吧。
安装使用方法：
将下载的压缩包解压之后上传到网站空间，然后在需要显示效果的head里添加代码，比如高光阴影效果Glossy，添加的代码是：
<script type="text/javascript" src="glossy.js"></script>
对于Wordpress，可以在header.php里添加。如果只要求文章页里出现效果，也可以考虑在single.php里添加。
然后，在想要显示特效的图片的<img>标记里添加：
class="glossy"
这样效果就出现了。
其它效果添加方法类似。
via BlogOhblog。
下载地址（eMule）:http://www.verycd.com/topics/69331/
中文名称：张孝祥IT课堂－JavaScript教学视频录像
地区：大陆
语言：普通话
简介：
张孝祥IT课堂－JavaScript教学视频录像
隆重发行
经过张孝祥老师三个月的潜心制作，《张孝祥IT课堂－JavaScript教学视频录像》终于面世了。新版的《张孝祥IT课堂－JavaScript教学视频录像》 秉承《张孝祥IT课堂－Java教学视频录像（高级篇）》身临其境的手把手教学风格，并且采用了高效数字编码算法和全新的多媒体播放器，图象更清晰、操作更方便，最直观地让学员身临其境地学习和感受编程的乐趣，更能体会张孝祥老师授课的震撼力和穿透力。
光盘的内容:本教程结合大量应用实例，详细地讲解了HTML语言、CSS、JavaScript、DOM对象模型编程、正则表达式，并介绍了网页脚本编程的其它相关技术和知识，例如，VBScript、NetScape控件、ActiveX控件、Java Applet小程序等。本书力求在不减少知识信息量的情况下，能够把书写薄，同时又能把问题说透，让读者能够迅速上手，尽最大可能地扩展读者的知识面，启发读者自我思考和学习的能力，让读者感受到技术学习所带来的快乐。本教程主要面向网站开发人员，也适于普通前端网页设计人员阅读。考虑到适应实际工作中的不仅仅需要编程语言本身，还要有一些计算机相关的周边知识的特点，所以，本教程从原理和细节上着手,让读者对一些专业术语透彻理解，尽最大程度扩展读者的知识面。本教程强调用最短的时间和最浅显易懂的例子说明问题，启发读者思考和自我解决问题的能力，以知识够用为原则，重视学会的本质，能让读者做一些基本的应用开发，碰到新问题时，能自己查阅资料独立解决，就叫学会，没有任何人能掌握一门学科的每个细节。
JavaScript教学视频录像总时间为40小时左右，为了让用户了解到更为精确的信息，本站以后不再使用光盘的张数来作为产品的度量单位，而改用视频教程的时间来度量。
说明：
javascript教程进行了部分加密，加密部分在未注册的计算机上不能播放，用户需要向我们索取注册码后对计算机进行注册，每台计算机的注册码都不一样。 如果计算机的CPU识别信息、硬盘序列号、硬盘分区、内存等这四个内容之一发生了变化，就可能导致软件认为是在另外一台计算机上运行，为此，我们可以为每个用户从购买之日算起的每年都提供三个注册码。 我们每年为用户提供三个注册码，主要是为了方便用户硬件升级或更改后能继续使用，希望大家不要随意替他人索取注册码，以免影响自己使用。
由于加密后的视频具有对计算机资源要求高、启动时间长等缺点，所以，本套视频教程采用了部分视频片段加密、部分视频片段不加密的混合方式发行。
如何理解JavaScript、Java、Jsp、J2ee之间的关系与区别
很多初学习者对JavaScript、Java、Jsp、J2ee之间的关系与区别总是感到很困惑，为了帮助大家快速理解几者之间的关系，我们进行了如下解释说明：
1. JavaScript用于编写嵌入在网页文档中的程序,它由浏览器负责解释和执行，可以在网页上产生动态的显示效果和实现与用户交互的功能，譬如，让一串文字跟着鼠标移动，让一个图标在网页漂浮移动，验证用户输入的信用卡号的格式正确与否，等等特效网页功能。
2. Java则是一种基础性的语言，学习jsp,j2ee都要有java的基础。无论你是想成为诗人，还是小说家，还是散文家，甚至就是当记者，你都要学习语文吧，Java就相当于语文、Jsp、J2ee则相当于小说、散文等。学好了语文，你能否就会有一份好的职业呢？不见得吧，但至少机会要多多了，语文学得越好，就更容易成为小说家，或是记者等等了。要想成为记者、散文家等等，没有语文是怎么都不行的。
3. jsp用于让www服务器产生出内容可以变化的网页文档和对用户提交的表单数据进行处理，例如，显示留言内容，留言内容总是在增加的，所以，传递给用户浏览器的网页文件内容是需要改变的，这就是jsp来实现的。将用户留言插入到数据库中，也是jsp来实现的。
4. j2ee用于开发大型的商业系统，例如，你在各个银行之间的取款，存款，银行之间要互通有无，执行存取款的记录操作，还要进行安全性检查，不能谁都可以来查帐，还要考虑网络断线等问题。使用j2ee，你就不用编写这些底层的细节程序代码了，而将精力集中到应用的业务流程设计上。