发表于
2017-02-10 12:14:05
【转载】下一代Web应用模型：Progressive Web App
发表于
2017-02-05 10:59:21
浅析React之事件系统（一）
大家周末好，2016年的最后几篇文章开始写到了React的一些东西，那么最近就来一些图表君对于React的简单总结和理解，那么今天就开始第一篇，说一说React的事件系统。总览简单来说React实现了一个SyntheticEvent层，所有定义的事件处理器都可以接受到一个SyntheticEvent对象的实例，他是一个跨浏览器的对于原生事件的包装，和原生事件一样有同样的接口，包括stopPropagation()和preventDefault()。合成事件的使用方式在React中不会把所有的事件处理器绑定到相应的真实的DOM节点上，而是使用一个统一的事件监听器，把所有的事件绑定在最外层。当事件发生的时候，首先被这个统一的事件监听器处理，随后找到真正的事件处理函数进行调用，这样是为了提高效率，这是因为在UI系统中，事件处理器越多，那么占据的内存就越大，React的做法是将其简化为一个，这样就大大提高了效率。在之前开发者需要为了优化性能需要自己来优化自己的事件处理器的代码，现在React帮助你完成了这些工作。合成事件的绑定方式说了这么许多理论上的知识，我们来看看合成事件是怎么使用的。bind方法。我们来直接看代码import React, {Component} from 'react';
class EventApp extends Component {
...继续阅读
(6)
发表于
2017-01-20 09:58:04
Kubernetes Dashboard集成Heapster
发表于
2017-01-19 21:36:33
面对火爆的微信小程序，你会卸载原生App吗？
发表于
2017-01-11 10:01:12
rsync 原生无密码，不用服务器SSH通信 自动同步
服务器和客户端机器 以下配置在服务器 增加一个组 groupadd lxfiles 创建一个 srv 的用户 useradd srv -g lxfiles -s /sbin/nologin vi /etc/rsyncd.conf read only = no use chroot = yes uid = srv gid = lxfiles pid file=/var/run/rsyncd.pid log file=/var/log/rsyncd.log [cms] secrets file = /etc/rsyncd.secrets auth …继续阅读→
...继续阅读
(57)
发表于
2017-01-11 03:07:23
体验「微信OS」：我用小程序代替所有原生APP度过了一天
1 月 9 日，微信终于在媒体、开发者的一片歌功颂德中将小程序带到了我们面前。不少人说，有了小程序，很多应用就可以彻底告别卸载，手机的内存得以释放，微信成为微信 OS。于是我尝试了一下，是否真的可以完全只靠微信一个 App 过完一天的生活。不退出微信不回到桌面，锁屏打开就是微信，坚持一天（十二个小时以上）。零碎的其它时间都在刷朋友圈、聊天（包括工作）、查收文档和阅读文章，退出微信界面就算失败。体验过程中也体验到了小程序不太人性化的地方。友情提示：本文非常枯燥，只是自愿作为未来微信治下的一个试验范本供各位观看。总用时：9：09-21：06以下为我目前所有的小程序（没有全部用到）：9：09 起床，发现有人发来微信约我周四晚上的晚饭。我根据对方发过来的大众点评地址，用腾讯地图内置版本查了路线。也可以使用小程序“知了交通”查询。9：38 想起周四可能有事，打开小程序“朝夕日历Pro”，查看对应的具体日期是否有事件冲突。有一个体验很不好的地方，当你在列表里，比如列表较为靠后的位置打开一个小程序，返回列表的时候，该小程序会自动置顶，你得再翻到页面顶端才能再找到该小程序。10：01 打开小程序“饿了么外卖服务”，登录了自己的账户密码后，红包、会员都可以用。我买了一份早餐，只允许微信支付，支付成功后无法发“饿了么红包”。由于是小程序是网页，每一次翻页面查找店面信息的时
...继续阅读
(19)
发表于
2017-01-11 02:38:32
高潮过后，你该了解的小程序应用场景
发表于
2017-01-10 05:05:34
還地於樹的藝術行動 探索台灣自然風景
发表于
2017-01-09 13:25:00
万众瞩目的小程序收到了一波吐槽
发表于
2017-01-09 07:23:10
体验20多款小程序后，我有话说
发表于
2017-01-08 17:49:30
微信小程序今日上线 与原生APP有何不同？
作为备受关注的移动社交应用，微信的一举一动都牵动着众多开发者、内容生产者和网民的神经。从去年11月正式公测到现在，微信小程序的上线时间一直备受外界关注。公测时，小编对其做过介绍，包括如何使用、有何特色等。近日腾讯发出公告，小程序即将于1月9日正式上线，我们来一睹它的“真面目”。之所以没有叫“应用号”，说明小程序只适合部分应用场景，并不能完全替代独立的APP。此外，小程序还有这些特征：小程序的入口不在微信，而是在二维码里，小程序的启动更多是来源于二维码扫描；小程序不需要到应用商店去下载、不需要订阅、不能推送消息；和订阅号的媒体属性不同，由于在传播、分享上存在一定的限制，“小程序”主打服务属性——简单、干净、用完即走是它的天然特征；有了微信的入口加持，可以轻易被用户搜索到，因此使用时，可以在小程序中嵌入最吸引人的功能，借此向APP导入重度用户；小程序更适合低频的应用——它的出现可以大幅降低应用的开发和维护成本。有人可能会认为，小程序类似于经常接触的H5页面，WebApp或手机网站，只要将原有代码稍微改一下，就可以变成微信小程序，其实不是这样的。小程序相当于重新做了一个不同于传统形式的APP，从开发、设计、测试、升级都是单独的一套。微信小程序和云端APP以及轻应用都不同，它更像是微信功能的延伸，更加注重场景化。但从本质上讲，它依旧没有摆脱云端APP以及轻应用所面临的两个问题：基于H5的特
...继续阅读
(7)
发表于
2017-01-07 02:24:42
原生js滚动到底部加载数据 Scrollload.js
初衷如今移动端站点越来越多，滚动到底部加载数据的需求应该非常的常见，即使现在很多pc站点也会有这样的需求，比如百度首页就有。但是我却一直没找到特别好用的插件，基本上的插件都依赖于jquery。我想要的很简单，方便好用可定制体积又小功能又强大的插件。Scrollload.js介绍Scrollload是一个无依赖，体积极小（压缩+gzip后不到2k），可配置性高(可以自定义加载时候动画，加载完后的dom，提前加载的距离)，功能强大（能做到指定容器内的滚动，多tab的滚动,异常处理，刷新重新加载），性能好（在滚动的时候做了一些性能优化，如缓存window的高度，函数节流）的js插件。兼容性不支持ie8及以下浏览器，其他都没有问题。如果你发现哪些浏览器上有问题，请一定要联系我。示例无任何效果有loading动画一有loading动画二(百度移动端)多个tab效果div容器中的滚动加载左右滑动tab并且滚动加载异常处理点击刷新重新加载示例源码实现原理首先得区分一下全局滚动和局部滚动。全局滚动：滚动条在body或者body上层元素或者window上局部滚动：滚动条在body里的元素上。由于浏览器兼容性原因，全局滚动都应该在window上绑定滚动事件。而局部滚动则是在产生滚动条那个元素上绑定滚动事件就可以了。之后我会把产生滚动条的元素统称为视窗。核心逻辑其实就是判断是否滚动到底部。这个底部指的是
...继续阅读
(14)
发表于
2016-12-20 15:17:51
vue.js实现仿原生ios时间选择组件
前言最近几个月一直在看VUE，然后试着只用原生js+vue实现某些组件。PC端时间选择组件这是最开始实现的pc上的时间选择，平时移动端也在做，所以就想实现一下移动端的时间选择器，下面分享一下我实现移动端滚轮特效时间选择器的思路和过程。整个组件是基于vue-cli来进行构建的最终效果实现过程有点多，大家有没懂的地方请留言，我会做对应调整功能1.时间选择[A.年月日选择B.年月日小时分钟选择C.小时分钟选择 D.分钟选择]2.滚轮效果[A.构成一个圆环首尾相连B.不构成首尾相连]3.时间选择范围设置(所选时间超过范围将弹窗提示)，分钟间隔设置4.多语言设置5.时间格式设置 满足 yyyy/MM/dd HH:mm 这一类的设置规则6.UE上做到接近ios原生效果7.扩展 不仅仅只能选择时间，可以传入自定义联动选择数据这里主要讲讲无限滚轮的实现数据准备1这里拿天来做说明获取一个月有多少天的一个巧妙的方法,我是从这里看到的dayList () {
/* get currentMonthLenght */
let currentMonthLength = new Date(this.tmpYear, this.tmpMonth + 1, 0).getDate();
/* get currentMonth d
...继续阅读
(20)
发表于
2016-12-13 15:39:34
Chrome出了个小bug：论如何在Chrome下劫持原生只读对象
发表于
2016-12-09 00:00:00
奇舞周刊第188期（2016-12-09）
正则表达式实践篇常用正则表达式是如何一步步写出来的。JavaScript 有个 Unicode 天坑JavaScript 字符串处理中可能遇到的坑及其解决办法。看完后就一句话，ES 6（ES 2016） 大法好！构建流式应用：Rx.js 详解作者从实现原理、基础实现、实例逐步分析，提供了较为全面的指引。一起感受下 Rx.js 的节奏吧。happypack 原理解析happypack 是一个 webpack 插件，目的是通过多进程模型，来加速代码构建。原生 CSS 网格布局学习笔记此文适合有一定 CSS 原生网格布局使用经验的开发者，读前需要先去了解一下原生 CSS 网格的语法。lazy.js 惰性求值实现分析惰性求值原理分析：收集计算需求；延迟并优化计算执行过程。HTML5 元素选择流程图Web 语义化谈了那么多年，可你真的弄懂了怎样选择合适的标签吗？浅析渲染引擎与前端优化前端面试经典问题，从地址栏输入 URL 到页面呈现这段时间发生了什么。作者在每一步分析之后，都给出了相应的优化建议。致设计师一篇翻译过来的文章，前端同学想和设计师倾诉的那些事，有没有被某些地方戳到？聊聊代码提交那些事“人、工具与流程，是项目管理中的三大要素，而其中人是决定因素。对于管理者而言，是否能够正确的判断问题出在哪里，以及通过何种手段去解决，是最为重要的。”查看全部文章»
...继续阅读
(9)
发表于
2016-11-01 12:17:27
javascript原生实现bind方法实例分析
bind由于javascript中作用域是由其运行时候所处的环境决定的，所以往往函数定义和实际运行的时候所处环境不一样，那么作用域也会发生相应的变化。例如下面这个情况：var id = 'window';
//定义一个函数，但是不立即执行
var test = function(){
console.log(this.id)
}
test() // window
//把test作为参数传递
var obj = {
id:'obj',
hehe:test
}
//此时test函数运行环境发生了改变
obj.hehe() // 'obj'
//为了避免这种情况，javascript里面有一个bind方法可以在函数运行之前就绑定其作用域，修改如下
var id = 'window';
var test = function(){
console.log(this.id)
}.bind(window)
var obj = {
id:'obj',
hehe:test
}
test() // window
obj.hehe() // window上面介绍了bind方法的一个重要作用就是为一个函数绑定作用域，但是bind方法在低版本浏览器不兼容，这里我们可以手动实现一下。先拆分一下关键思路：因为bind方法不会立即执行函数，需要返回一个待执行的函
...继续阅读
(16)
发表于
2016-10-25 16:53:41
小程序的开发成本真的比原生App低吗？
考虑两个方面，开发成本和推广成本。原生APP一般要同时开发iOS和Android两套，而小程序只需要做一套。毫无疑问，这点是小程序最大的优势，从这个角度来看，小程序是“跨平台“的。具体到开发效率上，很遗憾，在现阶段，开发一套完整逻辑的应用程序，小程序的开发效率是低于APP的。小程序独立出了一个封闭的生态。我们经常说不要重复的造轮子，可小程序现在是裸奔，你得自己去造轮子。而iOS和Android经过经年的累积，已有大量的成熟组件可以使用。相反，小程序目前还处于内测阶段，没有任何优秀的第三方组件可以使用。而官方提供的组件，接口非常的少，实现功能没问题，但你想自己去定义组件属性、样式是很困难的（这点真的很奇怪，所有组件没有任何设置样式的接口）。我们团队做了个简单的对比，开发同样一款简单的天气应用。iOS拿到UI设计稿后，轻车熟路两天搞定，各种交互不需要UE，都是iOS常用动画。web前端这边，拿着设计稿去找UI：这个透明的状态栏我没法实现，因为小程序的状态栏必须要有 ； 底部的Tab栏我只能设置颜色和图片，设计稿里的样式我做不出来； Banner轮播的指示点我改不了。我们在小程序开发中遇到最棘手的2个问题：缺少统计、绘图组件，以前的echarts和hightcharts都无法使用，只能用canvas去绘制，耗费的时间之多可想而知。我们目前正在着手修改一款基于canvas的开源绘图组件，让
...继续阅读
(19)
发表于
2016-10-17 13:31:34
[WP酷元旦特惠]BlackCandy – 双栏简白自媒体 WordPress 主题
发表于
2016-09-21 09:36:52
为什么应该开始使用 React Native 了
在讨论技术方案之前，我们先达成一个共识，如果你的 App 是开发给用户使用的，那么用户并不关心你用的是什么技术方案。因此技术选型，应当是平衡用户体验和开发效率，在这两者之间，应当是满足了用户体验后，再去谈开发效率。不幸的是，在移动端用户对体验的要求是很高的，而且越来越高。之前我也说，每个 Android 开发者都应该有一个 iPhone，这样才能知道 App 的体验做到什么地步才算及格。这或许会让一些玻璃心的人感到很难受，但我认识的高水平的 Android 开发者，无一例外日常都是在使用 iPhone 或至少有 iPhone 手机。在过去的半年里，我尝试了三个跨平台的开发工具，Fuse，Qt，以及React Native. 每个工具都有着巨大的潜力和进步，最终的结论是，Qt 适合开发桌面跨平台程序，React Native 适合用来做 App 开发的补充方案，我们先来谈一谈这三个工具。Fuse 的尴尬Fuse 希望既可以是原型工具，又可以由开发者进行生产使用，但这个定位是比较尴尬的，就好像瑞士军刀不能用来剁排骨，大砍刀不能用来做手术一样。作为原型工具，他需要编译，不能像 Framer.js 那样直接通过网页传递，也不像他那样只用 CoffeeScript 就可以完成整个原型的设计，它太重。作为开发工具，他的稳定性和性能会出现一些很难解决和控制的边缘 case，使得你不得不自己去封装
...继续阅读
(24)
发表于
2016-08-04 23:22:55
深入体验bash on windows，在windows上搭建原生的linux开发环境，酷！
今年微软Build 2016大会最让开发人员兴奋的消息之一，就是在Windows上可以原生运行Linux bash，对开发人员来说，这是一个喜闻乐见的消息。1 安装你必须安装开发者预览版本，才能使用windows的linux subsystem功能。首先打开你的Windows 10的设置，在"更新和安全"选项中（我的机器是英文操作系统，但中文操作系统类似），选择"开发者"，然后选择"开发者模式"：在Windows 更新和安全选项中，选择"Windows 更新"，在"更新设置"中选择高级选项，你必须打开"内部预览版本"选项，并且将内部预览的级别设置为最快：在"设置"->"系统"选项中，查看当前系统信息，你的OS版本必须是14316，如果不是这个版本，请运行在线升级，升级到这个版本：升级完成后，打开"控制面板"-》"程序"，选择"打开或者关闭Windows特性"，找到Windows Subsystem for Linux(beta)点选并确定，系统会下载更新并提示重启机器：重启完成后，进入命令行程序，激动人心的时刻来临了，在命令行下敲bash，会提示你是否继续，选择yes，系统会安装Ubuntu文件系统等待完成后，系统会切换到你熟悉的Linux bash模式，试试你熟悉的ls等命令：打开Windows菜单，你会发现系统中多了一个Ubuntu的图标，这个就是bash on Ubun
...继续阅读
(93)
发表于
2016-08-02 14:55:44
[来自异次元] Win10 一周年更新正式版操作系统下载 (微软MSDN官方原版 / 家庭专业版 ISO 镜像)
发表于
2016-08-01 05:11:02
Android 7.0 发布时间曝光！Google 还为原生相机准备了个“新功能”
发表于
2016-07-21 00:14:46
WordPress 4.6将使用原生字体代替谷歌字体
WordPress 3.8版本在2013年发布的时候，WordPress开始在后台使用Open Sans谷歌字体。今天，在WordPress 4.6版本即将发布的时候，WordPress后台弃用谷歌字体，改用系统原生字体。这一切，都是为了给用户最好的使用体验。WordPress当初为何选择Open Sans字体？2013年的时候，网络印刷时代刚刚开始。然而，在绝大多数操作系统中，可供选择的字体并不多；而且这其中，有些字体还是为了打印而设计的，并不适合在屏幕上阅读。Google Fonts上的Open Sans是一种专门为屏幕阅读而设计的字体，支持绝大多数字符，最重要的是，它是一种开源免费的字体。因此，追求网络现代美学设计风格的WordPress，当时选择了使用Google Fonts上的Open Sans开源字体作为后台主要字体。WordPress放弃谷歌开源字体的原因现在，时代变了。绝大多数设备商都有了更好的界面字体。系统原生字体加载速度更快，支持语言更多，并且使得Web App更像是Native App。与设备商的应用使用同样的字体，使得WordPress与App更为相似。同时，放弃谷歌字体，对于我们中文用户来讲，还有一个好处：我们再也不用担心因为谷歌字体而影响网站的加载速度了。WordPress 4.6使用的字体WordPress使用原生字体取代谷歌字体，所选用字体覆盖了所有
...继续阅读
(23)
发表于
2016-07-19 11:42:15
内置变量与原生shell脚本运行
xmake在xmake.lua中提供了$(varname)的语法，来支持内置变量的获取，例如：add_cxflags("-I$(buildir)")它将会在在实际编译的时候，将内置的buildir变量转换为实际的构建输出目录：-I./build并且这些变量在自定义脚本中，也是可以支持的，例如：target("test")
after_build(target)
print("build ok for $(plat)!")
end这将会在编译完后，输出：build ok for macosx!这些内置变量，大部分都是通过配置的时候，缓存的配置参数中获取，例如：$ xmake config --plat=macosx也有些内置变量，不需要通过配置中获取到，例如：print("$(os)")
print("$(host)")
print("$(tmpdir)")
print("$(curdir)")等等，这些都是为了让xmake的语法更加简洁，例如操作文件复制的时候，只需要：os.cp("$(projectdir)/file", "$(tmpdir)")而不需要：-- 导入工程模块
import("core.project.project")
-- 复制文件
os.cp(path.join(project.directory(), "file"), os
...继续阅读
(25)
发表于
2016-07-18 08:32:40
IOS 原生与HTML交互
跟原生开发相比，H5的开发相对来一个成熟的框架和团队来讲在开发速度和开发效率上有着比原生很大的优势，至少不用等待审核。那么问题来了，H5与本地原生代码势必要有交互的，比如本地上传一些信息，H5打开本地的页面，打开本地进行微信等第三方分享等，今天就简单讲一下iOS中本地UIWebView,WKWebView与H5的交互。DEMO地址：点击下载UIWebView的交互stringByEvaluatingJavaScriptFromString的使用UIWebView在2.0时代就有的类，一直到现在（目前9.x）都可以使用的WEB容器，它的方法很简单，在iOS7.0之前JS交互的方法只有一个stringByEvaluatingJavaScriptFromString:-(nullable NSString*)stringByEvaluatingJavaScriptFromString:(NSString *)script;使用stringByEvaluatingJavaScriptFromString方法，需要等UIWebView中的页面加载完成之后去调用.以下是简单的使用场景：1、获取当前页面的url。- (void)webViewDidFinishLoad:(UIWebView *)webView { &n
...继续阅读
(80)
发表于
2016-07-16 21:35:21
【译】Hybrid or Native: 合适的才是最好的
发表于
2016-07-09 09:25:44
互联网广告新规出台，这些行业将会受到重大影响
发表于
2016-07-08 19:21:04
等宽字体在web布局中应用以及CSS3 ch单位嘿嘿
