首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

让你的 JS 代码变得更加优雅且可维护

枚举 对于上面判断 userRole 的代码,其实我们可以用更优雅的方式去实现,那就是 枚举 。...策略模式 维基百科上说:策略模式作为一种软件设计模式,指对象有某个行为,但是在不同的场景中,该行为有不同的实现算法。 上面的代码依旧是可优化的,在这里我们可以利用策略模式来做进一层的优化。...更在状态 除了上面的方式之外,我们还可以利用“ 状态 ”的概念来写代码。在看代码之前,我们先了解下什么是 “有限状态机”。...不同的状态展示的 UI 也不同,所以我们以不同的状态划分好模块之后,代码写起来就会清晰很多,我们以 Vue 代码为例: // contants.js export const ORDER_STATUS...,以提高程序代码的模块化程度。

95310
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    在线客服系统源码开发实战总结:动态加载js文件实现粘贴一段js的sdk代码,直接引入插件效果

    常见的在线客服系统中,或者是统计代码中,粘贴一段js代码,就能引入某个插件的效果。这个是怎么实现的呢?...原理非常的简单: 对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到head 标签里面。 经测试,本方法兼容各浏览器,安全、无毒、环保,是 web 开发人员工作常备代码。..., 封装两个函数,可以直接动态加载一些js文件或者css样式文件 基于动态加载js原理实现的 sdk代码 在开发出客服系统以后,我需要提供一个远程js文件,供别人引入。...下面这段是我开发的客服系统js sdk代码,可以直接粘贴这段代码到页面中,实际查看效果 自定义按钮 js";s.onload = s.onreadystatechange = function () { if (!

    2K20

    快速搭建一个代码在线编辑预览工具(实战)

    3.json数据 json数据需要格式化后进行显示,也就是带高亮、带缩进,以及支持展开收缩。...展开收缩时针对非空的对象和数组,所以可以在遍历下级属性之前添加一个按钮元素,按钮相对于最外层元素使用绝对定位。...点击展开收缩按钮的时候根据当前的展开状态来决定是展开还是收缩,展开和收缩操作的是wrap元素的高度,收缩时同时插入一个省略号的元素来表示此处存在收缩,同时因为按钮使用绝对定位,脱离了正常文档流,所以也需要手动控制它的显示与隐藏...复制代码 执行输入的js console的最后一个功能是可以输入js代码然后动态执行,这个可以使用eval方法,eval能动态执行js代码并返回最后一个表达式的值,eval会带来一些安全风险,但是笔者没有找到更好的替代方案...可以看到很简单,就是调一下相关转换器的api来转换一下,不过想要找到这些转换器的浏览器使用版本和api可太难了,笔者基本都没找到,所以这里的大部分代码都是参考codepan的。

    4.4K30

    快速搭建一个代码在线编辑预览工具

    展开收缩时针对非空的对象和数组,所以可以在遍历下级属性之前添加一个按钮元素,按钮相对于最外层元素使用绝对定位。...includes(logItem.contentType)" v-html="logItem.content" @click="jsonClick" > 点击展开收缩按钮的时候根据当前的展开状态来决定是展开还是收缩...,展开和收缩操作的是wrap元素的高度,收缩时同时插入一个省略号的元素来表示此处存在收缩,同时因为按钮使用绝对定位,脱离了正常文档流,所以也需要手动控制它的显示与隐藏,需要注意的是要能区分哪些按钮是本次可以操作的...执行输入的js console的最后一个功能是可以输入js代码然后动态执行,这个可以使用eval方法,eval能动态执行js代码并返回最后一个表达式的值,eval会带来一些安全风险,但是笔者没有找到更好的替代方案...来转换一下,不过想要找到这些转换器的浏览器使用版本和api可太难了,笔者基本都没找到,所以这里的大部分代码都是参考codepan的。

    4.1K20

    js字符串转html_vue文件如何编译成html

    html代码如何转换成js文件 这个很简单 首先你要把html代码转成js代码 有这种转换工具的 搜下代码转换工具就可以 再把你转换好了的代码放到文本中 把后缀名改成点js就可以了 可以用txt文档改...这个文件小编要转可JS怎么弄,小编首页要加进去,这是一个在线客服漂浮代码 转换成js文件,参考如下:kf.js document.write(“”); document.write(“展开 收缩 QQ咨询业务经理业务杜鹏业务张静业务赵丽技术支持...将html内嵌js转换为外链js 该怎么转*當小编哭的撕心裂肺的時候,妳的懷裏ヌ⒋哪個τā在微笑。 把你的标签里面包含的代码复制进去,保存为JS文件。...怎么把带有html标签的内容转换成js格式的数据在asp例如:数据库中的 为什么要把html转换成js呢 小编经常看见有很多的在线工具都是html转换成js代码的工具,请问下为什么有些html代码是没有必要直写在网页里的...比如,网页中嵌入的广告代码,通常不是直接放在网页上的,而是转成js代码, 通过在网页中放入一个js语句来调用广告代码. js转换html的格式小编在textarea中获取到的文本如这样 sdfsf 123

    3.2K20

    博客添加浮动目录

    一直都想给自己的博客添加一个浮动的目录,在网上也找也几个,从易用性方面都不是太理想,所以今天才有了想法自己去写一个插件 。 需求 1. 当打开博客的时候在右下角自动生成对应的目录 2....可以点击展开和收缩 (目前未实现) 易用性方面,希望能够直接引用 js后,来执行一句代码来完成对应的动作 。...根据数据生成对应的html ?...相关使用 代码地址:ICatalogJs 使用时候只需要引用js后,执行init方法: catalog.init(); 本篇对应的效果可以看右下角 (本文完) 作者:老付 如果觉得对您有帮助,可以下方的订阅,或者选择右侧捐赠作者,如果有问题,请在捐赠后咨询,谢谢合作 如有任何知识产权、版权问题或理论错误

    1.1K20

    Blazor 初探

    这个继承声明来表明自己布局模板的身份: 可以看到整体布局包括侧边菜单栏和右侧主内容区,主内容区中又分为放关于按钮的顶栏以及实际内容区: 侧边菜单栏由 NavMenu 组件渲染,菜单项中的导航链接是...NavLink 组件: 网页宽度较小时,菜单栏可收缩,控制收缩和展开的逻辑是使用 C# 代码,写在 @code {} 块中,如上图,效果如下图: 四、改造 首先我们的主页不需要关于栏,有些边距也要去掉...NoPaddingLayout.razor: site.css 中添加一些 CSS 类: 然后主页 Index.razor 通过 @layout NoPaddingLayout 来使用这个布局页: @inject 就是注入,可参考开头提到的文章...这样页面逻辑就不需要使用 JS、Vue 这些的了,直接用 C# 就能完成,是不是很方便呀。...运行环境安装等可参考开头提到的文章): 题外话,期间遇到个问题 现象一:使用配置文件设置 urls 时,直接运行是正常的,使用 Linux 服务方式启动则不能正确读取配置,会使用默认的 localhost

    2.1K10

    如何自动邀请和主动邀请网站上的访客对话(附代码)

    在网站上自动邀请和主动邀请访客对话可以通过客服工具来实现。 自动邀请通常是在访客访问网站上的特定页面或访问时间达到一定时长后,使用 JavaScript 代码自动弹出邀请对话框。...主动邀请则是在客服人员手动点击按钮或手动发起邀请后,使用 JavaScript 代码弹出邀请对话框。...自动邀请 在粘贴完部署JS代码以后,再增加个配置项 (function(a, b, c, d) { let h...最后一行是新增加的配置项, KEFU_AUTO_OPEN 用来设置是否自动展开聊天窗口,如果设置为 true,则网页加载完成后会自动展开聊天窗口,如果设置为 false,则网页加载完成后不会自动展开聊天窗口...主动邀请 客服在后台首页,可以看到所有在线的访客列表,点击chat 按钮,可以主动发出对话邀请,展开聊天窗口

    79530

    Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态

    引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题。...收缩展开按钮触发收缩状态的修改,导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷新导航菜单样式。后续类似的组件状态共享还会有许多。...测试效果 进入主页,点击收缩按钮,效果如下图。 ? Store 模块化 现在我们的状态都维护在index.js,状态一多就会出现臃肿,这里可以根据需求进行模块化。 1....文件结构 模块化后的文件结构 ? 2. Store 封装 改写index.js,引入模块化,这里把之前的状态抽取到AppStore,后续可能还会有UserStore、MenuStore之类的。...组件封装  如下图,新建目录和文件,封装收缩组件展开导航栏组件。 ?

    2K20

    建立一个跨平台可复用C++代码的实例工程(二)windows,android下webview中js调用原生代码统一接口

    三端界面统一用webview加载h5实现,所以需要统一定义一个js调用原生代码的接口。...android需要转个弯,因为安卓没有原生的支持js异步调用原生代码的回调返回参数。要用evaluateJavascript来实现。所以js不好用匿名函数。只能在js端定义一个工具类。...js端的代码如下。用ddm类布置一个全局回调,原生代码调用这个回调后,qu'de函数名,关联的匿名回调函数,然后再分发回调。 <!...CefRegisterExtension("v8/ddmcorejsapi", extensionCode, this); } 然后v8里面处理js调用native代码的映射。...回调发生时,执行的是哪个js函数的回调 //cb_.insert(std::make_pair(browser_id,std::make_pair(context, arguments

    1.1K10

    京东App+折叠屏:剁手黑科技让你尽享好物

    通过查看当前接入的表现以及结合现有的代码,得出初步适配方案,并对适配难度也有了一定的了解。在调研过程中,总结出一些重点关注的问题,预估修改成本,确定初步的适配方案。...2.1基础适配 基础适配的要求是: • 应用的所有页面在折叠态和展开大屏态下都能全屏展示,UI显示正常。 • 应用的所有页面在折叠态和展开态之间切换都能保证用于业务不中断,UI显示正常。...2.2平行视界适配 平行视界功能支持屏幕可显示更多内容以及多窗口交互。平行视界功能的接入很简单,按照华为提供的适配文档进行操作即可。...代码逻辑如下图: 我们在测试中发现,窗口透明Activity在平行视界的情况下,会在右侧展示一个新的界面,而不是直接覆盖当前Activity之上,这种展示效果视觉上会很奇怪。...基于这个规则,在京东App咨询客服页面,之前设置Activity窗口背景透明属性不符合边看商品边咨询的业务场景。经过产品侧讨论之后,客服Activity去掉了窗口透明属性。

    60810

    Bootstrap源码分析之nav、collapse

    _navs.scss:导航模块 Mixins/_nav-divider.scss:分隔线 Mixins/_nav-vertical-align.scss:垂直对齐 1、只是用css进行了样式修饰,对Js...Nav-stacked:垂直对齐实现 6、提供了tab-content类,用于包裹tab,然后tab-pane做为内容区域,用于tab页的扩展 7、Nav-tabs下的dropdown做了位置向上收缩一个像素的处理...:折叠效果实现 1、$this.data()收集所有data-*数据 2、Parent属性:指定当前这个collapse被那个父级所控制,主要实现一控多的效果,以下是隐藏同一父级下所有子列表代码:...‘.bak’).find(‘span’).end():还原到$(“p”) 5、scrollHeight:页面的高度(获取为要展开的实际高度/宽度),包含视窗不可见的部分,在collapse中用于识别要展开的最大值...$element[0][scrollSize]) 6、对处理元素分为两类,一是要展开或隐藏的元素本身($element),二是触发展开或隐藏元素的按钮($trigger) 7、在hiden方法中,会重绘折叠区域的高度

    1.7K80
    领券