![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端技术
文章平均质量分 69
莱恩-哈特
Pointfree 倡导者
展开
-
移动端适配之vw+rem
前置概念:rem: 相对于根元素(html)的字体大小的单位, 例如html font-size: 14px 则 1rem = 14px。vw: 当前视窗(指浏览器的可视区域)的宽度为100vw, 1vw指当前视窗宽度的百分之一。物理像素: 一个物理像素是显示器(手机屏幕)上最小的物理显示单元。设备独立像素: 设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素 (前端中可理解为 => css像素)。设备像素比(dpr): 设备像..原创 2021-01-23 19:09:52 · 756 阅读 · 10 评论 -
前端中的设计模式——单例模式
什么是单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点.为什么需要单例模式:为了将“描述同一件事务的属性或者特征归纳汇总在一起”,同时避免全局变量污染.模块化开发之间数据的共享.(状态管理)单例模式的优点:对于频繁使用的对象,可以省略创建对象所花费的时间.由于 new 操作的次数减少,对系统内存的使用频率也会降低.全局唯一性,可以保证全局数据和功能的...原创 2020-01-19 15:26:45 · 1618 阅读 · 0 评论 -
前端中的设计模式——发布订阅模式
在前端中观察者通常抽象为事件更具实用性,但这种模式会有一个问题.假设想在登陆成功后通知组件A、B、C更新view(A、B、C未登录时view处于缺省状态).用观察者模式的话const ob = new Observable()// A、B、C进行一波订阅ob.add('update1', () => { console.log('login successful!')...原创 2020-01-17 15:16:11 · 1721 阅读 · 0 评论 -
liunx端常用命令
应用安装centos// 安装yum install xxx // 更新yum-update ubuntu// 安装apt install xxx / apt-get install xxx // 更新apt update / apt-get update liunx文件基础操作// 清屏clear// 查看文件ls// 查看所有文...原创 2020-03-06 17:27:07 · 412 阅读 · 0 评论 -
前端中的设计模式——观察者模式
在实现js中的观察者模式前,先了解两个js中的概念1. hidden class解释: 由于 JavaScript 是一种动态编程语言,属性可进行动态的添加和删除,这意味着一个对象的属性是可变的,大多数的 JavaScript 引擎(V8)为了跟踪对象和变量的类型引入了隐藏类的概念。在运行时 V8 会创建隐藏类,这些类附加到每个对象上,以跟踪其形状/布局。这样可以优化属性访问时间。2. ...原创 2020-01-10 17:19:23 · 845 阅读 · 0 评论 -
实现类似redux的状态管理库
文章目录基本实现处理多个reducerreducer和state的模块化中间件的开发 =>日志系统多日志支持中间件模块化封装新的createStore优化实现支持替换Reducer基本实现实现梳理:createStore: 创建一个store来存储监听statereducer: 规定一个处理state的映射方案(纯函数),修改statecreateStore具备的功能s...原创 2019-12-14 22:29:23 · 412 阅读 · 0 评论 -
关于js中的forEach和map
相同点无法在循环体内修改原数组。可以通过索引在循环体中修改原数组。不同点forEach没有返回值(返回值为undefined)。map拥有返回值,可以在修改每一项后return每一项,返回值为一个新数组。其他 forEach是按顺序迭代的。在json数组中(形如[{},{},{}]),forEach和map都可以在循环体内遍历修改每个对象的属性和方法。...原创 2018-03-28 20:54:04 · 416 阅读 · 0 评论 -
关于encodeURI和encodeURIComponent的使用场景
encodeURI:适用于url跳转时。encodeURIComponent:适用于url作为参数传递时。tips:当url作为参数传递时如果没有用encodeURIComponent进行编码,会造成传递时url中的特殊字符丢失。...原创 2018-03-28 21:02:01 · 4100 阅读 · 0 评论 -
对象转查询参数
function uri(obj){ let arr=[]; if (obj && typeof obj === 'object') { for(let i in obj){ arr.push(encodeURIComponent(i)+'='+encodeURIComponent(obj[i])); } } return arr.join('&...原创 2018-02-26 16:44:30 · 467 阅读 · 0 评论 -
自定义省略字数及末尾省略样式
当字数超出规定字数时,可以通过下面函数省略超出的字并且自定义收尾。比如:初始表现:你好吗,lily?规定表现:两个字,多余用 ... 表示省略表现:你好... var getNeedStr = (function (window) { var index = 1; //计算字符占位(中文为2英文为1) function judgeLen(str) { var strLen = 0...原创 2018-02-13 10:06:02 · 421 阅读 · 0 评论 -
判断输入的字符串占位长度
function judgeLen(str) { let strlen = 0; for (let i = 0; i < str.length; i++) { if (str.charCodeAt(i) > 255) { strlen += 2; //如果是汉字,则字符串长度加2 }...原创 2018-02-09 11:08:15 · 1553 阅读 · 0 评论 -
AngularJs的一些知识点-3
$compile 作用:编译html字符串或dom用法: 直接使用指令中的使用示例&lt;!--直接使用--&gt; angular.module('myApp', []) .controller('MyController', function ($scope, $compile) { let vm =...原创 2018-02-27 16:21:11 · 179 阅读 · 0 评论 -
AngularJs中的双向数据绑定
1.首先来了解$watch作用:监听变量或者对象的变化,并在变化时提供操作空间。语法:$watch(watchObj,watchFn,deepWatch)watchObj:监听对象(字符串形式)watchFn:回调函数(变化时的回调)deepWatch:深度监听(布尔值,默认false)返回值:一个函数,用来注销对应的$watch示例: let app = ang...原创 2018-02-27 10:59:04 · 634 阅读 · 0 评论 -
json-server快速入门
json-server 的安装使用1.全局安装json-server(确保已经装过node环境)npm install json-server -g2.创建一个json文件,文件名任意。3.让json-server指向监测文件并指定监测端口json-server 文件名.js -p xxxx tips:登录设置的主页地址,可以得到对应json的路由结构,比如:...原创 2018-02-26 16:21:31 · 882 阅读 · 0 评论 -
封装ajax-3(通过promise内层封装)
let ajax = (function (window) { function uri(obj){ let arr=[]; if (obj && typeof obj === 'object') { for(let i in obj){ arr.push(encodeURIComponent(i)+'='+encodeURIComponent(obj[i]...原创 2018-02-08 09:16:50 · 189 阅读 · 0 评论 -
快捷拼接URL参数(对象转查询参数格式)
可实现拼接变量到URL中作为参数,拼接方法,如下:jointUrl(obj) { const paramArr = []; let param = ''; if (obj && typeof obj === 'object') { if (paramArr.length === 0) { paramArr.push('?');...原创 2018-01-18 19:43:14 · 1229 阅读 · 0 评论 -
AngularJs的一些知识点-1
1. 作用域层级ng-controller指令会调用scope的$new()方法创造一个scope的实例$scope(作用域实例)。Angular拥有$rootScope,它是其他所有作用域的父级作用域,将会在应用启动(加载模块)时自动创建。变量会沿着作用域向下继承。(也就是说子作用域可以访问到父作用域的变量等)$scope会拥有$parent属性,这个属性会指向父级作用域。每个作用...原创 2017-12-21 13:00:36 · 213 阅读 · 0 评论 -
ESLint的一些配置项解读
example-one eslint完整的校验规则可以访问这里!1. 安装eslint:$ npm install eslint –save-dev2. 使用eslint –init生成一个配置文件{<!--环境定义了预定义的全局变量--> "env": { <!--浏览器的全局变量--> "browser": true, <!--添加所有的 J原创 2018-01-18 19:36:47 · 15459 阅读 · 0 评论 -
解读package.json
1.作用:每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。2.指定版本语法:指定版本:比如1.2.2,遵循“大版本.次要版本.小版本”的格式规定,安装时只安装指定版本。波浪号(tilde)+指定版原创 2018-01-18 19:32:40 · 886 阅读 · 0 评论 -
AngularJs的一些知识点-2
1. angular的依赖注入定义:依赖注入(Dependency Injection)是一种经典的设计模式,主要是用来处理组件如何获取依赖的问题。依赖注入可以简单的理解为:在一个容器中我们定义了很多个模块和组件化服务,当模块需要某些服务时,只需要跟容器说我需要这些服务,并且只需要提供服务的名称,容器就会自动提供这些服务的实例。调用服务的模块不需要考虑这些服务是怎么来的,这些服务会由容器通过...原创 2017-12-22 15:30:35 · 218 阅读 · 0 评论 -
我的CSS入门指南
第一章 基础知识架构 早期网页组成只有html,而布局方面大多采用table去布局。然而对于现在的我们众所周知的是table并不适合布局。于是在当时 的这种布局下,网页的源代码混乱不堪。十分难以维护,跟别提什么可阅读性了。很容易就会错删或者疏漏什么,让整个布局随时面临随时崩溃的危险。在现在提倡的标签语义化在当时来说也是毫无存在的踪影。好在后来css出现了。有了它网页再次具有了表现性,div+cs原创 2017-11-24 19:28:53 · 795 阅读 · 0 评论 -
常见数据类型的克隆(内含对象的深度克隆)
function clone(obj) { var copy; switch(typeof obj) { case 'undefined': break; case 'string': copy = obj; break; case 'blooean': copy = obj; break;原创 2017-09-24 20:06:32 · 604 阅读 · 0 评论 -
使用jquery.qrcode.js生成二维码
自从期末考试后 已经很久没写博客了 最近学了一手二维码生成 还真是简单又好用 这里简单说一下:使用的是jquery的插件jquery.qrcode.js;1.无规定生成 $(function() { $('#qrcode').qrcode("110"); })2.规定大小生成$('#qrcode').qrcode({原创 2017-07-17 21:14:48 · 837 阅读 · 0 评论 -
基于jquery的轮播图组件开发-1
本来是想一口气把功能写完,好吧...结果就是只写了部分小功能,剩下的后续再补上。代码方面分区还有些乱,恩,毕竟写了应该多少有些收获吧。这里留一份代码: < > * { m原创 2017-06-30 17:45:43 · 348 阅读 · 0 评论 -
angular的一个小问题
用过angular的相信ng-bind一般都没有angular表达式使用的多,但其实在一些情况下:比如当你把引入angular框架的script标签放在body内最下面且同时网速较慢的情况下,会出现页面部分内容就是由你写的angular表达式组成,并没有初始化或者运算化。而原因也很简单,因为浏览器解析html的顺序所致。而解决方法也是有的,只需添加一个类名:‘ng-bloak’然后就ok了。原创 2017-06-26 22:05:21 · 171 阅读 · 0 评论 -
使用Jquery的getJSON跨域请求蘑菇街图片资源实现瀑布流
先看下效果ps:这是一个可以自适应屏幕的瀑布流;那么来看看怎么去实现1.找到蘑菇街的xhr请求地址;2.从这个请求中找到我们需要的图片资源请求路径,从下图可以看出它在请求回的对象的多层属性下;3.通过下图对比,找到它的控制参数(图中可以看出它是通过page去控制的)4.结合普通瀑布流和上述资料实现跨域请求的瀑布流,下面上代码:原创 2017-06-26 00:00:41 · 879 阅读 · 0 评论 -
浅谈网站的性能优化1
1.减少http请求这个应该是最容易想到的了,减少http请求的方法有很多:(1).css sprites、字库文件(自己一般使用阿里矢量图标库);(2).减少外链的js脚本文件,比如使用requeir.js,它不仅可以帮你把众多的js脚本文件加载变为一个脚本文件的加载还可以实现js的模块化编程。2.压缩文件(1).css和js文件的压缩,比如就像最常见到的jquery一样,我原创 2017-06-24 17:53:01 · 369 阅读 · 0 评论 -
Less的常见用法
//声明初始化变量@xs:200px;//使用上面的变量.box1{ width:@xs; height:@xs; margin-top: 10px; background: red;}//此时.box1是一个混合,可以如下使用.box2{ .box1;}//预设一个混合.class1{ margin-top: 10px; bo原创 2017-06-21 15:27:33 · 3101 阅读 · 0 评论 -
封装ajax-2
function uri(obj){ var arr=[]; for(var i in obj){ arr.push(encodeURIComponent(i)+'='+encodeURIComponent(obj[i])); } return arr.join('&'); }function createajax(obj){ if(window.XMLHttpRequest){原创 2017-06-19 14:37:43 · 207 阅读 · 0 评论 -
原生js通过jsonp跨域-模拟搜索引擎
效果还不错 就差加上键盘控制了...代码如下: 帅哥搜索 * { margin: 0; padding: 0; } form { position: absolute; left: 50%; top: 40%; } form input:nth-child(1) {原创 2017-06-17 15:39:55 · 325 阅读 · 0 评论 -
跨浏览器的事件处理(套装)
var crossthings={ getevent:function(ev){ return ev||event; }, gettype:function(ev){ return ev.type; }, gettarget:function(ev){ return ev.target||ev.srcElement;原创 2017-06-16 18:03:16 · 197 阅读 · 0 评论 -
两个小效果(美女系列..)1.纯css和css3实现;2.jquery实现.
恩 录出来有些卡...下面跟上代码: *{margin:0;padding:0} body{background: #272727;} #box #uu li a img{width:200px;height:200px;float: left;box-shadow: 2px 2px 5px;} #box #uu li{list-st原创 2017-06-15 13:52:20 · 655 阅读 · 0 评论 -
简易分页组件
还是第一次写分页用的页码组件 整个过程就是找规律 找它们的共通点 本来想写成灵活度比较高 多方面都提供接口的组件模式 然而在控制展现的页码数量这里 即便找到了规律共性也没能转化为靠谱实用的程序 最后不得已写死为七页了... 下面是代码..window.onload = function() { page({ id: 'yema', //分页容器 n原创 2017-06-14 18:11:51 · 246 阅读 · 0 评论 -
动态加载脚本和样式表函数的简单封装
//1.function moveloadjs(url){var script=document.createElement('script');script.src=url;script.type='text/javascript';var scrt=document.getElementsByTagName('script')[0];scrt.parentNode.in原创 2017-06-05 21:39:19 · 228 阅读 · 0 评论 -
斐波那契数列相关
1.斐波那契指定项数的输出(就是输出指定的n项斐波那契数列 以数组的形式)//1、1、2、3、5、8、13、21、34、55function fbnq(n){ //n表示需要多少项 if(n==1){return arr[1]; //如果一项 直接返回arr[1]}else if(n==2){return arr[1,1];//如果两项 返回arr[1,1];}原创 2017-06-04 15:57:36 · 405 阅读 · 0 评论 -
入手两个基础排序算法
关于算法这个东西 除了冒泡排序 平常也就没其他的接触了 虽然js自带了sort这个方法 但是还是需要自己去写比较函数 不像php中sort那么方便 而对于基础的排序算法 也就有了一定的需求 那么 就来看看新入手的这两个排序算法吧(这两个感觉简单 于是就学了 可能是相性和我比较符合吧 哈哈)1.选择排序:在时间复杂度上表现最稳定的排序算法之一,而且据说不会占用额外内存,适合小型排序;var原创 2017-06-03 21:32:40 · 282 阅读 · 0 评论 -
根据事件类型做出反应
window.onload=function(){var box=document.getElementById("box");function thingstype(ev){var e=ev||event;switch(e.type){case'click':e.target.style.background='blue';break;case'mouseenter':e原创 2017-06-02 23:19:08 · 283 阅读 · 0 评论 -
回顾面向对象-选项卡demo
window.onload=function(){new Gz();}function Gz(){var that=this;this.btns=document.getElementsByTagName('input');this.boxs=document.getElementsByTagName('div');for(var i=0;ithis.btns[原创 2017-05-30 18:28:21 · 220 阅读 · 0 评论 -
跨浏览器事件的添加与删除
var webadd={addtings:function(obj,type,hanshu){if(obj.addEventListener){obj.addEventListener(type,hanshu,false);}else if(obj.attachEvent){obj.attachEvent('on'+type,hanshu)}else{obj['原创 2017-05-29 18:07:13 · 339 阅读 · 0 评论 -
以前写的商品放大镜demo
#box1{width:400px;height:400px;border:solid 1px blue;position: relative;left:0;top:0;background: url(img/TB2KJgidB0kpuFjy1zdXXXuUVXa_!!1580757763.jpg_400x400.jpg)no-repeat;float: left;原创 2017-05-23 20:24:59 · 425 阅读 · 0 评论