ChristopherKeith-CSDN博客

原创低代码表单配置平台替代普通表单配置平台，前端部分重构的设计和思路

最近将公司的旧表单配置平台重构为低代码表单配置平台，这里记录一下这个过程的设计和思路，不涉及具体的代码；另外这篇文章基本只涉及前端部分，也不涉及与后端数据交互部分。思路：组件层面，抽象层面，物料区，渲染区，设置区关键点：原子组件库，schema，物料区，渲染区，设置区实现细节：原子组件库，schema，拖拽库，物料区，渲染区的状态，渲染区的交互逻辑，设置区，保存

2024-06-30 19:00:50 1296 1

原创前端项目使用import()传入路径变量不能动态导入模块的问题

前端项目使用import()传入路径变量不能动态导入模块的问题

2023-01-15 22:21:03 1543

原创＜script＞标签，async和defer属性

2022-03-13 17:10:03 260

原创一种简化版MVVM的实现

目录代码功能流程图源代码index.htmlMVVM.JScompile.jsobserver.jswatcher.js代码功能流程图源代码index.html<html> <head> <meta charset="UTF-8" /> </head> <body> <div id="app">  <input ty

2022-03-01 13:12:29 587

原创简单版react原理分析（虚拟dom，节点渲染，数据更新，diff算法等）

0.前言本文将结合简化版本的react代码，对react的核心工作流程和原理进行梳理和讲解，本文重点会顺着react的执行流程机制进行原理性的描述，整个简化版的react代码量不多，可以参照代码结合讲解，效果更佳，代码戳这里1. ReactReact为一个对象，拥有render、createElement和createClass方法1.1. React.render传入虚拟dom及根节点进行挂载渲染参数：React.render(element, container)element是Rea

2022-02-27 01:15:51 1161

原创图文理清HTTPS及SSL/TLS加解密核心运行机制，看不懂退钱

0. HTTPSHTTPS是基于HTTP+TCP/IP，使用SSL/TLS来加密数据包的协议。关于通信模型分层及协议的关系可见上一篇文章，这里不再做阐述。0.1. HTTPS解决了什么问题众所周知，HTTPS是安全的的HTTP，与HTTP相比，HTTPS提供了一下三个安全特性：加密(Encryption)：通过可靠的数据加密使数据在传输过程中避免被窃听数据一致性(Data integrity)：即数据的完整性，避免数据被篡改身份认证(Authentication)：确认对方的身份，避免中间人

2022-02-20 19:25:38 1302 1

原创一张图理清TCP/IP参考模型、OSI模型及HTTP/HTTPS的对应关系

本文不涉及具体概念定义的解析，旨在理清不同模型分层及HTTP协议的对应关系，具体概念解析可参考文章末尾的参考链接1. 前言网络通信模型网络通信模型一般有TCP/IP参考模型及OSI模型分层模型，TCP/IP参考模型有四层，而OSI模型有七层，TCP/IP参考模型和OSI模型大致上可以互相覆盖，但又不是完全重叠HTTP/HTTPS狭义的HTTP指定义于应用层的超文本传输协议，而广义的HTTP指应用层HTTP协议配合TCP/IP协议完成客户端和服务端之间通信的应答标准HTTPS不是单独的应用层协议，

2022-02-16 23:42:32 1907

原创当我们在讨论设备像素比（device pixel ratio，dpr）的时候我们在讨论什么？

0. 为什么要写这篇文章？最近在查阅了一些移动端适配的文章和资料，对大多数的概念和论述没发现有疑惑的地方，唯独对设备像素比（device pixel ratio，dpr）有些不解，而设备像素比在理解移动端概念以及适配都有重要作用，所以做了更多的资料查阅和理解，这期间花了一些时间，也希望有不同意见的同学可以交流一下ps：这篇文章不是移动端适配入门文章，不对大多数基础概念进行解释，例如像素，viewport，meta标签和主流适配方案等，如果还没了解基础概念，建议读一下相关文章再来看（也可以先阅读我下面列出

2022-01-30 12:28:50 2166 3

原创 git常用命令

git命令说明.``.git init创建版本库git add <file>添加文件到缓存区git commit -m <message>提交文件到仓库git status查看仓库状态git diff <file>查看文件差异git log显示提交日志，不能显示回退的commit，如有需要使用git refloggit log --pretty=oneline按行格式化日志输出git log -...

2022-01-20 23:01:47 86

原创 vue3 vs vue2 / Vue Router 4.x vs 3.x / Vuex 4.x vs 3.x 主要不同点对比

不同点vue3vue2...实例创建Vue.createAppnew Vueel选项无，需调用$.mount()挂载有，在option可选emits选项有，触发自定义事件需定义(可选)无? 多事件处理器支持不支持v-model语法糖原生标签：:value，@input组件：:model-value，@update:model-value原生标签：:value，@input 组件：:value，@input全局组件Vue.cr...

2022-01-10 22:25:31 642

原创 vue3 组合式API与响应性的概念理解和简析

本文重点在概念的理解，而不在具体代码原理的实现1. 组合式API简介1.1. 组合式API是为了实现关注点抽离1.1.1. 什么是关注点？简单地可以这么理解，关注点就是代码业务逻辑，因为我们写代码的时候倾向于把特定的逻辑功能点聚合在一起，也就是我们倾向于“关注这些功能点”，因此关注点可以理解为特定的代码业务逻辑1.1.2. 为什么需要关注点抽离？关注点抽离也称为关注点分离，这里称为抽离是强调功能的抽取聚合而不与分散概念混淆。关注点抽离也就是特定的代码功能块逻辑的抽离，更有利于程序的开发，问题的定

2022-01-09 18:32:08 1848 2

原创 vue组件component、属性prop及事件的命名和引用大小写规则（vue2 & vue3）

vue2 和 vue3 下，组件和 prop的命名规则是相同的组件命名规则2.1. 当使用 kebab-case (短横线分隔，如Vue.component('my-component-name', { /* ... */ })) 定义一个组件时，你在引用这个自定义元素时也必须使用 kebab-case，则必须使用<my-component-name>引用组件2.2. 当使用 PascalCase (首字母大写，如Vue.component('MyComponentName', { /*.

2022-01-05 23:53:59 3742

原创 Webpack5 工作流程简析

0. 执行流程Compiler(webpack(option)返回Compiler实例) → ContextModuleFactory → NormalModuleFactory → Compilation(compiler.run/watch调用compiler.compile生成Compilation实例)1. 理解compilercompiler 基本上只是执行最低限度的功能，以维持生命周期运行的功能。它将所有的加载、打包和写入工作，都委托到注册过的插件上。Compiler对象包含了Webp

2021-12-31 20:23:26 700

原创 Webpack5 Tapable 简析

Webpack TapableSyncHook/AsyncSeriesHook… → Hook基类Hook为具体hook（SyncHook/AsyncSeriesHook…）的基类，提供基础方法，如tap/tapAsync/tapPromise（订阅钩子事件）、call/promise/callAsync（发布钩子订阅），call/promise/callAsync 指向 Hook.prototype.compile方法（执行tap订阅），该方法需子类重写，基类不提供子类重写compil

2021-12-29 12:31:03 337

原创 TableFreeze.js（基于JQuery的表格冻结插件）

TableFreeze.js（基于JQuery的表格冻结插件）声明：该插件在原插件的基础上增加了冻结尾列的功能，由于此插件为github找不到开源地址，原始版本的插件作者及其修改信息如下：** 名称:JQeury实现表格行列冻结**** 作者:YJJ**** 时间:2014年4月16日**** 修改人：Allen**** 修改时间:2017-06-10**** 修改记录:...

2018-10-24 23:52:06 5429 4

原创使用 Vue+智能合约构建一款基于区块链的应用

银色子弹（SilverBullet）Vue2.x + Vuex + Vue-router + Nebulas + Nebpay + WebExtensionWallet +SmartContract声明：该项目创意来自 https://aim400kg.com/ ，仅供学习交流使用，请勿用于其他商业用途。项目地址在线预览地址Github地址特性前端使用vue + vue...

2018-10-23 01:04:16 3392

原创 electron-vue打包web应用（electron-vue build:web）

本文的讨论以官方提供的demo为例0.electron-vue的打包方式npm run build这种打包方式对应以electron-renderer为输出的开发环境（默认）npm run build:web这种打包方式对应以web为输出的开发环境（默需手工修改配置及部分文件）1.npm run build在命令终端运行此命令后，在build文件夹会生成应用可执行文件；在dist...

2018-10-21 13:10:46 8489 10

原创浅谈this，new，call，apply

0.关于this是指什么其实可以这么概括，this属于调用被调用的方法的主体，也就是，谁调用，谁就是this。虽然说起来这么简单，但是上面的话里面的概念其实涉及到：作为方法的调用(function）的this；作为构造函数里的this；作为call或者apply的this。以上三个概念，又涉及到js里的对象创建，和方法的继承，所以，要弄清楚this，就要弄清楚js里的对象创建和继承机制。...

2018-02-19 16:52:51 344

转载 CSDN-markdown编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I...

2018-02-19 16:22:10 320

转载 angular.module()

angular.module()创建、获取、注册angular中的模块The angular.module() is a global place for creating, registering and retrieving Angular modules.When passed two or more arguments, a new module is created. If pa

2017-02-05 16:17:19 1280

原创 angular创建新指令directive中scope的作用以及绑定策略

1.创建新作用域scope参数是可选的，可以被设置为true或一个对象。默认值是false。当scope设置为true时，会从父作用域继承并创建一个新的作用域对象。等价于加入ng-controller2.隔离作用域具有隔离作用域的指令最主要的使用场景是创建可复用的组件，组件可以在未知上下文中使用，并且可以避免污染所处的外部作用域或不经意地污染内部作用域。创建具有隔离作用

2017-01-30 20:42:02 657

原创 ng-bind ng-bind-html ng-bind-template 区别

ng-bind:变量（html标签无效）ng-bind-html:变量（html标签有效）ng-bind-template：表达式（html标签无效）

2017-01-07 20:00:38 1624

转载 AngularJs 1.6 开始移除$http success/erro 方法

AngularJs 1.6 开始移除$http success/erro 方法,用.then()和.catch()代替$http(...) .then(function onSuccess(response) { // Handle success var data = response.data; var status = response.statu

2017-01-06 16:48:23 3616 1

转载 HTML元素的显示优先级

一、HTML元素的显示优先级（显示层次问题，哪个在上哪个在下！总是显示在最前面）帧元素>HTML元素优先，表单元素总>非表单元素优先 HTML中常用的表单元素包括：文本区域（TEXTAREA），列表框(SELECT),文本输入框，密码输入框，单选输入框，复选输入框等等。常见的非表单元素包括：链接标记（A），DIV标记，SPAN标记，TABLE标记等等。表

2016-12-26 11:17:04 1341

Christopher的博客