- 博客(39)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 原生JS监听页面滚动条（2）-实现类似CSDN、简书等等网站导航和主题内容的交互
需求：上一篇完成了原生JS监听页面滚动距离并完成回到顶部（上一篇）本章实现CSDN左侧导航和右侧主题区域的滚动交互，先开下图（暂时忽略最右方的导航，其实现原理和左边导航相同）：图①：左侧作者信息等，右侧文章内容图②：左侧站点导航，文章列表话不多说，上代码：HTML<div class="content"> <div class="container">...
2019-12-27 11:23:06
256
2
原创 AngularJS 之input checkbox全选、反选简单写法
我们在使用jQuery或者原生JS全选反选功能使用type="checkbox"自带属性checked来完成，当然AngularJS一样可以通过ngChecked或者ngModel配合ngChange完成需求。正文开始：最完整的checkbox全选/反选需求：①点击列表头部全选按钮完成表格中所有checkbox全部选中或者全部不选②当表格中至少有一个未选中时，表头中的checkbox状...
2019-12-02 14:09:16
762
1
原创 Jquery extend 封装拖拽，支持自定义拖拽块尺寸和拖拽区域
Jquery extend 封装拖拽，支持自定义拖拽块尺寸和拖拽区域核心实现var winQuery = $.noConflict(true)winQuery.fn.extendMove = function(options) { var that = this that.bind("mousedown", start); function start(event) { if (event.button == 0) { distenceX = event.pageX - that.of
2021-07-30 10:53:52
232
原创 前苏联奥数题之12个乒乓球问题解答
/*问题：用一台没有砝码的天平再称三次的情况下找出12个乒乓球中的一个次品add by liuyong at 2021 04 25 10:33*/var pingpang = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]var result;if (1 + 2 + 3 + 4 == 5 + 6 + 7 + 8) { if (9 + 10 + 11 == 1 + 1 + 1) { if (12 < 1) { return result = '1
2021-04-25 10:43:10
2430
原创 IE兼容性之IE8 透明背景rgba问题
例子：前端编写popup弹窗，一般用半透明的黑色做幕布，常见代码：.popup{ background: rgba(0,0,0,.5)}上面的写法兼容各大主流浏览器，包含IE9及以上，但在IE8浏览器中不显示解决方案：.popup{ background: rgba(0,0,0,.4); background: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#6
2021-03-17 15:43:57
265
原创 原生JS封装兼容IE8及以上浏览器的Message插件
我们知道jquery封装插件的方法有：.fn.func=function()jqeury对插件的扩展：.fn.func = function(){}jqeury对插件的扩展：.fn.func=function()jqeury对插件的扩展：…extend() , $.fn…extend()等以上方法需要基于jquery库才能进行封装并使用这篇文章以常见的Message提示为例封装成可复用的插件，并支持IE8和IE8以上的浏览器话不多说，上代码：CSS`.paper{ width: auto;
2021-01-07 16:12:43
460
原创 JS构造函数、匿名函数、异步回调
使用JS的构造函数完成公用条件判断，匿名函数完成ajax回调var Muster = function(){ this.flag = false this.check= function(){ if (!inp[1].value) { message.error('数据库地址不能为空') } else if (!inp[2].value) { message.error('数据库名称不能为空') } else if (!inp[3].value) { message.er
2021-01-07 14:39:58
418
1
原创 IE8和IE8以上浏览器的兼容性问题
问题描述：IE8对JS 的兼容性较差，常见的原生ajax和js的H5新特性classList1、IE8 window对象中的JSON对象没有paser方法，但有stringify方法解决办法：window.JSON.parse = function(jsonStr) { return eval('(' + jsonStr + ')');}2、IE9不支持classList解决办法：此方法不适用IE8if (!("classList" in document.documentElement)
2021-01-07 13:14:41
773
原创 浏览器本地存储cookie的应用-Vue篇
前言在前端开发中，有些时候，数据需要在前端做存储，有点：成本低，缺点：安全性低。下面介绍使用cookie存储本地生成的uuid识别码Vue中使用cookie1、安装依赖$ npm i vue-cookie -D2、入口文件挂载cookieimport cookie from 'vue-cookie'Vue.prototype.$cookie = cookie;3、UUID生成公用方法（可忽略）createUUID(){ var d = new Date().getTime();
2020-07-23 11:54:12
819
原创 vuejs实现数字变化上下滚动动画效果
一、前言在做统计分析的时候，前端需要对一串数字进行处理，当数字改变，变大或者变小的时候，能有滚动效果话不多说，直接上代码二、实现效果（原谅我不会截动图，但是数字上下滚动的效果真的有。。。。）html<div class="chart-m-l-c"> <label>诉讼参与人总数</label> <div class="count"> <b v-for="(item, index) in prosecutorArr" :key="in
2020-06-10 16:29:10
5316
7
原创 vue+webpack打包生成可配置文件-后台服务地址
前言：我们用vue/cli + webpack 启动前端，后台服务的地址配置会写在/config/dev.env.js和/config/prod.env.js文件中，当项目打包执行build后会把这两个文件打包需求：最近项目规范走CI持续构建，自动化构建，一个构建结果可能用于多个环境，比如测试环境、研发环境、演示环境、生产环境等，为了保证前端包的一致性和保存打包记录，本地打黑包是不合适了，下面记录下生成可配置的serveConfig文件方法：第一步在/static文件夹下新建serveConfig
2020-05-21 10:15:30
976
2
原创 vue使用less报错:loaderContext.getResolve is not a function
.vue中使用lang=“less” 首先需要安装less和less-loader，自动安装会报错：loaderContext.getResolve is not a function此时我们查看package.json文件"less": "^3.11.1","less-loader": "^6.1.0",less-loader的版本过高，手动改成"less": "^3.11.1","less-loader": "^4.1.0",然后执行$ npm i完美解决！...
2020-05-13 11:25:39
930
原创 vue+js数据处理，对数组重新构造
前言：一般情况下，我们前端发起的请求，后台返回的数据经过简单的处理，即可渲染到页面中，不管是vue、angular或者jquery原生js等，但是有些时候，由于后台sql语句或者数据库设计，后台对数据不好处理（其实后台懒的一批），出于对服务端的优化，数据放在前端处理，降低开发成本，下面有一例最近开发的日历控件，在此记录。首先看请求返回的数据结构下图是需求和最终效果分析第一步：我们先把...
2020-04-27 09:08:57
1771
原创 Vue前端框架的目录结构分析和各文件之间的关系
前言上一篇记录了基于@vue/cli 和webpack的前端开发环境搭建并总结了一些常见的问题，本篇文章将来分析搭建完成的vue框架的目录结构并梳理各个文件之间的关系。分析├── README.md 项目介绍（.md文件，无实际意义）├── index.html 入口页面（webpack打包的入口文件）├── build ...
2020-02-25 10:57:39
1112
原创 vue-cli + webpack 搭建前端开发框架
前言：首先我们知道，webpack内置的dev-server可以部署虚拟服务环境，所以利用这一点可以使用webpack搭建一个机遇vue开发的前端框架。步骤一：确保电脑上安装了node和管理工具npm，查看方式：$ node -v$ npm -v如果没有安装，请自行安装步骤二：全局安装webpack$ npm i webpack -g安装完成后使用以下指令查看是否安装成功...
2020-02-24 16:17:37
245
原创 webpack+express搭建两个虚拟服务实现前端MVC开发
前言快过年啦，马上去参加年会，趁中午空闲时间整理一片webpack+express开发文档记录备孕。正文首先，我们需要完成一个一边编写一边能够预览webpack打包后的项目前端部分，然后模拟后端给出的接口我们假设后端会给我们一个类似这种的接口：http://www.ckotham.com/userlist，正常来说是请求一个用户列表的接口，那么我们的express可以搭建一个本地的服务器...
2020-01-21 13:02:52
409
原创 node笔记之nodejs+express+ajax实现前后端分离开发
前言本人前端开发一枚，目前在职公司项目后台语言使用的php，长期接触php，耳濡目染掌握了一点，并使用angularjs+php+mysql写了一个博客类项目，各位看官感兴趣阔以了解一下哇哦此处地址：Gotham身为一个前端，会点后台语言当然是个好事，但是会儿不精又不可能去做后台，处理些简单的还可（ps:起码做项目再也不用mock了/:笑哭）,所以最近一段时间研究了一下属于我们大前端的node...
2020-01-20 17:52:49
1175
1
原创 webpack + angularjs 打包项目
1、首先安装node环境就没什么好说的了。。2、安装angualrjsnpm install angularjs -D3、安装angualr（一直没明白明明是angualrjs1.x为啥非要提示装angular）npm install angular -D…此处省略一万字下面贴出我的package.json{ "name": "gotham", "version": "1...
2020-01-13 17:07:17
2148
1
原创 node + webpack 项目打包部署之webpack安装以及使用
webpack安装：webpack是基于nodejs开发，所以要提前保证安装了nodejs一、node安装1、Node.js 官方网站下载：https://nodejs.org/en/download/ 下载完成过，下一步下一步进行安装然后win+R →cmd →安装成功，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号安...
2020-01-12 21:07:58
655
原创 JS之for循环嵌套
假设有这样的一组数据（请求返回的数据）let items = [ {id: 0, name: '老许', url: '..1'}, {id: 1, name: '灵均', url: '..1'}, {id: 2, name: '秀芝', url: '..1'}, {id: 3, name: '郭pia子', url: '..1'}, {id: 4, name: '许灵均', ...
2020-01-06 19:32:59
846
1
原创 原生JS完成页面下拉出现回到顶部操作
需求：滚动区域div的scrollHeight大于window或者可视区域的height，为了提高用户体验，在页面下拉至指定高度（such:200px）出现回到顶部操作按钮。话不多说，直接上代码主HTML结构：<div class="content"> <div class="container"></div></div>JS：le...
2019-12-24 09:28:48
571
1
原创 AngularJS 中a标签unsafe导致的一系列问题。
一个很小很小的bug，明知道很小，但是就是小到找了两个小时，一点都不夸张，此处记录下。AngularJS为了安全检查功能给a标签的href默认成unsafe（很变态有木有）案例使用directive定义的公用头部组件：<body ng-controller="mainController"> <otham-head></otham-head><...
2019-12-19 19:13:53
450
原创 AngularJS内置指令$timeout应用（下拉菜单）
1、应用场景：鼠标经过菜单，弹出下拉菜单2、鼠标从主菜单移动到下拉菜单，下拉菜单不关闭3、鼠标从下拉菜单移动到主菜单，下拉菜单不关闭HTML代码如下<a href="javascript:;" ng-if="!lrf" class="avatar" ng-mouseenter="dshow()" ng-mouseleave="dhide()"> <img src="./...
2019-12-17 09:55:22
177
原创 原生JS之Ajax技术
1、Ajax原理（摘自W3C）AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。通俗点说就是通过XmlHttpRequest（xhr）对象向服务器发异步请求，从服务器获得数据，...
2019-12-09 15:03:59
137
原创 JS构造函数之ES5和ES6的区别
1、js为什么要构造函数使用构造函数构造可以复用的对象构造函数就是你构造出来的函数，是一种特殊的方法，与普通函数有着质的区别，其作用，在创建对象的时候主要用来初始化对象，就是给对象成员赋初始值，构造函数的主要特征就是方法名、首字母大写，并且用new来使用2、ES5function foo(){ this.name = 'Katherine'; this.age = '26';}v...
2019-12-09 10:23:44
639
原创 AngularJS指令之directive参数scope绑定策略'='和'&'报错问题，@正常
前言：熟悉angular的同学都知道，ng的指令非常强大，其中directive中的scope绑定策略用途很广泛，今天具体总结下scope绑定策略的知识点以及坑（可能对我自己而言是坑，此文记录。）1.@把当前的属性作为字符串传递。还可以绑定来自外层的scope的值，在属性值中插入{{ }}即可。什么意思呢？说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指...
2019-12-03 14:52:02
298
原创 AngularJS实例，含源码
实现功能：①AngularJS内置服务filter完成模糊搜索②AngularJS ng-model+ng-checked+ng-change实现单、全、反选③基于css3的伪类before+after完成checkbox美化④依赖注入ng-layer实现AngularJS+LayerJS传参源码地址：https://download.csdn.net/download/qq_35593...
2019-12-02 15:27:11
391
原创 AngularJs表单验证
能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中，表单验证给出来的反馈同获得正确输入同等重要。表单验证不仅能给用户提供有用的反馈，同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。AngularJs能够将HTML5表单验证功能同它自己的验证指令结合起来使用AngularJs提供了很多表单验证指令，主要列举其中一些核心的...
2019-12-02 13:39:30
135
原创 AngularJs配合Jquery操作DOM
我们在使用AngularJs开发时，某些时候需要主动操作dom，Angular配合Jquery能完成和Jquery高度相似的操作前提：引入Jquery且需在AngularJS之前引入Jquery。不然会导致报错： Error: [jqLite:nosel]以下列举常见的DOM操作：addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素...
2019-11-29 11:14:04
319
原创 AngularJs深入理解表达式
表达式在AngularJs应用中广泛使用，因此深入理解AngularJs如何使用并运算表达式是非常重要的。表达式的示例，用{{ }}符号将一个变量绑定到$scope对象上的写法本质上就是一个表达式{{ expression }}。当用$watch监听时，AngularJs会对表达式或者函数进行运算。表达式和eval（Javascript）非常相似，但是由于表达式由AngularJs处理，他们有...
2019-11-27 14:58:18
187
原创 AngularJs作用域 $scope
作用于（$scope）是构成AngularJs应用的核心基础，在整个框架中都被广泛应用。应用的作用域是和应用的数据模型相关联的，同时作用域也是表达执行的上下文，$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。作用域是视图和控制器之间的胶水，在应用将视图渲染并呈现给用户之前，在视图的模板会和作用域进行连接，然后应用会对DOM进行设置以便将属性变化通知给AnguarJs，这个功能让...
2019-11-27 13:38:56
410
1
原创 AngularJS与浏览器基础
前言：本文主要帮助熟悉与AngularJS有关的一些术语和技术，以及它们背后相关的工作原理。即使以前从来没有接触过AngularJS，通过将零碎的知识点组合在一起，你也可以构建一个属于自己的AngularJS应用。1、浏览器如何获取网页我们把互联网想象成一个邮局：当你想给朋友写信时，首先要把内容写在一张信纸上，然后在信封上写上地址，再把信纸装进信封。当你把信送到邮局，邮件分拣机构会根据邮编和...
2019-11-26 14:09:56
260
原创 CSS布局之传统布局解决方案
本章主要记录前端css布局，在不考虑细节、转场动画的情况下对页面整个框架构建一、盒模型一个web页面由许多html元素组成，而每一个html元素都可以表示为一个矩形的盒子，CSS盒模型正是描述这些矩形盒子的存在。CSS盒模型有四条边：外边距边、边框边、内填充边、内容边（Content edge、Padding edge、Border edge和Margin edge），四条边由内到外把它划分...
2019-11-25 15:29:46
196
原创 AngularJs之$filter详解
过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、num...
2019-11-25 14:29:41
1854
原创 AngularJs中的JS文件拆分管理。
拆分代码一般对可维护性是有好处的，但要注意这些事情：1、从理念上讲，拆的是逻辑而不是文件，如果把逻辑拆分理清了，拆不拆文件的重要性并不大。如果对可维护性的提升是100%，逻辑的部分至少要占90%。2、写Angular应用，最重要的事情是分层。很多人写不好Angular代码，原因就是没有分层的观念，所以症状就是controller又大又乱。简单的原则是：3、远程请求，数据缓存等等一律...
2019-11-22 13:49:01
438
原创 AngularJs依赖注入$service、$factory、$provider详解
前言1、依赖注入的逼格用有过JAVA spring的人都知道，Spring的核心思想就是DI(依赖注入,Dependency Injection)和IOC(控制反转 Invension of Controller),AngularJS的service其实就是用到了这里的DI思想，那么什么叫做DI?所谓DI，就是指对象是被动接受依赖类而不是自己主动去找，换句话说就是指对象不是从容器中查找它依赖...
2019-11-22 10:28:19
660
原创 Angular中$http解析、简单封装手札
$http服务1、$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。2、angular内置的$http服务简单的封装了浏览器原生的XMLHttpRequest对象，可以直接同外部进行通信。3、$http服务只能接受一个参数，且该参数是一个对象，这个对象主要包含一些http请求的配置内容。如下：var req = { method: 'POST', ...
2019-11-21 14:26:10
691
原创 Angular之$scope生命周期和$filter过滤器
一、scopescope是一个把view（页面或者模板中DOM元素）连结到controller上的对象)<p ng-bind="txt"></p>var app = angular.module('myApp',[]) app.controller('myCtrl',function($scope){ $scope.txt = '佛系四大皆空'; })...
2019-11-21 10:54:11
523
原创 AngularJs指定之directive全参数详解。
在angularjs还未更新出component时，我们一般会使用directive开发自定义指令或者组件，也正因为directive功能的强大，导致指令与组件概念含糊不清，所以才有后面用于做组件的component，当然对于component我们另起一篇文章再说。directive是直接用于操作dom的函数，它甚至能直接改变dom的结构，我们从一个最简单的directive开始：HTML:...
2019-11-20 16:53:28
672
ngDemo.zip
2019-12-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人