wex5 实战 wex5与js的组件关系与执行顺序(父子与先后)

初学wex5,先理理让人容易混淆的三个概念:

一 基本概念:

1 wex5组件,顾名思义,在编辑窗口右侧的组件集合里的,都是wex5基于开源自创的组件,并封装了一套自已的方法。目的是为了方便。相关方法在api有提示,操作中也有提示。

2 js对像

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

此外,JavaScript 允许自定义对象。

二 对像获取与取值方法

1 wex5

this.comp() 效能较低,但操作方便

取值方法:this.comp().val()

this.comp().$domNode

取值方法为 this.comp().$domNode.innerHtml 这样可以取出一个节点元素比如div里的text值

如果想转换成DOM节点,方法为this.comp().$domNode,转换成DOM节点,为什么呢?因为有些js 方法,wex5的组件和方法都没有,我们又想操作某个元素,就必须这么操作

this.getElementByXid() 通过Xid得到组件,性能优于 this.comp()

取值方法为:this.getElementByXid().val

(注意)取值方法,一个是val(), 一个是val,带不带()不一样。

2 js对象

js对像获取与方法,网上一大堆,简单总结一下

$(‘*‘).css(‘background‘,‘red‘); //选择本页所有元素
$(this.getElementByXid("div1")).css(‘background‘,‘red‘); //选择Xid值为div1的元素
$(‘li‘).css(‘background‘,‘red‘); //返回所有li元素
$(‘.x-col-10‘).css(‘background‘,‘red‘); //返回所有class类为.x-col-10的元素
$(".x-titlebar-left").css(‘background‘,‘red‘); //返回class为x-titlebar-left的元素
$("[src]").css(‘width‘,‘290px‘); //返回所有带src属性的元素
$("id").hide() id选择器

这里说明一下,有些非wex5的组件没有Xid,可以手动增加id属性,用js的id选择器选择后操作

比如:color,video,audio 标签

jQuery方法*/
/*if($(this.getElementByXid("div1")).css("display")==‘none‘){
$(this.getElementByXid("div1")).show(); //显示div1元素
}else{
$(this.getElementByXid("div1")).hide(); //隐藏div1元素
}*/

/*if($(this.getElementByXid("image1")).css("display")==‘none‘){
$(this.getElementByXid("image1")).show(400); //在400毫秒内显示div1元素
}else{
$(this.getElementByXid("image1")).hide(400); //在400豪秒内隐藏div1元素
}*/
//$(this.getElementByXid("image1")).toggle(400); //上面四行的整合(以后不再提示)

/*if($(this.getElementByXid("div1")).css("display")==‘none‘){
$(this.getElementByXid("div1")).slideDown("slow"); //下滑显示div1
}else{
$(this.getElementByXid("div1")).slideUp("slow"); //上滑隐藏div1
}*/
//$(this.getElementByXid("div1")).slideToggle("slow");

/*if($(this.getElementByXid("div1")).css("display")==‘none‘){
$(this.getElementByXid("div1")).fadeIn("slow"); //淡入div1
}else{
$(this.getElementByXid("div1")).fadeOut("slow"); //淡出div1
}*/
//$(this.getElementByXid("div1")).fadeToggle("slow");

//$(this.getElementByXid("image1")).animate({height:‘50px‘,width:"50px"}); //将image1的高度和宽度都动画变成50px
//$(this.getElementByXid("image1")).animate({height:‘+=50px‘,width:"+=50px"}); //将image1的高度和宽度都动画增加50px
//$(this.getElementByXid("row2")).remove(); //删除row2及其子元素
//$(this.getElementByXid("row2")).empty(); //删除row2子元素,保留frow2

/*if($(this.getElementByXid("row2")).hasClass("blue")){
$(this.getElementByXid("row2")).removeClass(‘blue‘) ; //给row2添加blue类
}else{
$(this.getElementByXid("row2")).addClass(‘blue‘) ; //给row2去除blue类
}*/
//$(this.getElementByXid("row2")).toggleClass(‘blue‘) ;

过滤选择器*/
//$("img[src$=‘jpg‘]").css(‘width‘,‘290px‘); //返回所有属性src以jpg结尾的image元素
//$("img[src*=‘head.jpg‘]").css(‘width‘,‘290px‘); //返回属性src包含head.jpg的img元素
//$(‘lidd‘).css(‘background‘,‘red‘); //返回偶数行的li元素
//$(‘li:even‘).css(‘background‘,‘red‘); //返回奇数行的li元素
//$(‘li:first‘).css(‘background‘,‘red‘); //返回第一个li元素
//$(‘li:last‘).css(‘background‘,‘red‘); //返回最后一个li元素
//$(‘li:eq(2)‘).css(‘background‘,‘red‘); //返回第二个li元素
//$(‘li:gt(2)‘).css(‘background‘,‘red‘); //返回第二个以后的li元素
//$(‘li:lt(2)‘).css(‘background‘,‘red‘); //返回第二个以前的li元素

//$("li:not(:empty)").css(‘background‘,‘red‘); //返回不为空的li元素
//$("div:empty").css(‘background‘,‘red‘); //返回空的div元素
//$("li div:contains(‘冀‘)").css(‘background‘,‘red‘); //在li元素下面选择文本包含冀的div元素
//$("li div:has(input)").css(‘background‘,‘red‘); //在li元素下面,选择有子元素input的div元素
//$("li:visible").css(‘background‘,‘red‘); //选择可见的li元素
//$("ul li:nth-child(3n + 1)").css(‘background‘,‘red‘); //选择3n+1(n=1,2,3.。。。)的li元素
这么多方法,其实在开发中多多少少要用到,大家还是要多看一点。只用wex5的东西,有时也有限。这里只做一些说明。

三 组件关系:

js历史悠久, wex5组件基于各种框架而成,是明显的父子关系。

即:

wex5的组件方法中,可以执行js的方法,而在js的方法中,无法执行wex5的方法。

举个例子:

在wex5的事件更新中,直接写js的方法,很好。返过来,在js中写this.comp()什么的,认不了。想想也是啊,父亲是认不了儿子的行为的。儿子不仅认识父亲的方法,还自建一套。

四 执行顺序

js的执行速度最快,会在页面完成后执行。

而wex5的组件,需要modeLoad,初始化完成后才能执行。即使是modelParamsRecive也不能优于js

那问题来了,我如果页在中同时用了js与wex5,如何控制执行顺序呢?

如果把js代码放到页面中,它会先于其它执行,方法是把js方法装到wex5的组件方法中去,进行一次方法套用。

还是这个例子。如果把

$(".true").show();
$(".wrong").hide(); 放到页面之外,直接执行,执行是 执行了,值的改变就会成了马后炮。

在混合开发中,会遇到很多组件与方法共生共用的情况,大家要区别对待,不能盲写盲从,如果提示方法未定义,组件不存在,看看是不是把js和wex5的东西 用混用错了。

时间: 2024-10-10 06:00:39

wex5 实战 wex5与js的组件关系与执行顺序(父子与先后)的相关文章

JS的预编译和执行顺序 详析

原文:JS的预编译和执行顺序 详析 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题   代码:   复制代码 代码一 <html>   <head>     <title>事件处理</title>     <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

JS在html中的执行顺序

一般来说在html页面中嵌入Javascript的方式有下面几种:1.放在页面的<script></script>标记之间:2.由<script>标记的src属性引入外部的js文件:3.放在页面元素的事件处理程序中,比如button的onclick事件中:4.作为URL的主体,使用Javascript:协议,比如<a href="window.open("about:blank");"></a>;5.Jav

浅谈Js中关于事件处理函数执行顺序的问题

Js给dom元素绑定事件的处理函数总的来说有两种方式:在html文档中绑定,在js代码中绑定. 然而,并不推荐在html标签上绑定事件. 在js代码中也可以分两种方式绑定事件: 1:通过dom元素的onclick等属性,直接绑定: 2: a.在ie下使用attachEvent/detachEvent函数的方式进行事件的绑定和取消: b.使用W3C标准的addEventListener和removeEventListener,给dom添加事件监听者和移除. 第一种方式只能绑定一个事件处理函数,后面

JS的预编译和执行顺序 详析(及全局与局部变量)

最近在复习javascript的事件处理时发现了一个问题,于是总结一下:javascript的预编译和执行顺序的问题:   <html> <head> <title>事件处理</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <script type='text/javascript'> //页

wex5 实战 百度地图JavaScript API 集成

wex5里提供了一个bMap组件来调用百度地图,在百度地图api里,有许多版本的api供开发者调用.在wex5开发里,JavaScript API 集成,经过测试,成功.今天从0开始一步一步操作,将来会制作更复杂的地图与定位效果,大家共同学习,共同进步. 一 演示效果: 二 设计思路: 用html页面,装入百度地图,再将html页面放入iframe页中. 三 代码实现: 1  申请百度会员,并申请百度api ak(开发者密钥) 所有的第三方集成都需要密钥,相当于为当前的用户请求分配的一个id,服

Vue.js的组件化思想 —下

一.组件间的通信          组件实例的作用域是孤立的:这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.          在 Vue.js 中,父子组件的关系可以总结为 props down, events up .父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.如下图所示: 二. Prop — 父组件传递数据给子组件          pr

Vue.js的组件化思想--上

Vue.js的组件化思想--上 一.Vue中的组件 Vue视图层的灵魂 -  组件化 组件(Component)是 Vue.js 最强大的功能之一: 组件可以扩展 HTML 元素,封装可重用的代码: 在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 二.全局组件的创建和注册  全局组件-步骤:1.创建组件Vue.extend(),指定组件的名称--2.注册组件Vue.component()--3.

Vue.js的组件化思想--下

Vue.js的组件化思想--下 一.组件间的通信        组件实例的作用域是孤立的:这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.          在 Vue.js 中,父子组件的关系可以总结为 props down, events up .父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.如下图所示: 二. Prop - 父组件传递数据给子

为Node.js编写组件的几种方式

本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍使用v8 API跟使用swig框架的不同: (1)v8 API方式为官方提供的原生方法,功能强大而完善,缺点是需要熟悉v8 API,编写起来比较麻烦,是js强相关的,不容易支持其它脚本语言. (2)swig为第三方支持,一个强大的组件开发工具,支持为python.lua.js等多种常见脚本语言生成C++组件