- 博客(28)
- 收藏
- 关注
RSS订阅原创 MVVM和MVC 的区别
因为 model层中的数据往往是不能直接跟 view 中的控件一一对应上的，所以需要在定义一个数据对象专门对应 view 上的控件，而 viewModel 就是把 model 对象封装成可以显示和接受输入的界面数据对象。C(Controller): 控制层，是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理，它只是接收请求并决定调用那个模型构建去处理请求，然后在确定用哪个视图来显示返回的数据。展示出来的用户界面。
2022-09-28 10:19:24
6648
1
原创 原型对象，构造函数，实例对象，原型链
所有的函数都有 prototype 属性， 所以构造函数也有 prototype所有的对象都有__proto__ 属性，所以原型对象，实例对象都有 __proto__属性constructor 属于原型对象的一个属性一个构造函数 Person ，通过 new Person() 创建的实例对象 p1原型对象 相当于 祖先级，构造函数相当于 父级Person， 实例对象相当于 p1原型对象 ==构造函数 ==
2022-09-02 17:03:28
213
原创 react 虚拟 dom
2: 在视图复杂的情况下， 会提升渲染性能， 有频繁操作 dom 的话， 虚拟dom在更新真实 dom 之前会通过 diff 算法对比 新旧两个 dom 树的差异，然后在吧最终的差异表现到 真实 dom 上，不会每次直接操作 真实 dom。虚拟 dom本质上就是 在 js 和 真实 dom 之间加了一个缓存，利用 diff 算法，避免了没有必要的 dom 操作，提高性能。1 ：在首次渲染的时候，因为要创建一层额外的 虚拟 dom 也就是 js 对象，肯定不如直接操作 dom 会增加开销。...
2022-09-01 10:41:24
442
原创 threejs + react+hooks 创建一个基础的场景
使用 threejs + react 创建一个简单的 场景， 包括灯光，相机，阴影，以及一个简单的模型加载。
2022-08-15 16:46:42
525
原创 在浏览器输入 URL 回车后会发生什么
1: URL解析 2: DNS查询 3: TCP 连接 4: 处理请求 5: 接受响应 6: 渲染页面 地址解析： 首先判断你输入的是一个合法的URL 还是一个待搜索的关键词， 并且根据你输入的内容进行自动完成，字符编码等操作 HSTS：由于安全隐患， 会使用 HSTS强制客户端使用 https 访问页面。 其他操作：浏览器还会进行一些额外的操作， 比如安全检查，访问限制
2022-07-12 14:53:23
339
原创 Threejs 样式化粒子
简介大量使用粒子的时候， 会遇到性能问题， 因为么一个粒子就是一个模型，每个粒子对象， 分别由THREE.js 进行管理，THREE.js 提供了另一种方法来处理大量粒子，旧版本： THREE.PointCloud 新版本 THREE.Points// 创建粒子容器const geometry = new THREE.Geometry()// 创建PointCloud 纹理const material = new THREE.PointCloudMaterial({size: 4, ve..
2022-07-12 10:16:45
262
原创 Three.js 基础之雾
雾的特点：越靠近镜头，雾气越小。 越远离镜头，雾气越大。雾气本身只会影响物体的渲染效果，但雾气本身并不会流动。默认所有材质都可以被雾影响，若某物体不想被雾影响，可以将该物体材质的 fog 属性设置为 false雾的类型：Three.js中一共有 2种雾的类型Fog： 雾 雾的密度随着距离 线性增大FogExp2 指数雾 雾的密度随着距离 指数增大Fog 构造参数Fog...
2021-12-10 10:42:09
924
原创 Three.js基础之阴影
在 Three.js 中， 所有阴影的基类都是 Three.LightShadow，请注意：不能直接去实例化 LightShadow， 平时真正去创建的阴影， 都是该类的子类阴影类型，目前一共三种阴影类型 阴影名称 解释说明PointLightShadow 点光源阴影 对应 P...
2021-10-29 14:36:50
923
原创 Three.js基础之镜头(相机)
Three.js 中一共有 5 种相机，都继承于(Three.camera)ArrayCamera 镜头列阵 一组已预定义的镜头CubeCamera 立方镜头 6个面的镜头(前，后，左， 右， 顶， 底)OrthographicCamera 正交镜头 无论物体距离镜头远近最终渲染出的大小不变Per...
2021-10-28 10:18:46
1403
原创 Three.js 基础之灯光
灯光的种类：在场景中添加灯光后， 灯光照射在物体上产生明暗，光亮和阴影， 从而让物体显示的更加立体有光泽three.js 中， 有 6 种基础类型的灯光， 他们都继承于 Three.Light灯光类型 灯光名称 是否支持阴影 是否作用于全局 是否有照射目标AmbientLight 环境光，氛围光 否 是 无DirectionalLight 平行光 .
2021-10-26 17:46:38
1832
原创 Three.js 基础之纹理
材质（material）更多的是表达一个物体表面的无力特性和一些简单的外观颜色纹理（Texture）则专门来设置物体表面贴合的彩色图片，具体做法是：使用纹理加载器 TextureLoader 加载外部图片（jpg 或者 png） 通过设置物体的 .map 属性， 将加载得到的外部图片贴合在物体表面纹理加载器的简单事例代码const loader = new Three.TextureLoader()const material = new Three.MeshBasicMate.
2021-10-26 16:36:19
1320
原创 Three.js基础之图元
Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。先创建一个立方体几何对象 Geometry
2021-10-22 11:23:27
703
原创 TypeScript简介
一: TypeScript 简述1: 什么是TypeScript ? Typescript 不是一门全新的语言, 它相当于是 JavaScript 的超集, 对 js 进行了一些规范和补充,2: 为什么要使用 TypeScript js 只会在运行时去做数据类型检查, 而 ts 作为静态类型语言, 其数据类型是在编译期间确定的, 编写代码的时候, 要明确变量的数据类型, 使用 ts 后, 就不会出现因为数据类型错误导致的代码运行异常3: 安装 TypeSc...
2021-08-13 17:30:42
460
原创 Vue中使用proxy配置代理解决跨域的问题
1: 需求说明在前后端分离开发中, 前端发送 ajax 请求, 因为受到了浏览器同源策略的限制, 会出现跨域问题, Vue项目中, 使用代理请求解决跨域问题使用vue/cli 4.x 以上版本创建的 Vue项目, 在项目的根目录中创建 vue.config.js 配置文件2: 代码实现在 Vue 项目根目录创建 vue.config.js 配置文件, 配置代码如下module.exports = { devServe: { proxy: {
2021-08-10 22:10:22
457
原创 React核心知识
安装：安装脚手架：cnpm i -g create-react-app使用脚手架创建项目：create-react-app myapp基础语法：jsx语法的本质： 并不是直接把 jsx 渲染到页面上， 而是先转化成js对象， 然后由Reace.createElement 来创建节点对象 jsx语法;是基于XML实现的一种 js语法扩展 最外层只能由一个根标签, 所有的标签都需要有闭合 重新定义特殊属性名, 例如 className代替 class, htmlFor代替for 使..
2021-08-09 16:43:32
82
原创 React路由
安装: cnpm i react-router-dom --save 使用方法: 组件内通过对象结构方法获取 react-router-dom 内置组件HashRouter ,BrowserRouter 表示路由的根容器, 与路由有关系的东西, 都要包裹在 跟路由里面, 而且一个网站中, 只需要使用一次 Route 表示一个路由规则, 也是一个占位符, 两个属性, path, component 与 Vue 中的 router-view 用法类似 path: 表示要匹配的路由以 '/'开头,...
2021-08-03 23:17:42
106
原创 redux 中间件 与 immutable 不可变数据
redux中 向 reducer 派发 action的时候, action 必须是一个对象, 但是有些时候我们需要在派发action 的时候, 需要做一些逻辑处理, 所以store.dispatch派发的需要是一个函数, 这个时候我们就需要引入一个中间件 我们可以在redux 中解构出一个 applyMiddleware, 然后在创建store 对象的时候, 在 createStore中引入第三个参数applyMiddleware 它是一个函数, 把 thunk 中间件作为参数传入, 这样我们就可以在..
2021-08-03 22:49:39
165
原创 Redux 基础理解
安装: cnpm i redux --save Redux的设计思想:web应用是一个状态机, 视图与状态是一一对应的 所有的状态都保存在一个对象中Store: 保存数据的地方可以当成一个容器, 一个项目中只能有一个,store.getState(): 获取store 中的数据 store.dispatch(action): 向 store 派发新的 action store.subscribe(() => {}), 监听 store 中数据的变化具体使用方法:// 首先 ...
2021-07-29 23:22:34
473
原创 ES6 map 数据结构
Map 对象保存键值对, 任何值(对象或者原始值)都可以作为一个键或者值const m = new Map()const o = { p:'hello world' }m.set(o, 'content')m.get(o) // 'content'm.has(o) // truem.delete(o) // truem.has(o) // falseMap 中的 key , key 是字符串var myMap = new Map();var keyString = .
2021-07-28 22:39:59
90
原创 ES6 set 数据结构
set, ES6提供的新的数据结构, 与数组类似, 但是成员的值都是唯一 的, 没有重复的值基础用法set 实例的属性constructor: 构造函数 默认就是 set 函数 size: 返回set 实例的成员总数set 实例的操作方法Set.prototype.add(value): 添加某个值, 返回 Set 结构本身 Set.prototype.delete(value): 删除某个值, 返回一个布尔值, 表示删除是否成功 Setprototype.has(value): 返回一.
2021-07-27 22:28:55
121
原创 ES6语法
Class基本使用和继承 类的由来 // 传统方法生成实例对象function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);// 通过类方法生成实例对象class Point { constructor(x, y) ..
2021-07-26 23:18:01
143
原创 vue Router
路由组件: => <router-link to=""></router-link> 用来导航, 通过 "to" 属性, 指定连接, <router-link> 会默认被渲染为一个 <a>标签 => <router-view> 路由出口, 路由匹配到的组件将渲染到这里 多级路由: => 使用路由对象的 children: [] , 来配置二级路由 至多级路由 => 在设置了children...
2021-07-21 10:18:46
84
原创 Vuex 状态管理的核心概念
State: => 用于保存状态, 管理全局的数据, 并且提供了用于直接修改 state 的函数 Mutations: => 声明函数直接修改全局的数据, 函数有两个参数, 第一个是 state, 第二个 是函数被调用时传递过来的值 params => 在需要的地方调用 这...
2021-07-18 18:17:31
230
原创 vue中 axios的基本用法
发送请求:发送请求: => get/delete axios.get('接口地址', { params: {参数} }).then(res => { // 请求成功的返回值 }, err => { // 请求失败 }) => post/put/pa.
2021-07-15 21:51:18
135
原创 高内聚, 低耦合
概念: 一: 项目中:每个模块之间相互联系的紧密程度，模块之间联系越紧密，则耦合性越高，模块的独立性就越差！反之同理；一个模块中各个元素之间的联系的紧密程度，如果各个元素（语句、程序段）之间的联系程度越高，则内聚性越高，即‘高内聚’ ！ 二: 模块之间存在依赖, 改动某一个模块,会对其他模块产生影响, 关系越紧密, 耦合越强, 模块的独立性越差....
2021-07-13 23:38:37
257
原创 组件化与模块化的区别
概念:组件化: 1: 就是"基础库"或者"基础组件", 意思就是把重复的代码部分提炼出一个个组件供给功能使用 2:功能相对单一或者独立, 在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。 3: 使用场景: 是对一些重复代码进行封装在需要的时候调用即可(例如: 按钮, 输入框, 搜索框) 4: 目得: 复用, 解耦模块化: 1: 就是"业务框架"或者"业务模块", 将不同的业务进行划分, 同一类...
2021-07-13 23:14:15
3072
原创 vue入门基础知识
1: 脚手架环境安装 Vue => 安装脚手架依赖: cnpm i -g @vue/cli2: 创建vue 项目 => 在要创建项目的目录下 运行 cmd 执行命令: vue create xxx => 根据提示选择安装配置 => 创建啊成功后 cd xxx => npm run serve => 运行成功后根据提示在浏览器中访问3: 精简项目代码 ...
2021-07-10 14:41:31
146
1
转载 js中call 的使用, call方法的继承
本文转载自 http://blog.csdn.net/soulcq/article/details/5341561#comments。javaScript 中的 call() 是一个奇妙的方法，但也是一个让人迷惑的方法，先看一下官方的解释：call 方法请参阅应用于：Function 对象要求版本 5.5调用一个对象的一个方法，以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项。将被用作当前对...
2021-07-07 10:04:28
885
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人