怎么写可重用前端控件

1.react redux怎样写可重用组件

一个网站,从功能上划分,都能整理出一个个细小的组件,比如一个头部,一个按钮,一个banner,那么怎样才能写好一个可以在多个页面共享数据或私有状态的组件呢? 以一个移动端常见的header头部为例,左边是返回按钮,有的还带有文字,中间是标题文字,右边可能有图片或者文字。

返回按钮 标题 返回按钮 返回文字(backText) 标题(title) 图片或文字(icon) 返回点击事件 图片或文字点击事件(handleClick) 背景样式 文字样式 这8个基本因素是所有头部都共用的,有的可有,有的可无,为了保证每个网页都能调用同一个头部组件,又要确保文本和事件还有样式可以自定义。将可变的因素提取出来,通过变量的方式传入组件。

在react中,传递变量用this.props。 const {backText, title, icon, handleClick} = this.propslet _backText = backText || false, _title = title || false, _icon = icon || falsereturn ( {_backText} {_title} ) 在父容器里面调用header组件的用法和安卓上类似,都是通过参数初始化配置。

handleClick(){ //注意,使用context的童鞋,需要定义contextType才可以,不然会报错 this.context.router.go(-1)}render() { return (

)}static contextTypes = { router: React.PropTypes.object.isRequired}; 通过简单的配置,就能构造更多可复用的组件,组件拆的越细,复用的程度就越高,这里没有做传入样式的例子,但是样式的初始化也是类似的方法。 还有常用的组件,如弹框: 标题 中间内容,可以是text或者带有多个标签样式的text 左边按钮,通常叫做取消 右边按钮,通常叫做确认 跟header组件实现一样,首先把可变的数据部分和事件抽象出来。

标题(title) 中间内容(content) 左边按钮文本(leftText) 右边按钮文本(rightText) 左边按钮的点击事件(leftClick) 右边按钮的点击事件(rightClick) render() { const {title, content, leftText, rightText, leftClick, rightClick} = this.props //这里再做一次判断空数据或者为定义数据的处理,没人能保证传递进来的参数一定存在或者一定不为空。 return ( {title} {content} {leftText} {rightText} )} 父容器组件调用弹框组件 leftClick() { //左边按钮事件}rightClick() { //右边按钮事件}render() { const content = 提示语1提示语2 return ( )} 到这里就结束了吗?不是的,我们知道,还有一个东西叫做state,react中,控制弹框的出现和消失,通过state来控制,而我这里要讲的是react和redux结合使用,发送一个dispacth action改变state的状态,使得弹框出现和隐藏。

leftClick() { //左边按钮事件,隐藏弹框,调用一个action函数,该action函数会改变reducer中state的状态 this.props.BombAction(false)}rightClick() { //右边按钮事件,点击跳转到下一个页面的路由 this.context.router.push(`/nextRoute`) //这里还需要做一件事,点击确定后,首先要清除掉弹出框的true状态,恢复成false,避免在其他页面共用该组件的弹出框还没点击出发事件就已经弹出来了。这一步也可以在BombBox组件内部用componentWillUnmount()来触发。

this.props.BombAction(false)}render() { const content = 提示语1提示语2//在叫做global(全局)的reducer定义1个state参数BombStatus,表示弹框的状态,true为显示弹框,false为隐藏弹框。默认是false const {BombStatus} = this.props.global return ( { BombStatus ? : false } )}static contextTypes = { router: React.PropTypes.object.isRequired}; 到这里,一个基本的可复用弹框组件就完成了,在任意一个页面,调用该组件的方法都是一样的,即发送一个action去改变state的状态,然后让弹框组件加载进来。

隐藏也是改变state的状态。 还有很多的例子,比如表格,li列表(常见在分页组件上)等等。

无论是一个简单的组件,还是一个复杂的组件,都要记住一点,先抽象出来可变的内容和事件,然后通过action去控制组件的state状态,不要在组件内部去用setState和getState,前提是你也是用redux来管理state。

组件是个view,要保证组件的纯净,这样服用的程度就会更高。我的原创链接:页面中 然后

1、iframe 可以加载html页面

2、js ajax Ajax.load() 可以实现加载html页面

那补充下吧:

比如用方法一:

123.html

<html>

<head></head>

<body>

123123123

</body>

</html>

456.html

<html>

<head></head>

<body>

<iframe src="./123.html" frameborder="0" scrolling="no" height="100px" width="100px" noresize="noresize"></iframe>

</body>

</html>

你可以测试下

3.怎么创作自定义控件

本“入门”节说明高级开发人员可以如何编写他们自己的在 ASP.NET 页框架中工作的 ASP.NET 服务器控件。通过编写自己的自定义 ASP.NET 服务器控件,可以封装可在 ASP.NET 页上重用的控件中的自定义用户界面和其他功能。“入门”通过实际操作的示例提供关于如何创作自定义控件的介绍。有关控件创作的更多信息,请参阅“Microsoft .NET 框架 SDK”文档中的“开发 ASP.NET 服务器控件”。

注意:本节介绍的控件虽然在运行时可以在 ASP.NET 页上正常工作,但是在设计时可能无法在窗体设计器(如 Microsoft Visual Studio .NET)中正常工作。为了能在设计器中工作,控件需要应用此处未说明的设计时属性。有关需要应用的设计时属性的详细信息,请参阅 SDK 文档中的“组件的设计时属性”。

开发简单的自定义控件

开始创作您自己的 ASP.NET 服务器控件很容易。创建简单的自定义控件时,您所要做的只是定义从 System.Web.UI.Control 派生的类并重写它的 Render 方法。Render 方法采用 System.Web.UI.HtmlTextWriter 类型的参数。控件要发送到客户端的 HTML 作为字符串参数传递到 HtmlTextWriter 的 Write 方法。

定义简单属性

属性类似具有访问器方法的“聪明”字段。应该从控件公开属性而不是公开公共字段,因为属性允许数据隐藏、可以版本化并受可视化设计器的支持。属性具有设置和检索属性的 get/set 访问器方法,并允许在需要时执行附加的程序逻辑。

下面的示例显示如何添加与基元数据类型(如整型、布尔型和字符串)对应的简单属性。该示例定义三个属性——Message 属于字符串类型,MessageSize 属于枚举类型,Iterations 属于整型类型。注意设置简单属性和枚举属性的页语法。

注意 ASP.NET 具有设置子属性的特殊语法。下面的代码示例显示如何以声明方式设置 SimpleSubProperty 上的 Format.Color 和 Format.Size 子属性。“-”语法指示子属性。

检索内部内容

每个控件都具有从 System.Web.UI.Control 继承的 Controls 属性。这是表示控件的子控件(如果有)的集合属性。如果控件未用 标记,或是标记为 (ChildrenAsProperties = false),则当控件在页上以声明方式使用时,ASP.NET 页框架将应用以下分析逻辑。如果分析器在控件的标记内遇到嵌套控件,它将创建嵌套控件的实例并将它们添加到控件的 Controls 属性。标记之间的文本添加为 LiteralControl。任何其他嵌套元素都生成分析器错误。

下面的示例显示自定义控件 SimpleInnerContent。该控件通过检查是否已将 LiteralControl 添加到它的控件集合中,来呈现添加在其标记之间的文本。如果已添加,则它将检索 LiteralControl 的 Text 属性,并将其追加到它的输出字符串。

如果自定义控件是从 WebControl 派生的,它将不具有示例中描述的分析逻辑,因为 WebControl 是用 (ChildrenAsProperties = true) 标记的,这导致不同的分析逻辑。有关 的更多信息,请参阅 SDK 文档。

开发复合控件

可以通过使用类撰写组合现有控件来创作新控件。复合控件等效于使用 ASP.NET 页语法创作的用户控件。用户控件和复合控件之间的主要差异是用户控件保持为 .ascx 文本文件,而复合控件则经过编译并保持在程序集中。

开发复合控件的主要步骤是:

4.web前端怎么写好代码

web前端开发需要掌握的技术:

1、

学习html,这个是最简单的,也是最基础的。要熟练掌握div、form table、ul

li、p、span、font这些标签,这些都是最常用的,特别是div和table,div用于布局、table也可以用于布局,但是不灵活,基本

table是用来和数据打交道。

2、学习css,这里说的css不包括css3,一般我们看到web前端开发工程师的要求里面,有一个会使

用css+html或者css+div来进行界面布局,所以css是用于辅助html来布局和展示的,我们称之为“css样式”,为什么会说

css+div呢?因为我上面说了div就是html主要用于布局的东西,所以div就是核心掌握的东西!那么css肯定必须要配合div来使用才好。

css要熟练掌握float、position、width、height,以及对于的最大最小、会使用百分百、overflow、margin、

padding等等,这些都是跟布局 有关系的样式,一点要掌握。

3、学习js。

可能前两个大家觉得还过的去,看到js就蛋疼了,其实吧,js入门很简单的,不需要会很多东西的,只要会根据某个id、或者name拿到网页dom或者样

式、或者值,然后会给某个id或者name的元素标签赋值、或者追加数据、追html,这个是跟数据有关系的操作,然后数据逻辑判断,效果方面的,无非就

是跳转、弹框、隐藏什么的,把这些全部结合其他就是实际用途了,代码一点都不难,会了这些基础js,其他的直接百度就好了。然后看多了,用多了,就什么都

不是问题了。

4、学习jquery。jquery是相当于把js封装了一套的一个js插件,目的就是操作起来更方便,代码写的更少,jquery入门也很简单,那些是入门需要学的和js一样,只是换成了jq的代码。其他的一样百度就够了。

5、

最好会点后台语言,比如java、php,为什么呢?因为我们前台界面的数据都是从后台来的,如果会点后台代码,就知道怎么跟后台交互数据是最好的,

这样节约时间,也可以让前端代码更规范。不然可能因为你的写法和后端给来的数据不能结合上,那么前端代码又得重新写,那就更蛋疼了。

6、学

习css3+html5,为什么这个放最后呢?哈哈,因为我自己也不太会,毕竟术业有专攻嘛,虽然这个很流行,但是我是搞后端的,在工作中用不到

它,只有在自己网站需要改样式,或者朋友网站样式出问题的时候,我才会去临时去研究下。但是如果你们是准备专门搞前端,那么最好还是学一下的。

面6点,基本是一个搞web前端开发工程师需要掌握的技术,然后我也尽量的把自己的一点点经验告诉了大家,但是大家不要以为上面6点就只有我说的那么容

易,不,他们之所以被人使用,之所以这么火,就是因为强大!我说的这么简单仅仅是打消你们觉得很难的原因,万事开头难,我讲的都是入门的方法和技巧以及需

要知道的东西。另外告诉大家一个秘密,不要以为代码很难敲,现在什么语言都有自动提示代码的功能,只需要输入一个字符,两个字符,后面的代码都会弹出来让

你选择!还怕啥呢?所以你也不要怕你英语不好了。

5.如何重用布局

重用布局有2种方法:

1 可以通过 <include/>; 标签来重用整个布局,比如:

<include

android:layout_width=”match_parent”

android:layout_height=”match_parent”

layout=”@layout/xxxx”/> (xxx就是你要重用的布局)

2 ,fragment是android开发中常用的控件,重要的是它可以重复使用,由于它是需要填充布局的,同时也起到了布局重用的作用。

6.VB6 多个同类控件的相同事件,代码如何重用

目前想到两个办法:

1、仍然使用数组,使用数组的好处是象你这种情况,其事件只要写一份就可以了,坏处是在代码中引用控件时都是下标,不能清楚地知道该控件的目的。解决的办法是:再定义一批控件变量。

以你三个TextBox举例:

控件数组为:text1(0)到text1(2)

定义三个窗体级变量

Dim txtName As TextBox

Dim txtSex As TextBox

Dim txtAge As TextBox

在FORM_LOAD事件中进行绑定

Set txtName = Text1(0)

Set txtSex = Text1(1)

Set txtAge = Text1(2)

在代码中就用代定义的变量来操作控件数组

该方法缺点是还要额外定义一批变量,而且维护也有点麻烦

2、自定义用户控件。

这个方法一劳永逸。为了节省时间,只把用到的属性、事件、方法放开就行了。

----------------------------------------

环境:VB6(SP6)

所有名称均取默认

1、新建一个工程

2、工程菜单,添加用户控件,选择里面的用户控件这一项,这时会多出一个UserControl1

3、拖动一个TextBox到UserControl1上面,为了使控件看起来象,需要写UserControl的Resize事件,将文本框大写调整的和UserControl1差不多大。

4、在TextBox控件的GotFotus事件中写你的代码。

5、下面你可能需要公开一些属性和方法,例如textbox的text属性、textbox的KeyPress事件等。这个可以用控件向导来解决,在“外接程序菜单-->ActiveX 控件接口向导”中,按着向导一步一步地设置就可以了。

大概就是这样了,你再参考参考MSDN。

7.如何实现真正意义的代码重用

Var CommonMoveEvent :TMouseMoveEvent;procedure CommonMoveEvent(Sender: TObject;Shift: TShiftState; X, Y: Integer);begin // Here is Reuse Code if Sender = Button1 then begin end else if Sender = Button2 then begin end else end else begin end; if Sender = Button3 then beginprocedure TMainForm.FormCreate(Sender: TObject);begin Button1.OnMouseMove := CommonMoveEvent; Button2.OnMouseMove := CommonMoveEvent;end; Button3.OnMouseMove := CommonMoveEvent; // Here is Other Init Code;end;。

8.java怎么实现代码的可重用性

可重用性有很多方面 对象的重用 方法的重用 变量的重用 对象和变量的可重用性很好理解吧 对象就是类的可重用性的体现 把同一类型的对象抽象化 创建类 变量的重用在于 同一作用域 一次定义 到处使用 方法的可重用性 在于 把同一逻辑抽象出来作为方法 在作用域内反复使用 比如 做加法 3 +4 5+ 6 7+8 就是同一逻辑 抽象出方法 public static int add(int a ,int b){ return a+b; } 现在只需要 int c = add(3,4) add(5,6) 次数少 逻辑简单看不出来什么 当逻辑复杂时 代码的可重用性 对于 代码的易读性是很好的提升。

怎么写可重用前端控件

转载请注明出处育才学习网 » 怎么写可重用前端控件

知识

怎么写牡丹花的样子

阅读(278)

本文主要为您介绍怎么写牡丹花的样子,内容包括怎样描写牡丹花在开放时的样子,描写牡丹花外貌的作文,描写牡丹花的样子片段。牡丹花如一位亭亭玉立的少女,慢慢的绽开它的笑脸。 她们颜色各异,花朵硕大,花瓣肥厚,花蕊也非常多。有红色的、黄色的

知识

妖字笔顺怎么写的

阅读(313)

本文主要为您介绍妖字笔顺怎么写的,内容包括妖字好看的连笔写法,妖繁体字怎么写,“妖怪”的“妖”字怎么写。妖

知识

生母n的笔画顺序怎么写

阅读(520)

本文主要为您介绍生母n的笔画顺序怎么写,内容包括n的笔顺怎么写,拼音“n”的笔顺怎么写,大写字母N的正确笔顺。拼音n的笔顺如下图:

知识

独字笔画顺序怎么写

阅读(296)

本文主要为您介绍独字笔画顺序怎么写,内容包括独的笔画顺序怎么写,独的笔画顺序怎么写,独的笔顺怎么写。独的笔顺: 笔画名称:撇、弯钩、撇、竖、横折、横、竖、横、点。 笔顺 [bǐ shùn] [释义] 汉字笔画的书写顺序。一般是先

知识

u和声调在拼音格怎么写

阅读(1079)

本文主要为您介绍u和声调在拼音格怎么写,内容包括u的四个声调怎么写,u的四个声调怎么写,汉语拼音中in、un、ün怎么标声调。汉语拼音中in、un、ün的声调都标在韵母上也就是标在i,u,u上。二、汉语拼音声调标注: 汉语拼音声调标注位置口诀:a母

知识

jsp下方显示怎么写

阅读(304)

本文主要为您介绍jsp下方显示怎么写,内容包括jsp中,怎么在图片的正下方显示图片的名称,在jsp页面中下面的写法是什么意思,JSP中想让文字到下面怎么写。你是不是在某个页面用css样式控制了啊? 看看页面中哪里出现了 类似 font-size:8px(语句类

知识

iuo怎么写

阅读(256)

本文主要为您介绍iuo怎么写,内容包括IUO是指什么,iuoiu的汉字是什么,1、看拼音,写词语Pan丨dengyou丨tongyl丨jufeng丨Iuan丨xion9。清明期间人们以各种方式祭奠和愐怀先人的传统文化中,确实蕴含有“感恩”的内涵。实际上,作为一个社会,没有“

知识

ipad写邮件怎么条件附件

阅读(292)

本文主要为您介绍ipad写邮件怎么条件附件,内容包括用IPAD发邮件怎样添加附件,ipad中邮件附件怎么,求助,用iPad发qq邮箱添加图片怎么操作谢谢。在手机上安装并登陆手机Q邮箱,点击页面右上角按钮。在出现的菜单中选中“发邮件”。接下来在出现

知识

骨科出科小结怎么写

阅读(251)

本文主要为您介绍骨科出科小结怎么写,内容包括骨科实习出科小结范文,骨科出科小结怎么写,骨科护士出科小结。这个是内科的小结: 时间过得真快,转眼我即将结束内、外、妇、儿四个大科室的实习,回顾这些日子,是苦是乐,是酸是甜,相信每个人心中都有

知识

武汉十一特色活动怎么写

阅读(275)

本文主要为您介绍武汉十一特色活动怎么写,内容包括武汉的特色节庆活动,武汉十一有什么活动,武汉市十一节日有什么活动武汉市十一节日有什么活动吗。名胜古迹系列: 黄鹤楼、古琴台、归元寺、长春观; 楚文化系列: 东湖楚城、楚天台、湖北省博物

知识

linuxjsp路径怎么写

阅读(257)

本文主要为您介绍linuxjsp路径怎么写,内容包括java下linux路径怎么写,java在linux路径怎么写,javalinuxfile路径怎么写。linux 下,我们常使用 cd ,grep,vi 等命令,有时候我们要查到这些命令所在的位置7a686964616fe78988e69

知识

lizheng怎么写

阅读(267)

本文主要为您介绍lizheng怎么写,内容包括东北方言lizheng怎么写,lizheng汉字是什么,bangbang面的bang怎样写。写法1 1点撩上天,黄河两道湾,8字大张口,言字往里走;你1扭,我1扭;你1长,我1长;当中夹个马大王,心字底,月字旁,留个勾结挂麻糖,

知识

时候的笔画顺序怎么写

阅读(358)

本文主要为您介绍时候的笔画顺序怎么写,内容包括时的笔顺怎么写,时的笔顺怎么写的,时的笔顺怎么写的。时的笔顺:竖、横折、横、横 、横、竖钩、点写法如下图

知识

他最喜欢白色英语怎么写

阅读(859)

本文主要为您介绍他最喜欢白色英语怎么写,内容包括张老师最喜欢白色用英语怎么说,她喜欢白色胜于黑色用英语怎么说,他喜欢穿白色很好看的男生英文翻译。be specified with a certain latitude, longitude, and altitude. Peopl

知识

保重用英语怎么写

阅读(313)

本文主要为您介绍保重用英语怎么写,内容包括“保重”英语怎么说,保重用英语怎么说,保重的英语怎么写啊。Take care、Gesundheit、Keep well、Be well、watching。具体解释如下:Take care:注意;

知识

js怎么写控件

阅读(253)

本文主要为您介绍js怎么写控件,内容包括如何用javascript写个插件,JavaScript安装某个安全控件的语句是怎么写的,如何用js实现根据某个控件的值控制另一个控件是否可写。开发插件 其实说白了 插件里面就是一个或多个函数的组合 你只需要将

知识

保重用英语英语怎么写

阅读(346)

本文主要为您介绍保重用英语英语怎么写,内容包括“保重”英语怎么说,各位保重用英语怎么说,保重的英语怎么写啊。Take care、Gesundheit、Keep well、Be well、watching。具体解释如下:Take care:注意;

知识

c中wmp控件怎么写url或文件名

阅读(234)

本文主要为您介绍c中wmp控件怎么写url或文件名,内容包括javascript引用wmp控件URL属性,WMP控件在VC++6.0中怎么用啊,windowsmediaplayer控件能打开的url总共。建立一个对话框 IDD_PLAYER_DIALOG 在对话框上单击右键,选择添加类,基类选择CDial

知识

怎么样写ocx控件

阅读(251)

本文主要为您介绍怎么样写ocx控件,内容包括1、如何注册OCX控件,如何安装OCX控件,如何注册OCX控件。1 OCX问:我写的系统中带了OCX 控件,当系统编译后发行时必须带上该OCX 控件,但在用户的机子上必须注册该OCX 控件才能使用,否

知识

vb注册控件代码怎么写

阅读(299)

本文主要为您介绍vb注册控件代码怎么写,内容包括怎样用VB代码注册控件,怎样用VB代码注册控件,vb中如何通过代码创建控件。Option ExplicitPrivate WithEvents NewButton As CommandButton通过使用With

知识

体重用英文怎么写

阅读(399)

本文主要为您介绍体重用英文怎么写,内容包括体重用英语怎么说,体重用英语怎么写,体重英语怎么写。体重的英文表达:weight、body weight weight读音音标:英 [weɪt] 美 [weɪt] 释义:n. 重量;体重;

知识

体重用英语怎么写

阅读(302)

本文主要为您介绍体重用英语怎么写,内容包括体重用英语怎么说,体重英语怎么写,体重用英语怎么写。体重的英文表达:weight、body weight weight读音音标:英 [weɪt] 美 [weɪt] 释义:n. 重量;体重;

[/e:loop]