- 博客(240)
- 资源 (18)
- 收藏
- 关注
RSS订阅原创 React三原理和路由
造成进入首页时，需要加载的内容过多，时间过长，在浏览器中可能会出现短暂的空白页，从而降低用户体验，而运用路由懒加载是将各个模块分开打包，用户查看的时候再加载对应的模块，减少加载用时。由于 useRoutes 是通过 context 实现的，切换路由时 context 共享出来的 value 值发生了变化，从而使得使用到这个 context 的组件触发了 rerender，这也就造成了使用 useRoutes 的 RouteCom 组件在切换路由时重新渲染了！理想状态是部分更新，只更新变化的地方。
2024-08-01 22:59:55
1038
原创 React二组件进阶
捕获使用组件时因为 props 导致的错误，给出明确的错误提示，增加组件的健壮性。组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等。高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件 WrappedComponent。对于组件来说，props 是外来的，无法保证组件使用者传入什么格式的数据。高阶组件（HOC，Higher-Order Component）是一个函数，接收要包装的组件，返回增强后的组件。
2024-07-21 22:36:57
918
原创 React一基础
React 是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来。声明式——只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI基于组件——组件时React最重要的内容，组件表示页面中的部分内容，组合、复用多个组件，可以实现完整的页面功能学习一次，随处使用——使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用。
2024-07-15 15:00:38
1028
原创 Vue2 基础十Vuex
父组件向子组件传值，是以属性的形式绑定值到子组件（v-bind），然后子组件用属性props接收。子组件向父组件传值，子组件用 $emit() 自定义事件，父组件用v-on监听子组件的事件。兄弟组件的传值，通过事件中心传递数据，提供事件中心，传递数据方通过一个事件触发hub.$emit(方法名，传递的数据)，接收数据方通过在钩子中 触发hub.$on(方法名, 传递的数据)。Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。
2024-07-09 10:42:41
460
原创 SwiftUI九创建watchOS应用
watchOS平台的Landmarks应用已经接近完成了。提示：本节只讲当用户收到通知时怎样显示通知界面，不涉及怎样设置和发送通知给用户的内容。1、添加一个新的自定义视图到 WatchLandmarks Watch App 文件夹 NotificationView.swift，并创建一个视图来显示有关地标、标题和消息的信息。?Divider()?2、添加一个预览，用于设置通知视图的标题、消息和地标属性。这将显示提供数据时通知视图的预览。
2024-07-04 14:26:32
625
1
原创 Vue2 基础九电商后台管理项目——下
在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack 的打包配置。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。至此运行 build 打包，得到的目标文件中确实没有 console 日志输出，但是打包日志中依然有警告，若想消除此条警告可以在。
2024-07-03 14:32:46
702
原创 Vue2 基础八电商后台管理项目——中
5、添加商品，完成添加商品的操作，在添加商品之前，为了避免goods_cat数组转换字符串之后导致级联选择器报错需要打开vue控制条，点击依赖，安装lodash，把addForm进行深拷贝。2、展示信息，展示商品参数信息、商品属性信息，在商品参数信息展示中使用的el-checkbox,el-checkbox-group组件，打开element.js引入组件并注册组件。5、完成添加分类，添加级联菜单显示父级分类。3、添加商品，添加编程式导航，在List.vue中添加编程式导航，并创建添加商品路由组件及规则。
2024-06-28 16:35:21
780
原创 Vue2 基础七电商后台管理项目——上
当在输入框中输入内容并点击搜索之后，会按照搜索关键字搜索，希望能够提供一个X删除搜索关键字并重新获取所有的用户列表数据，只需要给文本框添加clearable属性并添加clear事件，在clear事件中重新请求数据即可。在数据中添加一个iconsObj，然后将图标类名进行数据绑定，绑定iconsObj中的数据。1、显示数据，在data中添加一个rolesList数据，在methods中提供一个getRolesList方法发送请求获取权限列表数据，在created中调用这个方法获取数据。
2024-06-28 16:31:39
936
原创 SwiftUI八与UIKIT交互
准备为包裹在 UIViewRepresentable 视图中的子视图上添加了一个自定义 UIPageControl。1、创建一个新的 SwiftUI 视图，命名为 PageControl.swift，并使 PageControl 类型遵循 UIViewRepresentable 协议。UIViewRepresentable 和 UIViewControllerRepresentable 类型有相同的生命周期，在 UIKit 类型中都有对应的生命周期方法。
2024-06-28 15:40:25
1119
原创 SwiftUI七使用UI控件
应用在本地存储了一些配置和用户偏好设置。在用户编辑这些数据前，会被展示在一个没有编辑按钮的概要视图上。2、接下来，在Views组下创建一个名为Profiles的新组，然后向该组添加一个名为ProfileHost的视图，该视图带有显示存储的概要文件的用户名的文本视图。ProfileHost视图将承载概要信息的静态摘要视图和编辑模式。3、在Profiles组中创建另一个名为 ProfileSummary 的视图，该视图会持有一个Profile实例，并显示用户的基本信息。
2024-06-11 11:45:07
970
原创 SwiftUI六组合复杂用户界面
应用的首页是一个纵向滚动的地标类别列表，每一个类别内部是一个横向滑动列表。随后将构建应用的页面导航，这个过程中可以学习到如果组合各种视图，并让它们适配不同的设备尺寸和设备方向。下载起步项目并跟着本篇教程一步步实践，或者查看本篇完成状态时的工程代码去学习，。
2024-06-07 11:09:54
1106
原创 SwiftUI五视图动画和转场
使用SwiftUI可以把视图状态的改变转成动画过程，SwiftUI会处理所有复杂的动画细节。在这篇中，会给跟踪用户徒步的图表视图添加动画，使用animation(_:)修改器给一个视图添加动画效果非常容易。下载起步项目并跟着本篇教程一步步实践，或者查看本篇完成状态时的工程代码去学习，。
2024-06-07 10:30:44
611
原创 SwiftUI四绘制路径和形状
使用六边形的绘制参数数据HexagonParameters，依次绘制六边形的边，形成大致轮廓.addLine(to:)方法会使用当前绘图光标所在点为起点，方法参数中指定的点为终点绘制直线。当绘制区域不是正方形时，使用绘制区域的最小边长(长宽中哪个最小使用哪个)作为绘制徽章背景的边长，并保持徽章背景的长宽比为1:1。定义一个新的类型用于展示旋转一定角度的徽章符号，使用ForEach生成不同旋转角度的山峰符号，绘制在徽章背景上，从而形成最终的徽章。地标徽章中心有一个以地标App图标中的山峰图形改造形成的标志。
2024-06-07 09:49:32
744
原创 SwiftUI三处理用户输入
在Landmark应用中，标记喜爱的地方，过滤地标列表，只显示喜欢的地标。要增加这些特性，首先要在列表上添加一个开关，用来过滤用户喜欢的地标。在地标上添加一个星标按钮，用户可以点击它来标记这个地标为自己喜欢的。在开始之前先新建项目，将之前 Model、View、Resource 目录及其中的文件复制到项目中，并将 SceneDelegate.swift、Assets.xcassets 文件替换为之前的。
2024-06-03 10:00:04
499
原创 SwiftUI二列表和导航
Xcode的画布会自动识别当前代码编辑器中遵循PreviewProvider协议的类型，并将它们渲染并展示在画面上。一个视图预览提供者(preview provider)返回一个或多个视图，这些视图可以配置不同的大小和设备型号。可以定制从preview provider中返回的视图被渲染在何种场景下。2、使用previewLayout(_:)修改器设置一个行视图在列表中显示的尺寸大小。3、把预览的行视图包裹在Group中，把之前的第一个行视图也加进去。Group {
2024-06-03 09:57:35
431
原创 SwiftUI一创建和组合视图
有了地标名称、地标位置及状态视图，下一步再添加一个地标图片视图。这个图片视图将自定义遮罩(mask)、边框(border)和阴影(shadow)新建SwiftUI文件CircleImage用Image替换Text，并使用turtlerock图片初始化Image视图添加clipShape(Circle())修改器到Image，给图片添加圆形剪切效果。Circle是一个形状，它可以被用作遮罩、也可以是圆圈，还可以是圆形填充视图。
2024-06-03 09:54:55
879
原创 Vue2 基础六前端工程化
/ publicPath: '/', // 启动页地址// outputDir: 'dist', // 打包的目录// lintOnSave: true, // 在保存时校验格式// productionSourceMap: false, // 生产环境是否生成 SourceMaphost: 'localhost', // 主页地址port: 8888, // 端口号open: true, // 自动打开浏览器访问主页// proxy: null, // 设置代理})
2024-05-28 10:52:48
1250
原创 Vue2 基础五路由
其中"用户管理"组件展示的效果如上图所示，在用户管理区域中的详情链接也是可以点击的，点击之后将会显示用户详情信息，并在详情页实现后退功能。）是 Vue.js 官方的路由管理器。路由重定向指的是用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；1、props的值为布尔类型：props 被设置为 true，route.params 将会被设置为组件属性，使用 props 接收路由参数。前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系。
2024-05-20 08:00:11
962
原创 Vue2 基础四前后端交互
JavaScript的执行环境是单线程，常见的异步调用：定时任务、ajax、事件函数。多次异步调用的结果顺序不确定，异步调用结果如果存在依赖需要嵌套。Promise 是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。Restful 形式的 URL HTTP请求方式：GET 查询、POST 添加、PUT 修改、DELETE 删除。接口调用方式：原生ajax、基于jQuery的ajax、fetch、axios。
2024-04-18 11:10:11
1246
原创 Vue2 基础二常用特性
当内置指令不能满足特殊的需求时，Vue允许我们自定义指令。binding 为自定义的函数形参，通过自定义属性传递过来的值存在 binding.value 里面。局部指令，需要定义在 directives 的选项，用法和全局用法一样；局部指令只能在当前组件里面使用；当全局指令和局部指令同名时以局部指令为准。<h2>自定义指令</h2><h3>自定义全局指令</h3><h3>自定义局部指令</h3></div><script>el.focus();});});data: {},
2024-03-08 16:13:02
657
原创 前后端交互—使用自己的服务器开发项目
由于使用VSCode访问开发的项目页面使用的是 file 协议，file 协议在开发当中会有很多的问题，通常需要 http 协议来访问开发的 html 文件，更换裁剪的图片，首先拿到用户选择的文件；然后根据选择的文件，创建一个对应的 URL 地址；中的子页面，如果想要调用父页面中的属性、方法，使用 window.parent 即可（但是必须http协议中打开）。导入 layui 的 js 文件，为需要验证的表单项添加 lay-verify 属性，同时指定具体的校验规则即可。
2024-01-26 16:19:10
846
原创 前后端交互—开发一个完整的服务器
因为在处理函数中，需要多次调用 res.send() 向客户端响应 处理失败 的结果，为了简化代码， 可以手动封装一个 res.cc() 函数。的形式对数据合法性进行验证，效率低下、出错率高、维护性差。因此， 推荐使用 第三方数据验证模块 ，来降低出错率、提高验证的效率与可维护性， 让后端程序员把更多的精力放在核心业务逻辑的处理上。在实际开发中，前后端都需要对表单的数据进行合法性的验证，而且， 后端做为数据合法性验证的最后 一个关口 ，在拦截非法数据方面，起到了至关重要的作用。
2023-12-16 16:01:50
210
原创 前后端交互—数据库与身份认证
客户端第一次请求服务器的时候，服务器通过响应头的形式，向客户端发送一个身份认证的 Cookie，客户端会自动将 Cookie 保存在浏览器中。随后，当客户端浏览器每次请求服务器的时候，浏览器会自动将身份认证相关的 Cookie，通过请求头的形式发送给 服务器，服务器即可验明客户端的身份。HTTP 协议的无状态性，指的是客户端的每次 HTTP 请求都是独立的，连续多个请求之间没有直接的关系，服务器不会主动保留每次 HTTP 请求的状态。用户的信息通过 Token 字符串的形式，保存在客户端浏览器中。
2023-12-06 14:28:19
989
原创 前后端交互—Express
模拟一个类似于 express.urlencoded 这样的中间件，来解析 POST 提交到服务器的表单数据。定义中间件监听req的data事件，在中间件中，需要监听 req 对象的 data 事件，来获取客户端发送到服务器的数据。如果数据量比较大，无法一次性发送完毕，则客户端会把数据切割后，分批发送到服务器。所以 data 事件可能会触 发多次，每一次触发 data 事件时，获取到数据只是完整数据的一部分，需要手动对接收到的数据进行拼接。
2023-11-07 17:23:22
214
原创 前后端交互—模块化
内置模块是由 Node.js 官方提供的模块，内置模块的加载优先级最高。例如，require(‘fs’) 始终返回内置的 fs 模块，即使在 node_modules 目录下有名字相同的包也叫做 fs。使用 require() 加载自定义模块时，必须指定以 ./ 或 …/ 开头的路径标识符。在加载自定义模块时，如果没有指定 ./ 或 …/ 这样的路径标识符，则 node 会把它当作内置模块或第三方模块进行加载。
2023-11-03 17:33:27
192
原创 前后端交互—Node.js初识
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 的官网地址: https://nodejs.org/zh-cn/Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 API。基于 Express 框架(http://www.expressjs.com.cn/)，可以快速构建 Web 应用基于 Electron 框架(https://electronjs.org/)，可以构建跨平台的桌面应用。
2023-10-30 16:48:37
173
原创 前后端交互—跨域与HTTP
jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个 回调函数名称。HTTP 请求方法，属于 HTTP 协议中的一部分，请求方法的作用是:用来表明要对服务器上的资源执行的操作。标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式， 接收跨域接口响应回来的数据。
2023-10-23 18:26:38
703
原创 前后端交互—Ajax基础
的键 值对结构。无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直 接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许对 Ajax 请求进行更详细的配置。
2023-10-17 16:24:50
849
原创 JavaScript ES6语法
此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.剩余参数语法允许将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数。箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。它类似于数组，但是成员的值都是唯一的，没有重复的值。此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的i值。
2023-10-12 14:49:43
97
原创 JavaScript 正则表达式
正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript 正则表达式完成表单验证。正则表达式的特点。
2023-10-11 20:54:41
546
原创 JavaScript 函数进阶
方式1 函数声明方式 function 关键字 (命名函数)方式2 函数表达式(匿名函数)方式3 new Function()var fn = new Function('参数1','参数2'..., '函数体')Function 里面参数都必须是字符串格式第三种方式执行效率低，也不方便书写，因此较少使用所有函数都是 Function 的实例(对象)函数也属于对象var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);
2023-10-10 15:36:08
77
原创 JavaScript 面向对象、构造函数和原型、ES5新增方法
每一个实例对象又有一个__proto__属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有__proto__属性，指向Object 原型对象 prototype，Object原型对象prototype.__proto__指向null，这样一层一层往上找就形成了原型链。在典型的 OOP 的语言中(如 Java)，都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。构造函数方法很好用，但是存在浪费内存的问题，每个对象的函数都是独立的。
2023-10-07 17:38:54
136
原创 Web 基于ECharts数据可视化
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表，且可定制。折线图柱状图散点图饼图K线图社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。
2023-09-30 11:43:25
928
原创 Web jQuery—事件与其他
本页面内容刷新页面不会丢失。文本框里面输入内容，按下回车，就可以生成待办事项。点击待办事项复选框，就可以把当前数据添加到已完成事项里面。点击已完成事项复选框，就可以把当前数据添加到待办事项里面。点击事项后面圆圈，可以删除该条事项。
2023-09-13 19:41:40
145
原创 Web jQuery—属性、元素、尺寸和位置
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。语法获取属性语法attr('属性') // 类似原生 getAttribute()设置属性语法attr('属性', '属性值') // 类似原生 setAttribute()注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）
2023-09-11 14:55:20
248
原创 Web jQuery—选择器、样式和效果
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
2023-09-07 17:40:47
434
原创 Web API—移动端端网页特效
移动端浏览器兼容性较好，不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。触屏touch事件说明touchstart手指触摸到一个 DOM 元素时触发touchmove手指在一个 DOM 元素上滑动时触发touchend。
2023-09-05 10:03:52
237
原创 Web AP—PC端网页特效
三大系列大小对比作用返回自身包括padding，边框、内容区的宽度，返回数值不带单位返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位返回白身实际的完度，不含边框，返回数值不带单位offset系列 经常用于获得元素位置 offsetLeft offsetTopclient经常用于获取元素大小 clientWidth clientHeightscroll 经常用于获取滚动距离scrollTop scrollLeft。
2023-08-31 15:30:36
480
iOS弹出框总结代码
2016-10-30
CoreAnimation
2015-12-11
CALayer的基本使用demo
2015-12-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人