web前端结构与行为的分离

Web标准:结构,表现和行为分离 Web标准:讨论内容结构表现行为分离  内容与表现分离,从标准到国人重视那天起,就已经讨论了,但是停留在div cssxhtml css纯代码的分离,思想上流程上,到底如何分离?古老的话题:一首古诗的分离  1.给你一首古诗,保存为毫无格式的一堆文字,你去理解它的内容 立即下载
如今的web开发也需要越来越接近MVC框架模式,web的前端可视为由结构+表现+行为组成,根据W3C的标准,使用xhtml+css已经使得结构和表现成功分离。在网上看到越来越多被重构过的网站是件非常令人欣喜的事情,如果现在要让我再做一个表格布局的网页,当我看到那一堆可以被一句CSS代替的表格代码时,我甚至会恶心到想吐!标准给挣扎在混沌的淤泥里的我们带来了清新空气,良好重构过的页面也像出淤泥而不染的清莲,香馨沁人心脾!那么下一步就应该是结构和行为的分离了,因为表现和行为本来是不相关的,就算微软的浏览器标准支持一个我当时非常喜欢的css里的behavior,但现在看来表现依然不能包括行为,不应该去代替行为行事。在这个三角形里,结构可以说是重点,表现依赖于结构,行为也依赖于结构,表现和行为的联系相对较少(除了一些特效操作),表现是被结构导入的,于是开始思考,行为是否也可以完全由外部导入,在结构即html页面里完全看不到一句javascript代码?
经过本人一番研究,至少一半左右简单应用的行为是可以分离开的。为什么说是一半呢,由于通过对对象定义的事件函数还存在参数传递的一些问题,但绕过这个障碍实施全部应用的可行性正在研究中,而且态势也在逐渐明朗,将在下文提及。所以答案是肯定的——结构(html)与行为(javascript)可以实现分离!
下面来看分离面临的核心问题,一个我的实例(为方便调试,js代码仍写在script标签里,但其他任何body里的对象都不再添加js代码):

 提示:您可以先修改部分代码再运行
函数initBehavior()的作用就是建立一个操作序列,为每个html文档结构中需要使用行为的对象进行事件触发与相应操作处理函数的连接,即生成行为。如例子中对id为holder的div元素添加的onclick事件函数,同理也可以添加onmouseover,onmouseout……等事件。于是我们分离的第一步完成了,这一步要做的就是重复initBehavior函数里面的内容,添加其他触发事件。
接下来要做的就是具体实现每个触发函数了,如上例showNode()函数,问题的核心也就在这里,因为定义的是事件处理入口,函数中没办法在定义事件的时候就确定参数,于是参数表就隐式被传递了。为什么说有参数表,这也是在查阅了网上一些资料才知道的,每个函数也是一个对象,函数对象就有一个属性是arguments:Array(),而当函数被调用时,参数都是arguments里的元素,这个大家可以另外做测试。要说的是,不同的浏览器在这里有一点小小的区别,对于IE,每当一个事件被触发时他的一个全局对象window.event就会接收到信息,在处理函数的参数表里并没有体现。而FF则不同,一个事件触发时,则与这个事件连接的处理函数会带有一个默认的事件参数,作为参数表里的第一个参数传递给处理函数,这里参数表就派上用场了,看上面的程序,由于函数没有定义形参,IE解析的参数表里面是空的,所以函数里定义的evt得到的是event的引用,FF则因为事件作为第一个参数表里的元素也得到一个事件对象。下一句也就容易理解了,对于不同浏览器,FF的事件来源属性是target,IE的是srcElement,那么到这里就通过解析得到事件来源对象,也就可以对这个对象进行相关操作了,那么本来需要从函数传递过来的对象参数也就不必要了。这里说到上面提到的一个不允许传递参数的机制,这个是在flash的ActionScript里也碰到的,仔细思考了一下,似乎明白了设置这个机制的道理,因为当一个事件触发函数时,其实需要传递的参数都是在外部暂时静态存在的,那么直接在函数里调用外部的对象或其他数据,也就完成了需求。
说是完成了,但心里总是隐隐约约觉得不妥,好象还是不完美,不过到这已经足够了,我们的目的是结构与行为的分离,那么已经实现了,收工大吉!
 
Zabbix7.0+DeepSeek大模型实现人工智能告警分析 本方案基于Zabbix7.0监控系统,通过底层webhook脚本机制集成Deepseek做故障分析提供解决方案,构建智能化运维体系。 阅读详情

相关推荐

ROS2实战:打造智能巡检机器人的关键技术与实现

本文详细介绍了基于ROS2和Navigation2构建智能巡检机器人的完整实战流程。通过设计主从协作的事件驱动架构,实现了机器人在已知地图中的自动导航、定点语音播报和环境图像采集功能。文章涵盖了从环境搭建、仿真配置到核心控制节点、语音服务与图像记录模块的代码实现,为开发者打造实用的自动巡检机器人提供了清晰的技术指南。

weixin_29031057的博客 222

谈谈web前端结构与行为的分离

如今的web开发也需要越来越接近MVC框架模式,web的前端可视为由结构+表现+行为组成,根据W3C的标准,使用xhtml+css已经使得结构和表现成功分离。在网上看到越来越多被重构过的网站是件非常令人欣喜的事情,如果现在要让我再做一个表格布局的网页,当我看到那一堆可以被一句CSS代替的表格代码时,我甚至会恶心到想吐!标准给挣扎在混沌的淤泥里的我们带来了清新空气,良好重构过的页面也像出淤泥而不染的...

weixin_33834137的博客 223

麒麟银河操作系统V10下ffmpeg的完整部署指南(兼容Linux系统)

本文提供在麒麟银河操作系统V10上从源码编译部署FFmpeg的完整指南,涵盖环境准备、核心依赖库(如x264)编译、FFmpeg本体配置安装、系统集成及常见问题排查。步骤详细,同样适用于Ubuntu、CentOS等主流Linux发行版,帮助用户打造功能强大的多媒体处理工具链。

weixin_29205061的博客 255

分离 结构 表现和行为

WEB标准提倡结构、表现和行为相 分离 Web包含三个层次(没错,它们都需要各自分离) HTML结构 CSS表现 JavaScript行为 HTML结构层是网页最重要的基础。HTML标签给予内容含义。CSS表现层则是定义您的HTML该如何显示。JavaScript行为层为页面增加交互。 不管如何,一个网页必需HTML结构层。没有HTML,没有网页。CSS和JavaScript都是可

Jane617_min的专栏 2589

告别重启烦恼:用WSL2让Docker和VMware在Win10上真正共存

本文详细介绍了如何在Windows 10系统上,借助WSL2实现Docker与VMware的真正共存,彻底告别以往需要反复重启切换的烦恼。通过启用Hyper-V兼容模式并进行正确配置,开发者无需重启即可同时高效运行容器和虚拟机,显著提升开发与测试工作流的连续性和效率。

salt9的博客 987

SAP Workflow 工作流开发步骤总结

SAP WORKFLOW

qq_36952606的博客 5091

web前端网页组成的三部分

输出语句。

weixin_62290696的博客 1729

告别混乱!AutoSar BswM模式管理实战:手把手教你配置Rule与ActionList(附避坑指南)

本文详细解析了AutoSar BswM模式管理的实战配置,重点介绍了Rule与ActionList的高效组合方法,帮助开发者避免常见陷阱。通过具体案例演示了从基础到复杂的配置步骤,包括模式仲裁、逻辑表达式构建及ActionList优化策略,提升汽车电子系统的协调性与可靠性。

weixin_27066963的博客 258

webpack基础篇(五):代码分离(Code Splitting)

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的bundle,以及控制资源加载优先级,如果使用合理,会极大缩减加载时间。 常用的代码分离方法有三种: 入口起点:使用 entry 配置手动地分离代码。 防止重复:使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离chunk。 动态导入:通过模块的内联函数 import 调用来分离代码。

知之为知之,不知为不知 3451

ARC学习(6)arc 编译器overlap 地址重叠方式使用

摘要:本文介绍了ARC编译器中使用overlap地址重叠的方法。

张一西的博客 717

基于 Qt C++ 的 船舶导航系统 UI

你想实现一个基于 **Qt C++** 的 **船舶导航系统 UI**,核心功能包括 **Qt Quick** 电子海图显示和 **NMEA 0183** 协议解析。"断开" : "连接"创建一个 Qt Quick 项目,选择 **Qt 6** 版本,确保勾选 **Qt Quick**、**Qt Network** 和 **Qt SQL** 模块。Label { text: "纬度:" }3. **连接设备**:点击 "连接" 按钮连接到 GPS 设备或模拟数据源。title: "连接设置"

寒寒豆豆软件公司的博客 127

网络安全从零开始(web安全前端基础)

一、web前端的基本构成 web前端由html 、css 、js组成。 HTML 超文本标记语言,是一种用于创建网页的标准标记语言 CSS 层叠样式表,能对网页中元素位置的排版进行像素级精准控制拥有对网页对象和模型样式编辑的能力 JS 浏览器可以执行的脚本语言,功能非常强大 在web前端中三个组成部分分别对网页进行修饰 HTML :是前端页面的骨架 CSS:是前端页面的化妆师 JS:丰富网页功能的脚本 二、HTML基础 HTML框架中标签大多数是成对出现的,只有极少部分是单独出现的, 在前端的书写

GetorPost的博客 2610

基于simulink 的不间断电源ups的项目实例

UPS系统的核心组件包括整流器、逆变器、电池管理系统和控制系统。- **Three-Phase Controlled Rectifier**:设置触发角为0度,用于控制整流器的输出电压。- **Three-Phase Inverter**:设置逆变器的输出频率为60Hz,用于将直流电转换为交流电。- **Control System**:编写MATLAB函数,用于监测市电状态并控制各模块的工作模式。- **Step**:设置阶跃时间,例如0.05秒,阶跃前后的值分别为0和1,用于模拟市电中断。

xiaoheshang_123的博客 709

html和样式表分离,web前端之内容、样式和行为分离 | 木凡博客

web标准的核心理念就是结构标准、样式标准和行为标准,提倡结构、表现和行为相分离,即HTML-结构、css-表现、Javascript-行为分离。HTML标签给予内容含义,CSS表现层则定义HTML该如何显示(外观),JavaScript行为成为页面增加交互。内容、样式和行为分离有利于思考文档的语义结构,更容易维护和更改。语义化的结构有什么好处,简单说就是有利于搜索引擎爬虫更好的理解我们的网页,利...

weixin_32924297的博客 744

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

忽然想通不喜欢搞前端的原因

前端做出点效果来很容易,也方便体现价值,但往往代码耦合度很高,维护起来让人烦躁。 就连用得最广泛的前端框架Bootstrap都与Web标准的思想相背离。前阵子白宫网站部门不是公开表示不用bootstrap吗。 Web标准,体现了一套很前卫的思想:结构、表现、行为分离,以至于后来在不同的语言...

chuliaoqiao4046的博客 120

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

前端面试——前端页面有哪三层构成,分别是什么?作用是什么?

HTML、CSS和JS,是Web前端开发包括的三要素。有许多 web 设计师都有为纸质印刷品设计版面的经验。事实上,设计网站时,把网页当做纸质印刷品来对待是最容易想到的思想,除了把白纸换成了屏幕,其他做法没什么两样。这种做法注定会失败。 Web 是一种不同的媒体。在设计纸质印刷品是时,必须把原始内容和版面设计交织在一起才能看到最终的印刷效果,但在设计网页时,只有将其分离开来才能获得最佳的结果。 ...

哈哈hyc的博客 1960

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

前端代码规范

Web 前端代码规范   必须 1 结构、样式、行为三层分离; 2 采用统一的缩进(两个或四个空格/Tab); 3 嵌套标签应当缩进一次,必须合理嵌套; 4 HTML页面必须包含文档类型声明,采用HTML5文档类型声明; Document 5 CSS样式全部采用外链的方式在标签中引入;禁用行内样式,复用已有的样式规则;

winstar1688的专栏 564

WEB前端零基础入门-01入门篇

网页相关概念、常用浏览器及内核、WEB标准

jiangjunm的博客 181

【Web前端】1.网页等基础概念了解

Web前端一、Web系统二、网站与网页1.网站(web site)2.网页(web page)3.主页(home page) 一、Web系统 Web系统分为Web前端和后端。 Web前端:网页上为用户呈现的部分 Web后端:与数据库进行交互,完成数据存取 二、网站与网页 1.网站(web site) 互联网上用于展示特定内容的相关网页的集合 2.网页(web page) 网站中的一页,一个网站中的网页通过“超链接”的方式被组织在一起 3.主页(home page) 进入网站看到的第一个网页,主页的文件名通常

weixin_41806595的博客 1266

2021-03-30

Web标准(重点) Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。 Web标准的构成:结构(Structure)、表现(Presentation)、行为(Behavior)三个方面。 标准说明 结构 结构用于对网页元素进行整理和分类,先阶段主要学的是HTML. 表现 表现用于设置网页元素的版式、颜色大小等外观样式,主要指的是CSS. 行为 行为是指网页模型的定义及交互的填写,现阶段主要学的是Javasrcipt Web标准提出的最佳体验方案:结

m0_54520571的博客 64

Web前端入门基础—HTML(1)

Web前端是给用户展示的网页页面,即网站的前台部分,可能包含设计、特效、用户交互等。该开发技术主要包括:HTML、CSS和JavaScript。Web标准提出的最佳体验方案:结构、样式、行为相分离HTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。HTML不是一种编程语言,而是一种标记语言。标记语言是一套标记标签。HTML标签分为双标签和单标签双标签是指由开始和结束两个标签符号组成的标签。基本语法格式:内容其关系可以分为两类

m0_70069931的博客 465
上一篇: 缩略图自适应宽和高
下一篇: 在ASP.NET中使用NHibernate
SmartJavaer
博客等级 码龄21年 13粉丝 37原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值