一 《学习JavaScript数据结构与算法》
1.ES2015的类是基于原型语法的语法糖
2.TypeScript是一个开源的、渐进式包含类型的JavaScript超集
以.ts为扩展名
以tsc命令来编译它
TypeScript允许我们给变量设置一个类型,不过写法太啰唆了。
TypeScript有一个类型推断机制,也就是说TypeScript会根据为变量赋的值自动给该变量设置一个类型
如果声明了一个变量但没有设置其初始值,推荐为其设置一个类型
在js中如果要加类型,可以写成ts那样,在第一行加上@ts-check就可以
3.展开运算符(...)会把数组里的值都展开成参数
4. JavaScript在做字符比较的时候,是根据字符对应的ASCII值来比较的,所以sort()默认也是按这个排,并不是所谓的升序/降序 需要我们自定义传入函数
5.有一种数据类型可以确保属性是私有的,这就是WeakMap。可以存储键值对,其中键是对象,值可以是任意数据类型。
二javascript+vue+react全程实例
1.react
1.React框架主要用于构建前端UI,其核心思想就是封装组件。各个组件维护自身的状态和UI,每当状态变更时都会自动重新渲染整个组件,而不需要反复查找DOM元素后再重新渲染更改整个组件了。
2.主要特点:(1)声明式设计:React采用声明范式,可以轻松描述应用。(2)高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。(3)灵活:React可以与已知的库或框架很好地配合。(4)使用JSX语法:JSX是JavaScript语法的扩展,可以极大地提高JS运行效率。(5)组件复用:通过React构建组件,使得代码易于复用,可在大型项目应用开发中发挥优势。(6)单向响应的数据流:React实现了单向响应的数据流,减少了重复代码,比传统数据绑定方式更简单。
3.调用React DOM对象的render()方法来渲染元素,和new Vue()的作用差不多
4.JSX,其实就是JavaScript XML的缩写,直译过来就是基于JavaScript的XML。JSX看起来似乎是一种XML格式,其实本质上仍是JavaScript语言,只不过是将js脚本书写成XML格式。JSX作为一种标记语言,支持自定义属性,并具有可扩展性。同时,JSX基本是专用于React开发的,如果打算在HTML页面输出DOM节点和内容,我们推荐使用React内置的JSX语法来实现。另外,如果要在React中使用JSX语法,则必须引用“babel.js”文件来解析JSX,同时<script>标签中必须改用“type="text/babel"”属性。原因在于使用“type="text/babel"”属性替换“type="text/javascript"”属性,浏览器内置的JavaScript解释器就不会解析里边的代码,转而由babel进行解析,从而避免React代码与原生JavaScript代码发生混淆。
JSX中调用JavaScript函数与表达式一样,同样是需要使用大括号“{ }”来引用
5.组件
就是将内容写到一个类里面,然后将类名作为一个标签/组件进行渲染
class关键字声明一个继承React Components(组件)的类
可以通过props对象实现传参(从创建对象的参数传到类中)
6.React是把Components(组件)视作一个状态机(State Machines)来设计的
React专门定义了一个state(状态)属性用于更新Components(组件)状态。在React应用中,用户交互工作只需通过更新组件的state(状态)就可以实现,根据更新后的state(状态)来渲染UI并保持UI和数据的一致(不需要操作DOM)。
状态(state)必须以this关键字的方式(this.state)调用,同时类组件应始终使用super(props)来调用基础构造函数。
7.React Components(组件)设计了一个生命周期(LifeCycle)的方式,可以通过挂载和卸载计时器来实现动态同步
生命周期(LifeCycle)方式提供了挂载(componentDidMount())和卸载(componentWillUnmount())这两个钩子方法来实现生命周期管理。
状态(state)通常会被称作是局部封装,除了拥有并设置它的组件外,其他组件都不可访问。
2.vue
1.设计思想就是通过以数据驱动和组件化视图来构建用户界面
2.在Vue.js框架中,还提供了一个“$”前缀符号来引用Vue构造器的参数,以便将其与用户自定义的属性进行区分。
3.添加了一个“v-”前缀指令(v-once),该指令将会执行一次性插入文本的操作。具体来讲,就是当改变Vue构造器属性(contentOnce)的值时,不会同步更新 (contentOnce)值所显示的内容。------实际改变了,只是展示不变
三Javascript设计模式与开发实践
1.基础
1.原型模式和基于原型继承的JavaScript对象系统
2.设计模式
四 HTML5移动web开发从入门到精通
五vue.js前端开发
六vue.js node.js开发实战
1.状态管理
1.一些小项目如果引入Vuex进行状态管理,不仅会使原本逻辑清晰的代码和结构变得复杂,甚至会增加开发难度,造成代码冗余。所以官方认为,如果不是大中型单页应用,不需要引入Vuex,即使需要同步数据,自带的store模式也足够使用。如果需要构建大中型单页引用,那么Vuex是必然的选择。
2.采用store对象,Vuex被注册成一个store之后,可以在全局的组件中使用,如果只需要其中的值,调用$store这个全局对象就可以。
3.因为Vue.js中所有的数据绑定都采用单向传输方式,直接对数据进行改写根本不会通知组件,所以组件自然无法获取变化后的数据,此时页面不发生任何变化。这也是Vuex出现的原因。Vuex提供了一个Mutation对象,所有对数据的修改都必须通过该对象进行操作。
2.element ui
1.网站 Element - The world's most popular Vue UI framework
2.Ant Design of Vue支持Vue.js的服务器渲染,还支持Electron开发PC版本的应用。官方文档的主页网址为https://www.antdv.com/docs/vue/introduce-cn/
一套专用的中后台支持(https://pro.ant.design/index-cn/)方案
3.设计:需求分析 功能设计
1.系统设计需求和技术说明
架构:前后端分离,提高复用性
技术:采用JavaScript系列技术,后端选择Express框架进行开发,前端使用Vue.js技术进行开发,尽可能实现页面的组件化,以方便对不同产品的UI进行替换。
数据持久化:eg Redis存储热点数据
2.功能设计
描述具体的需求、不同功能模块的划分
3.后端接口定义,用于前端获取数据的api
4.整理项目流程图
4.开发
1.初始化后端项目,比如使用express框架;连接好数据库后进行后端接口开发
2.编写前端页面:采用vue开发,实现与后端接口的数据一致性交互展示
5.部署和上线
使用远程服务器进行连接:直接连接就行
使用Nginx搭建Node.js服务器:它是当下最强大的静态资源服务器,不仅支持静态资源的发布,还支持反向代理,通过简单的配置还能实现路由重写或负载均衡。 这样访问静态资源的速度会加快
在服务器端部署代码:接口 跨域啥的 防火墙之类
基本的网站优化技术:CDN
使用nw.js将网站打包为一个桌面软件:nw.js是一种跨平台解决方案,从DOM/WebWorker层直接调用所有的Node.js模块,使用现有的Web技术开启了一个全新编写应用的方式。
(1)使用nw.js,必须先下载
(2)在打包工具的同级目录中新建package.nw文件夹,并将要打包的静态文件放在该文件夹中。
(3)在package.nw文件夹中新建package.json文件用来配置nw.js,指定入口文件、名称和描述等
(4)通过命令行进入打包工具所在的文件夹,使用如下命令打包应用