为什么要去做这种尝试？

前端的开发模式已经在这几年发生了翻天覆地的变化了。现在借助于node和行业著名的几个前端框架可以轻松通吃前后端。当然也有不适用的场景，这里就略过。

于是乎，随着自己技术的成长，必然会去玩儿，一个人搞定一个web应用，也是很酷的事儿，以前后端开发工程师经常干这事儿，而前端人员大多数人技术面较窄，不过这也不是一成不变的，前端人员也开始往其他方向延伸，技术能力也在不断提升，以后的前端工程师，必会出现越来越多懂后端技术的人。

主要技术栈

• vue
• webpack
• element-UI
• nodeJS
• mongoDB

项目结构

开发思路梳理

虽然是一个人开发，但是也有一个基本的逻辑，就是还是需要大致分为两个部分来做。一个是前端逻辑，一个是后端逻辑。有点废话了，咳咳…

前端部分，这个对于我来说就相当熟悉了，vue-cli工具，基本可以把项目架构起来。而且可以通过node下的express框架可以轻松的做mock数据，开发效率大大增加。不过也感觉是废话，因为在完全的前后端分离的项目，前端肯定会用mock。

后端部分，使用express + moongoDB。在后端开发的时候，单独于项目开发，也可以直接在项目中开发。由于是一个人开发，我觉得没必要独立于该项目，新建一个项目。

统筹部署，假设前端部分和后端逻辑，api接口及数据库操作都已实现，如何部署呢？我们知道，前端部分是会在完成开发的时候，打包成一个静态资源的，我们只需要在后端处理时，设置好静态资源所在的目录，同时被请求是返回index.html即可。在项目中，本地查看，可通过node命令，运行后端入口文件，即可启动整个web应用。

(完)

非常完善的前端知识体系是什么样的？

废话不多说，咱上图！ 这是一张相对来说，非常完善的一张关于前端开发知识结构的图，这种图，一般给人的感觉就是，怎么有这么多东西要学啊！！！前端，从入门到放弃 🙁

的确，一个大神级别的前端开发，的确这是必须掌握的知识结构，不仅要求广度，还要求精。作为一个向大神看齐的我，又有超级有能量的好奇心驱使，我已入坑，注定会在coding的世界，越走越远，希望玩得快乐，享受痛苦，不断进步。

我的梳理

首先，我的梳理很个性化，完全是面向自己的，不是面向对象哟，所以，不求严禁，不求完善，只求过得去自己就行。

前端，从代码组成方面来看，主要涉及三种语言HTML,CSS和JavaScript。他们各自的功能为，HTML负责结构化，CSS是表现，JS是行为。随着互联网的发展，为了适应这种发展，前端作为web应用的一个重要组成部分，开始变得越来越重要，因为前端是最贴近用户的，它的性能和表现，直接影响用户的感受。所以，前端的终极目的就是用户的最佳的体验，服务好用户。

• JavaScript是解释类语言，解析就有效率问题，于是经过竞争，google的V8引擎胜出;
• JS很灵活，但是对于大型应用，灵活不是一种好事，走在前面的高级JSer们，遇水搭桥，逢山开路，出现了借鉴静态强类型的语言，如C#、Java而获得了利器TypeScript和CoffeeScript；
• 随着日益复杂的网页出现，功能要求开始增多，JS操作dom的繁琐，导致开发效率低下，JQuery出现了；
• web2.0到来，互联网越来越庞大，信息、服务越要越多，技术知道自己需要提前做好准备，于是在这之前，HTML5, css3, ES6到来了；
• JQuery很锋利，可是随着交互需求升级，JQuery操作dom越来越频繁，导致网页或应用的性能下降，开发效率也开始下降，到了这个口子，优化的需求迫切，于是为了解决这个问题，前端框架实践开始，诞生了很多框架，最后到今天，经过竞争，脱颖而出了Angular, React, Vue三大框架；
• 开发效率问题，网页或应用性能问题，代码扩展性和维护性问题，问题层出不穷，前辈们理清问题，打造工具，于是grunt, gulp, webpack等工具就问世了；
• 某位工程师想要开发一款高性能web服务器，经过考虑，比对优缺点，由于JS的特性，V8引擎的性能，node.js诞生；node.js它不仅在web服务器端表现良好，更对前端的开发，起到了很好地辅助作用；
• 未来的故事，还将继续…

(完)

1. 微信开发者工具：小程序的开发，需要使用微信开发者工具，小程序需要编译才能执行。注意不要文件保存时自动编译。编译是一个比较耗时的过程。这样非常影响开发效率和体验，还是手动编译好；

2. 数据绑定：小程序是没有数据双向绑定的概念，是单向绑定。要实现双向绑定，可以利用事件；

3. 阻止事件冒泡。小程序中有冒泡事件和非冒泡事件的概念。bind开头的事件是冒泡事件，catch开头的事件是非冒泡事件；

4. 事件绑定：a.事件绑定如何往事件处理函数中传值？小程序在事件处理中会传入一个event对象，可通过event对象找到target(或currentTarget)下面的dataset。dataset对应标签上属性data-*里指向的值;b.event对象下的target和currentTarget的区别。target简单的说是触发事件的源组件；currentTarge是指事件绑定的当前组件。

5. 跳转：navigateTo跳转是跳转到一个新页面，页面栈的情况是push一个页面入栈，但对上一个页面不做处理。redirectTo跳转到一个新页面，页面栈的情况是push一个页面入栈，但会干掉上一个页面。navigateBack跳转是从当前这个页面在页面栈的位置中回退到上一个页面。reLaunch跳转是把所有页面栈清掉，在push一个新页面入栈。

6. 组件化（小程序中叫模板）：关键字是template标签和引入标签import。

7. 可以使用parseInt等api吗？ 可以使用setTimeout等api吗？ 都可以

8. 如何获取url中的参数？onLoad函数中自带有个options参数，这个options就是处理好的url参数对象。

9. es6支持度，暂时不支持for of的object.entries方法。

10. 对于富文本的解析，可以使用wxParse这个开源工具。其原理是将富文本转化为一个json数据格式，再通过模板template进行渲染。

11. 改变checkbox的大小，需要使用transform来做缩放。