HTMLDivElement.prototype

探讨了尝试将自定义HTML标签转化为组件的可能性,并对比了不同组件化方案的优劣,包括选择器配js的方式与molecule框架。
HTMLDivElement.prototype.test = function(){console.log("i am div")}

$0.innerHTML = '<div id=t>tt</div>'

t.test()

 

这是一个神奇的时代。

能不能用于自定义标签,打开另一扇组件的大门呢?

<mytag id="m" />

mytag.prototype.test = ...

 

结论是否定的。mytag 不会自动成为一个类。mytag 的归属的是 HTMLUnknownElement。

这条路走下去会出现一种 css:

#id {
    test : function(){}
}

.dropdown{
    events:{
           click : function(){}
    }
}

那么这种组件化思维和 molecule 怎么抉择呢?

我认为就单个元素的组件来说,这种选择器配 js 的风格比 molecule 更清爽,比 jQuery 的拙劣的组件表达方式更有霄壤之别。

但从组件的工程周期来说还是 molecule 更适合工程运用,后面再详细说说这个问题。

转载于:https://www.cnblogs.com/inshua/p/6915374.html

<script setup name="BMapComp" lang="ts"> import { useElementBounding } from '@vueuse/core' // import { loadBMap } from '.' import { ref, onMounted, onBeforeUnmount } from 'vue'; const props = defineProps({ options: { type: Object as PropType<Partial<{ center: { lng: number, lat: number }, zoom: number }>>, default: () => ({}), }, showNavigation: { type: Boolean, default: true, }, showScale: { type: Boolean, default: true, }, mapStyle: { type: String, default: '', }, }) const emits = defineEmits(['init']) let locMap: any = null const mapviewRef = ref<HTMLDivElement>() const defaultOptions = { // center: { lng: 117.227267, lat: 31.820567 }, center: { lng: 116.404, lat: 39.915 }, zoom: 15, } const { width, height } = useElementBounding(mapviewRef) watch([width, height], ([w, h]) => { if (w * h === 0) return if (locMap) locMap.checkResize() }) async function loadBMap(): Promise<void> { if (window.BMap) return; const script = document.createElement('script'); script.src = `https://api.map.baidu.com/api?v=3.0&ak=8dkvITEPnYO7zxUsZ35yoZ5Hs1cVEP3u&callback=onBMapCallback` document.body.appendChild(script); } // 创建扩散圆marker function createSpreadSymbol(BMap: any, size = 100): any { function SpreadSymbol(_size: any, _anchor: any) { BMap.Symbol.call(this, _size, _anchor); this.width = _size.width; this.height = _size.height; this.isReDraw = true; } SpreadSymbol.prototype = new BMap.Symbol(); SpreadSymbol.prototype.constructor = SpreadSymbol; SpreadSymbol.prototype.add = function () { const canvas = document.createElement('canvas'); canvas.width = this.width * 2; canvas.height = this.height * 2; this.context = canvas.getContext('2d'); this.isReDraw = false; }; SpreadSymbol.prototype.render = function () { const duration = 1500; const t = (performance.now() % duration) / duration; const radius = (this.width / 2) * 0.1; const outerRadius = (this.width / 2) * 0.5 * t + radius; const context = this.context; context.save(); context.scale(2, 2); context.clearRect(0, 0, this.width, this.height); // 扩散圆 context.beginPath(); context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2); context.fillStyle = `rgba(38,1,252,${1 - t})`; context.fill(); // 中间圆 context.beginPath(); context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2); context.fillStyle = 'rgba(38,1,252, 1)'; context.strokeStyle = 'rgba(38,1,252, .1)'; context.lineWidth = 2 + 4 * (1 - t); context.fill(); context.stroke(); context.restore(); this.data = context.getImageData(0, 0, this.context.canvas.width, this.context.canvas.height); return true; }; return SpreadSymbol; } // 初始化地图 async function initMap(): Promise<void> { await loadBMap(); if (!mapviewRef.value) return; const BMap = window.BMap; const opts = { ...defaultOptions }; locMap = new BMap.Map(mapviewRef.value); const point = new BMap.Point(opts.center.lng, opts.center.lat); locMap.centerAndZoom(point, opts.zoom); // 启用鼠标滚轮缩放功能 locMap.enableScrollWheelZoom(true); // 添加扩散圆marker const SpreadSymbol = createSpreadSymbol(BMap, 100); const spreadSymbol = new SpreadSymbol(new BMap.Size(100, 100), new BMap.Size(50, 50)); const marker = new BMap.Marker(point, { icon: spreadSymbol, enableDragging: false }); locMap.addOverlay(marker); } // async function initMap() { // await loadBMap() // if (!mapviewRef.value) return // const BMap = window.BMap // const opts = { ...defaultOptions, ...props.options } // locMap = new BMap.Map(mapviewRef.value) // const point = new BMap.Point(opts.center.lng, opts.center.lat) // locMap.centerAndZoom(point, opts.zoom) // // 添加控件 // props.showNavigation && locMap.addControl(new BMap.NavigationControl()) // props.showScale && locMap.addControl(new BMap.ScaleControl()) // // 设置地图样式 // if (props.mapStyle) { // locMap.setMapStyleV2({ styleId: props.mapStyle }) // } // emits('init', locMap) // } onMounted(() => { if (window.BMap) { initMap() } else { const script = document.createElement('script') script.src = `https://api.map.baidu.com/api?v=3.0&ak=8dkvITEPnYO7zxUsZ35yoZ5Hs1cVEP3u&callback=onBMapCallback` window.onBMapCallback = initMap document.body.appendChild(script) } }) onBeforeUnmount(() => { if (locMap) { locMap.clearOverlays() locMap = null } }) </script> <template> <div id="mapview" ref="mapviewRef" :style="{ ...($attrs.style as Recordable<string>) }" /> </template> <style scoped> .BMap_cpyCtrl, .anchorBL { display: none; } </style> 结局动态扩散圆marker未生效
06-17
`Uncaught ReferenceError: showUploadOptions is not defined at HTMLDivElement.onclick` 这个错误提示表明在HTML页面中,当点击某个 `div` 元素时触发了 `onclick` 事件处理器,但 JavaScript 引擎找不到名为 `showUploadOptions` 的函数或变量。换句话说,在当前作用域内没有定义 `showUploadOptions` 函数。 ### 错误原因分析 1. **未定义函数**:最常见的情况是没有在代码中声明或定义 `showUploadOptions` 函数。可能是你忘记了添加这个功能的实现部分,或者是文件加载顺序出了问题,使得脚本还没执行完就被引用了。 2. **拼写错误**:另一种可能性是你在绑定事件处理程序或者定义函数名称时打错了字。哪怕是一个字母的不同都会被视为完全不同的标识符。 3. **作用域问题**:如果 `showUploadOptions` 被定义在一个局部作用域内部(如另一个函数里面),那么全局上下文或者其他地方就无法访问它。只有处于全局作用域下的函数才能作为事件监听器被直接调用。 4. **外部资源未加载成功**:如果是通过外部 `.js` 文件引入的功能,则需要确保该文件已经被正确加载,并且路径、标签等信息无误。 5. **异步加载冲突**:有时由于异步操作的原因(例如 AJAX 请求返回后动态插入的内容),可能导致 DOM 已经准备好了但是相关的 JS 没有完成初始化之前就已经绑定了事件。 ### 解决方案 #### 确保函数已定义并且可用 ```html <!-- 假设这是你的HTML --> <button onclick="showUploadOptions()">选择上传选项</button> <script> // 定义好showUploadOptions函数 function showUploadOptions(){ console.log('显示上传选项...'); } </script> ``` #### 验证DOM元素和JavaScript之间的时间顺序 你可以将所有的交互逻辑放在文档加载完毕之后再执行: ```javascript document.addEventListener("DOMContentLoaded", function () { document.getElementById('uploadButton').addEventListener('click', showUploadOptions); function showUploadOptions() { console.log('显示上传选项...'); } }); ``` 这样做可以保证所有必要的 DOM 结构都已经准备好才去设置它们的行为。 #### 浏览器控制台排查 利用浏览器自带的开发者工具(通常按下 F12 打开)查看详细的报错信息,包括堆栈跟踪,帮助快速定位哪里出现了问题以及是否有关联因素影响到了正常运作。 --- 经过上述调整后应该能解决问题。同时建议保持良好的编码习惯,尽量减少 inline 方式指定事件处理函数的方式,采用分离样式表及行为层的做法更有利于维护和发展大型项目结构清晰度高也减少了此类人为失误的发生几率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值