博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
atitit.atiHtmlUi web组件化方案与规范v1
阅读量:6433 次
发布时间:2019-06-23

本文共 1613 字,大约阅读时间需要 5 分钟。

atitit.atiHtmlUi web组件化方案与规范v1

 

 

1. 如何在现有html 标签基础上定义自己的组件1

2. 组件的构成与定义1

3. 组件的加载1

4. 组件css的加载2

5. 操作组件getVal,SetVal2

6. 组件化的本质目的并不一定是要为了可复用,而是提升可维护性。 不具有复用性的组件3

 

 

 

未来的WEB开发,将会效仿今天桌面软件的开发路子,那就是“组件化”。

目前组件化最好的就是React  angular了。。

React  的最大问题是以js为核心,嵌入html

anrular最大问题是啰嗦,繁琐。

 

1. 如何在现有html 标签基础上定义自己的组件

推荐像bootstrap哪些使用oocss的方式,在class属性上增加一个特殊的classname来表明组件的类型....

也可以使用扩展属性

 

 

2. 组件的构成与定义

Html css构成组件的外观,js添加act..

 

作者::  ★(attilax)>>>   绰号:老哇的爪子  全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊  汉字名:艾龙,  EMAIL:1466519819@qq.com

转载请注明来源: http://blog.csdn.net/attilax

 

 

3. 组件的加载

使用html文件作为组件,小型组件可以使用ajax读取载入,这样组件可以方便dw的设计。。大型组件可以使用ajax载入,也可以iframe方式载入。。

 

4. 组件css的加载

 

5. 操作组件getVal,SetVal

需要当html dom当主要的...

comboxUtil(#id).getVal();   相同当特别的的jq,,专门化的jq

 

 

这导致了界面可视化设计极差。。应该以html dom为基础,在html的基础上内嵌js。。Js本身就是代码,可视化要求相对较低。。Dom 标签使用常用的class 增加一个特点的oocss class来表明一个组件的类型,以及复合组件,或者可增加一个扩展属性。。

2.3.组件的属性以js为主

这带来查看属性值的调试的问题,如果可以在html标签上扩展属性,就方便调试,毕竟浏览器查看工具可以一目了然的查看属性的值

 

 

 

Web Components提供了一种组件化的推荐方式,具体来说,就是:

· 通过shadow DOM封装组件的内部结构

· 通过Custom Element对外提供组件的标签

· 通过Template Element定义组件的HTML模板

· 通过HTML imports控制组件的依赖加载

这几种东西,会对现有的各种前端框架/库产生很巨大的影响:

· 由于shadow DOM的出现,组件的内部实现隐藏性更好了,每个组件更加独立,但是这使得CSS变得很破碎,LESSSASS这样的样式框架面临重大挑战。

· 因为组件的隔离,每个组件内部的DOM复杂度降低了,所以选择器大多数情况下可以限制在组件内部了,常规选择器的复杂度降低,这会导致人们对jQuery的依赖下降。

· 又因为组件的隔离性加强,致力于建立前端组件化开发方式的各种框架/库(除Polymer外),在自己的组件实现方式与标准Web Components的结合,组件之间数据模型的同步等问题上,都遇到了不同寻常的挑战。

· HTML imports和新的组件封装方式的使用,会导致之前常用的以JavaScript为主体的各类组件定义方式处境尴尬,它们的依赖、加载,都面临了新的挑战,而由于全局作用域的弱化,请求的合并变得困难得多。

 

 

6. 组件化的本质目的并不一定是要为了可复用,而是提升可维护性。 不具有复用性的组件

 

 

7.  参考

 

组件化的Web王国 - 博客 - 伯乐在线.htm

 

JavaScript动态加载CSSJS文件 - 小炒花生米 - 博客园.html

 

 

你可能感兴趣的文章
java-信息安全(十一)-非对称加密算法ECC以及ECDSA签名
查看>>
(转)Flex的编译过程--ActionScript字节码(ABC)
查看>>
Directory Listing Denied
查看>>
今天讲座的感悟--java
查看>>
o(1)复杂度之双边滤波算法的原理、流程、实现及效果。
查看>>
corner2
查看>>
我见过的几种类型的员工(转)
查看>>
web前端的十种jquery特效及源码下载
查看>>
poj 3414 Pots (bfs+线索)
查看>>
Binary search
查看>>
http://jingyan.baidu.com/article/08b6a591f0fafc14a9092275.html
查看>>
MySQL查询数据表的Auto_Increment(自增id)
查看>>
java多线程系类:JUC集合:01之框架
查看>>
【Linux】 源码安装make命令详解,避免踩坑
查看>>
数据库中间表插入乱序
查看>>
[Python爬虫] 之四:Selenium 抓取微博数据
查看>>
使用OPENROWSET爆破SQL Server密码
查看>>
Mac_安装Homebrew以及Maven
查看>>
eclipse web开发Server配置
查看>>
曹政--互联网搜索老师傅
查看>>