//日期的正则表达式 var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/; var regExp = new RegExp(reg); if(!regExp.test(value)){ alert("日期格式不正确，正确格式为：2014-01-01"); return; } //时间的正则表达式 var reg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/; var regExp = new RegExp(reg); if(!regExp.test(value)){ alert("时间格式不正确，正确格式为：12:00:00"); return; } //日期+时间的正则表达式 var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/; var regExp = new RegExp(reg); if(!regExp.test(value)){ alert("时间格式不正确,正确格式为: 2014-01-01 12:00:00 "); return; } }); from:https://www.cnblogs.com/zhilongblogs/p/4074162.html
View DetailsReferrer的重要性 HTTP请求中有一个referer的报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，我们可以通过document.referrer来获取同样的信息。通过这个信息，我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说，是非常重要的，这可以告诉我们不同渠道带来的流量的分布情况，还有用户搜索的关键词等，都是通过分析这个referrer信息来获取的。 但是，出于各种各样的原因，有时候Javascript中读到的referrer却是空字符串。下面总结一下哪些情况下会丢失referrer。 修改Location对象进行页面导航 Location对象是一个用于页面导航的非常实用的对象。因为他允许你只变更Url的其中一部分。例如从cn域名切换到com域名，其他部分不变： 1 window.location.hostname = "example.com"; 但是，通过修改Location进行页面导航的方法，会导致在IE下丢失Referrer。 IE5.5+ 下返回空字符串 Chrome3.0+，Firefox3.5，Opera9.6，Safari3.2.2均正常返回来源网页 window.open方式打开新窗口 示例： 1 <a href="#" onclick="window.open('http://www.google.com')">访问Google</a> 点击此链接会在新窗口打开Google网站，我们在地址栏中输入以下js代码就可以看到发送的referrer了。 1 javascript:alert(document.referrer) 测试结果： IE5.5+ 下返回空字符串 Chrome3.0+，Firefox3.5，Opera9.6，Safari3.2.2均正常返回来源网页 如果是同个域名下通过此方式跳转的，那么我们可以通过访问windoww.opener对象去获取丢失的referrer信息。代码如下： <script type="text/javascript"> var referrer = document.referrer; if (!referrer) { try { if (window.opener) { // IE下如果跨域则抛出权限异常 // Safari和Chrome下window.opener.location没有任何属性 referrer = window.opener.location.href; } } catch (e) {} } </script> 跨域的话则没辙了~ 鼠标拖拽打开新窗口 鼠标拖拽是现在非常流行的用户习惯，很多浏览器都内置或者可以通过插件的方式来支持鼠标拖拽式浏览。但是通过这种方式打开的页面，基本全都丢失referrer。并且，这种情况下，也无法使用window.opener的方式去获取丢失的referrer了。 已测试： Maxthon2.5.2，Firefox的FireGesture插件，Chrome3.0+，Opera9.6，Safari3.2。 点击Flash内部链接 点击Flash上到达另外一个网站的时候，Referrer的情况就比较杂乱了。 IE下，通过客户端Javascript的document.referrer读取到的值是空的，但是如果你使用流量监控软件看一下的话，你会发现，实际上HTTP请求中的Referer报文头却是有值的，这可能是IE实现的Bug。同时，这个值指向的是Flash文件的地址，而不是来源网页的地址。 Chrome4.0下点击Flash到达新窗口之后，Referrer也是指向的Flash文件的地址，而不是源网页的地址。 Chrome3.0和Safari3.2是一样的，都是会丢失Referrer信息。 Opera则和Firefox一样，Referrer的值都是来源网页的地址。 HTTPS跳转到HTTP 从HTTPS的网站跳转到HTTP的网站时，浏览器是不会发送referrer的。这个各大浏览器的行为是一样的。 例如，我们在HTTPS下使用Google Reader或是Gmail的时候，点击某个链接去到另外一个网站，那么从技术上来说，这样的访问和用户直接键入网址访问是没有什么分别的。 Referrer丢失对于广告流量监控的影响 Referrer如果丢失，Web Analytics就会丢掉很重要的一部分信息了，特别对于广告流量来说，就无法知道实际来源了。目前国内好多用了Google Adsense广告的网站，都使用了window.open的方式来打开广告链接，因此IE下会丢失Referrer，而我们知道，IE是目前市场份额最大的浏览器，因此其影响是很大的。很多流量统计工具会因此将这部分流量归入“直接流量”，和用户直接键入网址等价了。 对于这样的情况，需要让广告投放者在投放广告的时候，给着陆页面的Url加上特定的跟踪参数。 例如，某个Flash广告，点击之后到达的网址是http://www.example.com/，为了监控此流量是从哪个渠道过来的，我们可以修改此投放的着陆Url，改成http://www.example.com/?src=sina，类似这种方式，然后在着陆页面中使用Javascript代码提取此src参数，这样就可以得到广告来源信息。 在投放Google Adwords的时候，后台系统有一个“自动标记”的选项，当启用此选项的时候，Google在生成所有广告的着陆页面Url的时候，就会自动加上一个gclid的参数，这个参数能够将Google Analytics后台和Adwords广告后台的数据进行整合。这样就可以知道广告流量对应于哪个广告系列，哪个广告来源和广告关键词等信息了。和上面提到的思路其实是类似的。只不过Google自动帮你做了Url的修改了而已。 IE下referer为空的解决办法 在IE下采用 window.location.href方式跳转的话，referer值为空。而在标签里面的跳转的话 referer就不会空。所以，通过以下代码就可以解决这个IE问题 function gotoUrl(url){ if(window.VBArray){ var gotoLink = document.createElement('a'); gotoLink .href = url; document.body.appendChild(gotoLink); […]
View Details概述 Notification API是浏览器的通知接口，用于在用户的桌面（而不是网页上）显示通知信息，桌面电脑和手机都适用，比如通知用户收到了一封Email。具体的实现形式由浏览器自行部署，对于手机来说，一般显示在顶部的通知栏。 如果网页代码调用这个API，浏览器会询问用户是否接受。只有在用户同意的情况下，通知信息才会显示。 下面的代码用于检查浏览器是否支持这个API。
|
1 2 3 4 5 |
if (window.Notification) { // 支持 } else { // 不支持 } |
目前，Chrome和Firefox在桌面端部署了这个API，Firefox和Blackberry在手机端部署了这个API。
|
1 2 3 4 5 |
if(window.Notification && Notification.permission !== "denied") { Notification.requestPermission(function(status) { var n = new Notification('通知标题', { body: '这里是通知内容！' }); }); } |
上面代码检查当前浏览器是否支持Notification对象，并且当前用户准许使用该对象，然后调用Notification.requestPermission方法，向用户弹出一条通知。 Notification对象的属性和方法 Notification.permission Notification.permission属性，用于读取用户给予的权限，它是一个只读属性，它有三种状态。 default：用户还没有做出任何许可，因此不会弹出通知。 granted：用户明确同意接收通知。 denied：用户明确拒绝接收通知。 Notification.requestPermission() Notification.requestPermission方法用于让用户做出选择，到底是否接收通知。它的参数是一个回调函数，该函数可以接收用户授权状态作为参数。
|
1 2 3 4 5 6 7 |
Notification.requestPermission(function (status) { if (status === "granted") { var n = new Notification("Hi!"); } else { alert("Hi!"); } }); |
上面代码表示，如果用户拒绝接收通知，可以用alert方法代替。 Notification实例对象 Notification构造函数 Notification对象作为构造函数使用时，用来生成一条通知。
|
1 |
var notification = new Notification(title, options); |
Notification构造函数的title属性是必须的，用来指定通知的标题，格式为字符串。options属性是可选的，格式为一个对象，用来设定各种设置。该对象的属性如下： dir：文字方向，可能的值为auto、ltr（从左到右）和rtl（从右到左），一般是继承浏览器的设置。 lang：使用的语种，比如en-US、zh-CN。 body：通知内容，格式为字符串，用来进一步说明通知的目的。。 tag：通知的ID，格式为字符串。一组相同tag的通知，不会同时显示，只会在用户关闭前一个通知后，在原位置显示。 icon：图表的URL，用来显示在通知上。 上面这些属性，都是可读写的。 下面是一个生成Notification实例对象的例子。
|
1 2 3 4 5 6 |
var notification = new Notification('收到新邮件', { body: '您总共有3封未读邮件。' }); notification.title // "收到新邮件" notification.body // "您总共有3封未读邮件。" |
实例对象的事件 Notification实例会触发以下事件。 show：通知显示给用户时触发。 click：用户点击通知时触发。 close：用户关闭通知时触发。 error：通知出错时触发（大多数发生在通知无法正确显示时）。 这些事件有对应的onshow、onclick、onclose、onerror方法，用来指定相应的回调函数。addEventListener方法也可以用来为这些事件指定回调函数。
|
1 2 3 |
notification.onshow = function() { console.log('Notification shown'); }; |
close方法 Notification实例的close方法用于关闭通知。
|
1 2 3 4 5 6 7 8 9 |
var n = new Notification("Hi!"); // 手动关闭 n.close(); // 自动关闭 n.onshow = function () { setTimeout(n.close.bind(n), 5000); } |
上面代码说明，并不能从通知的close事件，判断它是否为用户手动关闭。 本篇源自 《阮一峰老师的javascript篇》小篇只是在这里传播一下，绝无抄袭之意，多谢关注~ from:https://blog.csdn.net/u010081689/article/details/51004681
View Details所谓的瀑布流效果就正如轻图床首页效果那样，多个内容相近的栏目紧密排列，尽量使到栏目间的间隙最小（即流体布局），并且随着页面滚动条向下滚动，新的数据会追加至当前页面的尾部直到所有数据加载完毕（滚动触发的 Ajax 翻页）。 瀑布流触发分页 这里说一下思路，虽然下面的实例中不能全都用到： 1.当进入屏幕时，判断内容是否为空，如果不为空，开始初始化数据。 2.当往屏幕下拉时，判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和，重新请求接口，即加载数据。 3.当遇到数据超过某个页数时，停止加载或者用分页的形式显示，点击再显示内容。
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
var intf_url="http://jb51.net/intf"; var pathUrl = "http://jb51.net/"; var page=1; var isLoadRB=false; var ul_select=$("#fansList"); var btn_more=$("#loading"); if(ul_select.length <1) return ; var is_more =true; //跨域请求接口 function loadjs(src,callback){ var js= document.createElement('script'); js.src = src; js.onreadystatechange = js.onload =function(){ if(!js.readyState || js.readyState=='loaded' || js.readyState=='complete'){ if(callback){callback()||callback}; } }; js.charset="utf-8"; document.getElementsByTagName('head')[0].appendChild(js); } //回调函数 function fill(data){ if(data.pageCount==data.pageNo){ is_more=false;//如果数据全部加载完毕，取消加载 $("#loading").html("加载完毕"); } } //解析接口 function queryIntf(){ var url=page==1?intf_url+".json":intf_url+"_page"+page+".json"; loadJs(url,callback); } function callback(){ page++; } /*判断是否要加载接口*/ function needtoloadRB(){ var btn_top=btn_more.offset().top; var window_height=$(window).height(); var scroll_Top=$(window).scrollTop(); return btn_top<scroll_Top+window_height?true:false; } $(window).scroll(function(){ var _needload=needtoloadRB(); if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryintf();} }) window.onload = function(){ queryintf(); } |
以上就是比较简单的随着下拉内容不断加载的思路代码。 JSON格式类似于（如果是动态接口，可以通过callback函数，则这里不用加fill()）：
|
1 2 |
fill({"fans":[{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20 }); |
原来静态也可以做接口回调。通过静态处理，则大大缓解了服务器压力和加速生成内容，是大流量网站必备的处理方式。 jQuery的ajax方法实现分页触发瀑布流 1.通过 Ajax 的方式获取下一页的内容 我们需要网页中具有如下 HTML 结构的导航， next_link 为下一页的 url。
|
1 2 3 |
<div id="page_nav"> <a href="next_link">下一页</a> </div> |
相应的 css
|
1 |
#page_nav {clear: both; text-align: center; } |
以下这段代码为通过 Ajax 的方式获取下一页的内容，并追加到当前内容的末尾。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
nextHref = $("#next_page a").attr("href"); // 给浏览器窗口绑定 scroll 事件 $(window).bind("scroll",function(){ // 判断窗口的滚动条是否接近页面底部 if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) { // 判断下一页链接是否为空 if( nextHref != undefined ) { // Ajax 翻页 $.ajax( { url: $("#page_nav a").attr("href"), type: "POST", success: function(data) { result = $(data).find("#thumbs .imgbox"); nextHref = $(data).find("#page_nav a").attr("href"); $("#page_nav a").attr("href", nextHref); $("#thumbs").append(result); } }); } else { $("#page_nav").remove(); } } }); |
2.对追加的内容进行流体布局 熟悉 jQuery 的童鞋应该会了解 js 对于通过 Ajax 方式插入到页面中的元素并不起作用，但在这里并不需要作出如使用 live() 等处理，因为 Masonry 已经在内部作出类似的处理并且默认起效，因此只需在 Ajax 成功执行后的回调函数中调用 masonry() 方法即可。
|
1 2 3 4 |
$newElems = $result; $newElems.imagesLoaded(function(){ $container.masonry( 'appended', $newElems, true ); }); |
3.对 Ajax 翻页过程作出修饰 在上面的过程中已经有完整的瀑布流布局，但是翻页过程中并没有任何提示，而且直接插入多张图片可能会影响用户体验，因此需要对翻页过程作出一些修饰，下面给出完整代码。 这里需要增加一个如下的元素，用于提示正在加载新内容或提示已到了最后一页。
|
1 2 3 |
<div id="page_loading"> <span>给力加载中……</span> </div> |
相应的 css
|
1 |
#page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px; padding: 10px; position: absolute; bottom: -50px; left: 330px; } |
下面是完整的 Ajax 翻页代码
|
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 29 30 31 32 33 34 35 36 37 38 |
nextHref = $("#next_page a").attr("href"); // 给浏览器窗口绑定 scroll 事件 $(window).bind("scroll",function(){ // 判断窗口的滚动条是否接近页面底部 if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) { // 判断下一页链接是否为空 if( nextHref != undefined ) { // 显示正在加载模块 $("#page_loading").show("slow"); // Ajax 翻页 $.ajax( { url: $("#page_nav a").attr("href"), type: "POST", success: function(data) { result = $(data).find("#thumbs .imgbox"); nextHref = $(data).find("#page_nav a").attr("href"); $("#page_nav a").attr("href", nextHref); $("#thumbs").append(result); // 把新的内容设置为透明 $newElems = result.css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $container.masonry( 'appended', $newElems, true ); // 渐显新的内容 $newElems.animate({ opacity: 1 }); // 隐藏正在加载模块 $("#page_loading").hide("slow"); }); } }); } else { $("#page_loading span").text("木有了噢，最后一页了！"); $("#page_loading").show("fast"); setTimeout("$('#page_loading').hide()",1000); setTimeout("$('#page_loading').remove()",1100); } } }); |
from:http://www.jb51.net/article/84888.htm
View Details微信内置浏览器（WebView）中特有的javascript API（javascript Interface），随着微信官方的调整，部分API已经不能直接使用，比如类似直接分享到朋友圈WeixinJSBridge.invoke(shareTimeline,data,callback) 这样的功能，直接调用，会得到一个访问拒绝的response
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function WeiXinShareBtn() { if (typeof WeixinJSBridge == "undefined") { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } alert("请先通过微信搜索 wow36kr 添加36氪为好友，通过微信分享文章 "); } else { WeixinJSBridge.invoke('shareTimeline', { "title": "36氪", "link": "http://www.36kr.com", "desc": "关注互联网创业", "img_url": "http://www.36kr.com/assets/images/apple-touch-icon.png" }); } } |
此方法已过时，被微信禁用了。只能用微信官方的接口 1、前台脚本
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<script src="../Scripts/jquery-1.10.2.js"></script> <script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script> <script> wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '<%=appid%>', // 必填，公众号的唯一标识 timestamp: '<%=timestamp%>', // 必填，生成签名的时间戳 nonceStr: '<%=nonce%>', // 必填，生成签名的随机串 signature: '<%=signature%>',// 必填，签名，见附录1 jsApiList: ["checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 //当前客户端版本是否支持指定JS接口,分享到朋友圈,分享给朋友 }); wx.ready(function () { wx.checkJsApi({ jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2, success: function (res) { alert(JSON.stringify(res)); // 以键值对的形式返回，可用的api值true，不可用为false // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } }); //朋友圈 wx.onMenuShareTimeline({ title: '春天里的健康', // 分享标题 desc: '春天里的健康春天里的健康春天里的健康', // 分享描述 link: '<%=thisUrl%>', // 分享链接 imgUrl: 'https://imgsa.baidu.com/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=c31e0863bf315c60579863bdecd8a076/4034970a304e251fb62a408ea486c9177e3e53e2.jpg', success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); //朋友 wx.onMenuShareAppMessage({ title: '春天里的健康', // 分享标题 desc: '春天里的健康春天里的健康春天里的健康', // 分享描述 link: '<%=thisUrl%>', // 分享链接 imgUrl: 'https://imgsa.baidu.com/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=c31e0863bf315c60579863bdecd8a076/4034970a304e251fb62a408ea486c9177e3e53e2.jpg', // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 alert("分享成功"); }, cancel: function () { // 用户取消分享后执行的回调函数 alert("取消分享"); } }); }); </script> |
2、后台代码
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
using Senparc.Weixin.MP.Containers; using Senparc.Weixin.MP.Helpers; using System; using System.Collections.Generic; using System.Configuration; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace jkmobile.share { public partial class ReportShare : System.Web.UI.Page { public string appid = "", timestamp="", nonce="",thisUrl="", signature=""; protected void Page_Load(object sender, EventArgs e) { WXShareModel wxmodel = new WXShareModel(); wxmodel = Ge_WXShareModel(); appid = wxmodel.appid; timestamp = wxmodel.timestamp; nonce = wxmodel.nonce; thisUrl = wxmodel.thisUrl; signature = wxmodel.signature; } #region 微信分享 public WXShareModel Ge_WXShareModel() { string APPID = ConfigurationManager.AppSettings["appid"]; string secret = ConfigurationManager.AppSettings["secret"]; WXShareModel fxModel = new WXShareModel(); fxModel.appid = APPID; fxModel.timestamp = JSSDKHelper.GetTimestamp(); fxModel.nonce = JSSDKHelper.GetNoncestr(); fxModel.thisUrl = Request.Url.ToString().Split('#')[0]; fxModel.ticket = JsApiTicketContainer.TryGetJsApiTicket(APPID, secret); //最后一个参数url，必须为当前的网址 var signature = JSSDKHelper.GetSignature(fxModel.ticket, fxModel.nonce, fxModel.timestamp, fxModel.thisUrl); fxModel.signature = signature; return fxModel; } #endregion } public class WXShareModel { /// <summary> /// 公众号的唯一标识 /// </summary> public string appid { get; set; } /// <summary> /// 生成签名的随机串 /// </summary> public string nonce { get; set; } /// <summary> /// 生成签名的时间戳 /// </summary> public string timestamp { get; set; } /// <summary> /// 签名 /// </summary> public string signature { get; set; } public string ticket { get; set; } /// <summary> /// 分享的地址 /// </summary> public string thisUrl { get; set; } } } |
请引用微信官方封装好的dll Senparc.Weixin.dll Senparc.Weixin.MP.dll from:https://blog.csdn.net/lybwwp/article/details/70172232
View Details也谈基于 Node.js 的全栈式开发（基于 Node.js 的前后端分离） 前言 为了解决传统 Web 开发模式带来的各种问题，我们进行了许多尝试，但由于前/后端的物理鸿沟，尝试的方案都大同小异。痛定思痛，今天我们重新思考了“前后端”的定义，引入前端同学都熟悉的 Node.js，试图探索一条全新的前后端分离模式。 随着不同终端（Pad/Mobile/PC）的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对不同的终端开发定制的版本。为了提升开发效率，前后端分离的需求越来越被重视，后端负责业务/数据接口，前端负责展现/交互逻辑，同一份数据接口，我们可以定制开发多个版本。 这个话题最近被讨论得比较多，阿里有些 BU 也在进行一些尝试。讨论了很久之后，我们团队决定探索一套基于 Node.js 的前后端分离方案，过程中有一些不断变化的认识以及思考，记录在这里，也希望看到的同学参与讨论，帮我们完善。 一、什么是前后端分离？ 最开始组内讨论的过程中我发现，每个人对前后端分离的理解不一样，为了保证能在同一个频道讨论，先就什么是”前后端分离”达成一致。 大家一致认同的前后端分离的例子就是 SPA(Single Page Application)，所有用到的展现数据都是后端通过异步接口（AJAX/JSONP）的方式提供的，前端只管展现。 从某种意义上来说，SPA 确实做到了前后端分离，但这种方式存在两个问题： WEB 服务中，SPA 类占的比例很少。很多场景下还有同步/同步+异步混合的模式，SPA 不能作为一种通用的解决方案。 现阶段的 SPA 开发模式，接口通常是按照展现逻辑来提供的，有时候为了提高效率，后端会帮我们处理一些展现逻辑，这就意味着后端还是涉足了 View 层的工作，不是真正的前后端分离。 SPA 式的前后端分离，是从物理层做区分（认为只要是客户端的就是前端，服务器端的就是后端），这种分法已经无法满足我们前后端分离的需求，我们认为从职责上划分才能满足目前我们的使用场景： 前端：负责 View 和 Controller 层。 后端：只负责 Model 层，业务处理/数据等。 为什么去做这种职责的划分，后面会继续探讨。 二、为什么要前后端分离？ 关于这个问题，玉伯的文章《Web 研发模式演变》中解释得非常全面，我们再大概理一下： 2.1 现有开发模式的适用场景 玉伯提到的几种开发模式，各有各的适用场景，没有哪一种完全取代另外一种。 比如后端为主的 MVC，做一些同步展现的业务效率很高，但是遇到同步异步结合的页面，与后端开发沟通起来就会比较麻烦。 AJAX 为主 SPA 型开发模式，比较适合开发 APP 类型的场景，但是只适合做 APP，因为 SEO 等问题不好解决，对于很多类型的系统，这种开发方式也过重。 2.2 前后端职责不清 在业务逻辑复杂的系统里，我们最怕维护前后端混杂在一起的代码，因为没有约束，M-V-C每一层都可能出现别的层的代码，日积月累，完全没有维护性可言。 虽然前后端分离没办法完全解决这种问题，但是可以大大缓解。因为从物理层次上保证了你不可能这么做。 2.3 开发效率问题 淘宝的 Web 基本上都是基于 MVC 框架 webx，架构决定了前端只能依赖后端。 所以我们的开发模式依然是，前端写好静态 demo，后端翻译成 VM 模版，这种模式的问题就不说了，被吐槽了很久。 直接基于后端环境开发也很痛苦，配置安装使用都很麻烦。 为了解决这个问题，我们发明了各种工具，比如 VMarket，但是前端还是要写 VM，而且依赖后端数据，效率依然不高。 另外，后端也没法摆脱对展现的强关注，从而专心于业务逻辑层的开发。 2.4 对前端发挥的局限 性能优化如果只在前端做空间非常有限，于是我们经常需要后端合作才能碰撞出火花，但由于后端框架限制，我们很难使用 Comet、Bigpipe 等技术方案来优化性能。 为了解决以上提到的一些问题，我们进行了很多尝试，开发了各种工具，但始终没有太多起色，主要是因为我们只能在后端给我们划分的那一小块空间去发挥。只有真正做到前后端分离，我们才能彻底解决以上问题。 三、怎么做前后端分离？ 怎么做前后端分离，其实第一节中已经有了答案： 前端：负责 […]
View Details1.页面中添加modal <!-- 模态框（Modal） --> <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="width:900px;"> <div class="modal-content"> //内容动态填充 </div><!-- /.modal-content --> </div><!-- /.modal --> </div> 2.数据格式。页面动态生成a 标签 <a data-toggle=’modal' data-target=’#showModal' onclick=targetto('" + row.id + "')>"+ row.title+"</a>"; 3.单击事件 function targetto(id){ $("#showModal").modal({ remote: "showAction.action?id="+id }); } 4.每次隐藏时，清除数据。确保点击时，重新加载 $("#showModal").on("hidden.bs.modal", function() { $(this).removeData("bs.modal"); }); 5.基于bootstrap3.其他版本，请自己Google，如有雷同,纯属巧合，如有需要，欢迎分享。 from:https://www.cnblogs.com/youmingkuang/p/6214610.html
View Details一、我们讲什么？ 我们讲两个东西： 1、WebGL背后的工作原理是什么？ 2、以Three.js为例，讲述框架在背后扮演什么样的角色？ 二、我们为什么要了解原理？ 我们假定你对WebGL已经有一定了解，或者用Three.js做过了一些东西，这个时候，你可能碰到了这样一些问题： 1、很多东西还是做不出来，甚至没有任何思路； 2、碰到bug无法解决，甚至没有方向； 3、性能出现问题，完全不知道如何去优化。 这个时候，我们需要了解更多。 三、先了解一个基础概念 1、什么是矩阵？ 简单说来，矩阵用于坐标变换，如下图： 2、那它具体是怎么变换的呢，如下图： 3、举个实例，将坐标平移2，如下图： 如果这时候，你还是没有理解，没有关系，你只需要知道，矩阵用于坐标变换。 四、WebGL的工作原理 4.1、WebGL API 在了解一门新技术前，我们都会先看看它的开发文档或者API。 查看Canvas的绘图API，我们会发现它能画直线、矩形、圆、弧线、贝塞尔曲线。 于是，我们看了看WebGL绘图API，发现： 它只能会点、线、三角形？一定是我看错了。 没有，你没看错。 就算是这样一个复杂的模型，也是一个个三角形画出来的。 4.2、WebGL绘制流程 简单说来，WebGL绘制过程包括以下三步： 1、获取顶点坐标 2、图元装配（即画出一个个三角形） 3、光栅化（生成片元，即一个个像素点） 接下来，我们分步讲解每个步骤。 4.2.1、获取顶点坐标 顶点坐标从何而来呢？一个立方体还好说，如果是一个机器人呢？ 没错，我们不会一个一个写这些坐标。 往往它来自三维软件导出，或者是框架生成，如下图： 写入缓存区是啥？ 没错，为了简化流程，之前我没有介绍。 由于顶点数据往往成千上万，在获取到顶点坐标后，我们通常会将它存储在显存，即缓存区内，方便GPU更快读取。 4.2.2、图元装配 我们已经知道，图元装配就是由顶点生成一个个图元（即三角形）。那这个过程是自动完成的吗？答案是并非完全如此。 为了使我们有更高的可控性，即自由控制顶点位置，WebGL把这个权力交给了我们，这就是可编程渲染管线（不用理解）。 WebGL需要我们先处理顶点，那怎么处理呢？我们先看下图： 我们引入了一个新的名词，叫“顶点着色器”，它由opengl es编写，由javascript以字符串的形式定义并传递给GPU生成。 比如如下就是一段顶点着色器代码： 1 2 3 4 attribute vec4 position; void main() { gl_Position = position; } attribute修饰符用于声明由浏览器（javascript）传输给顶点着色器的变量值； position即我们定义的顶点坐标； gl_Position是一个内建的传出变量。 这段代码什么也没做，如果是绘制2d图形，没问题，但如果是绘制3d图形，即传入的顶点坐标是一个三维坐标，我们则需要转换成屏幕坐标。 比如：v(-0.5, 0.0, 1.0)转换为p(0.2, -0.4)，这个过程类似我们用相机拍照。 4.2.2.1、顶点着色器处理流程 回到刚才的话题，顶点着色器是如何处理顶点坐标的呢？ 如上图，顶点着色器会先将坐标转换完毕，然后由GPU进行图元装配，有多少顶点，这段顶点着色器程序就运行了多少次。 你可能留意到，这时候顶点着色器变为： 1 2 3 4 5 attribute vec4 position; uniform mat4 […]
View Details2012年12月12日，【《Web 前端开发人员和设计师必读文章》系列十二】和大家见面了。梦想天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心推荐的文章能够帮助到您。 jQuery 插件和教程 精心挑选：精美的 jQuery 加载动画和进度条插件 精心挑选：10款基于 jQuery 的图片360度旋转插件 精心挑选：几款实用的 jQuery 全景图片展示插件 精心挑选：推荐6套精美的免费 jQuery UI 主题 精心挑选：12款 JavaScript 日历和时间选择插件 精心挑选：12款优秀 jQuery Ajax 分页插件和教程 精心挑选：23款美轮美奂的 jQuery 图片特效插件 精心挑选：10款实用的 jQuery Tab 切换插件和教程 精心挑选：15款优秀 jQuery 文本特效插件和教程 精心挑选：33个优秀的 jQuery 图片展示插件分享 HTML5 & CSS3 应用 Web 前沿：展示一组极其绚丽的 CSS3 效果 未来的Web：让你惊叹的 Chrome 实验项目 推荐十款非常优秀的 HTML5 在线设计工具 35款优秀的基于 HTML5 开发的网页游戏 你可能不知道的5个功能强大的 HTML5 API Web前沿：CSS3 在网页设计中的20佳惊艳应用 Web技术前沿：那些让人惊叹的 CSS3 应用演示 推荐35款非常精致的 CSS3 和 HTML5 网页模板 推荐十款精心挑选的在线 CSS3 代码生成工具 推荐几份能够帮助你学习 CSS3 的实用帮助手册 精美网站模板 推荐10套精美的免费网站后台管理系统模板 12款高质量的免费 HTML 网页模板下载 12款非常漂亮的免费 CSS 网页模板下载 30款精美的国外企业网站模板 PSD 免费下载 分享20款精美的免费 Flash […]
View Details在工作中，我们可能会用到各种交互效果。而这些效果在平常翻看文章的时候碰到很多，但是一时半会又想不起来在哪，所以养成知识整理的习惯是很有必要的。这篇文章给大家推荐10个在 Web 开发中很有用的效果，记得收藏！ 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。 源码下载 在线演示 美！视差滚动在图片滑块中的应用 视差滚动（Parallax Scrolling）已经被广泛应用于网页设计中，这种技术能够让原本平面的网页界面产生动感的立体效果。美女很养眼吧 :) 源码下载 在线演示 网页边栏过渡动画 以细微的过渡动画显示一些隐藏的侧边栏，其余的内容也是。通常侧边栏滑入，把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果。 源码下载 在线演示 三种风格的全屏幻灯片效果 这个幻灯片效果是由四个区域的独立移动构成，通过画面分割，同时显示出新的图片。这里需要组合使用 CSS3 的3D转换、过渡和动画功能。 源码下载 在线演示 使用 CSS3 实现 3D 图片滑块效果 使用 CSS3 的3D变换特性，我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 这篇文章分享的这款 jQuery 立体图片滑块插件，利用了 3D transforms（变换）属性来实现多种不同的效果。 源码下载 在线演示 单元素实现的 CSS 加载进度提示效果 之前的文章个大家分享过各种类型的加载效果（Loading Effects），这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合。这些加载效果都是基于一个 DIV 元素实现的，十分强悍。 源码下载 在线演示 动感的页面加载动画效果 这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。我们将使用 Snap.svg 动画库来实现，因为这个库让我们能够创建复杂的形状和有趣的变形转换效果。 源码下载 在线演示 奇特的网格加载效果 向您展示了如何使用 Masonry 网格砌体插件，结合 CSS 动画重现这种效果。另外在这里，我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用。 源码下载 在线演示 使用 CSS3 制作网格动画效果 今天我们想与大家分享一个小的动画概念。这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的。实现的基本思路是对网格项目进行 3D 旋转，扩展成全屏，并呈现内容。 源码下载 在线演示 超炫的复选框（Checkbox）效果 复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。 源码下载 在线演示 from:http://www.cnblogs.com/lhb25/p/10-useful-web-effect.html
View Details