清音残月

前言WebComponent 方式是实现组件化的一种解决方案，目前社区内也有很多成熟对方案，如 Omi 、stencil ， 其中腾讯前端团队的 Omi 方案还是相当完善的。早些时间 笔者也在 Omi 的基础上封装了 @canyuegongzi/web-core ，但目前此种方案在使用方面尚存在不足，诸如属性定义繁琐、事件抛出缺乏灵活性、数据无法响应式等；故此最近在 web-core 基础上对相关的逻辑做了重构、升级成为 @canyuegongzi/web-core-plus 。简单对新旧定义组件方式

前言随着前端开发趋于复杂化，地图（Gis）已经成为大多数系统必不可少的一部分，从最常见的 Gis 可视化（点、线、面、各种弹框、插值）到三维模型、场景模拟、场景监控等。主流的智慧园区、智慧城市、数字孪生等基本都离不开 webGis 的开发。通过这篇文章，能够有这些收获：了解常见的 webGis 的实现方式通过 leaflet、cesium、mapBox 创建地图在 leaflet、cesium、mapBox 通过不同方式绘制 Marker文章中相关代码均已提交到 github，欢迎 star

前言随着前端应用场景的逐渐复杂化，伴随而来的对大数据的处理就不可避免。 那么今天就以一个真实的应用场景为例来谈谈前端中如何通过子线程来处理大数据。目前主流显示器的刷新率为 60Hz，即一帧为 16ms，因此播放动画时建议小于 16ms，用户操作响应建议小于 100ms，页面打开到开始呈现内容建议小于 1000ms。– 根据 Chrome 团队提出的用户感知性能模型 RAIL。以上这段应用是 google 团队提出的用户最优体验模型，从 js 运行的角度，大致意思就是尽量保证每一个 js 任务在最

前言最近公司部分前端工程转 typeScript 的实践中，也尝试了 ts 的写法，诸如依赖注入、控制翻转、注解等。这些概念在 Java 等后端开发中应用可能更为广泛，但也不影响在前端领域的尝鲜。最终的写法如下；依赖注入：export default class DataQuery extends VueComponent { @Inject('baseWebDataService') public baseWebDataService!: BaseWebDataService;

概述主系统采用乾坤集成react技术栈，子系统技术栈不限，docker部署;乾坤预览技术栈：主系统：React + Antd + qiankun子系统：Vue演示地址演示地址github系统截图主系统设计框架搭建系统基础搭建// 脚手架创建基础代码npx create-react-app simple-main-app-web// 暴露配置(能更好的优化webpack打包)npm run ejectqiankun常用apia. registerMicr

vue获取参数export const urlPar = function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) retur...

/*主要用于混入种植信息的tab组件数据处理*/export const tabFilterOption = { data: function () { return { /*列表数据*/ listData: null } }, props: { informationData: { type: Array, },...

con(val) { var str = val return str.replace(/<[^>]*>|/g, ""); },从字符串中获取所有的汉字con(val) { var reg = /[\u4e00-\u9fa5]/g; var strs = name.match(r...

兼容问题在低版本额浏览器中从在不支持axios的问题 。axios 是基于 promise 来实现的，IE 和低版本的设备不支持 promise。解决方法安装npm install babel-polyfill -S引入第一种引入import "babel-polyfill"第二种引入修改webpack.config.jsmodule.exports = {entry: [...

背景图片404的问题打开build/utils.jsif (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader', }) } el...

模板<template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div><ul> <li v-for="item in webAddr...

安装npm install --save vue-picture-preview使用在项目的入口文件处进行配置import vuePicturePreview from 'vue-picture-preview'Vue.use(vuePicturePreview)在根路由处进行添加插槽<!-- Vue root compoment template -->&lt...

watch: { '$route.query.id':function (val) { this.id = val; this.getNewInfo() } },

普通格式化(function(window){ /*2018年01月04日*/ var time1 = function(val) { var str = val.split(' ')[0].split('-'); return str[0] + '年' + str[1] + '月' + str[2] + '日' } /*2018.01.04*/ v...

概述在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，函数默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说：constructor属性的值是函数A...

创建对象的过程function Person(name, age) { this.name = name; this.age = age; } var person = new Person(&amp;quot;Marvin&amp;quot;, 21);创建一个空对象 var obj = new Object(); 让Person中的this指向obj，并执行Pers...

基本概述原生innerHTML模板 window.onload=function(){ var isLogin=false; if(isLogin){ Login() }else{ noLogin() } }原生获取元素 -&amp;gt; 操作元...

基本概述^同类^ 匹配输入字符串的开始位置。$ 匹配输入字符串的结束位置。\b 匹配一个单词边界，也就是指单词和空格间的位置。 例如， ‘er\b’ 可以匹配”never” 中的’er’，但不能匹配 “verb” 中的 ‘er’。\B 和\b相反，匹配非单词边界。 例如，’er\B’ 能匹配 “verb” 中的 ‘er’，但不能匹配...

概述WindowDocumentHistorylocationScreenNavigatorLocationhash 设置或返回从井号 (#) 开始的 URL（锚） host 设置或返回主机名和当前 URL 的端口号 hostname 设置或返回当前 URL 的主机名 href 设置或返回完整的 URLpathname 设置或返回当前 URL 的路径部分p...

概述StringDateMathArrayRegExpNumberObjectFunctionNullBooleanErrorcookiesession方法String获取字符串长度Length属性 连接字符串：concat(String, String)获取索引值：indexOf(String) 根据索引值获取单个字符：charAt(I...

基类//基类 父类var Person = function(){ this.name = 'Marvin'; this.age = 20;}Person.prototype = { say : function(){ console.log('Person.prototype - say'); }} 构造函数...

angular在线案例后台管理系统：http://47.106.104.22:8000主要问题变更检测数据更新后页面无法主动的刷新 constructor(private changeDetectorRe:ChangeDetectorRef){} public fu() { this.changeDetectorRef.ma...

git的简明使用教程git的安装以及配置git的安装git的安装在window下图形界面的操作非常简单，在Linux下以乌班图为例：sudo apt-get install gitgit的配置$ git config --global user.name "xxxxx"$ git config --global user.email xxxxx第一个要...

模块化利弊利 - 避免命名的冲出 - 更好的分离 - 更高的复用性 - 更高的可维护性弊 - 多次请求浪费宽带 - 依赖模糊 - 难以维护模式全局函数模式let msg = '1111';function fo(){ console.log(msg)}命名空间模式//对象中的数据是可以修改的，不安全let obj =...

// html <div class="word" v-html="$options.filters.filters2(item.news_content)"></div>// scriptfilters: { filters2: function (arg) { arg.replace(/<img [^>]*src=['"]...

数据类型字符串(string) ::string数字(number) ::整型 浮点型 NaN 布尔(boolean) ::true false数组(array)对象(object) ::Null ::nullUndefined ::undefined引用类型（栈&amp;amp;&amp;amp;堆）值引用undefined, number, string, boolea...