TECH NOTES / 开发实践
前端入门学习笔记
原笔记 2021-05-27 · 整理于 2026-10-05
从 HTML、CSS、JavaScript 到界面框架，回看一份早期前端学习笔记。
资料说明：这是一份早期前端学习记录，保留了当时接触到的框架与个人判断，不作为当前框架选型排名。基础知识可以按 HTML → CSS → JavaScript 的顺序学习。
| 作者 | 说明 | 时间 | 版本号 |
|---|---|---|---|
| leiguoqing | 初始版本 | 2018-3-21 | 1.0 |
| leiguoqing | 添加数据绑定与交互和开发规范统一 | 2018-3-22 | 1.1 |
HTML5 & CSS3 & JS & JQuery
可以参考以下几个网站进行学习
tip：看的时候没必要一字不落的全部看完，之前学过的、你自己会用的就不用看了。其它的以前没有用过的，可以多看一下，最少要记住有这么个东西，目的是方便以后用的时候知道，可以直接百度查询。还有就是哪些部分是常用的，这个必须要熟悉并掌握。
上面的列举出来的HTML5、CSS3、JS是必须要掌握的，有时间也可以看看ES6的新特性-ES6新特性概览。
我自己的想法
一般在公司的话，我们没有必要什么都从零开始做，也就是不要重复造轮子，因为在公司没有那么多时间给你，所有一般前端页面的话就直接用框架完成就行了，说不定你辛辛苦苦做出来的东西，还没有人家框架做出来的东西好呢。各种浏览器、各种平台的手机的兼容性等等都没有框架处理得好，还有页面随意放大、缩小，布局不受影响。
我个人感觉市面上的前端的框架都大同小异，只要你掌握了其中一个框架的话，其它的应该也会很快上手的。用框架的前提是你的基础知识要牢固，其实，无论什么框架都是在最基础的上面进行的封装，目的就是减少开发人员的工作量，使得开发人员可以把更多的精力放在业务层上面。
我推荐的几个前端框架
前端框架我目前见过的就两种，响应式框架和非响应式框架
响应式框架:
其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。最主要的就是后面那句“可以智能地根据用户行为以及使用的设备环境进行相对应的布局”，说白了就是页面可以随着用户的屏幕的大小，布局会发生变化，使得其更加适合对应屏幕大小的显示。
像“LayUI”就是这样的框架，这种框架的好处是什么呢，就是开发人员只用写一套代码，在电脑端的浏览器和手机端能同时使用，大大的提升了开发效率和减少开发成本。推荐多学多看响应式的框架，不过也得必须掌握一个专门开发移动app的框架，感觉以后前端会越来越吃香，我的理由是什么呢，因为现在的手机配置都越来越高，网速现在也是越来越快，那么手机直接运行H5的话肯定是越来越流畅了，我个人感觉原生Android现在肯定是不会被H5所代替的，至少现在用原生Android写出来的东西效果比H5写出来的好太多了，以后很有可能被H5所替代，什么是原生Android呢，说简单点，就是app界面完全使用原生Android的xml文件编写的，其核心代码右Java实现，当然，现在还有一种语言也可以编写Android了，还是Google官方推荐的语言呢，它就是kotlin,这些东西，你就随便看看就行了，主要是我自己的想法，哈哈。
这两个是我们公司专门用来做后台的管理系统界面的：layui - 经典模块化前端UI框架官网 这个是中国人写的框架
layer,一个可以让你想到即可做到的JavaScript弹窗（层）解决方案,layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
还有其它的几个也挺不错的,有的是外国的框架，全英文的，你可以看中文的教程：
拼图 这个是中国人写的框架
UiKit(一款轻量级、模块化的前端框架，可快速构建强大的web前端界面)
相关博客：
可以参考参考,有时间你自己也可以去找找看非响应式框架
非响应式框架就是没有响应式框架的那些优点啰，但是有些框架不是响应式的框架，却非常适合做手机端的H5页面，说说做手机端的H5有什么用处，第一，可以使用混合开发实现AndroidAPP的开发，二：可以直接嵌套在微信公众号里面，借助微信的用户对自己的产品进行推广，三：人家想用你的东西，直接就可以用手机上的浏览器打开，app都不用下载，四：在学校的时候我们都是用的JSP去进行页面编写和开发，但是这样有一个弊端，就是一个java后台只能给对应的jsp页面提供数据，而jsp并没有上面说的H5的有点，不能实现跨平台使用，而当我们使用H5的时候，就再也不用担心这种问题了。因为H5是跨平台的，几乎任何地方都能用。
下面推荐几个适合做手机端页面的框架(移动web框架)jQuery WEUI 我们公司是用的这个
相关博客：
数据绑定与交互
数据交互
我眼中所认为的数据交互，无非就是前台和后台的数据交互，一般最常使用的就是Ajax了，他的最大的好处就是异步加载机制，我们前段为什么要使用H5而不使用我们上学的时候的JSP呢，你可以想想，如果你是用jsp的话，后台的管理平台需要提供对应的数据给他，前台的app也需要提供对应的数据给他，如果需要用原生Android开发app的话，又要单独给app提供一套接口，是不是很麻烦呢，所以，如果我们全部使用H5进行开发的话，后台统一使用json格式的数据，就可以实现一个后台既可以提供接口给前台的app，又可以提供接口给后台的管理系统，还可以提供接口给原生app，这样一来，一个后台就搞定了所有平台的开发，代码一下就简化了不少，再想想，管理系统，app有什么可以公用的接口呢？当然有，比如：登录、退出登录、忘记密码、注册等，这些接口实现的东西都一样，可以直接融合为一个使用，又大大的简化了代码，提升开发效率。
数据绑定
数据绑定这块呢，我先说说为什么要使用这个技术吧，如果按上面我所讲的体系去开发的话，就是后台统一返回json数据，而前台统一使用ajax去请求后台，请求完成之后，将获取到了json数据显示到页面，关键就是这一步，我来说个最简单的例子吧，现在后台已经给我们返回了几个学生的json数据，其中每个学生对象里面包含学生id、姓名、性别、年龄这几个字段，然后我们需要把这写数据显示到前台的表格之中，我们一般的做法就是使用js的innerTEXT()或innerHTML() (JQuery的text()或html()) 去实现吧,这样做的话，就需要我们动态的去拼接什么tr、td什么的，非常的蛋痛，所以我们就会想，有没有一种技术把我们的页面和数据分离开呢，我们只需要把页面和数据对应好，之后我们就只去关心数据发生什么样的变化，而页面就跟随者数据的变化而变化，所以我们就可以使用Vue来实现我们的需求,vue我只学了部分，里面的东西很多，但是我觉的在我们的项目中实际用得比较多的就是数据绑定这块了，关于数据绑定呢，vue是这样做的，首先我们先定义好一个vue对象，里面包含data（数据源）还有方法，有了数据源，我们再将定义好的数据源将需要显示这些数据的页面上的控件进行绑定，就比如上面我说的那个学生的例子，我们用vue来做的话就可以这样，在vue对象的data里面先定义好学生对象，应该是学生数组或集合，因为有很多个学生嘛，定义好之后呢，就和页面上的表格进行绑定，这里的绑定vue有个for循环，用法和jsp的jstl表达式有点像，我们就直接用个for循环把学生数组或集合和表格进行绑定即可，下一步就是请求后台然后获取数据了，我们就只用把后台的数据和data里面的数据源进行绑定，页面上就自动显示出来了，以后我们就只用管数据是什么样的了，比之前结构更清晰，和页面的耦合度也降低了，方便后期维护。
开发规范统一
规范的话我最开始想到了应该就是各种资源的命名规范吧，现在一般都是用小驼峰命名的方法吧，每个公司估计都有自己的规范，这个我就不说了。接下来说说我们怎么统一前台和后台开发，主要说说前台吧，在前台开发中我们页面基本上就是用框架去实现的，除非有的页面需要我们自己定制，框架实现不了的，就需要我们自己去写了，然后就是一个页面上的动画啊什么的，有的框架自己带的就有动画，目的就是为了增强用户的体验罢了，再接着就是把后台的数据显示到页面上，就是与后台交互嘛（用我上面所说的方法），在这些过程当中最重要的就是这个交互的过程了，我个人感觉吧。说到请求我们最常用的就是那四种嘛（get，put, update, delete），就是对应的增删改查，所以我们就可以把这几种请求全部都封装在一个js文件里面，就像JQuery那样吧，封装一个我们自己的js，当然里面不止可以封装请求的方法，还可以封装一些我们在开发中常用的一些工具嘛，就比如时间的操作啊，各种提示框啊等等，还有很多东西，根据自己的项目进行封装吧，每个公司都不一样的。封装好了这一份之后，以后做项目的话，我们直接引入这个js文件就可以使用了，很方便的。
结束语
这篇文章只是我个人对前端的认识，我本人是搞Java和Android的，如果有哪些地方说错了还请见谅，有什么问题可以发送到我的邮箱leiguoqing@outlook.com跟我说。最后谢谢你的观看。