网站项目开发学习手册

作者: 筑梦师Winston | 来源:发表于2018-05-10 17:37 被阅读1007次

    前言

    这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程.

    全栈开发自学笔记 已开源

    本文阅读建议
    1.一定要辩证的看待本文.
    2.本文仅代表个人片面观点,如有不同观点,还往及时指出.
    3.本文主要是经过网站项目的第一轮全方位学习以后,对网站项目的整体看法,并对个人的看法进行总结.
    4.本文所表达观点并不是最终观点,还会更新,因为本人还在学习过程中,有什么遗漏或错误还望各位指出.
    5.本文当中的网络项目进化史,会详细的为你阐述当前网站和之前的网站趋势.让你在进行网站项目学习之前,拥有整体的概念去进行学习.
    6.觉得哪里不妥请在评论留下建议~
    7.觉得还行的话就点个小心心鼓励下我吧~
    

    目录
    1.网站项目概述
    2.前端前景
    3.网站项目进化史
    4.网站项目学习体系
    

    网站项目概述

    网站项目大致分为前端+后端开发,学习网站项目的开发与建设,不等同于任何一种单一语言的学习,例如苹果App开发其重心是围绕着Objective-C语言进行开发,只有使用到了其他语言的框架或者第三方库才会进行学习.

    而网站项目开发,需要进行前端页面代码的编写,后端服务器的架设,服务器脚本语言的编写等.

    随着互联网时代的发展,目前的趋势已经是前后端分明,所以各位可以根据自己的想法选择性学习,不一定全都要精通,但一定要都了解,不然出了问题很难解决.

    前端前景

    • 什么是前端?前端的发展流程
      • 前端的HTML到HTML5 等一些基础知识,在这里推荐阅读图解HTTP和HeadFirst HTML & CSS书籍进行了解.我将着重阐述重点.
      • 14年因为培训机构的兴起,大量培训了iOS开发和安卓开发.导致iOS开发这个行业 在短短两年时间,从底部窜到顶部,再摔下来,17年4月,各大培训机构决定停止对iOS和安卓开发的培训,才使得18年的iOS和安卓行业渐渐回暖,暂居平稳.
      • 15年后半年,因为iOS和安卓开发的集中培训,大部分培训机构转战HTML5前端开发的培训.因为集中培训导致H5也行情不稳.
      • 16年后半年,大数据行业的兴起.
      • 17年的人工智能,机器学习,增强现实.
      • 那么为什么H5能在培训浪潮中依然坚挺?
      • 这就要说说H5发展历程上的重大事件
        • 刚开始火的原因便是因为革命性的HTML5发布.
        • 初次出现在大众面前便是Flash被HTML5和CSS3代替.
        • HTML5小游戏,见缝插针等.
        • 淘宝页面的混合开发
        • 微信小程序 & 微信公众号.
        • Node.js
        • 前端工程化 & 组件化 & 插件化
        • 其中两次爆炸性的发展 无异于是 小程序的出现,和Node.js的出现.
      • 前端工程师 就由原来 最早的切图工程师->网页工程师->大前端工程师
      • 而大前端工程师的诞生 还是和移动端脱离不了关系.
      • 大前端工程师一般都要会 网页开发+混合开发+移动端开发+小程序开发
      • Nodejs开发目前是一个拓展技能,但它绝对是大前端发展的趋势.

    网站项目进化史

    静态网页

    刚开始学习网站项目时,都会先从最基础的HTML+CSS静态网页学起.

    其针对方向为了解什么是HTML作为网页结构标签,CSS负责渲染网页.


    交互网页

    静态网页并不能满足用户需求,于是交互网页因此诞生,为了减少服务器请求次数,以及服务器负担,JavaScript诞生.

    JavaScript根据用户需求,执行不同操作,其中不乏修改网页结构和渲染样式的操作.

    例如:注册登录时,将不合理的请求通过JavaScript拦下来.


    发布网页

    写好了交互网页,想让别人访问,便需要服务器进行发布,服务器是属于后端开发工程师掌握的,在大型公司里还会有运维工程师,专门负责线上服务器的维护.

    通过服务器配置,将网页发布到指定站点,用户访问指定URL便可请求到你发布的网页.


    数据网页

    别人访问了你的网页,可你的网页并没有数据.网页数据不会凭空产生,没有数据的网页也就没有灵魂,即便拥有了交互,也是没有生命的.

    数据库是用来存放数据的,也是属于后端开发工程师掌握的,通过服务器脚本语言,根据业务需求存储或读取数据库中的数据,分发给各个发送到服务器请求的客户端.

    客户端、服务器、数据传递请阅读图解HTTP一书.

    到这里大致就是一个基本的网站项目基本要拥有:静态网页/交互网页、数据库&数据、服务器、服务器脚本语言文件.


    异步请求网页

    在异步请求网页出现之前,每次每个发送的请求,都要返回整个网页给客户端,使得服务器压力,以及数据传递量剧增.

    为了解决这个问题Ajax诞生,Ajax是前端工程师需要掌握的必备技能.根据业务需求刷新部分网页,例如:登录注册时,输入的用户名已被注册,可以直接提示出来,而不是跳转到新的页面弹出提示.


    美观的网页

    网站仅仅有了功能性是不行的还得有美观性,不能所有的网站的风格都一个样子,所以jQuery、EasyUI等各种第三方封装好的框架诞生.

    jQuery、EasyUI有着大量的成熟的框架,可以直接使用,打造出美观的网页.是前端工程师必备的技能.


    移动端网页/响应式布局

    随着安卓手机和苹果手机的普及,仅仅开发电脑端网页已经不能满足互联网公司的需求,还需要开发移动端的网页.

    为了不让移动端的网页再写一个项目的代码,Bootstrap诞生,它是由推特公司开源出来的框架,用来开发既能在网页端展示的网页,也能在移动端完美显示的网页.

    目前移动端网页比较多的使用Vue.js进行开发,因为其自带的大部分都是苹果端的控件效果.


    小程序/公众号开发

    随着微信的用户量激增,以及其平台的绝对地位,小程序的免安装特性,小程序也随之崛起.

    很多中小型公司是不会专门开设"小程序开发工程师"的职位的,一般小程序开发都是由公司里的前端工程师来干.所以也是前端工程师需要掌握的.

    目前还没有接触到这里,好像是要学习wxml和wxss的.


    前后端分离网站项目

    目前的网站项目趋势,就是有后端开发工程师,开发网站API文档,通过JSON进行数据传递,前端工程师访问指定接口,拿到数据,刷新页面.

    其中前后端分离的项目,并不需要前端工程师会后端技能,但要求双方都能良好的解决数据传递等问题.


    工程化开发/Node.js

    随着前端行业的发展,JavaScript的发展,Nodejs诞生,JavaScript不再是只能写客户端的脚本语言,而是可以用来写服务端语言,也是一个往全栈发展的趋势.

    目前没有接触工程化开发,个人了解是有一些基于Nodejs开发的工程化工具,可以大幅度提升工作效率.更好的体现前后端分离.

    其因为Nodejs的特性和优点,大大减少了前后端交流成本,用Nodejs直接开发一整个网站项目.

    在学习Nodejs之前还要先学会ES2015、ES6、ES7,其都是JavaScript的标准,不用头疼,只是每个版本更新了更好更容易的写法.


    总结

    就目前个人看法:目前前端的趋势就是通过对一些基础知识的学习,渐渐向Nodejs靠拢,并围绕Nodejs进行优雅的前端开发.


    网站项目学习体系

    下面简单阐述一下,自己对各个技能栈的理解.

    HTML

    • HTML文档
    • 结构标签语言,用来描述整个网站的结构
    • 其由各种不同 各种样式的HTML标签

    CSS

    • CSS负责 标签选择器 和样式渲染
    • 负责网页的渲染.
    • 通过标签选择器 选择HTML标签 进行样式渲染.

    JavaScript

    • 浏览器脚本语言,在浏览器运行的脚本语言
    • 其负责 浏览器对象BOM和HTML文档对象DOM 的修改
    • 以及 网页的事件处理, 例如数据校验, 登录注册,刷新,跳转等.
    • BOM (浏览器对象)
      • 通过JS获取浏览器对象,进行一些内定函数(方法)的执行,例如 添加书签,
    • DOM
      • 通过JS获取HTML文档对象 ,对网页中一些不需要再显示的模块进行删除,或者增加 刷新 数据.

    HTTP协议

    • HTTP协议,让你懂得一个网站项目的 数据是如何使用服务器进行发布,传递,到每个客户端进行展示.
    • 其遵循的规则以及协议.
    • 一个网站的主要角色的职能:服务器 + 服务器脚本语言 + 数据库 + 网页/文件等.
    • 请求和响应
    • 服务端和客户端

    Ajax

    • 异步请求
    • 其存在的意义是革命性的,可以使网页局部刷新,而不用频繁的传递整个页面,可以根据网页功能 业务需求,在任何位置 发送请求

    jQuery

    • 高效的JavaScript
    • 基于JavaScript的框架.可以快速高效的执行JavaScript所能执行的DOM和BOM操作
    • 其还封装了Ajax,可以更加方便的使用Ajax进行异步请求

    JSON

    • 目前流行的数据格式,可以描述复杂的对象类型,大型数据传递

    JSONP

    • 常用于解决跨域获取数据的问题,因为服务器不受同源策略的影响,故使用请求js的方式,进行跨域请求.

    Apache

    • 服务器
    • 其主要负责 站点配置,文件分发,响应请求.

    PHP

    • 服务器脚本语言
    • 其主要负责,处理请求, 返回指定的数据,
    • 需要数据的进行数据库操作,从数据库拿数据,然后返回数据

    MySQL

    • 数据存储
    • 开源免费
    • 其可以满足中小型公司,网络项目的开发.

    API

    • 网站API文档
    • 该文档由后端开发工程师放出,上面罗列了你请求什么接口,他返回什么数据.

    RESTful API

    • 一种设计模式
    • 将数据的操作体现在API上,更能实现前后端分离,常用于移动端App的API设计上,和部分的网页端API设计.

    路由

    • 目前没有进行系统学习,后期更新这里.

    ECMAScript 6

    • 其是下一代JavaScript的标准
    • 其实并不用恐惧,我一开始以为学习完JavaScript还要学ES6,好难受,其实是一个东西了.
    • 在会JavaScript(这里指ES5标准)的基础上,ES6增加了一些功能函数和简写形式函数.可以使你的JavaScript更加高效.

    JavaScript高级

    • 目前没有进行系统学习,后期更新这里.

    Node.js

    • 革命性的存在,其事件处理 I/O的性能等.
    • Nodejs使得JavaScript不再是一门只存在于浏览器的脚本语言,在Nodejs这两年社区和开源插件的开发,已经可以成熟的担任 前端工程化开发,前端组件化开发,进行后台服务器开发.
    • 也可以将Node.js看成一个整体,其集成了各种框架插件以后,可以做很多事情
    • Express
      • 其依赖于Node.js环境

    Vue.js

    国内开发的框架,非常流行的移动端网络框架.

    目前没有进行系统学习,后期更新这里.

    Angular.js

    我知道它封装了jQuery和Ajax.

    目前没有进行系统学习,后期更新这里.

    React.js

    Facebook开源的框架.

    目前没有进行系统学习,后期更新这里.


    总结

    目前还在根据自己学习的东西做一个小Demo,等到我学习到上面没有提及的知识点以后,我会再更新的.

    前端学习路漫漫,加油


    结束语

    如果您对这篇文章有什么意见或者建议,请评论与我讨论.
    如果您觉得还不错的话~可以点个喜欢鼓励我哦.
    如果您想和我一起学习,请毫不吝啬的私信我吧~
    介个是我的个人博客,欢迎参观哦~

    相关文章

      网友评论

        本文标题:网站项目开发学习手册

        本文链接:https://www.haomeiwen.com/subject/esrtdftx.html