前端代码给艺术带来了什么

2024-10-14

关于web前端代码艺术

以前一直都以为html代码要分离得很好,html一个文件,css一个文件,js一个文件,然后最好一个html页面里面不要要太多冗余的代码,不要恶心地引入一个又一个的js,连jquery的引入我都觉得有点重.今天尝试用了一下ace管理员模版,发现里面的东西好重,引用了一个又一个的js插件,不喜欢这种风格,借势随意地查看了下百度首页的源代码,360新标签页的源代码,发现其实他们的代码都是超级多的额,1000多行还不止.所以我自我感觉的,现在电脑端的硬件特别牛逼,可以随意地解析很重的html,js文件

前端代码标准最佳实践：CSS

前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来谈谈CSS代码的一些标准实践. 1,命名和其他语言规范一样,css的命名也讲究命名要有意义,命名要尽可能短但是要足够表达含义:命名的词用连字符连接. 不规范的命名: #navigation{ } .demoimage{ } .error_status{ } 规范的命名: #nav{ } .demo

Spring+SpringMVC+MyBatis整合进阶篇（四）RESTful实战(前端代码修改)

前言前文<RESTful API实战笔记(接口设计及Java后端实现)>中介绍了RESTful中后端开发的实现,主要是接口地址修改和返回数据的格式及规范的修改,本文则简单介绍一下,RESTful过程中前端代码的改变以及前后端分离的一些想法. 整合代码及修改计划在这次的代码修改过程中,后端改动相对较大,而前端代码的改动更多的是配合后端修改,主要是请求接口的url及js的ajax请求部分,修改后的代码更加符合RESTful规范: function saveArticle() { var tit

我和我的广告前端代码（四）：后台系统中，初尝vue、vue-cli

有一段都在重构之前文章<我和我的广告前端代码(三):一次重来的机会,必要的技术选型>中提到的广告前台展示项目,原有的基于页面的请求,改成了单广告位请求在这个过程中经历了好几次架构变更以及项目刹车.回过头来看看,感觉收获很大的.才刚刚把前台展示弄完,又开始了新的挑战——后台投放. 其实原来也是有投放系统的,自从我去年接手的时候就有了一个庞大的后台投放系统.这个系统的后台写的还是很不错的,但是由于当时前端团队人员较少,整个系统的页面就变成了,前端做个静态页,后端套模板的实现方式了.由于后期由后端同

基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#)

基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#) 为了完美解析GLSL源码,获取其中的信息(都有哪些in/out/uniform等),我决定做个GLSL编译器的前端(以后简称编译器或FrontEndParser). 以前我做过一个CGCompiler,可以自动生成LL(1)文法的编译器代码(C#语言的).于是我从<The OpenGL ® Shading Language>(以下简称"PDF")找到一个GLSL的文法,就开始试图将他改写为LL(1)文法.等

Effective前端5：减少前端代码耦合

什么是代码耦合?代码耦合的表现是改了一点毛发而牵动了全身,或者是想要改点东西,需要在一堆代码里面找半天.由于前端需要组织js/css/html,耦合的问题可能会更加明显,下面按照耦合的情况分别说明: 1. 避免全局耦合这应该是比较常见的耦合.全局耦合就是几个类.模块共用了全局变量或者全局数据结构,特别是一个变量跨了几个文件.例如下面,在html里面定义了一个变量: 在html里面定义全局变量 XHTML <script> var PAGE = 20; </s

【grunt第二弹】30分钟学会使用grunt打包前端代码（02）

前言上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码配置任务/grunt.initConfig 前面我们简单的介绍了grunt相关的知识,这里我们这里还需要再熟悉下Gruntfile相关的知识点,比如说配置任务 grunt的任务配置都是在Gruntfile中的grunt.initConfig方法中指定的,这个配置主要都是一些命名性属性比如我们上次用到的合并以及压缩的任务配置: grun

WEB开发：如何用js来模拟服务器的ajax响应，不依赖服务器来编写前端代码

一.问题的提出目前web前端开发,主流的思路是: 1)编写静态的html文件(不使用模板技术,与服务器无关) 2)页面通过ajax与服务器交互,进行数据的传输,数据格式为json格式这里存在一个问题,因为有大量的与服务器的ajax交互,前端代码的编写与测试对服务器的依赖很大.这有时可能会影响前端的开发效率. 本文我们提出一种方法,就是通过用js模拟服务器的请求响应,使的前端代码可以独立开发和调试,当最后实际与服务器交互时,只需替换下api即可,工作量很小. 二.解决方案具体的做法是: 1.

对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

前言本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文使用方式同样很简单,首先创建HTML容器如下: <div id="uploader" class="uploaderPic"> </div> 然后页面加载完成后渲染: $(function () { $("#uploader").pow

腾讯ISUX网页前端代码分析

看了一下腾讯ISUX网页,无论是pc端还是移动端,展示都挺好看的,先对其代码进行分析如下: 1,先看前三行代码 <!DOCTYPE html>  <html lang="en-US" prefix="og: http://ogp.me/ns#"> 第一行,很正常,目前的

Web 前端代码规范

Web 前端代码规范最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前端代码,这是通过分析 Github 众多前端代码库,总结出来的前端代码书写规范. 目录前端普适性规范 HTML 规范 CSS 规范 JS 规范 License public domain, Just take it. Thanks @Ruan YiFeng: https://github.com/

HTML的iframe标签妙用 - 在线执行前端代码的网站原理是什么？

在我自己的日常前端开发中,其实iframe标签出现的次数并不是很多.作为一个很古老(浏览器兼容性非常好)的标签,有必要去了解一下它的典型应用场景. (图片说明:所有浏览器都支持iframe,无论什么版本) 在什么情况下使用iframe呢?其实iframe有很多奇技淫巧的用法,但是最重要的一个特点是:<iframe>提供了一个和浏览器当前窗口相隔离的沙箱环境,相当于网页内部新开的另一个窗口.<iframe>外部的css/javascript,不会影响到<iframe>里面

《修改代码的艺术》【PDF】下载

<修改代码的艺术>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382309 内容简介 <修改代码的艺术>针对大型的.无测试的遗留代码基,提供了从头到尾的方案,让你能够更有效地应付它们,将你的遗留代码基改善得具有更高性能.更多功能.更好的可靠性和可控性.本书还包括了一组共24项解依赖技术,它们能帮助你单独对付代码中的问题片段,并实现更安全的修改.本书适合各层次软件开发人员.管理人员和测试人员阅读. 编辑推荐修改代码的集大成

vscode运行前端代码

vscode 可安装静态web服务器 Live Server用于运行前端代码,方便调试.最新的 Live Server已支持php动态页面. 安装方法是,点击左侧第五个图标,打开"扩展"页面,在文本框中输入Live Server,点击第一个搜索结果,在右侧页面中点击安装,等待安装完成. 运行方式是,选中项目,点击屏幕下方工具栏中的Go live按钮即可.再点击一次,即停止运行服务器. Live Server有一些默认配置选项,用户可以修改.点击文件->首选项->设置,

通过浏览器F12开发工具快速获取别的网站前端代码的方法

通过浏览器F12开发工具快速获取别的网站前端代码的方法说明:直接另存为网页是比较老的做法,会有很多没用的东西下载下来.通过F12开发工具,sources获取到的是比较好的,有目录结构的源文件.

将html前端代码提取公因数（5）

将html前端代码提取公因数(5) 注意:这是优化html代码,对于多个html代码相同的部分提取到一个模板中,只需要编写变化的html 1,利用Django提供的render方法的第三个参数的属性传入字典参数给模板:这个属性可以实现将重复的HTML代码进行合并,并将显示数据分离 2,找格式完全相同,文案不同的HTML代码将其用{% for b in blocks %}和{% endfor %}包裹进行遍历文案(文案做blocks字典处理),不同的文案用{{b.键名}}方式来调用 3,vie

app前端代码打包步骤

一.搭建项目环境 1.安装node.js 在网上找到nodejs压缩包,下载解压后安装node-v8.9.3-x64.msi文件. 安装完毕后,在windows的cmd控制台输入node -v或node --version命令,测试是否安装成功,如图1.1,出现版本号就是成功了. 或图1.1 测试nodejs图 2.安装npm npm(Node Package Manager)的安装,其实新版本的node已经集成了npm,所以安装成功node,就不用管这步了,为了保险,我们也测试下是否安装成功

linux nginx svn 更新前端代码

1.进入项目前端代码目录中 root@TServer:~# cd /home/p/web/gongti/ 2.更新svn上最新的代码版本 root@TServer:/home/p/web/gongti# svn up 3.这就可以了.

【Web前端开发最佳实践系列】前端代码推荐和建议

一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件) images(放置用于样式中的背景图) reset.css( 统一元素默认样式的样式文件) custom.css(业务相关样式文件) 3.resource(放置页面图片文件以及其他类型资源文件) 4.index.html 代码文件整体按照文件类型的不同归类,同一类型的代码文件则需要安装具体的业务

Grunt 5分钟上手：合并+压缩前端代码

Grunt 的各种优点这里就不扯了,对于新手来说合并(concat) + 压缩(uglify) 前端代码的需求量应该是最大的,这里以这俩种功能为主做一个5分钟的入门吧! 工作环境 $ node -v v0.10.35 $ npm -v 2.6.1 $ express -V 3.2.2 -- 如果你没准备好那就上: 传送门 nodeJS 菜鸟入门甚至上 google 百度一下 nodejs -- 搭建脚手架 1.项目目录结构: $ express gruntTest -e --自动省略提示

Web前端开发最佳实践（2）：前端代码重构

前言代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来确保重构后的代码逻辑,可对于普遍缺乏自动化测试的前端代码来说,重构之前一定要考虑再三才能下手. 有效地重构代码我曾经有一次不算太成功的前端重构经历,所幸的是没有导致太大的问题,但教训是惨痛的.此次重构的项目本身没有足够的自动化测试,尤其是针对前端的自动化测试,所以在重构之前也预想到了重构的风险.先

前端代码给艺术带来了什么

热门专题