xtaydwxf1988的专栏

原创 node 调试与更新

node 调试与热更新

原创 微信小程序js报错分析

微信小程序 app-service

原创 react 生命调期详解

生命周期  1、componentWillMount()2、componentDidmount()3、ShouldComponetUpdate()4、componentWillReceiveProps( nextProps)5、componentWillUpdate()6、componetDidUpdate(prevProps, prevState)7、compoentWillUnmount() ...

原创 create-react-app antd mobx 以及按需加载

1 antd安装与配置2 antd按需加载3 mobx配置 1安装antdnpm install antd --save在项目中2 antd按需加载安装第三方依赖npm install babel-plugin-import --save在项目根目不找到package.json 找到babel添加插件(plugins)"babel": {  "presets": [    "react-app" ...

原创 javascript 六种继承方式

1原型链2 借用构造函数3组合继承4原型式继承5寄生式继承6寄生组合式继承 注：prototype1 每个函数都有一个prototype的对象属性，对象内有一个constructor属性，默认指向函数本身2每个对象都有一个__proto__的属性，属相指向其父类型的prototype 1原型链 使用原型是让一个引用类型继承另一个引用类型的属性和方法构造函数，原型，实例之间的关系：每个构造函数都有一...

转载 Vue书写风格

1组件名为多个单词（除根组件外） 好处：这样做可以避免跟现有以及未来HTML元素相冲突，所有的HTML元素名称都是  单个单词例：Vue.component(‘the-header’,{//...})export default{name:’TheHeader’} 2 组件的Data必须是一个函数好处：当在组件使用data属性的时候(除new Vue外的任何地方)，它的值必须是返回一    ...

原创 前端项目开发流程

当前分为以下四个阶段第一阶段库/框架选型（暂定react）第二阶段简单构建优化 NPM管理包node+webpack打包第三阶段JS、CSS模块化开发第四阶段组件化开发 开发过程当中注意：前端安全XSS CSRF攻击等 后期文章中将讲述如何

原创 babel-polyfill 配置支持IE版本

方法一import 'babel-polyfill';//这样在入口文件中引入将增大文件大小方法二这样引入将减少文件大小在.babelrc文件添加{ "presets": [ "es2015", "react" ],  "plugins": [    ["transform-runtime", {      "helpers": false, // defaults

原创 React页面登录之后返回之前浏览页面

路由配置(/:router)' component={Login}/>//匹配 /Login,/Login/detail/100在登录页面代码const params=this.props.paramsconst fouter=params.routerif(router){hasHistory.push(router)}else{this.goUserPage

原创 React优化方式

1 合理分组件 render影禹的最小单位2 设置合的key--不要使用数组下标作为key，一个页面中key最好不要重复3 单次渲染的节点数尽可能少4 合理使用shouldComponentUpdate 。因为shouldComponentUpdate 是保证性能的紧急出口5 render执行次数尽可能少6 减少DOM数

原创 React 基础优化方式

PureRenderMixin优化React最基础的优化方式是使用PrueRenderMixin安装npm install react-addons-pure-render-minin --save 然后在组件中引用 import React from ‘react’;import PureRenderMixin from ‘react-addons-pure-re

原创 深入理解vuex

创建一个基本的vuex流程1、在项目中新建一个文件夹store 用来存入vuex创建的所有文件夹文件夹中包函以下几块文件名称描述store.js定义初始变量，以及导出方法如exprot default new Vuex.Store({state,actions,getters,muations})a

原创 JS获取DOM的高度包括Padding margin border

var dom=document.getElementById('center');var marginTop=getStyle(dom,'marginTop');alert(parseInt(marginTop));function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[a

原创 css3 pointer-events:none 允许点击穿透

.container {    position: relative;    width: 200px;    height: 50px;    margin: 20px 0;}.cover_through {    pointer-events: none;//使用当前属性点击div将触发链接}.cover {    position: absolut

原创 vue directives bind 参数中的el binding

当前只针对vue2directives: {            loadMore: {                bind: (el, binding) => {                        binding.value()//这里是指调用在method里的loadMore方法                }            }     

转载 H5项目常见问题及注意事项

H5项目常见问题及注意事项Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构// width 设置viewport宽度，为一个正整数，或字符串‘device-width’// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置// initial-scale 默认缩放比例，为一

原创 vue2.0编译es6报错

vue@2.0 + vue-loader@10.0.2通过 webpack 打包后的代码里面的ES6语法没有转更改方法找到webpack.base.conf.js新增一个{  test: /\.js$/, loader: "babel-loader", query: {presets: ['es2015']}, exclude: /node_module

原创 webpack 路由文件懒加载

export default [{    path: '/',    component: App,    children: [{        path: '',        component: r => require.ensure([], () => r(require('../page/home')), 'home')    }]}]//webpa

原创 webApp常用样式

-webkit-overflow-scrolling : touch;  DIV滚动仿浏览回弹设置滚动条宽度::-webkit-scrollbar {    width: 5px;    height: 5px;}清除最小字体为12px 选中高亮透明body {    -webkit-text-size-adjust: none;    -webkit-tap-

原创 JavaScript给url网址进行encode编码，使用encodeURIComponent即可

JavaScript给url网址进行encode编码，使用encodeURIComponent即可var myUrl = 'http://www.baidu.com';var myOtherUrl =  "http://www.aaa.com?url="+encodeURIComponent(myUrl);

原创 webPack 使用方便快捷

1 npm install webpack -g  全局安装2 在项目是建立webpack.config.jsvar path=require('path');module.exports={ entry:{ homePage: './staticweb/js/home-page.js', productPage: './staticweb

原创 java 启动命令与git常用命令

gradle jettyrun 启动客户端服务gradle taskJar 打包jdkgradle jettyrunwar 启动服务端gradle idea 生成idea打开文件git clone git status 查看当前状态git add src  提交到本地库 git commit -m 写点提交信息git pull #

转载 探索高效jQuery的奥秘

讨论jQuery和javascript性能的文章并不罕见。然而，本文我计划总结一些速度方面的技巧和我本人的一些建议，来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。首先，在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。首先，如果你是一个javascript新手，

原创 针对网页图标样式写法

1定义一个名为.icon{display:in-block; background:url('../image/sprite.png')}

原创 css书写规范 优化 模块化

css命名规范使用骆峰式写法

转载 css博客地址

http://www.cssforest.org/blog/index.php?s=archive_lists

转载 网页中常用的web安全字体

在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体，但多数情况下，考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写，这里整理了19个Web安全字体，让你无需任何顾虑的情况下畅快使用。1,  Arial微软公司的网页核心字体之一，最常用的sans serif字体，当

转载 CSS控制print打印样式

一、添加打印样式 1. 为屏幕显示和打印分别准备一个css文件，如下所示：  用于屏幕显示的css：   用于打印的css：2. import方式：        @import url("css/printstylesheet.css") print;  3. 直接把屏幕显示样式和打印样式写在一个css文件中：  @media print {}{ 

原创 css after content 特殊字体

☏=260f ☎=260e☺=263a ☻=263b☼=263c ☽=263d ☾=263e ☿=263f☁=2601 ☂=2602 ☄=2604 ☇=2607☈=2608 ☑=2611 ♕=2655 ☀=2600☳=2633 ☴=2634 ☵=2635 ☶=2636☷=2637 ☲=2632 ☱=2631 ☸=2638☹=2639 ☰=2630 ♃

转载 html标签SEO规范

1、2、3、4、5、6、页面标题7、8、9、10、11、12、13、页面内容标题14、页面相关性标题15、标题系列16、标题系列17、标题系列18、标题系列19、20、链接词21、重点关键词强调22、关键词强调关键词强调关键词强调23、25、26、版权部分关键词强调27、28、

转载 《Don't make me think 》关于Web可用性的三大定律

第一条：别让我思考（Don't make me think ）               多年以来，我一直在跟人们说，这是我的可用性第一定律。看过的网页越多，我就越坚信这一点。这是最最重要的原则――它是在Web设计中，判别什么有用什么没用的终极法则。如果你只能记住一条可用性原则，那么就记住这一条 。它意味着，设计者应该尽量做到，当我看一个页面时，它应该是不言而喻，一目了然，自我解释的。（－－

原创 语义化标签应注意的一些问题

一个语义良好的页面，H标签应该是完整有序的没有断层的h1、h2、h3、h4、h5、h6

转载 网站地图制作方法

1、在线制作小型的网站地图：　　如果你的网站的网页数量少于500个，那么建议你使用在线的网站地图制作工具：http://www.seo.net.cn/sitemap/，打开这个网页，输入目标网址，然后点击开始，几分钟后，这个在线工具就会给你制作出XML、html、txt三种不同格式的网站地图，下载即可。　　2、使用工具制作中型网站地图：　　用什么工具制作中型网站地图呢?这里

转载 掌握11项技能，你就是优秀的前端开发工程师

你也许会觉得前端开发是一个很简单的工作，对呀，你就是刚刚从网页设计转型过来的。但当你深入其中时，一定会发现好像前端开发不是那么简单，光网站性能优化、响应式、框架就让你焦头烂额，       确实，做前端开发就是先易后难，想成为一个优秀的前端开发，没有那么简单。       不过，天下事难则不会，会则不难，你只需要掌握11项技能就可以成为前端“大拿”，下面，就告诉你这11项技能是什么

转载 web标准、可用性、可访问性 可维护性

一、web标准简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScri

原创 样式书写顺序，html属性书写顺序

PositioningBox modelTypographicVisual 1

转载 Web前端开发规范文档

规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小

原创 常用的PHP函数