小太阳1号_个人页_阿里云开发者社区

提交了问题 2016-08-17

Wex5案例使用JSON传输Thinkphp后端对接，以达成数据正常输出

提交了问题 2016-08-04

Knockout.js 体验之旅

提交了问题 2016-08-03

用NodeJs做一个小爬虫,附源码！

提交了问题 2016-07-12

【分享】WeX5的正确打开方式（7）——数据组件详解

提交了问题 2016-06-30

【分享】html5 开发工具——WeX5中的各种绑定方式

提交了问题 2016-06-29

【分享】WeX5的正确打开方式（3）——绑定机制

发表了文章 2016-06-22

【分享】WeX5的正确打开方式（2）

我的上篇文章介绍了WeX5中基本的页面布局和交互事件写法，有人私信我为什么源码中的js要那样写，HTML源码的结构是怎样的之类。那今天就总结一下Hello World的源码结构，才识有限，有疑问欢迎大家继续私信我，一起钻研，一起进步。 HTML部分在上篇Hello World的案例中，我们是通过新建一个w文件来进行页面样式布局的，这里可能有同学会疑惑：怎么没看见HTML文件呢？最终的HTML文件在哪？而且w文件的结构也跟我们常见的网页结构不同啊，常规的<hear>、<body>标签都没有呢，这是怎么回事？首先要明确的一点就是：w文件只是一个页面片段，通俗地说就是一小段HTML代码。在实际运行的时候，比如说调试的时候WeX5会将该页面片段以及相应的资源加载到一个页面框架中，从而获得最终的整页显示效果。也就是说，可以将很多w文件加载到一个页面中，比如官方的外卖案例中，地图定位被做成一个w文件，然后在需要的时候中调用它，这就是所谓的按需加载了。那怎样得到一个完整的页面呢？这就需要通过编译了，具体可以参考WeX5官方的Hello World教程中的编译和部署。简单来说就是在Native目录下新建一个本地App，指定主页为Hello World的w文件，然后执行“编译使用到的UI资源”。编译后在www目录下会有一个index.html文件，这就是整个页面的html文件。先看看Hello World中的w文件源码（点击编辑器左下角的源码标签）：从上到下分别是window组件、model组件、output组件和button组件。window组件就是整个w文件的容器，output组件和button组件是我们添加上去的，都很好理解。但是怎么会有个model组件呢？生成的页面上好像也没看见这个model组件呀？这是用来做什么的呢？在页面应用中，除了UI和人机交互之外，我们还需要做很多数据的处理。简单的应用中我们直接就把数据嵌入到js的变量中去了。但是数据比较复杂的情况下，这种做法在管理上比较困难了。WeX5的做法是将数据单独抽出来做成一个独立的data组件，每个data组件管理相应的数据，规模较大的应用上会有比价多的data组件，所以就需要一个容器来接纳这些data组件，这个容器就是model组件了。注意：上篇中也有介绍js源码中的Model对象，实际上这两个model代表含义是一样的，都是代表着这个页面片段的所有资源（包括变量、dom节点等）。当然，好奇的同学可以试过删除它但发现没什么影响，这里要了解HTML源码中的model是整个model的一个映射，js中的model才是源头。再看看完整的html文件，由于WeX5采用了按需加载的机制，所以必须要到浏览器打开才能看到真正完整的整页页面哦：红框部分为w文件编译而成的HTML代价，可以看到编译后的代码增加了很多内容，有为了避免命名冲突而加的，有将数据绑定关系转换过来的内容等。一般来说我们用WeX5做开发只需要做好w文件即可，并不需要直接写现成的HTML代码。 JavaScript部分先打开js源码（点击编辑器左下角的JS标签）：熟悉Html5 app 开发的同学一眼就能看出，这是模块化的写法。WeX5中采用的是AMD规范的requirejs实现模块化开发，每个w文件自动配置一个同名的js文件，在页面加载的时候自动加载相应的js文件。js文件中所有的js代码被包裹在一个define语句里面，同时在内部定义了一个Model对象并在最后输出这个Model对象。其实这里的思路也很简单，就是将所有与该w文件相关的js代码放入define中隐藏起来，避免污染全局变量（这一点上一篇也说过），同时通过Model对象向外界暴露相应的接口，这样外界就可以通过这些接口对内进行操作了。另外，第一二行定义变量就是引入jQuery和justep框架，跟平常使用jQuery一样的，如果要引入其他模块也可以用同样的方式。当然，你也可以写成 define([引用模块1，引用模块2], function(模块1参数，模块2参数) { 执行代码 } )，采用这种写法要注意各个参数与模块对应起来，否则就会出错。说了这么多，那我们的代码应该怎么写？需要对外暴露的信息写入var Model = function(){};中，需要对外暴露的方法推荐写到Model原型里（Model.prototype.你的方法=function(){};），其他隐藏信息直接写到define内即可。比如：变量a、b和函数add都不在Model内，也就是这些信息外界都不能访问到，这样就实现了模块内部的封装。更多关于前端模块化开发的内容，可以看看阮一峰的博文：Javascript模块化编程。另外还要一点：在设计编辑器中直接绑定的变量，都是在Model之下的。比如增了一个input然后将bind-value设置为myValue，那么这个myValue变量就是在Model之下的，可以通过myValue来访问。总结：Model就是js模块对外的接口，w页面与同名js文件的联系通过绑定机制来实现。 CSS部分大家看到HTML源码的时候也应该发现了，通过可视化编辑器设置的样式是内联式的。很多人第一反应就是内联样式不好，但不好在哪？外联的好处又在哪？内联样式因为直接写入HTML中，表现与结构重度耦合，不利于管理和改动，另外一些本可以重用的样式也直接写入内联样式中了，所以样式的重用性差。但是内联也是有很大的优势的：一是速度快，由于不需要查找CSS文件和定位样式，所以执行速度是最快的；二是可以减少HTTP请求，独立的CSS文件需要另外开HTTP请求去获取，而HTTP请求又是性能优化的最重要瓶颈。外联样式的好处网上已经说得太多，可以在不改结构的情况下快速批量化更改样式，样式的重用性好等等。所以，小孩子才分好坏，成年人只看利弊。在WeX5中使用外联样式也是按需加载的，编写方式跟正常的html5 app开发一样的。官方建议的也是使用外联样式，降低后期维护成本。可以直接点击编辑器左下角的CSS标签进入CSS编辑器里面。这里也提供了可视化编辑（点击添加按钮）和直接键盘输入两种编写方法：个人强烈建议使用键盘直接输入，使用可视化编辑生成的样式还是比较臃肿的。写完保存之后，系统就会直接生成与w文件同名的css文件，在载入w文件的时候才会加载同名的js和css文件，实现按需加载。总结 WeX5 Hello World的介绍就到这里了。通过Hello World案例，我们了解了组件可视化布局、样式设置、交互事件编写这三个最基本的操作，对应的是HTML、CSS、js三大部分。其实任何一种前端的工具、框架、类库都是基于这三大部分的集合，有了这些基础之后其他的知识点还是比较好理解上手的。

提交了问题 2016-06-22

【分享】WeX5的正确打开方式（2）

发表了文章 2016-06-21

【分享】WeX5的正确打开方式（1）

最近在研究WeX5，想在这里记录下使用过程中的点滴，今天先把之前已经掌握的分享一下。 WeX5官方的开发指南难度系数较大，面向的受众可能是已经敲过上万行代码的html5 app开发者。但是作为一个刚进入代码世界的html5 app开发宝宝，本人表示拿着这份指南也找不到“南”，先抛开官方版的，下面就来看看进击版的Hello World吧。基础部分 1、准备工作：打开hml5 app 开发工具——WeX5（路径：WeX5\studio\studio.exe），在左侧模型资源管理器中建立HelloWorld目录并新建W文件，模板选空白的就好。这一步有问题找右键。 2、鼠标拖一个Output放到W页面上，效果如下： 3、在属性标签页设置Output的外观样式，这里常用的是class（设置类型），style（设置具体的样式），我这里就设置了一下Output的红色边框。这里都是可视化鼠标操作，就不多说了，各种样式可以尽情探索，不要生怕点错了会弄疼软件哈。 4、一番精心打扮之后，当然要看看运行效果啦，试运行的步骤是：先启动Tomcat，然后在W文件上右键选择“用浏览器运行”。记得要先保存W文件再试运行才能看到改动效果哦。通过简单的鼠标操作，很简单就能设置好Output控件的外观，这个也是WeX5的强大之处。而且更重要的一点是，所有设置都是符合html5 标准的！比如说你要设置一个控件的位置，并不能直接拖动控件到你想要的位置，而要通过边距、定位等设置才能定位。所以即使是使用WeX5进行开发，还是要懂基本的HTML、CSS、JavaScript的，这里推荐不太熟悉的亲们去稍微学习点基本的html5基础知识。新手不用太纠结细节，先整体了解，日后碰到具体问题再去找相应的解决办法。当然，小茄这边也会分享相关的内容，大家可以关注哈~~~ 5、上面的鼠标流操作设置好了外观，但还没看到Hello World的影子呢。大家肯定也想到了要在Output中输出Hello World，具体操作也非常简单：在属性标签页的“bind-ref”内输入“Hello World”就可以啦，注意要用英文模式的双引号把Hello World引起来。有点编程基础的同学都知道，用双引号包起来的才是字符串，没有双引号的话就是变量了。这样就设置好了，试运行时在Output里面就能看到效果了。 PS：这里的“bind-ref”是WeX5中的一个数据绑定机制，可以将其想象成一个管道，通过这个管道可以将不同组件间的数据绑定起来。例如我这里有两个Output组件，我们可以简单的通过bind来讲两个组件的值绑定起来，但只是绑定的话并没有动态刷新的功能，如果需要像官方Hello World那样做到动态刷新，还需要将绑定的值设置为可观察对象。这个部分理解起来比较难，后续我会单独开一个章节去讲这部分，本文先略过。注意：原生的Web写法应该是在标签内写入要显示的内容，例如：Hello World。但是WeX5将基本的HTML组件进行了封装，而且为了方便管理数据还引入了数据绑定机制，每次进行组件初始化的时候都会调用相应的构造函数去初始化组件，所以即使在Output组件的源码中加入Hello World： <div component="$UI/system/components/justep/output/output" class="x-output" xid="output1" style="height:40px;" dataType="String">Hello World</div> 但Output的innerText也还是会根据数据绑定的规则去初始化组件，如果没有绑定，则初始化为空值。因此，WeX5中除了原生的HTML标签外，都应该按照WeX5的规范使用数据绑定的方式来管理控件。进阶部分上面这种纯输出的页面没什么意思，现在试试加点交互效果。比如说加个按钮，点击按钮改变输出信息为”Hello WeX5”。官方原版的Hello World案例中使用了WeX5的数据双向绑定机制来实现，因为我们都不熟悉WeX5的数据绑定机制，所以理解起来非常吃力。抛开绑定机制，WeX5的写法其实很简单： Model.prototype.button2Click = function(event){ var output = this.getElementByXid('output1'); output.innerText = "Hello WeX5"; }; WeX5提供了一个事件标签页来方便地设置组件的各种事件，这样一来可以一览组件的事件接口，二来也方便集中管理所有组件事件。使用方法就是在需要的事件中填入函数名（不填则使用默认函数名）并双击，然后就可以进入js源码页了，这里系统会自动生成Model.prototype.函数名 = function(event){}代码段。细心的同学会发现，这里的事件也是带bind前缀的。没错，这里也采用了数据绑定机制一样的实现方式，不过这里暂时先不用管这些，知道用法即可。这里小茄也默认大家有Web编程基础的了，先对比原生的web写法： <p id="output1">Hello World</p> <button>Button</button> <script type="text/javascript">function button2Click(event) {var output = document.getElementById('output1'); output.innerText = 'Hello WeX5'; } </script> 可以看出主要的差异点是WeX5中使用了xid代替了原生的id，所以要用getElementByXid来获取元素节点。之所以这样做的原因，主要是为了解决命名冲突的问题，在一个复杂页面中通常是将页面分成很多页面片段来开发的，而很多时候某几个页面片段都可能引用了同一个组件，那么在总页面中就会产生id的命名冲突。而xid是通过在id后面加入一个页面标示，即使是同一个id在不同的页面片段中的xid也是不同的，这样就解决了id冲突的问题。另外一点差异是WeX5中还创建了一个Model对象，页面中资源都放入了Model变量中，使用的时候也要在Model中进行操作。而原生的写法是将所有函数和变量都放在全局环境中，使用的时候直接引用全局中的函数变量。当一个页面比较复杂的时候，全局下就会有非常多的函数和变量，这样就容易产生变量冲突和变量覆盖，因为js中是可以重复声明的，后声明的变量会覆盖掉前面声明的变量，这样一来后声明的函数就将前面的函数体覆盖掉了。更为严重的是，浏览器给js提供了很高的权限，你甚至可以覆盖掉系统提供的接口。比如说： alert = function () { window.close(); } alert("hello"); 这样alert就由报警变成了关闭页面，但浏览器是允许这种行为的，所以我们应该尽量避免污染全局变量。最后还有一点就是我们定义的方法是放在Model.prototype之下的，也就是放在Model原型下面的。也就是说采用了混合模式（构造+原型）来创建对象，当然，直接写在对象下也是OK的，只是不推荐这种写法，例如：var Model = function(){this.callParent();this.button2Click = function(event){var output = this.getElementByXid('output1'); output.innerText = "Hello WeX5"; }; }; 总结上面的例子实现了一个按钮改变输出文字的功能，通过这个例子，大家应该能掌握WeX5中页面布局设计与简单交互事件的写法，上面介绍的写法与原生比较相似，对有web基础的同学来说应该是很好理解的。没有基础的同学，还是推荐先到w3school 去学习web基础，过一遍HTML、CSS，熟悉一下js语法即可。关于Hello World可说的内容还有许多，下一篇我会介绍一下HTML源码以及js源码结构。附录：官方Hello World的WeX5写法与原生js写法对比，可以看出在页面复杂的时候WeX5的代码更简洁，更方便管理。原生js写法： Input1: <input type="text" id="input1" value="" /><br /> Input2: <input type="text" id="input2" value="" /> <script type="text/javascript">var input1 = document.getElementById('input1'), input2 = document.getElementById('input2'); input1.addEventListener('input', function (e) { input2.value = this.value; }); input2.addEventListener('input', function (e) { input1.value = this.value; }); </script> WeX5写法： define(function(require){ var $ = require("jquery"); var justep = require("$UI/system/lib/justep"); var Model = function(){ this.callParent(); this.input1 = justep.Bind.observable(""); //核心语句 }; return Model; });

提交了问题 2016-06-21

【分享】WeX5的正确打开方式（1）

提交了问题 2016-02-19

利用WeX5给手机APP增加短信验证码功能

发表了文章 2016-01-28

为什么Facebook要将视频从Flash全面迁移到HTML5？

英文原文：Why we chose to move to HTML5 video 编者按：Facebook 前端高级工程师 Daniel Baulig 解释了 Facebook 为什么要将视频全面迁移到 HTML5，包括这样做的好处，带来的挑战和解决办法。最近，我们将 Facebook 网络中的所有视频全部从 Adobe Flash 迁移到了 HTML5。我们将继续与 Adobe 合作，为我们平台上的游戏提供一个可靠、安全的 Flash 体验，但我们会在所有的浏览器中默认使用 HTML5 技术播放视频。从开发速度到易访问性，HTML5 提供了很众多好处。Facebook 体系庞大，需求复杂，迁移到 HTML5 能让我们更好地去提升创新的速度和规模。　　HTML5 的优点　　开发速度使用 Web 技术使我们能够利用开源社区和 Facebook 中已有的优秀浏览器工具，不必重新编译代码，并能够在浏览器直接应用变化，从而让我们得以快速行动。　　可测性我们在 Facebook 有一个优秀的测试基础设施。迁移到 HTML5 视频后，我们可以自由地使用自己基础设施里所有的 web 工具，比如 Jest 和 Webdriver。　　易访问性 HTML5 使我们能够建立一个完全支持屏幕阅读器和键盘输入访问的播放器。我们可以利用 HTML5 提供的辅助工具让视力障碍人士更容易地使用我们的产品。让所有人都能用上 Facebook 是我们使命（让世界更加开放和互联）中的一个重要组成部分。　我们必须应对的挑战　　获得正确的日志视频日志有助于我们了解人们如何使用视频播放器以及播放器的工作情况。我们会向公众分享一些数据，例如视频观看次数和视频发布者，而我们会使用其他的一些数据来确定应该将多少以及哪些视频展现给人们。我们必须确保在同一场景中，新的视频播放器记录的数据和老的播放器记录的数据一致。由于配置差异和其他的一些细节，要做到这一点异常的困难。为确保日志数据的正确性，我们创建了一个测试套件，在相同的用户交互场景下，同时运行两个视频播放器，然后验证日志记录是否一致。这样，我们才能确保新的 HTML5 视频播放器的报告数据会有一个很高的可信度。　　浏览器 bug 在将视频转移到 HTML5 技术之前，我们要解决的一个主要问题是各种浏览器中存在的各种关于 HTML5 视频的 bug。在 Chrome 中使用 SPDY 协议的一个具体 bug 会导致浏览器在 News Feed 上停止加载和播放视频。我们最终确定了这个问题是由于同时加载了太多的视频触发的，所以我们减少了视频同时加载的数量，并确保如果加载的视频不再需要时我们会尽快将它们删除。在旧浏览器上的糟糕表现从理论上讲，现在使用的大多数浏览器都支持 HTML5 视频。然而，在实践中我们发现了很多老版本浏览器上使用 HTML5 播放器时会比使用 Flash 播放器表现更差。此外，我们还看到其他的一些错误，比如更长的加载时间和整体上更糟的体验。因此我们决定首先只在一小部分浏览器上推出 HTML5 播放器，然后一旦我们提升了性能并修复了小 bug，我们会逐渐推向更多的浏览器版本和操作系统。这就是为什么我们一直等到最近才在所有的浏览器中（除了很小的一部分）将视频播放技术默认切换到 HTML5。　　页面加载时间变长我们在推出 HTML5 播放器时面临的最后一个主要问题是，加载 Facebook 的时间变长了。在 Facebook，我们十分关心我们提供给人们的体验。用户需要多久加载 Facebook 是我们衡量用户体验的一个重要因素。当我们发布了 HTML5 播放器后，我们注意到，用户平均加载 Facebook 所花费的时间有所增加。通过修复几个小的性能问题，并进行了多项细微的优化，我们终于看到了一个让我们感到高兴的水平。　　对指标和用户体验的影响使用 HTML5 视频技术不仅简化了我们开发过程，同时也提高了人们在 Facebook 上的视频体验。切换到 HTML5 后，视频的播放速度更快了，人们点赞、评论和分享视频的数量更多了，并且用户报告的错误更少了。我们做出这项调整后，人们似乎开始在视频上花费更多的时间。视频是你与周围的世界进行互联的一个精彩渠道，而我们很高兴地看到我们在使用 HTML5 技术后，能使 Facebook 的视频体验变得更好。本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5! 阅读其他app 开发相关文章：http://wex5.com/cn/?p=3443

发表了文章 2016-01-21

HTML5 — 让拖放变的流行起来

在 HTML5 出现之前，页面元素的拖放需要监听 mousedown、mouseover 以及 mouseup 等一系列事件，然后改变元素的相对位置来实现这一效果。HTML DnD（Drag-and-Drop）API 的出现，使得拖放变的简单。但是由于 DnD 尚处在草案阶段，各浏览器对其规范并未统一，有些事件在不同浏览器中会出现不同效果。要使用 DnD，需要明确两件事情，一是需要拖动的元素，二是可放置拖动元素的位置。拖放无非是将元素从一个位置拖到另一个位置。 Drag 首先我们需要指定要拖动的元素，设置方式很简单，给该 DOM 元素设置 draggable 属性，属性值设置为 true。比如这样： <img src="images/0.jpg" draggable="true" id="img0"/> 事实上，以上代码多此一举了，页面中的图片（img）、链接（带 href 的 a 标签）以及文本默认即为可拖动。为了统一，最好还是都加上该 draggable 属性为好。draggable 属性还有两个值，分别是 false 和 auto，顾名思义，false 即设置为不可拖动，auto 即为浏览器默认值。当我们左键点击（按下）可拖动的 DOM 元素，轻轻移动，即触发 ondragstart 事件，该事件只会触发一次。通常我们会在 ondragstart 事件中记录正在被拖动的元素信息（ondrop 的时候好对其进行处理）。比如 demo 中记录了正在被拖动的元素 id： for (var i = lis.length; i--; ) { lis[i].ondragstart = function(e) { e.dataTransfer.setData('id', e.target.id); }; } ondragstart 事件触发后，直到拖放事件结束，会一直触发 ondrag 事件。 Drop 其次我们需要明确被拖动元素可放置的位置，ondragover 事件规定在何处放置被拖动的数据。默认地，无法将元素放置到其他元素中，如果需要设置允许放置，我们必须阻止对元素的默认处理方式： var dus = document.querySelector('.dustbin'); dus.ondragover = function(e) { e.preventDefault(); }; 当元素被拖动到某一元素上时，即会触发后者的 ondrop 事件，如果需要正确触发 ondrop 事件，还需要取消一些 DnD 事件的默认行为： dus.ondrop = function(e) { // 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） e.preventDefault(); e.stopPropagation(); // 兼容ff var id = e.dataTransfer.getData('id') , node = document.getElementById(id); node.parentNode.removeChild(node); }; 有些文献中说要取消 ondragenter() 事件的默认行为，楼主在实际操作中并未发现这点。事件上面已经提到了 DnD 中的三个事件，dragstart、dragover 以及 drop，其实 DnD 还有几个事件，它们的发生顺序是： dragstart(drag元素) -> drag(drag元素) -> dragenter(drop元素) -> dragover(drop元素) -> dragleave(drop元素) -> drop(drop元素) -> dragend(drag元素) 不难理解，拖放事件开始时触发 ondragstart 事件，当被拖动元素进入可放置的元素时，触发 ondragenter 事件（ondragenter 并不是在两个元素相交时即触发，而是该被拖拽元素在目标元素上移动一段时间后才触发），之后一段事件会持续触发 ondragover 事件（可参考 mouseover），当被拖动元素离开可放置元素的一瞬间，触发 ondragleave（和 ondragenter 对应）事件，当松开鼠标并且被拖拽元素正好在可放置元素上时，触发 ondrop 事件，当拖放事件结束时，触发 ondragend（和 ondragstart 对应）事件，无论拖放操作是否成功，均会触发该事件。 dataTransfer 拖动过程中，回调函数接受的事件参数，有一个 dataTransfer 属性。它指向一个对象，包含了与拖动相关的各种信息。 dataTransfer 对象主要有两种方法：getData() 和 setData()，需要注意的是，只有在 dragstart 以及 drop 事件中使用这两个方法。不难想象，getData() 可以取得由 setData() 保存的值。 setData() 方法的第一个参数，也是 getData() 方法唯一的一个参数，是个字符串，表示保存的数据类型，取值为 ‘text’ 或 ‘URL’。IE 只定义了 ‘text’ 和 ‘URL’ 两种有效的数据类型，而 HTML5 则对此加以扩展，允许指定各种 MIME 类型。在拖动文本框中的文本时，浏览器会自动调用 setData() 方法，将拖动的文本以 ‘text’ 格式保存在 dataTransfer 对象中，类似地，在拖放链接或者图像时，会自动调用 setData() 将 URL 信息保存，如果有需要，在 drop 事件中可以用 getData() 读取浏览器保存的值。但是这似乎并没有什么卵用，我们在实际开发中多数还是对 DOM 的操作，于是多数情况下我们在 dragstart 事件处理程序中调用 setData()，手工保存自己要传输的数据，然后在 drop 事件中读取，有点像 jQuery 的 data 事件。 dropEffect 与 effectAllowed dropEffect 和 effectAllowed 是前面说的 dataTransfer 对象的两个属性，有啥用？简单地说，有两个用处，一是可以设置元素被拖拽时的鼠标样式，二是可以设置元素是否可被放置。这里我测试了三款浏览器，chrome、ff 以及 uc，chrome 和 uc 表现相似。一般我们将元素脱离原来的位置，鼠标手势会变成 “禁手”，直到元素被拖到可放置区域上。但是 ff 不然，在 ff 中，元素在拖动的过程中不会显示 “禁手”。当元素被拖到可放置区域上时，默认鼠标手势如下。其实通过设置 dropEffect 和 effectAllowed 总共能设置三种鼠标手势(move， copy，以及 link），分别如下（move 和默认貌似一样）：需要在 ondragstart 方法中设置 effectAllowed，在 ondragover 方法中设置 dropEffect。具体可以参考 demo代码。我们也可以对 dropEffect 和 effectAllowed 的值进行设定，让某 drop 元素只能放 move 元素，或者 copy 元素等。具体可以看下这篇，HTML5魔法堂：全面理解Drag & Drop API，讲的很好。取值也可以参考高程 484 页。总之要知道的是，DnD 并不会帮你完成 copy 或者 move 的任何操作，而是需要用户在 DnD 过程中，记录需要操作的对象信息，然后在 drop 事件中完成 copy 或者 move 等的操作。 Tricks 还有几个实践过程中发现的问题。将 Demo 在 ff 中打开，图片拖到空处，会自动在新标签中打开图片，尽管我已经在各种事件中加上了 preventDefault()，尚不清楚原因。如果可拖拽元素，初始在一个可放置元素内部，先把元素拖出去，再放回来，将会触发 ondrop 事件，但是 e.target 却是被拖拽的元素。如果放置在其他元素，target 会指向被放置的元素，而不是拖拽元素。这点可以通过判断 target 元素得到解决。关于这点可以看下 w3cschool 的这个 demo，打开控制台，将图片拖出去，再拖回来，控制台会打印出错误，显然代码没有考虑到这一点。继续阅读更多相关文章：http://wex5.com/cn/2016/01/ 本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

发表了文章 2015-12-31

关于APP，原生和H5开发技术的争论

App的开发技术，目前流行的两种方式，原生和Html5。原生分了安卓平台和ios平台（还有小众的黑莓、死去的塞班就不说了），H5就是Html5。目前争论不休的问题，在早先前争论CS，BS架构的软件系统是一样一样的。原先BS，CS对用户而言的区别是需不需要安装客户端。BS是通过浏览器来访问，用PC，平板，Win，Mac都能访问，用户不需要下载额外的客户端，同时运维和升级提供很大的便利。CS则需要下载客户端软件，安装，然后登录使用，升级的话，要么升级链接库，要么重新安装升级包，比较不方便，优势是很多算法在本地运行，对服务器要求不高。 CS、BS之争是在PC端，那么现在原生和H5之争是在移动端。那么评判一个APP用什么技术来开发呢？经过总结，可以有如下判断依据： 1.如果APP中出现大段文字（如新闻、攻略等），且格式比较丰富（如加粗，字体多样），那么用H5会比较方便。原因是原生开发解析json对字符串格式处理不算很好。 2.如果讲究APP反应速度（含页面切换流畅性），则选用原生开发，因为H5其本质是网页，换页时，基本要加载整个页面，就像是浏览器打开一个新页面一样，显得较慢，而原生系统则只加载变化部分。 3.如果APP对有无网络、网络优劣敏感（譬如有离线操作，在线操作），那么，基本选用原生开发，虽然H5可以做到，但是很复杂。 4.如果APP需要频繁调用硬件（摄像头、麦克风、未来的湿度检测仪等等）那么，基本选用原生开发，这样支持硬件更多，更容易扩展，且调用速度更快，H5就望尘莫及了。 5.如果APP用户常见页面频换，如（淘宝首页各种不同活动），那么用H5，维护起来更容易。 6.如果预算有限（H5开发一套可跨平台覆盖安卓、ios，黑莓、塞班），不是很讲究用户体验，不在乎加载速度，那非H5不可。列举那么多，实际上有个采阴补阳的方法是H5+原生混合开发，对于固定格式、页面速度要求高，的模块（如PDB的即时通讯、宝典、我的项目）采用原生开发，对于新闻、大段文字、资讯类的（如信息广场、发表、问吧等）用H5页面来加载，将其嵌入到原生框架中那么，可以达到比较良好的体验。

提交了问题 2015-12-17

小太阳1号_个人页

个人介绍

擅长的技术

Wex5案例使用JSON传输Thinkphp后端对接，以达成数据正常输出

Knockout.js 体验之旅

用NodeJs做一个小爬虫,附源码！

【分享】WeX5的正确打开方式（7）——数据组件详解

【分享】html5 开发工具——WeX5中的各种绑定方式

【分享】WeX5的正确打开方式（3）——绑定机制

【分享】WeX5的正确打开方式（2）

【分享】WeX5的正确打开方式（2）

【分享】WeX5的正确打开方式（1）

【分享】WeX5的正确打开方式（1）

利用WeX5给手机APP增加短信验证码功能

为什么Facebook要将视频从Flash全面迁移到HTML5？

HTML5 — 让拖放变的流行起来

关于APP，原生和H5开发技术的争论

WeX5受邀参展阿里云广州峰会（12月23日）！参会者报名从速！

关于APP，原生和H5开发技术的争论

HTML5 — 让拖放变的流行起来

为什么Facebook要将视频从Flash全面迁移到HTML5？

【分享】WeX5的正确打开方式（1）

【分享】WeX5的正确打开方式（2）

Wex5案例使用JSON传输Thinkphp后端对接，以达成数据正常输出

Knockout.js 体验之旅

Knockout.js 体验之旅

用NodeJs做一个小爬虫,附源码！

【分享】WeX5的正确打开方式（7）——数据组件详解

【分享】html5 开发工具——WeX5中的各种绑定方式

【分享】html5 开发工具——WeX5中的各种绑定方式

【分享】WeX5的正确打开方式（3）——绑定机制

【分享】WeX5的正确打开方式（2）

【分享】WeX5的正确打开方式（1）

利用WeX5给手机APP增加短信验证码功能

WeX5受邀参展阿里云广州峰会（12月23日）！参会者报名从速！