前端
Primise7
这个作者很懒,什么都没留下…
展开
-
Vue-cli3+Typescript+Element搭建项目
由于vue3.0已经发布beta版本,vue3.0将会支持typescript,加上之前angular2.0已经支持typescript。纵观几个框架,TS已经是一个趋势。能够熟练掌握TS并可以应用到项目中去,就可以成为前端开发中的优势。因为vue2.0对TS不太友好,所以就一直搁置没有去重构。有个vue3.0本菜鸡在休息时间也准备重构一下自己得项目,在实践中不断摸坑。1.使用vue-cli快速搭建项目本人工作项目中使用得vue-cli3,所以打算用vue-cli3脚手架来搭建整个项目,与vue-cli原创 2020-05-19 11:34:35 · 3178 阅读 · 0 评论 -
offset-边距
三大系列offset-位移scroll-卷页client-可视区js中有一套方便的获取元素尺寸的办法:offset系列offset常用属性(5个)###offsetWidth和offsetHeight————(检测盒子自身宽高+padding+border)###offsetLeft和offsetTop————(检测距离父盒子有定位的左/上面的距离)###offsetPar...原创 2018-11-05 13:50:13 · 185 阅读 · 0 评论 -
正则表达式
##小案例1:匹配电话号<body>请输入电话号:<input type="text"/><script> //需求:当input失去插入条光标,判断input中的内容是否符合固定电话的标准 // 直辖市: 010-12345678 (3位-8位) // 普通市: 0771-1234567 (4位-7位) document.ge...原创 2018-11-05 13:47:14 · 92 阅读 · 0 评论 -
cookie和session的区别
1、cookie和session的相关概念http会话机制请求响应无状态实际是需要有状态的cookie与session通过cookie可以向客户端存储数据多次设置cookie可以累加设置多个cookie键值对document.cookie = ‘username=lisi’document.cookie = ‘age=12’document.cookie //usernam...原创 2018-10-08 09:42:29 · 314 阅读 · 0 评论 -
angulr ui-router路由
angularJS里面的ngRoute并不能满足我们的开发需求因为angular的ng-view在写多个的情况下,不能控制内容的显示,渲染出来的内容都是一样的。所以用第三方插件ui-routerui-router由第三方编写的路由模块,相比之前的ngRoute更加灵活多变网址: http://angular-ui.github.io/可以在页面挖多个坑,填不同的内容ui-rotu...原创 2018-10-08 09:41:21 · 2003 阅读 · 0 评论 -
移动开发-两栏自适应
左边固定,右边自适应的3种总结:左边左浮动,右边加个overflow:hidden; #lt{ float: left;width:200px; background: #ff0;} #rt{ overflow: hidden; background: #f0f;}左边左浮动,右边加个margin-left; #lt{ float: left; width:200px; backgr...原创 2018-07-16 09:43:13 · 318 阅读 · 0 评论 -
移动开发-bootstrap
编码规范1.1 HTML约定在head中引入必要的CSS文件,优先引用第三方的CSS,方便我们自己的样式覆盖。在body末尾引入必要的JS文件, 优先引用第三方的JS, 注意JS文件之间的依赖关系, 比如bootstrap.js依赖jQuery, 那就应该先引用jquery.js 然后引用bootstrap.js。1.2CSS约定除了公共级别样式,其余样式全...原创 2018-07-16 09:42:15 · 3060 阅读 · 0 评论 -
移动开发-rem适配问题
浏览器默认的字体大小一般是16px,但是可以自己设置。 em 基于父元素的字体大小 rem的大小是基于html字体的大小1、px和em的区别?px像素(pixel)——px像素是相对于显示器屏幕分辨率em相对于当前对象内文本的字体尺寸。如果当前对象内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,任意浏览器的默认字体高都是16px。 IE无法...原创 2018-07-16 09:39:16 · 420 阅读 · 0 评论 -
webpack得介绍
Webpack的介绍Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 CMD 模块、ES6 模块、CSS、图片、 JSON、Coffeescri...原创 2018-12-22 16:18:26 · 177 阅读 · 0 评论 -
移动开发-触屏事件
#触屏事件1.事件类型touchstart: 手指触摸屏幕时触发touchmove: 手指在屏幕上移动时触发touchend: 手指离开屏幕时触发2.TouchEvent对象touches: 位于屏幕上的所有手指的列表targetTouches: 位于该元素上所有手指的列表changedTouches: touchstart时包含刚与触摸屏接触的触点,touchend时包含离...原创 2018-11-05 13:54:11 · 1388 阅读 · 1 评论 -
nodejs连接mongodb数据
Node连接Mongodb数据库1.在自己的项目下安装相对应对的包 npm install mongodb --save-dev cnpm install mongodb --save-dev(淘宝镜像)2 连接数据库地址 const MongoClient = require('mongodb').MongoClient; //使用mongodb的MongoClien...原创 2019-02-28 10:07:06 · 1665 阅读 · 0 评论 -
移动开发-媒体查询
CSS3中的Media Query(媒介查询)通过查询screen的宽度来指定某个宽度区间的网页布局。 超小屏幕(移动设备) 768px以下 小屏设备 768px-992px 中等屏幕 992px-1200px 宽屏设备 1200px以上 媒体类型将不同的终端设备划分为不同的类型,称为媒体类型s...原创 2018-07-16 09:38:30 · 582 阅读 · 0 评论 -
移动开发-屏幕适配
视口(viewport)是用来约束网站中最顶级元素html的,即它决定了html的大小。1、 PC端viewportPC设备上,viewport的大小取决于浏览器窗口的大小,以CSS像素作为度量单位。获取viewport的大小(即浏览器可视区域):document.documentElement.clientWidth;document.documentElement.cli...原创 2018-07-16 09:37:47 · 250 阅读 · 0 评论 -
移动开发-01
移动开发包括:原生APP,混合APP,webApp移动端开发和pc端开发有什么不同?移动设备与PC设备最大的差异在于屏幕,这主要体现在屏幕尺寸和屏幕分辨率两个方面。屏幕和分辨率屏幕尺寸,实际上指的是屏幕对角线的长度(一般用英寸度量)分辨率一般用像素来度量,表示屏幕水平和垂直方向的像素数,PC端常见1366*768。移动端多种,比如960*640.长度单位绝...原创 2018-07-16 09:37:05 · 196 阅读 · 0 评论 -
Dom对象的属性以及方法
原生DOM的属性和方法只能自己用。不能混用jQuery的属性和方法只能自己用。不能混用 要想混用,只能转换 案例body代码: <body> <div></div> <div id="box"></div> <div>&l原创 2018-05-02 10:10:13 · 349 阅读 · 0 评论 -
Parceljs初探 ...
Parceljs初探 https://parceljs.org/Parceljs是一款新的web应用打包工具,是一款零配置,以html为核心的打包工具。web应用从最初的无打包,到grunt,yoman,gulp,webpack等以js为核心,需要复杂配置的打包工具,尤其是当下最火的webpack,大有一种前端工程师即是配置工程师的窘境。parceljs一改前辈风格,零配置,轻装上阵,虽...原创 2018-02-25 10:32:37 · 2532 阅读 · 0 评论 -
搭建vue框架
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)2.基于node.js,利用淘宝npm镜像安装相关依赖在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装…3.安装全局vue-cli脚手架,用于原创 2018-06-25 08:59:31 · 1014 阅读 · 1 评论 -
CSS内容垂直居中
在我们写前端静态页面的时候我们不免会遇到很多次的左边图片右边文字的情况,以及如何让div里面的文字水平垂直居中呢?本人自己在开发者遇到的几种来简单说一下 1.适合响应式布局首先就是通过先给父元素设置display:flex;justity-content:center;子元素设置align-self:center;这一种一般比较适合于响应式布局 2.transform布局原创 2018-02-07 14:58:34 · 190 阅读 · 0 评论 -
webpack打包
webpack是前端开发中比较常用的打包工具之一,另外还有gulp,grunt。之前没有涉及过打包这块,这里介绍一下使用webpack打包的流程。 Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),W原创 2018-02-07 14:05:44 · 1793 阅读 · 0 评论 -
对git的一些理解
Git那些年踩过的坑Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库)Remote:远程仓库文件几种状态untracked:git未跟踪的文件,新增的文件未 git add 就会处于这种状态 not staged:被索引过又被修改了的文件 staged:通过 git add后即将被提交的文件 创建新仓库在当前原创 2018-06-25 09:00:13 · 501 阅读 · 0 评论 -
webpack的配置
1.npm install -g webpack 2.配置webpack.config.js文件,文件的配置类似于gulp 3.通过配置文件中的entry获取到文件,output将文件输出 4.webpack通过loader(加载器)和plugin(插件)处理文件 eslint做js的文件检测webpack的项目打包webpack主要是以模块化的方式打包整个...原创 2018-06-25 08:58:36 · 239 阅读 · 0 评论 -
移动端-ionic
Ionic介绍*= 官网地址 - Ionic官网 - Ionic中文网首先要认识Ionic框架? IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web ...原创 2018-06-25 08:57:35 · 704 阅读 · 0 评论 -
移动开发-混合App介绍
3种开发类型的原理和对比什么是混合App(Hybrid App)Hybrid App是指介于web-app(网页APP,如京东web)、native-app(原生应用,如手机上面的APP应用)这两者之间的app,它虽然看上去是一个Native App,但只有一个WebView ( WebView,可以类比成iframe ),里面访问的是一个Web App,就是包了个客户端的壳,其...原创 2018-06-25 08:56:38 · 17368 阅读 · 3 评论 -
仿jq封装-框架的核心机构开发
在开发框架时,为了防止变量以及全局对象的污染,要使用沙箱模式。 沙箱模式: 代码自执行,分割作用域 将常用的全局对象,通过参数传递到沙箱内 好处:在一定程度上提高变量的搜索性能; 有利于代码压缩(function(global) { // 独立的作用域,与外界隔离}(window));<script>(function (global) { ...原创 2018-06-25 08:52:37 · 269 阅读 · 0 评论 -
移动APP环境配置
移动App环境配置使用Ionic开发需要安装的基本工具NodeGitJAVA JDKAndroid SDKIonic cordovareact native 需要以下文件python Visual Studio 2015 (当你安装失败就需要c++环境)如果没有安卓设备建议买一个,也可以选虚拟机Genymotion (最快的虚拟机)bluestacks (最傻瓜式...原创 2018-06-13 09:40:42 · 799 阅读 · 0 评论 -
ionic
Ionic介绍*= 官网地址 - Ionic官网 - Ionic中文网首先要认识Ionic框架? IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web ...原创 2018-06-13 09:37:49 · 348 阅读 · 0 评论 -
MVC、MVP、MVVM的图示
1、MVCMVC是一种开发模式,由模型(Model)、视图(View)、控制器(Controller)3部分构成。模型(Model)数据保存。一般用来处理数据(读取/设置),一般指操作数据库。视图(View)用户界面。一般用来展示数据,比如通过HTML展示。控制器(controller)业务逻辑。一般用做链接模型和视图的桥梁。各部分之间的通信方式如下: 1. View...原创 2018-05-15 09:30:54 · 173 阅读 · 0 评论 -
ES6-fetch的用法
事实标准,并不存在与ES6规范中,基于Promise实现。 目前项目中对Promise的兼容性尚存在问题,如果在项目中应用fetch,需要引入es6-promise和fetch。当我们谈及Ajax技术的时候,通常意思就是基于XMLHttpRequest的Ajax,它是一种能够有效改进页面通信的技术。 XMLHttpRequest的最新替代技术——Fetch API, 它是W3C...原创 2018-05-15 09:14:50 · 11038 阅读 · 0 评论 -
ajax-jsonp跨域解决办法
说起Ajax,不可避免面临两个问题: 第一个是Ajax以何种格式来交换数据? 第二个是跨域的需求如何解决? 首选方案:JSON来传数据,靠JSONP来跨域jsonp : JSON with Padding用json去填充,填充什么?填充函数。返回的是一个函数调用!jsonp原理剖析本质是利用了标签具有可跨域的特性...原创 2018-05-11 09:30:40 · 568 阅读 · 0 评论