从零开始学前端,也要注意大局观

一晃零基础web前端课程又讲一周了。

这一周我们都做了些什么呢?一是把json的编辑和获取都过了,然后是使用json来生成dom并绑定相应事件然后添加到页面中。在大概周三的时候,用了近一天1的时间,带他们把phpstudy装好,只为了让目前课程中一直在做的项目,真正运行在Apache的服务环境之中。

这样的好处很明显,第一可以进行ajax操作,第二让他们熟悉最初步的开发环境的配置。虽然phpstudy的安装已经是极其傻瓜化了,只要一直下一步就可以安装完成。但在实际的安装过程中,还是出了不少状况。

我是跟他们这样讲的,这是最简单的环境配置,以后在实际的工作中,你们会面对各种工作环境的配置,不同的服务器之间的切换,在不同的ip中获取不同的资源。。这些都需要你自己去配置。而这个Apache就是最初的开始。

而昨天晚上我自己研究了一会php,写出了第一个接口,用来给我的学生们远程调用,这样他们就不用再在自己的电脑上写假数据来模拟了。

而今天,因为是周末讲的新知识不多,为了让他们能够合理、明白的调用json接口,上午讲了2个多小时的跨域,就为了让他们明白,如何和为什么要使用jsonp方式来调用我这边的接口。

因为我这是远程上课,这些学生们分散在世界各地。呵呵,真的是世界各地,有一个澳洲的,还有二个美国的,国内最远的是在新疆。咱们国家幅员辽阔,我们基本上是没有可能聚在一起上课的,所以用jsonp来调用我的接口势在必行。

而下午的时候,讲了下如何写通用的公共方法。我带他们实现了一个最简单的对于ajax的二次封装,其实就是搞了个getFn方法而已,接收一个url和一个匿名函数做为success回调之用。

其实这都是小意思,这一周最大的动作就是带他们把目前已经写好的代码,分成二次进行了整理。第一次把完全暴露在外的代码用各自功能的名称命名的函数进行了封装;第二次则把这些函数按功能拆分在不同的js文件中。目前已经装代码分在main.js、common.js、config.js三个文件之中,下一步会再根据不同的事件,进行进一步的细分。这么做的目的就是为了后续的webpack的教学做好准备。

写代码一定要有“大局观”,就是你写的东西,是全局中的哪一个部分。你写的整个的全局是什么样的结构。这个往大了说,就是前端架构的设计。

从上月15号开始到今天,他们已经学习了近20天。能够取得目前的成绩我还是比较满意的。

到目前这止,我们已经搞好了json,ajax,jsonp,Apache,我这边的接口和数据也准备好了,首页的开发工作和进度即将结束,在下一周就开始“点击不同商品进入商品详情页”,而商品详情页其实只是一个页面模板,它是在前端通过json渲染生成的。(目前是这样安排,计划在讲到2月初时,这个部分的技术会换为nodejs渲染前端页面,到那时再教他们nodejs)

在给他们讲课的过程中,我经常强调,第一表面上我们在学习技术,但实际上我们在学习如何“理解业务”; 第二,你们就是要学习我的解决问题的方法。因为我事实上不可能把所有的疑问,所有的技术都教给你们。这是我一再很明确的向他们灌输的思想。

这篇文章即是本周的总结,也是下一周学习工作的开始。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2017-01-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静晴轩

快应用之开发体验纪要

何谓「快应用」呢?它是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。其标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准...

1232
来自专栏企鹅号快讯

前后端分离实践

前后端分离并不是什么新鲜事,到处都是前后端分离的实践。然而一些历史项目在从一体化 Web 设计转向前后端分离的架构时,仍然不可避免的会遇到各种各样的问题。由于层...

3978
来自专栏FreeBuf

看我如何发现价值三千美金的Facebook视频缩略图信息泄露漏洞

本文我要分享的是我的一个$3000美金Facebook漏洞发现过程。在我决定对Facebook网站进行安全测试之后,我熟读了很多相关的漏洞发现writeup,发...

1410
来自专栏马哥教育

零基础到精通Linux,从这篇文章开始

正好在最近,看到了一篇不错的资料,其中对于Linux入门学习的描述极其详尽,因此特别摘抄其中段落,制作成思维导图分享给大家。

58210
来自专栏小特工作室

局域网内手机播放视频

  随着科技越来越发达,手机,平板越来越被大众接受,逐步成为必需品。手机、平板这类移动端的产品,和PC机相比,携带确实方便很多,而且功能也越来越和PC电脑接近,...

3286
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(一):项目介绍

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

3085
来自专栏精讲JAVA

前后端分离实践的架构设计

前后端分离的项目开发策略已经不是什么新鲜东西了,网上介绍这方面的文章非常多。我自己是在14年的时候接触到的,对这种开发策略一直爱不释手,不管新老项目都会首先用前...

1233
来自专栏JAVA高级架构

饿了么:日订单量超900万的架构设计及演进之路

网站在刚开始的时候大概只是一个想法:一个产业的模型,快速地将它产生出来。“快”是第一位的,不需要花太多精力在架构设计上。在网站进入扩张期才需要对架构投入更多的精...

1092
来自专栏EAWorld

微服务模式系列之二:微服务架构

译者评论: 微服务架构大家已经耳熟能详,但是我认为这篇文章最有价值的是这段: 但这类解决方案中也存在着以下弊端: 开发者必须应对创建分布式系统所产生的额外的复杂...

3375
来自专栏ThoughtWorks

无服务器架构下的运维 | 洞见

在介绍运维之前,大家先来快速了解一下无服务器(serverless)的概念。由于笔者的实战经验是在AWS平台上,本文中出现的无服务器均指使用AWS Lambda...

1965

扫码关注云+社区