今天是国庆假期的第五天了,同时也是我学习JavaScript的第四天。经过了前面三天的学习,基本的概念也都过了一遍,是时候该做项目了。其实我之所以会选择国庆期间学前端,是因为我打算国庆之后开始来做一个电商项目。这个电商项目会很大,我应该是会采用分布式,主要目的不是为了上线也不是为了赚钱。而是单单纯纯的想全栈的做一次,提高技术水平。所以我必须先把前端学好。今天的学习打算呢,我是计划先用最原始的HTML,CSS,JavaScript来做一个页面好看点的项目,当然实际功能可能还是和昨天的购物车差不多。接着呢,我今天还要学习bootstrap和vue两大前端框架。不过我更多的还是会学习bootstrap,因为我是计划在我的项目中去使用它。

前天呢,学习第二天的时候我说过为了巩固面向对象的语法,所以是决定每天写一遍数据结构的。不过从明天开始就正式进入项目阶段了也就没必要写了。今天就写个单链表的翻转,然后写下购物车,当然这次的购物车要比昨天的购物车多了一些图片素材,主要目的还是为了巩固。

我们都知道栈数据结构是先进后出的,所以其实你要翻转单链表特别简单。只需要把数据放到栈里面再吐出来就可以了~没什么难度。但是呢,我前天写单链表的那种写法遍历出来和添加的顺序都是反的。所以应对这种情况使用栈反而无法翻转,因为翻转后的数据再经历一次翻转就又相当于是还原了。所以这种情况下如果我要达到翻转效果,可以使用队列。队列是先进先出的,把本来就已经翻转的数据重新插入再遍历可以达到效果。

在这里我要声明一下,正常情况下都是使用栈来达到翻转效果。但是我这种情况使用队列会更好一些。

刚才把链表翻转了一下,主要目的不是锻炼数据结构,而是巩固JavaScript编程语法。如果要学习数据结构,个人是建议使用C语言或者C++语言来实现会更好一些。因为C/C++语言比较接近底层,特别是C语言。

购物车呢,昨天使用jQuery已经实现过一遍了,那么今天我就打算使用JavaScript来实现一遍。当然,这一次我会尽量把网页做的好看一点,当然实际的功能和昨天还是差不多。更多的还是为了巩固。做完购物车之后就要开始学习bootstrap和vue了。

这个购物车的页面我是对京东购物车的一个模仿。当然我也只是拿来学习用的,并不是拿去商业用途。还望别介意哈。

这个页面呢是使用纯HTML+CSS画的。然后JavaScript是用来干什么的呢?需求如下:

这个项目在JavaScript上的需求比昨天的都要简单,主要练习的方向是HTML和CSS。因为等下学框架的时候,比如说bootstrap框架它都是把这些底层封装好的。所以在学习框架之前先赶紧用一遍底层。

如果想到了一个需求的解决方法,但是又不知道用什么标签或者属性。那么《菜鸟教程》或者《w3school》这两个网站可以帮助自己。也可以在额外创建一个专门做实验的html文件。可以临时试试它的效果如何。

还有一件事就是,不管是HTML、CSS还是JavaScript。又或者其他语言,比如说Java,Python等。永远都不要花心思去记那些工具,方法什么的。只要知道有这个东西,然后它底层是怎么一回事就好了。知道原理写代码的时候看API能够看得懂就好了,因为人不可能全都记得住。有这个时间,还不如多去钻研一些逻辑思维,或者数据结构与算法。RBAC,设计模式什么的。当然学习底层个人觉得比较好的方法可以先学点C/C++语言。因为C语言是底层。就比如说垃圾回收机制,如果学过C语言的人他就能很快听得懂,学过C++就知道析构函数这种东西。个人观点,不喜勿喷,当然如果有大神的话,请求指点。因为本人是个菜鸟。哈哈^ ^。

在这里呢,使用两个文件来写。一个文件专门写CSS,另一个则是HTML+JavaScript。文件名字我也懒得取了,直接new_file省事。

这些都是比较常用的格式,主要是为了美观。我自己也是在网上搜索的。甚至说接下来的页面,我也会边看手册边写,就像看字典一样。因为我实话实说我真的没法记住它们。但是看手册的话,还是可以拼出来的。

基本的事项刚刚也说完了,现在直接放代码了。由于HTML和CSS代码比较多,而且也都是拼出来的没什么逻辑性,所以CSS就不放笔记里来了,HTML我也删减一部分,只保留绑定了事件的标签。笔记尽量记一些有逻辑性的东西。

Vue这个框架一般多用于前后端分离的项目,就像我上班的时候前端很多都是用Vue框架。前后端分离的好处就是可以让我们后端程序员只关心后端的代码,不用去管前端。还有就是开发的时候前端和后端各顾各的,不用谁先等谁写完。后端程序员用Responsebody发个Json给前端就没啥事了。其他的页面效果都让他们写。。。我也是因为长期这样,所以前端学的特别差。不过呢,前面我也说了我是打算自己全栈的来做一次分布式电商项目,我自己的电商项目可能还是会使用bootstrap框架,个人也更喜欢那个。

学习框架这一块呢,有时间可以买本书系统的学。也可以去vue官网看教程和API。真正系统的学习Vue内容还是很丰富的。我这里之所以一天学两个框架,是因为一方面我从事的是后端开发,并不是靠前端吃饭,我也想国庆以后再慢慢深入,二方面是这个东西我个人认为,还是多在项目中实践才不容易忘。不然长期不用也还是会忘记的。就像我们用惯了键盘打字以后,就很容易提笔忘字一个道理。

Vue框架用的很多,但并不是唯一。其他的前后端分离框架也有,最常用的有三款。

Vue.js 小巧,灵活,功能却很强大。在市场上占有率更高,属于成熟稳定的框架。

React相比Vue.js更新一些,近几年有追赶Vue.js的架势。更适合做移动项目。

AngularJS相比Vue更加大量一些。只有在一些大型项目中才可能被使用。

安装直接运行安装软件就可以了。然后输入CMD进入命令行,输入node-v和npm-v看见版本号就知道是否安装成功。然后下面的命令也都是在CMD命令行里面使用

如果希望能够解析HTML,必须使用v-html指令。v-html是任意HTML标签的属性,v-html的取值可以是Model中定义的字段。

组件:如果项目中多次用到类似效果,就可以把这个效果进行自定义组件。新建项目后默认存在HelloWorld.vue就是一个组件。组件文件必须导入才能使用。其中Helloworld为自定义名称,通过这个名称就可以调用对应组件。如果import时直接写组件名(大小写相同)IDEA会提升生成组件的路径,所以一般习惯上都是把名称定义为组件文件名。components: 组件文件只import是不能被使用的。必须在components中注册组件,注册后在中就可以通过组件名直接引用组件了。在中组件以标签形式存在,标签名为组件名。其中msg是在Helloworld中定义的props参。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注