| <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> |
| width - viewport的宽度 height - viewport的高度
|
| <meta http-equiv="Pragma" content="no-cache"> |
| 清除浏览器中的缓存，它和其它几句合起来用，就可以使你再次进入曾经访问过的页面时，必须从服务端下载最新的内容，达到刷新的效果。 |
| if ($_GET["token"] != undefined && $_GET["token"] != "" && $_GET["token"] !== "undefined" && $_GET["token"] != null) { sessionStorage.setItem("token", $_GET["token"]); window.location.href = "mainpage.html"; } |
| 1.客户端使用用户名跟密码请求登录。 2.服务器收到请求后验证用户名和密码，验证成功之后会签发一个token，发送给客户端。 3.客户端收到token之后放在Cookie或Local Storage里。每次向服务端请求资源的时候就带着服务端签发的Token。 4.服务端收到请求之后，先去验证客户端的token，如果验证成功，就会想客户端返回请求的数据。 |
| $.ajax({ type: type, url: url, contentType: "application/json;charset=utf-8", data: JSON.stringify(data), success:function(), error:function(); |
| contentType决定了你后台servlet的http服务返回到前台的数据类型。设置成json前台返回的数据就是以json格式传输的。 |
| window.location.replace(“x.html”);不会向服务器发送请求的跳转 |
| window.location.href(“x.html”);会向服务器发送请求的跳转 |
| window.history.go(-1)、window.histroy.back()根据服务器记录的请求决定跳转到哪一个页面 |
| Get和Post请求相比，Get更简单也更快，并且在大部分情况下都能用。 |
| 在以下情况中，请使用Post请求： 1.无法使用缓存文件（更新服务器上的文件或数据库） 2.向服务器发送大量数据（Post没有数据限制） 3.发送包含未知字符的用户输入时，POST比GET更加稳定也更加可靠 |
| error: function(XMLHttpRequest, textStatus, errorThrown) { closedLoading(); showAlertMsg("网络连接出错，请刷新重试"); window.history.go(-1); } |
| XMLHttpRequest对象用于和服务器交换数据 XMLHttpRequest.readyState: 状态码 0 － （未初始化）还没有调用send()方法 1 － （载入）已调用send()方法，正在发送请求 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 3 － （交互）正在解析响应内容 4 － （完成）响应内容解析完成，可以在客户端调用了 textStatus错误信息（timeout、error、notmodified、praseerror） errorThrown捕获的错误对象 |
| var pageHeight = $(".page-common").css("height").replace("px", ""); var containerTop = $(".container").css("top").replace("px", ""); var nowpage = Math.abs(Math.round(containerTop / pageHeight)) + 1; |
| replace() 方法用于在字符串中用一些字符替换另一些字符，用后者替换前者。 abs()取绝对值 round() 方法可把一个数字舍入为最接近的整数。 |
| (function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in window ? "orientationchange" : "resize", fn = function() { var width = docEle.clientWidth; width && (docEle.style.fontSize = 40 * (width / 750) + "px"); }; win.addEventListener(evt, fn, false); doc.addEventListener("DOMContentLoaded", fn, false); }(document, window)); |
| 获取当前的屏幕宽度，初始化根元素的字体大小，以rem为单位进行布局，页面中的元素大小会根据元素字体的大小变化而变化。当屏幕为375px，根元素字体大小为20px。 |
| Vue.http.options.emulateJSON = true; |
| 如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以 |
| Vue.http.interceptors.push((request, next) => { request.credentials = true; next(function(response) { if(response.body.errorCode == '10002'){ if (util.ifWeiChat()) { var currHref = encodeURIComponent(window.location.href); window.location.href= domain + 'wechat.php?mod=subscription&action=login&refer=' + currHref; }else{ if (!util.isEmptyObject(window.jsObject)) { window.jsObject.login(); } else { window.location.href = domain + 'member.php?mod=logging&action=login&mobile=2'; } } } }); }); |
| Vue.http.interceptors.push((request, next) => { // ... // 请求发送前的处理逻辑 // ... next((response) => { // ... // 请求发送后的处理逻辑 // ... // 根据请求的状态，response参数会返回给successCallback或errorCallback return response }) })
|
| 单页面程序 |
| 1.页面间可以通过window常量共享数据，不需要额外维护localStorage，session Storage 2.单页面程序解决mobile back回退问题 3.减少数据请求频率，单页面程序不需要每个页面都发送重复的代码到APP，服务器去重复数据。例如applicationSubType，SN |
| Jquery mobile |
| 1.提供一套mobile DOM操作库的同时提供一套mobile UI组件 2.抑郁使用jquery成熟的事件机制 3.缺点是UI组件不容易扩展，并且ui样式老套 |
| AngularJS |
| 1.MVVM框架，提供数据的双向绑定，级数据模型改变自动更新视图，视图改变映射模型数据。 2.强大的路由、模板机制，通过指令构建组件重用。 3.AngularJS Service实现数据持久化和页面解耦 4.AngularJS通过brocast和emit实现事件的订阅、发布模式，通过$q实现Promise异步模式 5.框架较为庞大，digest轮询模式在dom复杂情况下效率不高。 |
| ReactJS |
| 1.着重与view层，UI组件化 2.特有的Virtual Dom，性能高效。React将DOM结构存储在内存中，然后同render（）的返回内容进行比较，计算出需要改动的地方，最后才反应到DOM 3.JSX 4.组件生命周期 |
| RequireJS |
| AMD（异步模块加载），所有的依赖模块都是先执行的，按需加载模块，防止js加载阻塞页面渲染，异步加载html文本 |
| 常用的js类库 |
| Hammer.js mobile的手势判断、点击、滑动、拖动、多点触控 Swiper.js mobile滑块类库 Veclocy.js 高效简单的动画库 GSAP.js基于时间轴的动画库 Echart 强大的图表组件 |
| 通过CSS reset重置浏览器默认样式，使样式表现一致 |
| html,body { margin: 0;padding:0} ol, ul { list-style: none; } button,input,select,textarea { margin: 0; font-size: 100%; font-family: inherit; outline-offset: 0; outline-style: none; outline-width: 0; background-image: none;border:0; } table { border-spacing: 0; border-collapse: collapse; } a,button,:focus,a:focus,button:focus,a:active,a:hover { outline: 0; } *{ -webkit-box-sizing: border-box; box-sizing: border-box; } html, body, div, spanh1, h2, h3, h4, h5, ol, ul, li { margin: 0; padding: 0; border: 0; vertical-align: baseline; font: inherit; font-size: 100%; } |
| outline-offset: length|inherit: outline-offset属性设置轮廓框架在 border 边缘外的偏移 |
| border-collapse:collapse; 设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 |
| -webkit-相关属性 |
| -webkit-user-select 用户将无法在该文本块中开始选择文本 -webkit-text-size-adjust 页面缩放失效 -webkit-tap-highlight 当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色 -webkit-appearance appearance 属性允许您使元素看上去像标准的用户界面元素。 -webkit-touch-callout 当你触摸并按住触摸目标时候，禁止或显示系统默认菜单 -webkit-line-clamp 限制在一个块元素显示的文本的行数。为了实现该效果需要组合其他webkit属性。 display:-webkit-box 必须结合的属性，将对象做为弹性伸缩盒子模型显示。 -webkit-box-orient 必须结合的属性，设置或检索伸缩盒子的子元素排列方式vertical。 text-overflow 可以用来多行文本的情况下，用省略号“ellipsis”隐藏超出范围的文本。 -webkit-input-placeholder（伪类） ::-webkit-input-placeholder{color:#f72109;} .xx ::-webkit-input-placeholder{color:#f72109;} 设置浏览器默认输入框的样式 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果 Auto使用普通滚动 -webkit-transform(-webkit-transform: translate3d(0,0,0) GPU加速)
|
扫一扫
8095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
