其实还很远-CSDN博客

原创浅谈前端移动端页面开发（布局篇）

前言的一些碎碎念：最近一直在写移动端的页面，不过一直是用的别人造好的轮子，很多时候并没有想那是为什么，那是怎么样要那么写，就跟着别人的文档去了。本以为自己对移动端的那一丢丢理解，结果很多东西都特么有问题，所以，今天停下了手中的一些东西，来谈下移动端的布局方案吧内容有些长，这也是我第一次写博客，不足之处还请严厉指出一. viewport什么是viewport简单来讲，vie

2017-07-17 19:49:28 560

原创 http洗衣额详解

情景，当我们在浏览器中输入www.baidu.com时 1. 浏览器会检索自身的dns缓存； 2. 搜索操控系统的本身的dns缓存，缓存失效 3 . 读取本地host文件 4. 浏览起发起dns系统调用； 5 . 宽带运营商服务器查看本身DNS缓存 6. 运营商服务器发起一个迭代的DNS解析的请求7. 运营商服务器把结果返回给操

2017-07-17 18:56:18 262

原创 node.js的api url模块和querystring模块

url网址解析模块 url.parse url中url.parse()方法可以将一个URL解析成一个对象 const url = require('url'); url.parse("")将url转化为对象....... url.parse("http://www.imooc.com/video/6710",true).href

2017-07-17 18:27:43 330

原创 node.js

nodejs可以使 javascript 流畅的运行在服务器端，采用谷歌chrome浏览器V8引擎，由C++语言编写，实质上是一个javascript运行环境，浏览器端javascript运行交互组件，异步请求是通过浏览器解析插件来解析页面的js代码，nodejs不仅可以解析JS代码，而且还没有

2017-07-17 17:22:38 397

原创 react的动画ReactCSSTransitionGroup

react的动画用法 ReactCSSTransitionGroup 项目中安装 npm install --save -dev react-addons-css-transition-group 项目中使用 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 组建中

2017-07-17 17:12:35 1527

转载通过HTML5 FileReader实现上传图片预览功能

在上传图片到服务器之前，我们希望可以预览一下要上传的图片。这个功能可以通过HTML5 的FileReader()方法来实现。FileReader是html5 File API的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest，区别只是它读取的是文件系统，而不是远程服务器。为了读取文件中的数据，FileReader提供了如下几个方法。re

2017-07-17 15:55:47 892

原创前端的发展史

最早的html页面是完全静态的页面，预先编译好的存放在web服务器上的html文件。浏览器请求某个url时，web服务器把对应的html文件扔给浏览器，现实网页，而动态创建html文件的方式：asp。jsp，php【第一阶段】是JS原生通过浏览器解析机制，它的原理是使用浏览器提供的原生API 结合JS语法，可以直接操作DOM 【第二阶段】jQue

2017-07-17 14:48:22 311

原创 2017-03-21 Flex布局新旧混合写法详解（兼容微信） http://www.tuicool.com/articles/Yzeu6j7

2017-03-21Flex布局新旧混合写法详解（兼容微信）http://www.tuicool.com/articles/Yzeu6j7

2017-07-13 14:45:19 535

原创 ACCC

2017-04-05 https://juejin.im/entry/58e11c5644d904006d16f4e5文本动画, 几行代码页面效果瞬间就提升了animate-text 安装方法 npm install animate-text --save 下载项目中的dist/anim

2017-07-13 14:43:22 302

原创 A1

2017-04-06https://juejin.im/post/58ddfeb7b123db0060406148前端周刊第 49 期：React 和 Vue.js SSR 框架 + 微信小程序 + Grid 布局 grid布局 1. 创建一个容器，通过display:grid;声明这个容器是一个网格容器2. 同样在容器中设置grid-template-columns和

2017-07-13 14:42:23 196

原创欢迎使用CSDN-markdown编辑器

HTML email (elm制作) http://www.educity.cn/wenda/10014.html／／css选择器支持情况； EDM制作最基本的要点： 1.不能用div＋css布局，不能用浮动，定位；布局只能采用table实现，可以大表套小表，层次尽量精简，不要用多个 table 拼装； 2.css要嵌入到html元素中，不能内联，也不可外链，所有CS

2017-07-13 14:41:09 204

原创 REM

(function () { var t; function initHtmlFont(){ var maxWidth = 640; var html = document.documentElement;

2017-07-13 14:34:25 169

原创 chrome上安装插件

chrome安装插件步骤更多工具－－－扩展程序－－－广告拦截插件 adblock plus json试图工具 json handle 有道词典划词扩展v3 可以打开chrome应用商店去安装，自选

2017-07-10 10:41:46 356

原创 react

react组件apati 设置状态 this.setState( { }) 在react中使用尖头函数注意 1，安装依赖 npm install --save-dev babel-preset-es2015 npm install--save-dev babel-preset-r

2017-07-07 15:52:06 173

原创变量的解构赋值

let { foo: a, bar:b } = { foo: "aaa", bar: "bbb" }; 被赋值的是ab变量也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。let foo;({foo} = {foo: 1}); // 成功let obj = { p: [ 'Hello', { y:

2017-07-07 14:14:44 199

原创 react的es6写法

今天想起来把react的es5写法转为es6语法即react.createClass => react.component知识点1 let App = React.CreateClass({}) => class App extends Component{ }知识点2 每个函数之间去掉了逗号知识点3 props propTypes and

2017-07-06 17:56:42 255

转载如何利用AJAX进行文件的上传，并对上传内容进行限制，在项目中总会遇见这样的问题，下面就为大家举个栗子。 HTML代码 <form id="uploadForm" enctype="multipar

如何利用AJAX进行文件的上传，并对上传内容进行限制，在项目中总会遇见这样的问题，下面就为大家举个栗子。 HTML代码form id="uploadForm" enctype="multipart/form-data">//enctype必须要设置为multipart/form-data input id="file" type="file" name="avater" acce

2017-07-04 17:06:11 281

原创 vue-cli架构

安装 npm install vue-cli -g 初始化 npm init webpack my-project//webpack 模版的项目

2017-07-04 17:05:34 191

原创 1231

vue饿了末 home页顶部组件用了slot插槽 slot的用法，，，父组件中slot作为属性，自组件中slot作为插槽点，把父组件中的slot属性的dom插进来

2017-07-04 16:05:34 183

原创 flex布局

flex布局容器flex属性 flex-direction flex项目的排列方向 row column row-reverse column-reverse flex-wrap flex项目是否换行 wrap nowrap wrap-reverse flex-flow :flex-direction f

2017-07-03 10:18:00 210

原创 111

function fun(n,o) { console.log(o)return {fun:function(m){return fun(m,n); } };}var a = fun(0);//生命了但为初始化 a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,?var b = fun(0).f

2017-07-01 14:50:15 158

原创 html5新特性，拖放，drag drop

拖放即是抓取对象以后拖到另外一个位置做法步骤；第一步：设置元素可以被拖放第二部：设置元素被拖放,dataTransfer.setData() 方法设置被拖数据的数据类型和值：function drag(event){event.dataTransfer.setData("Text",event.target.id) }

2017-06-30 18:00:21 225

原创 html5视频video的使用

// Check if the browser understands the video element.canPlayType() 方法浏览器是否能播放指定的音频/视频类型。function understands_video() { return !!document.createElement('video').canPlayType; // boolean} if ( !un

2017-06-30 17:45:57 343

原创 jquery的图片预加载

图片预加载loadding 的时候加载下一次要加载的图片。图片预加载的特点：1. 提前加载所需图片； 2. 更好的用户体验；图片预加载又分为有序加载和无序加载，根据网站或功能模块使用，提高用户体验 data-属性的写法是在html5中新加的一种自定义属性书写方式。JQuery可以通过.data('名称')进

2017-06-30 11:56:41 779

原创 location

获取页面url的地址window.location对象所包含的属性location.href ＝完整的urllocation.hash = 从＃开始的urllocation.host ＝主机名加当前的端口号 127.0.0.1:3001location.hostname = 当前的ulr的主机名location.pathname = 当前url的路

2017-06-30 11:32:08 182

原创与后台交互选择的交互方式

axios全攻略https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/使用fetchhttps://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetchwebpack－zepto的ajax封装

2017-06-29 15:12:39 360

原创基本css，网站开发问题

font: bold 14px/35px "微软雅黑" //font的简写字体大小／杭高字体 line－height：35px/9 ‘’“表示所有ie浏览器” font:字体加粗字体大小/行高字体类型，如果字体加粗没写，默认为normal 内嵌元素受text-align：center限制。vertical-align:middle属性定义行内

2017-06-26 14:21:18 270

翻译前端怎么提高自身

今天看到了一篇稿子，细说前端代码的写法和我们对需求的思考。稿子中有一道题目，细说了我们在开发过程中需要注意思考的点：编写一个javscript函数 fn，该函数有一个参数 n（数字类型），其返回值是一个数组，该数组内是 n 个随机且不重复的整数，且整数取值范围是 [2, 32]。第一点：可用性：不会出现语法错误；第二点：代码的健壮：最基本的兼容性处理、边界处理，

2017-06-12 10:15:08 398

翻译 bem(block，element，modifier）块，元素，修饰符，前端命名方法CSS 命名方案

B这里的b －－－－－ blockE这里的e－－－－－－element。即“username” 用两个下划线表示承接关系__M这里的m－－－－－－modifier，用两个连接符表示承接关系命名约定的模式：.block｛｝代表抽象的组件高级别达到.block__element { } 组件的后代，用于形成一个完整.block的整体。.block--modifier

2017-05-02 10:32:06 2016

原创 h5网页检测手机是否安装了app。

公司业务拓展到微信，qq和支付宝；在这些平台打开的h5页面需要唤起app实现一些功能；原理：h5页面内创建一个iframe 通过url scheme 实现h5与安卓和苹果之间的跳转。实现：找客户端的同事获取url scheme，格式：xx://'跳转页面'/'携带参数'；通过这个链接我们可以跳转到应用的某个页面，并携带一定的参数；代码实现： 1.通过

2017-04-24 10:41:43 12559

原创 webpack打包时出现的错误

问题是这个样子：因为git部署代码改变了远程仓库；所以重新克隆了一下git项目，其实不用这么麻烦！‘克隆完毕之后npm intall所有依赖和插件！webpack项目的时候出现了问题。报错，webpack has been Installed；解决：1，这是因为项目所需要的版本跟安装的版本不同，npm install 默认安装最新版本；2，卸载nam uninstall n

2017-03-15 15:03:13 3758

原创 font-face使用阿里图标库

一直在想怎么用font－face，今天实验了一把，成功了，@font-face { font-family: 'iconfont'; /* project id 222651 */ src: url('//at.alicdn.com/t/font_i9qwlqmnw3t8olxr.eot'); src: url('//at.alicdn.com/t/font_i9qwlqmn

2017-01-17 14:57:24 1271

原创在做react项目开发中创建组件的三种方式

第一种：函数式定义的无状态组件用途：只是为了创建纯展示组建，这类组件只负责根据传入的props属性来展示组建，不涉及对组件state状态的操作，无状态组件只有一个render方法输出，例如：functionHelloComponent(props,/* context */){ returndiv>Hello{props.name}/div>}React

2017-01-05 14:42:36 2446

原创 react项目中通过 iscroll 实现上拉加载，下拉刷新

基于 iscroll 实现的 react 组件第一步：引入插件npm install reactjs-iscroll --save 可在项目下的package.json文件内dependencies下看到安装好的插件版本；第二步：在项目中使用import iScroll from 'iscroll/build/iscroll-probe'; 表示引入scroll库，可支

2017-01-05 13:55:19 8309

原创 2016的终结，2017的开始

新毕业一年，跨行自学前端，进度很快，html，css，js，jq，以及现在的react开发，一直都觉得自己很幸运，碰到生命中每一位贵人，这是我第一次学博客，也会自己鼓励坚持2017的每一天都写专属于自己的博客，能够看到自己的成长，在这里，我想说，永远不要放弃，只要你的眼神里充满着对知识，对技术的渴望，总会属于自己的一条路的，加油

2017-01-03 15:35:09 375

running_shuai的博客