TT学习备忘录- Web开发篇

最新推荐文章于 2026-06-17 17:25:37 发布

原创最新推荐文章于 2026-06-17 17:25:37 发布 · 695 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#web app #web开发

Web 专栏收录该内容

1 篇文章

订阅专栏

一位WEB开发新手分享从零开始搭建维基百科网站的经历，包括DOM操作、UI框架选择、数据库技术选型等方面的经验教训。

本人WEB开发新人，之前一直做底层的一些开发（学物理的，非计算机专业），主要用的是C和VHDL开发硬件，早年间业余得用VC，SQL和C#开发过一些学术类的应用，偶尔业余时间开发过一些IOS或ANDROID的APP，很少接触应用层的开发。

今年4月因项目要求，需要开发一个维基WIKIPEDIA，之前没有做过WEB APP，临时学习JAVASCRIPT, 一直以为开发WEB APP，HTML + CSS + 原生JAVASCRIPT 就是前端开发的所有了，前两者虽然没有学过，但比较简单，只花了很少的时间补习了下，因为之前有开发经验，所以JS也没有花太多时间，花1天时间看了一遍教程，就直接开始做项目了，所以在技术选型时，没有使用任何框架和库，因为是一个人SOLO干，交互设计，前端，服务器端都一个人搞，加上经验不足，于是噩梦开始了。所以写下一些经验之谈，备以后使用。

（另外备注一下，虽然是个程序员，但不太喜欢使用电脑和互联网，经常不使用手机，所以会犯以下的这些错误。更加喜欢是拿着弓去野外生存，拿着钢笔在纸上写程序，拿着吉他一个人去旅行，所以信息有时真的不灵通，有点过时，看来还是要及时更新脑子里的知识）

1. DOM的各种操作

Keywords: DOM (文档对象模型) , Jquery

用原生Javascript来进行DOM的各种操作，在不复杂的情况下还是OK的，但后期当class和id变得越来越复杂，越来越不够用时，一个Intelligent的元素选择器变得越来越重要，在准备自己写一个稍微smart一点的dom selector库时（当时真准备自己写一个库），我才知道原来有一个Jquery, 已经非常成熟了。

Jquery 教程：http://www.runoob.com/jquery/jquery-tutorial.html

Jquery 查询手册：http://hemin.cn/jq/index.html

Jquery CDN: http://www.bootcdn.cn/jquery/

2. UI Framework

Keywords: UI

我不是平面设计师，也不是UI或交互设计师，虽然在用HTML5+CSS3时不会很痛苦，但要设计出一个不错的UI还是有难度，尽管我是天平座的，审美还不错，但是开发的代码量相当的大，而且因为又要开发PC端，又要开发移动端，UI这一块浪费了很多时间，最终我找到一些解决方案是：使用UI框架

1) Bootstrap: Twitter开发的UI Framework（CSS3+JS）

教程与手册：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

2) SemanticUI: 用语义class来开发UI

教程与手册：http://www.semantic-ui.cn/

3) JQuery UI: Jquery出的UI Framework

教程与手册：http://www.runoob.com/jqueryui/jqueryui-tutorial.html

最终，我还是没有用他们的任意一个，因为它们的体积都太大，我用的服务器太差，加上目前项目的UI比较简单，但是还是备忘在这里，说不定哪天可以用到，Bootstrap和SemanticUI很简约，很好用，SemanticUI的体积有些大，Jquery UI自己不太喜欢，我喜欢很简约的东西。

3. 数据库

Keyword: SQL Server, MongoDB, Redis

Database这一块我以为自己很熟悉，因为不光WEB APP, 之前开发过的APP都使用过Database, 但仅限于SQL SERVER和MYSQL, 所以在数据库技术选型时，我使用了SQL Server(因为使用的Windows服务器)，因并行数越来越大，服务器又不是很好，于是我在想是不是有什么新技术，效率更高的，找到了这些：

1) MongoDB (NoSQL): 一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。

为什么使用NoSQL ?

今天我们可以通过第三方平台（如：Google,Facebook等）可以很容易的访问和抓取数据。用户的个人信息，社交网络，地理位置，用户生成的数据和用户操作日志已经成倍的增加。我们如果要对这些用户数据进行挖掘，那SQL数据库已经不适合这些应用了, NoSQL数据库的发展也却能很好的处理这些大的数据。对NoSQL最普遍的解释是"非关联型的"，强调Key-Value Stores和文档数据库的优点，而不是单纯的反对RDBMS

教程与手册：http://www.runoob.com/mongodb/mongodb-tutorial.html

2) Redis：REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统。Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。它通常被称为数据结构服务器，因为值（value）可以是字符串(String), 哈希(Map), 列表(list), 集合(sets) 和有序集合(sorted sets)等类型。

Redis 优势
性能极高 – Redis能读的速度是110000次/s,写的速度是81000次/s 。
丰富的数据类型 – Redis支持二进制案例的 Strings, Lists, Hashes, Sets 及 Ordered Sets 数据类型操作。
原子 – Redis的所有操作都是原子性的，同时Redis还支持对几个操作全并后的原子性执行。
丰富的特性 – Redis还支持 publish/subscribe, 通知, key 过期等等特性。

教程与手册：http://www.runoob.com/redis/redis-tutorial.html

4. Ajax

Keyword: Ajax

在学习Javascript过程中学到的东西，AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。

教程与手册：http://www.runoob.com/ajax/ajax-tutorial.html

5.构建SPAs（Single Page Applications）

Keyword: vue.js, angulasjs

angulasjs:

教程与手册：http://www.runoob.com/angularjs/angularjs-tutorial.html

vue.js:

教程与手册：lhttp://cn.vuejs.org/guide/index.html

6.正则表达示