wex5 实战 框架拓展之1 公共data组件(Data)

时间:2022-09-21 17:16:31

一 前言

wex5作为开发利器,框架本身的集成能力与拓展能力可谓简单强大。在学习过程中,对框架的拓展能力,需要通过实践来丰富。今天,我以实际工作中的实例,先来看一看,框架上的公共data组件的实现与用法。

有朋友问了,每个页面都有data,为什么要做一个公共data组件呢?

我的设计原因是:

1. 比如商城页面里,首页,商品页,微淘页,等多个页面,同时用到了同一个商品data,并且通过list来装载商品列表。如果每个页面都加载data,数据库资源显然要访问三次,

页面响应显然会是重复加载,速度变慢。

2 在设计过程中,会不断修改共用data的字段,一旦数据库字段修改,前端data组件不能及时同步更新,需要手动重新链接表。这样,会显得操作很繁琐。

3. 充分发挥框架的拓展能力,简化设计思路,便于维护。

二 效果演示:

wex5 实战 框架拓展之1 公共data组件(Data)

wex5 实战 框架拓展之1 公共data组件(Data)

三 代码实现

1 框架首页,创建公共data, 这里主要讲商品goodsdata

wex5 实战 框架拓展之1 公共data组件(Data)

2 首页加载完成后创建全局变量,并引用为goodsdata

wex5 实战 框架拓展之1 公共data组件(Data)

3 list绑定公共data

wex5 实战 框架拓展之1 公共data组件(Data)

(注意) list 绑定data ,必须是全局变量的变量名,这里是goodsData,goddsData.datas表示公共data里的数据。

4 list中的行绑定方法

wex5 实战 框架拓展之1 公共data组件(Data)

5 调用公共data

wex5 实战 框架拓展之1 公共data组件(Data)

(注)不是想像中的window.xxxxx,而是直接取全局变量名,虽然提示未定义,经测试,可以直接使用。基于wex5的框架能力,全局data虽然未在页面中定义,但是做为全局变量可以在其它页面中直接调用变量名。

四 总结

1 全局data利于简化开发思路

2 全局变量易于调式修改

3 基于全局data更利于简化项目多页面的调度

wex5 实战 框架拓展之1 公共data组件(Data)的更多相关文章

  1. wex5 实战 框架拓展之2 事件派发与data刷新

    一 前言 讲完公共data,相信大家对框架级的data组件级绑定有了更新的认识,接下来我们继续深入,以求研究明白wex5的框架能力. 在一个web项目中,其实有一个data, 是基础框架必须的data ...

  2. wex5 实战 用户点评与提交设计技巧

    最近遇到很多同学做毕业设计,其中有一项是用户点评与提交.功能并不复杂,同学们又不会,做为一个完整的功能,如果用wex5来设计开发,事半功倍.今天就以景区实战来向大家展示wex5的高效与强大.半天可以设 ...

  3. 实战框架ABP

    abp及实战框架概述 接触abp也快一年了,有过大半年的abp项目开发经验,目前项目中所用的abp框架版本为0.10.3,最新的abp框架已经到了1.4,并且支持了asp.net core.关于abp ...

  4. java(样品集成框架spring、spring mvc、spring data jpa、hibernate)

    这是你自己的参考springside集成框架的开源项目.主要的整合spring.spring mvc.spring data jpa.hibernate几个框架,对于这些框架中仍然感觉更舒适sprin ...

  5. Thinkphp框架拓展包使用方式详细介绍--验证码实例(十一)

    原文:Thinkphp框架拓展包使用方式详细介绍--验证码实例(十一) 拓展压缩包的使用方式详细介绍 1:将拓展包解压:ThinkPHP3.1.2_Extend.zip   --> 将其下的 \ ...

  6. Web自动化必会知识:「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」

    1.web 基础-html.dom 对象.js 基本语法 Dom 对象里面涉及元素定位以及对元素的修改.因为对元素操作当中涉及的一些 js 操作,js 基本语法要会用.得要掌握前端的基本用法.为什么要 ...

  7. 关于动态生成data组件

    /*! * WeX5 v3 (http://www.justep.com) * Copyright 2015 Justep, Inc. * Licensed under Apache License, ...

  8. rest-framework框架——认证、权限、频率组件

    一.rest-framework登录验证 1.models.py添加User和Token模型 class User(models.Model): name = models.CharField(max ...

  9. $.data()、$().data

    两个方法很相似,但是有区别,简单说一下: $.data():jq的静态方法,也就是jQuery.data()直接调用 $().data():实例方法,先有实例,才能调用这个方法,例如:$(" ...

随机推荐

  1. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  2. MVC开发模式下的用户角色权限控制

    前提: MVC开发模式 大概思想: 1.在MVC开发模式下,每个功能都对应着不同的控制器或操作方法名(如修改密码功能可能对应着User/changepd),把每个功能对应的控制器名和操作方法名存到数据 ...

  3. .net 账号异地登录

    第一步:给用户名一个对应的字段记录登陆状态,比如 online , 登陆后就为1, 同时还应增加记录用户活动时间,比如actionTime, 在基类(比如初始化Conn的类), 加上 update [ ...

  4. 十分钟让你的javascript登峰造极

    javascipt被称作前端的灵魂,没法灵活运用它,你的前端就只是一具行死走肉.大多初学者能顺利度过div+css,然后倒在了js怀抱,即时跨过了这一关,也只是会用,其底层原理一概不知.小编这就带大家 ...

  5. [deviceone开发]-do_GridView的简单示例

    一.简介 do_GridView的高度支持-1,根据gridview里item的个数来决定gridview的高度,这样gridview自身就无法滚动了,需要放到固定高度的scrollview里才能滚动 ...

  6. A quick renice command rescheduled the upgrade to a lower priority and I was back to surfing in no time.

    https://www.nixtutor.com/linux/changing-priority-on-linux-processes/ Changing Priority on Linux Proc ...

  7. HTML5-WebWorker

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 普通字符串与Hex编码字符串之间转换

    import java.io.UnsupportedEncodingException; import org.apache.commons.codec.binary.Hex; public clas ...

  9. 阿里云服务器linux&lpar;centos&rpar;常用命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  10. Entity Framework Core 执行SQL语句和存储过程

    无论ORM有多么强大,总会出现一些特殊的情况,它无法满足我们的要求.在这篇文章中,我们介绍几种执行SQL的方法. 表结构 在具体内容开始之前,我们先简单说明一下要使用的表结构. public clas ...