前端技术 | 易学教程

LMLPHP官方网站兼博客移动站上线

阅读更多关于 LMLPHP官方网站兼博客移动站上线

LMLPHP官方网站兼博客移动站上线新闻 maybe yes 发表于 2015-01-12 14:32 原文链接 : http://blog.lmlphp.com/archives/60 来自 : LMLPHP后院经过周日的努力，一下午加晚上，LMLPHP 官方网站手机站和 LMLPHP 官方博客手机站正式上线。目前所有页面在 MI2 的自带浏览器，UC浏览器，百度浏览器和 Samsung Galaxy S4 mini 的 QQ 浏览器上显示均正常，效果还算比较满意，毕竟同样的内容要兼容在不同尺寸的设备上显示出来还是有些难度的。在做手机站的时候，站点宽度设置都是100%，基本没有特别指定的宽度，HTML 结构尽量的简单，为的就是最大的兼容。同时也发现了一些问题，就是图片的展示不好弄。在 view-port 声明下，手机站的建设变的简单多了，网站的 PX 单位自然的变成了长度单位，同样的手机尺寸不同的分辨率，声明了 view-port 后一行显示的字数是同样多的，这是本人使用了小米2 和三星 Galaxy S4 mini 进行测试得出的结论。在做移动站的时候，深刻感受到因设备不同网站的功能也会有所不同，所以手机站独立模板才是更好的选择，我个人不建议使用 BootStrap 和一些非常复杂的前端框架来做。如果在页面加载后，计算出手持设备对应的尺寸，然后将文档中图片的

Nodejs下的ES6兼容性与性能分析

阅读更多关于 Nodejs下的ES6兼容性与性能分析

ES6标准发布后，前端人员也开发渐渐了解到了es6，但是由于兼容性的问题，仍然没有得到广泛的推广，不过业界也用了一些折中性的方案来解决兼容性和开发体系问题，但大家仍很疑惑，使用ES6会有哪些兼容性问题。一、Nodejs下ES6兼容性现状之前写了es6通过Babel编译后的在浏览器端的兼容性问题《Babel下的ES6兼容性和规范》，随着范围的扩展，ES6在Nodejs上兼容性也有必要重新梳理下。随着iojs的引入，新版的Nodejs开始原生支持部分ES6的特性，既然ES6在浏览器端使用需要使用babel等编译，在Nodejs总可以放心使用了吧。然而事实并非如此，为此在nodejs端，我也做了特性兼容性研究： ES6新特性在Nodejs下的兼容性列表这里罗列下nodejs支持的新特性，没列出的新特性均为不支持。 https://iojs.org/en/es6.html https://kangax.github.io/compat-table/es6/ ES6特性 Nodejs兼容性 let,const,块 strict模式支持 class类 strict模式支持 Map，Set 和 WeakMap，WeakSet 支持 generators 支持进制转换支持对象字面量扩展支持 promise 支持 String对象新API 支持 symbols 支持

前端数据的双向绑定方法

阅读更多关于前端数据的双向绑定方法

前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-binding)，例如mvvm框架，数据驱动视图，视图状态机等，研究了几个目前主流的数据双向绑定框架，总结了下。目前实现数据双向绑定主要有以下三种。 github演示例子 1、手动绑定比较老的实现方式，有点像观察者编程模式，主要思路是通过在数据对象上定义get和set方法(当然还有其它方法)，调用时手动调用get或set数据，改变数据后出发UI层的渲染操作；以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>data-binding-method-set</title> </head> <body> <input q-value="value" type="text" id="input"> <div q-text="value" id="el"></div> <script> var elems = [document.getElementById('el'), document

My97DatePicker设置日期年月日时分秒格式

阅读更多关于 My97DatePicker设置日期年月日时分秒格式

My97DatePicker设置日期年月日时分秒格式技术 maybe yes 发表于 2015-01-07 18:49 原文链接 : http://blog.lmlphp.com/archives/57 来自 : LMLPHP后院前端 JavaScript 日期插件 My97DatePicker 非常出名。N多年以前我就使用过，当时下载了之后，使用的时候默认是没有小时，分钟，秒之类的，直接是年月日的日期格式，跟一般的日期插件没有什么不同。后来找了文档才知道可以设置日期格式、最大日期限制和最小日期限制等。当我今天再去他们官网下载使用时，发现下载包的Demo中依然没有告诉用户怎么设置日期格式，默认的只显示年月日，不知道他们为什么不稍微写的详细一点，硬是要逼着用户再去官网查看文档。下载包中只有简单的Demo示例如下： <script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script> <input class="Wdate" type="text" onClick="WdatePicker()"> <font color=red><- 点我弹出日期控件</font> 设置日期包含时分秒格式代码示例如下： <script language=

JavaScript获取DOM节点HTML元素CSS样式

阅读更多关于 JavaScript获取DOM节点HTML元素CSS样式

JavaScript获取DOM节点HTML元素CSS样式技术 maybe yes 发表于 2015-01-10 18:07 原文链接 : http://blog.lmlphp.com/archives/59 来自 : LMLPHP后院如何使用 JavaScript 获取某个 DOM 节点下 HTML 元素的 CSS 样式值？使用过 JQuery 的童鞋一定都非常的熟悉，Jquery 提供了非常强大的 CSS 方法，可以很方便的设置和获取元素的 style 属性。某些情况下，我们不能使用 JQuery 时，就必须使用纯 JavaScript 获取元素的 style 属性值。本文将介绍使用纯 JavaScript 获取元素的的样式值。使用 CSS 控制页面的四种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式，下面分别介绍。行内样式(内联样式)即写在 HTML 标签中的 style 属性中控制元素样式，如下代码示例： <div style="width:100px;height:100px;"></div> 内嵌样式即写在 style 标签中，如下代码示例： <style type="text/css"> div{ width:100px; height:100px } </style> 链接式即为用 link 标签引入css文件，如下代码示例： <link href

Ajax跨域原理JQuery之Jsonp使用剖析

阅读更多关于 Ajax跨域原理JQuery之Jsonp使用剖析

Ajax跨域原理JQuery之Jsonp使用剖析技术 maybe yes 发表于 2014-12-27 18:21 原文链接 : http://blog.lmlphp.com/archives/49 来自 : LMLPHP后院有关Ajax技术，对于我们这些经常在互联网打滚的人来说，已经是再熟悉不过了。关于Ajax原理，之前我也研究过，这里顺带解说一番。 JavaScript是一种基于事件的单线程执行脚本语言，要实现Ajax通信，必须先实例化 XMLHttpRequest 对象，然后对该对象的 onreadystatechange 注册事件，然后再执行 open 和 send 方法。一般来说，实现简单的Ajax请求，我们只需要在 readyState 等于 4(请求完成) 之后再进行后续的状态码判断并处理。对于IE浏览器，实现起来稍有不同，IE系列是使用 ActiveXObject 控件来实现异步请求的，不同版本的IE浏览器在写法上稍有不同，因此完整的Ajax类需要对IE系列浏览器做个判断，不过IE11之后已经不再是IE内核了，此是后话。 Ajax技术是遵循同源策略的，所有的浏览器都是如此。试想，如果可以随意请求别的网站的资源，互联网不就乱套了吗。通过安装浏览器插件使用 background 技术也可以实现跨域并与外部进行通信，著名的360网页抢票插件就是这么实现的