前端到底需要什么

前几天看到这样的问题:
最近在看bootstrap,发现除了大一的时候看过的html+css,和一些js,JQuery之外,几乎没学什么关于前端的东西。偶尔了解过一些html5。想知道如果作为一个团队的前端负责人还需要学习哪些东西?发现bootstrap与.less有关,除了这个还有哪些是需要学习的?
其实,一步一步地来。
CSS不能编程?用Less、Sass、Stylus、甚至直接用Absurd,框架除了Bootstrap还有很多。JS写多了很麻烦?jQuery。移动开发?Zepto.js。结构不好?找框架,Backbone.js是MVC,AngularJS和Ember.js是MVVM,Twitter还弄了个事件驱动框架Flight。库多了要优化加载?RequireJS。
**代码质量成问题?**Jasmine、QUnit、Mocha做单元测试。各种浏览器都要测?用Karma。测试通过了部署还有问题?持续集成,用Travis CI。用户行为也要测?用Selenium。样式测试还有Viff。觉得JS都够麻烦的?用CoffeeScript。
**想做动画?**Canvas或SVG还有CSS3帮忙,干掉Flash。SVG太难画?用Snap.svg。想开发游戏?用Canvas。自己写FPS太低?用框架,CreateJS.。2D太幼稚?three.js帮你用WebGL开发3D,还不够给力?asm.js让你在浏览器中拥有虚幻3引擎。
这一堆东西都要配置部署,麻烦,用Grunt,库太多?用Bower管理,项目开始要创建各种文件文件夹?用Yeoman。开源项目太多了,GitHub.上找,不会?学Git。顺便用Jekyll托管博客,不是吧还有Ruby这玩意…SASS也是Ruby写的,等等Sublime Text是Python写的,要写插件?也学一下。调试太难?用Chrome开发者工具,一堆API和功能。
光在电脑浏览器上跑不给力?移动开发HTML5,离开网络就渣了?HTML5离线应用。不如原生应用?用PhoneGap。想调用原生API?开发Firefox OS应用吧。浏览器应用也得会吧,Chrome Firefox都有自己的文档。接着是不是把后端甩了,自己来,装Node.js,所以还得学点服务器知识,想用npm管理node包?linux技巧shell神马的也得学。想前后端通吃?再看看http协议。Web精通了?node-webkit让你可以写桌面程序了,继续学吧。(web前端学习交流群:328058344 禁止闲聊,非喜勿进!)
想学模块化开发?看看CommonJS和AMD规范。理解JS有偏差?看看ECMA-262,等等不知道什么时候第6版就要出了。浏览器各不相同,弄不清该怎么兼容?看看W3C标准,HTML写出来人看的懂,机器读不懂?要SEO,要支持残障人士?看HTML语义化,全会了但IE就是不支持?叫不出名字的浏览器尼玛连JS都不知道是啥?渐进增强。想一次把各种设备全搞定?响应式设计。
然后上面这些不过是一些讨巧的小技术。公司做什么业务的?了解一下行业信息。面向大众的产品?交互设计。美工不给力?UI设计。外包和咨询?设计模式、重构方法、算法、数据结构。知道软件工程吗?了解一下敏捷开发,或许还可以试试TDD、ATDD、BDD。
看了这么多东西,第一反应是不是求中文文档?学英语去吧。
这些也不过是我目前所能看到的一小部分,而且每段基本都是到了一个边界,并不是没得学了,而是继续学又是另一片天地。真心希望有人能帮我填补知识盲区。另外,我仅把一些知识点串起来,不全或不对的地方请见谅。
其实我一直都在说,我只是看这个问题是疑惑该学点什么,所以摆了些工具和框架。但我发现许多人都只记得“大牛”两个字,其实技术栈层面的前后端之分根本就很滑稽,无非是JavaScript和某某语言的区别罢了,对资源分配策略或者说思维的不同才是前后端之分的本质区别。如果没有领会到这一点的话,还是好好学技术,别管什么前端后端的了,项目需要你做web做页面,你就学前端再学点Java, Ruby, PHP之类的都可以。不要把前端这个概念当成懒得学其他技术的借口。未来JavaScript会变成相对浏览器来说的底层语言,开发者用各种各样语法的语言开发之后编译成JavaScript在浏览器上跑,如果还是只会前端三板斧,那注定被前端如火如荼的浪潮覆灭。TypeScript相比CoffeeScript已经有了一些质变,还有类似Haskell语法的Elm, 加上webpack的催化,这种趋势会越来越明显。

判断某个问题是前端问题还是后端问题,可以从以下几个方面入手: ### 从请求发送情况判断 先确认请求是否真的发送出去了。若请求未发出,大概率是前端问题,比如前端代码中请求的 URL 写错、请求方法使用错误或者存在 JavaScript 代码逻辑错误导致请求无法正常触发。若请求已成功发出,但没有得到预期响应,则需要进一步分析是前端还是后端问题[^1]。 ### 从接口返回与页面显示情况判断 - 前台按照需求要求的接口进行请求,若接口返回正常,但返回的值与页面显示不一致或页面没有显示。如果是接口返回与预期返回不符合则是后端问题,如果是前台显示把值写死了或显示的格式与后台返回的数据不一致则是前端的问题[^2]。 - 示例:前端请求一个用户信息接口,期望返回用户的姓名和年龄,但实际返回的数据中没有年龄字段,这是后端问题;若后端返回的数据包含姓名和年龄,但是前端页面只显示了姓名,可能是前端代码没有正确处理年龄字段,属于前端问题。 ### 从数据库数据情况判断 很多问题出现在接口的相互调用情形里。可以通过在数据库里查询数据、比对来判断是哪些接口出了问题。比如,在 A 模块添加一条数据,但是在 B 模块没有展示,这时通过查询数据库的数据来确认,是 A 模块没有插入数据,还是 B 模块没有查询到。知道接口是前端还是后端负责开发的,就知道问题该由谁来解决[^3]。 - 示例:在商品添加页面添加了一个商品,但是在商品列表页面没有显示该商品。查询数据库发现商品表中并没有新增该商品的记录,说明商品添加接口可能有问题,若此接口是后端负责开发,那么就是后端问题;若数据库中有该商品记录,但是商品列表页面没显示,可能是商品列表查询接口或者前端展示逻辑有问题,需要进一步分析该接口的开发归属来确定是前端还是后端问题。 ### 从跨域情况判断 若出现跨域问题,如提示“Access to XMLHttpRequest at 'http://example.com/api' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource”,需要先确认请求是否真的发送出去了。如果请求发送出去但被跨域策略阻止,通常是后端没有正确配置跨域请求的响应头,属于后端问题;若请求根本没发出去,可能是前端代码存在问题[^1]。 ### 代码示例 以下是一个简单的前端请求示例和后端处理示例,用于说明前后端交互: 前端代码(使用 JavaScript 和 Fetch API): ```javascript fetch('http://example.com/api/data', { method: 'GET', headers: { 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('请求出错:', error)); ``` 后端代码(使用 Python Flask): ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/data', methods=['GET']) def get_data(): data = {'message': '这是后端返回的数据'} return jsonify(data) if __name__ == '__main__': app.run() ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值