![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 58
Doniet
走自己的路,让别人无路可走
展开
-
浅谈Vue组件开发几个原则
之后Vue偷师学艺并融合ES5前辈的绝学,利用MVVM宝剑的优势,很快也打下了一片天地。很多时候,开发组件时,并不知道组件要展示成什么样的。再如,输入域组件,输入框前后都有可能展示其他东西,这时必须考虑使用插槽。组件最好是单一职能,一个组件如果有太多的职能,一是开发时处理逻辑容易混乱,二是复用性差。组件的控制,既受外部影响又受内部变化影响,如:Dialog组件,Modal组件等,既要从外面能控制它的显隐,又可以从内部关闭它。组件的展示受外部因素影响,如接口数据展示,按钮样式区别等,请使用props属性。原创 2022-09-14 17:09:57 · 657 阅读 · 1 评论 -
浅谈JS中null的江湖地位
从原型链的角度剖析JS为什么需要null原型与原型链新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入原型与原型链你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器原创 2022-09-10 03:36:21 · 272 阅读 · 0 评论 -
Leaflet+SupperMap 遮盖层
Leaflet 遮盖前言正文获取到行政区划的几何数据功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入前言 最近完成了一个leaflet项目,业主要求屏蔽所在行政区以外的其他区域。 实现思路:地图服务添加一层蒙版,将该原创 2022-01-14 23:13:36 · 1106 阅读 · 2 评论 -
webpack玩转arcgis
webpack玩转arcgis前言最近公司开发一个项目,用到arcgis.之前接触过openlayers和cesium,觉着arcgs应该也很简单.于是就到官网逛了一圈,结果傻眼了. 官网的教程基本都是直接引入js或者基于AMD引用(早些版本依赖dojo,dojo这玩意不支持ES模块的语法),而基于ES模块的就只是简单的介绍,完全不具备用于项目的实例.研究了很久,才做了这个简单demo.项目要求arcgis版本4.17及以上webpack版本4.0以上package.json{原创 2021-08-21 18:10:31 · 413 阅读 · 1 评论 -
填坑:操作div全屏时踩下的雷区
操作div全屏时踩下的雷区前言最近在公司开发一个项目,其中一个页面展示了三个表格,而且其中的一个表格需要展示40多个字段。看到需求的时候,瞬间无语了。但是作为一个合格的打工人,不管需求多么奇葩,东西总要给人做出来的。因此想到,每个表格都可以让它放到最大。表格的展示的列可以控制。在实现div全屏时遇到一个问题,记录于此。正文<template> <div class="fullscreen"> <div class="fullscreen-header"原创 2021-07-22 00:34:51 · 292 阅读 · 0 评论 -
Openlayers和Cesium本地webpack搭建
前端地图学习前言过完年,迎来一波离职潮。我自己也面试了几家公司,结果都不是很理想,待在公司也不想做事,想要学习点什么,于是就玩了一下地图。正文使用npm安装,"devDependencies": { "copy-webpack-plugin": "^6.4.1", "css-loader": "^5.1.2", "html-webpack-plugin": "^4.5.2", "style-loader": "^2.0.0", "url-loader": "原创 2021-03-12 22:39:41 · 626 阅读 · 0 评论 -
Typescript VS Javascript
Typescript VS Javascript 对比前言最近一直在面试工作,经常被面试官问:Typescript 与 Javascript相比,它的优势在哪?总是回答得不是很全面,今天准备把这个问题整理一下,记录于此。首先我们先从概念说起:Javascript狭隘的Javascript指的是由当 Netscape公司开发的用于Web浏览器和服务器交互的脚本语言。广义的Javascript指的是实现了ECMAScript标准的脚本语言。特性不依赖于任何浏览器...原创 2021-02-22 22:23:00 · 210 阅读 · 0 评论 -
JS的for循环
JS的for循环前言在js的开发中,循环是经常用到的,不管是for循环还是while循环亦或者是do … while循环。这些都是前端开发必备技能。今天说一下,for循环。从for循环说起在ES6还没出来前,我们使用for循环遍历一个数组时:var ary = [1,2,3,4,6,7];for(var i=0;i<ary.length;i++)[console.log(ary[i])}像这样,对于数组,类数组,甚至于String、Number类型,我们都可以使用这样的结构来循环。原创 2021-01-17 20:46:46 · 229 阅读 · 1 评论 -
Vue移动端UI框架mux-ui
移动端UI框架mux-ui移动端UI框架mux-ui组件Actionsheet组件移动端UI框架mux-ui从2014年起,在前端摸爬滚打至今,做了不少项目。期间使用过不少的前端框架,其中Vue框架做过的项目最多。用Vue开发了许多的组件,空闲时间整理出来。成了现在的mux-ui。组件mux-ui主要有::Actionsheet组件;按钮Button组件;头像Avatar组件;Cell组件;Card组件;弹窗组件,包括Alert、Confirm、Prompt;表单组件,包括Field原创 2020-10-10 17:40:28 · 463 阅读 · 1 评论 -
Sublime Text3 安装Package Control
Sublime Text3 安装Package Control前言安装Sublime Tex3安装Package Control前言sublime text3 是一款轻量级的编辑软件,一直颇受前端程序员的喜爱。由于国内无法访问Package Control,导致许多的插件无法安装。本文记录手动安装Package Control并且设置可以使用Package Control安装Sublime...原创 2019-04-17 15:03:43 · 706 阅读 · 0 评论 -
当better-scroll遇上vue,不一样的坑
前言不久前,遇到这样的一个APP需求,头部一个tab,下面是一个列表,要实现上拉加载更多,下拉刷新。在度娘里找到了better-scroll,参照better-scroll的demo,实现了一个scroll组件scroll组件html &lt;div class="mux-scroll-wrapper" :style="scrollStyle"&gt;&lt;div c原创 2018-09-01 21:54:29 · 4605 阅读 · 0 评论 -
移动端WEB页面适配
移动端WEB页面适配前言 公司开发一个项目,把安卓和IOS原生开发的同事加了进来,参与h5页面开发。测试时,发现各种适配问题。UI设计的同事问我:你们是不是没有按设计稿来的?检查一看,通篇是px,我做的em适配完全没有用到。因此整理一下移动端WEB页面适配问题记于此。 在这里也要吐槽一下,现在的公司为了省钱,一个人干了几个人的活,有的人还是跨语言开发。难怪很多人吐槽现在...原创 2018-07-30 21:33:51 · 3317 阅读 · 0 评论 -
vue开发组件时踩过的一些坑
开发vue组件踩过的坑前言近期又完成一个vue项目,公司好像十分看好vue框架,之后的几个项目也准备使用vue框架。然而回想起之前,使用vue开发组件时遇到的各种bug,心中一阵后怕。在此记录下那些填坑的历程,方便以后查阅。问题input输入出现白屏问题 项目要求header部分固定,main部分可以滚动,css3实现main的css:.main{ ...原创 2018-06-01 21:21:55 · 2752 阅读 · 0 评论 -
Uglifyjs混淆工具
背景公司要开发一个app下载页面,页面十分简单,业务逻辑也十分清楚,判断是Android还是IOS,然后跳转到相应的下载地址。花了一个小时开发测试,然后信心满满的把页面交给项目经理,项目经理看看,说:什么鬼呀,你看看,浏览器打开,什么都能看到,你就不能将js混淆一下么?于是我又灰溜溜的坐回座位。记得wenpack有一个插件uglifyjs-webpack-plugin,百度搜索了一下uglif...原创 2018-03-01 12:49:25 · 7460 阅读 · 0 评论 -
node+webpack+angular+bootstrap创建web项目
一、写在前面的话网上看了许多的博客,angular加node创建web项目的博客很少,有也介绍很粗略,因此,决定自己写一篇详细介绍nodejs加angularjs搭建web环境。由于初学angular,许多的用法还不是很清楚,欢迎大神们指正。 二、准备及项目目录安装node—相关介绍,请自己搜索。web项目目录: 三、搭建web环境创建项目目录angularCode,在控制台执行 D:\n原创 2017-07-21 11:34:53 · 2102 阅读 · 0 评论 -
npm设置淘宝镜像
npm安装node-sass报错的解决办法:npm config set registry http://registry.npm.taobao.org/原创 2017-05-26 17:51:50 · 294 阅读 · 0 评论 -
angular+ui-router+layui的使用心得
近来,完成公司的一个项目,项目使用angular+ui-router+layui框架开发,由于刚刚接触angularjs,因此遇到各种各样的坑。在这里记下印象最深的几个坑;一、ng-repeat 当数组元素有至少两个相同时,报Error: [ngRepeat:dupes]; //controller.js $scope.items = [1,2,3,3,2,2];<!--原创 2017-07-11 00:03:41 · 7426 阅读 · 2 评论 -
javascript的基础
写在前面的话接触前端快三年了,许多的前端概念都只是模模糊糊的,说不清楚。一直以来,都想要整理,梳理一下这些概念,可是工作有点忙,加上自己又不是那么自律的人,所以一直拖着。难得今天有空,本着昨日事,今日也可毕的精神,写上那么点,以后再慢慢补全。基础概念Javascript的基本数据类型原创 2017-07-20 23:13:34 · 358 阅读 · 0 评论 -
一步一步使用webpack创建react项目
写在前面的话 2016年6月首次接触到react.js,由于某些原因,对react其实不是很了解。当时对webpack的使用也知之甚少,根本不会搭建react项目。最近,由于一个项目使用到react.js,花了点时间,自己搭建了一个react的项目。将步骤记录于此,以免忘记。项目目录结构: 创建项目步骤: 安装依赖包: 1. 首先确定已安装node.js原创 2017-09-25 17:27:18 · 1160 阅读 · 0 评论 -
使用ES6写react组件的几点注意事项
前言随着各大浏览器对ES6语法的支持以及babel插件的使用,ES6语法使用越来越多。不久前,完成一个react项目,对ES6编写react组件踩了不少坑。在此记录开发时,应该注意的一些事项。正文 1. export default和export的区别: 编写react组件时使用的是export default 2. 使用ES6编写组件时:expo原创 2017-09-25 18:09:58 · 1023 阅读 · 0 评论 -
js实现继承的几种方法
js的几种继承方法原创 2017-06-27 15:41:49 · 341 阅读 · 0 评论 -
使用angular ui-router的一点感受
一、背景今年3月份从一个同事那里接手了一个angular项目,心里有血窃喜,自己花了两个星期自学的angular终于可以用上战场啦!不久,那个同事离职啦,整个项目落在了我的手里,就在项目快要上线时,领导说,要加一点新的功能。想着又要加班啦,我心里一万只草泥马飞腾而过。可是不管怎样,新的需求还是下来啦。好吧,我认命。本来很简单的一件事,配置路由,书写模板。可是前辈留下的路由,看得我眼花缭乱。本来就是原创 2017-04-15 20:31:07 · 1134 阅读 · 0 评论 -
那些我们使用VUE2.0+Mint-ui+axios踩过的坑
前言公司有一个项目,要求做到组件最大限度重用;由于项目比较赶,于是我决定使用比较熟悉VUE2.0来开发。没想到,让我踩了一大片的坑。虽然项目最终还是上线了,但是那些坑,让我每每想到都会有一股洪荒之力在体内流窜。那些坑修改Mint-ui的样式 项目中要对所有的客户端做适配,Mint-ui并做任何适配,因此,部分组件需要调整样式。可是在组件中去改变样式发现,并没...原创 2018-01-25 10:26:55 · 2489 阅读 · 0 评论 -
div嵌套时,内部div使用margin引发的问题
前言前端永远有学不完的东西,改不完的bug。因为客户需求永远都在变化,测试找到bug也总是最先找到前端开发,所以前端是最苦逼的。问题最近在为一个项目开发一个简单的下载页面,UI十分简单:上部分一句高逼格的装逼句子,中间一张图,底部一个下载按钮,加上一个全屏的背景。html>head> meta charset="utf-8"> meta name="view原创 2018-01-25 11:39:31 · 3140 阅读 · 1 评论