如何打造一个"逼格"的web前端项目

最近利用空余的时间(坐公交车看教程视频),重新了解了前后端分离,前端工程化等概念学习,思考如何打造一个“逼格”的web前端项目。

前端理论篇

前端代码规范:制定前端开发代码规范文档。

PS:重中之中,为了下一步实现前端工程化。

编码风格有很多。团队代码规范一定要统一。便于维护web项目。

    接口文档规范:制定RESTful架构接口规范文档。

PS:果断使用用apiDoc构建API文档。美观好看,易于维护。

还用Word或者Excel写文档,太low了。

前后端分离:简单理解为前端代码不影响后端代码,后端代码不影响前端代码。

PS:个人感觉就是有点像C/S架构,web前端 == apk || ipa 。

前端工程化(模块化):简单理解为前端代码不再零散,有组织,有规范的管理起来。

PS:个人感觉就是把后端mvc模式中v与c层都交了前端处理。

前端代码篇

html:当然采用最新的html5标签。

PS:值得一提的是,不要滥用html5的标签,比如section与div标签。

css:使用sass预处理,让css模块化,便于维护与管理css。

PS:我确实有点抵触css预处理,觉得没什么用,后来使用了css预处理自后,感觉真的很方便,

我选用sass是因为很多css框架都有集成sass,便于使用而已。

使用PostCSS后处理,让css标准化,写出高质量的css。

PS:后处理器基本是把sublime text里面的前端插件都搬过来了,完全实现前端自动化。

       js:使用html5新api。

PS:html5 api更容易操作dom,实现一些新功能,比如拖拽。

使用ES6的语法。

PS:js终于变成真正的javascript了,语法与java相似度更高了。

使用jquery库。

PS:  jquery永远不会过时,因为jquery有强大的插件。

使用js mvvm框架Angular.js或vue.js

PS:mvvm框架让web前端更易于提高web性能。当然啦,具体问题具体分析,慎用mvvm框架。

据个人感觉,vue.js比较适合移动端web项目,体积小,性能高。

Angular.js比较适合PC端大型项目,功能强大。

前端构建工具篇

nodejs:一个从Chrome浏览器提取出来的强大的js解析器(js运行环境)。

PS:与java的JRE类似,一个高性能的运行环境。

gulp:一个出色的前端任务构建工具。

PS:gulp使用js函数去编写任务流,简单明了。所以我选择gulp而不选grunt。

webpack:一个出色的前端打包构建工具。

PS:webpack真的是个神奇的打包工具,实现前端模块化的神器。

时间: 2024-10-12 10:44:10

如何打造一个"逼格"的web前端项目的相关文章

Angular01 通过angular-cli来搭建web前端项目

准备前提:已经搭建好angular-cli环境,还未搭建好的请参见三少的博客(开发基础分类) 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就是一个html文件 我们的应用会在app-root

作为一个合格的Web前端工程师,需要具备哪些技能呢?

那么作为一个合格的Web前端工程师,需要具备哪些技能呢? HTML5 HTML是超级文本标记语言,是为"网页创建和其他可在网页浏览器中看到的信息"设计的语言.HTML5是由万维网发布的最新的语言规范,是开放的Web网络平台的奠基石,所以做Web前端,精通HTML5是必须要掌握的一项技能. CSS3 CSS即层叠样式表. 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,

记录第一个web前端项目

大二上学期闲着没事儿干,便去了之前教我java的老师的项目组,去了之后才知道是做一个web前端的项目,但我对于这方面可以说完全是一个小白,但是老师催得也紧,简单学了学html,css,javascript跟vue,elementui便开始干活了. 在这个项目里,我的任务也挺简单的,就是画个几个设备管理界面.这里我就举一个界面的例子吧. <!--模板--> <template> <el-card class="box-card"> <div sl

一个8年web前端从业者的迷茫

来自一个8年前端从业者的迷茫 本人aming,创办了切图网 qietu.com,很少写这种自传性的帖子,希望能看完,因为会涉及到一些前端经验之谈. 8年前端从业者,8年光景不长,但是在web前端这个行业也不少了 ,我也是一个创业者,没有就职过BAT 是一个遗憾, 现在身边有些同学就职BAT 当高管,所以我想现在进到BAT应该还是有机会的 :) , 不过我还是毅然选择了创业. 理由很简单, 我骨子里不愿意给别人打工,我知道越早跳出来越容易,不然等到职位越来越高,薪水越来越高的时候,你不一定还有那个

HBuilder:一个不错的web前端IDE(代码编辑器)

Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS方面就弱爆了.DW虽然支持JS语法高亮也支持JQuery JqueryMobile 甚至还支持Phonegap.但是对于JS的支持到了有的程度而已,语法高亮.语法提示仅此而已了.我们需要的是什么呢? 1.高度匹配的语法提示,例如我定义了哪些空间,语法提示至少可以自动提示控件的ID,控件对应的方法函数,自定义函数的语法提示. 2.JS与HTML的大纲导航 3.J

如何成为一个优秀的web前端开发工程师

一.技术的必须的 作为一名最基础的前端工程师你必须掌握HTML.CSS和 JavaScript.三者必须同时精通,类似我字样对前端知识一知半解的,一遇到问题就停下工作就四处搜索解决方案的,首先就算不上一个合格的前端人 员.像我这样的如果当了前端工程师那工期肯定是不能保证的.合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下(包括搜索引擎),能够完成大多 数任务. 以下知识点是作为一个前端工程师必须了解和熟悉的: DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动. DO

如何打造一个令人愉悦的前端开发环境(一)

文章来源 最近几年,前端发展越来越迅速,各种萌新加入了前端这个大家庭,大有赶IOS.超Android的趋势呀!同时,萌新们提出了各种前端工作问题,除了最基础的html.css.js三板斧之外,最让人头疼的应该是关于环境的配置问题,所以以环境作为切入点,开始一系列的前端开发环境配置文章. 主要会涉及到打包.构建.编程工具.debug等等前端环境,以及前后端分离.Nodejs中间层使用伸展面. 工欲善其事必先利其器 以编程工具而言WebStorm.sublime.Atom.VS Code.Brack

建立一个复杂的 web 前端应用程序时候使用 AngularJS

平时也不会感觉到代码有什么问题,等开发多了,虽然感觉到问题了,但是你还是很难去按照面向对象的思维去写,因为按照面向对象去思维写需要你把握全局观,更是面向未来编程,把握不好,越写越乱.所以很多新手一直都还是按照面向过程来写.今天我主要用一些实际的例子讲解面向对象的CSS以及JS让你写更少的代码,让你越来越懒. 链式编程:将多个业务逻辑(方法)通过"."(点号)串联起来的一种代码风格,形似链条,故称链式编程.核心思想在于每个方法均返回自身实例. 泛型:可以理解为是一个类的"篮子&

创建一个简单的web.py项目

这个例子你可以看到可以再模板中编写python代码,也会粗略的编写第一个web.py程序了.步骤如下. 1.首先看结构 2.在testquery2.py中输入: import webimport os class index: def GET(self): print "进入index" render=web.template.frender("template/index2.html") return render("sha-ya") urls