tpf1220-CSDN博客

原创 Validator.isEmpty与lodash/isEmpty

validator主要是用来对字符串进行校验的，包括很多我们常用的校验方式，比如判空或比较等常用校验方式： import validator from 'validator'; validator.isEmpty(username) //判断是否是空字符串 validator.equals(password, passwordConfirm) //比较两个字符串是否...

2018-08-09 11:24:07 2472

原创 React使用高阶组件来重构代码

React高阶组件有时候，我们的组件中可能有很多的组件基本内容一样，只是其中某一部分不同，或者是请求地址不同，或者是组件中的处理方式不同，我们可以使用高阶组件，来进行重构，让代码看起来更加简洁高大上。比如有以下两个组件： //Bar.js const Bar = (props) => ( <div> <h...

2018-07-12 15:13:19 506

原创 React使用context传递数据

使用Context不用依赖父子关系传递数据在React开发中，我们经常使用props来进行父元素到子元素的数据传递，如果兄弟元素之间数据传递，那就需要先将数据传递到父元素然后再传递到另一个元素中，但是如果两个元素之间不是紧密的父子关系数据应该怎么传递呢？这个时候我们就可以用context来实现。 //一个组件 import React, { Component } fro...

2018-07-12 14:41:18 1676

原创使用gh-pages将项目部署到github上

使用gh-pages将项目部署到github上1 安装gh-pages到项目中 sudo nom install gh-pages --save-dev2 设置package.json: //配置homepage "homepage":"https://xxx.github.com/account-app", //配置scripts "scr...

2018-07-11 17:25:37 3013

原创使用netlify部署本地项目到线上

www.netlify.com部署本地项目1 进入www.netlify.com网页 2注册登录，可以用自己的github 3 进来以后，将自己build生成的项目目录拖到虚线框中 4 很快，就会生成一个地址用来访问你的目录，使用浏览器试一下，是不是很神奇？！！ 5 当然了，你也可以自己设置个性的适合自己的url。感谢！...

2018-07-11 16:33:14 1396

原创 vue异步组件

vue开发过程中，我们会做出特别多特别多的组件，包括login,header,footer,main等等。这样使整个网站看起来就十分的庞大，当我们在打开网页的时候，突然一下子把这些所有的组件加载上来，这么多的请求全部同时开始请求，势必会造成网页打开很慢，使客户得到的是非常差劲的体验。因此，vue为我们专门设立了异步组件，通过异步组件，我们可以得到两点好处： 1 用不到的组件不会加载，因此

2018-01-22 19:48:17 2598

原创 Cocos Creator预制资源导入问题

前两天在开发时，需要导入一个写好的预制资源，因为不熟悉，给自己带来了太多麻烦，导致工作耽误了不少时间，然而却是很简单的问题。希望记录下来，谨防再犯。在Cocos Creator中，导入资源，选择文件–>资源导入，就可以弹出导入各种资源的操作窗口：其中，zip文件路径就是我们需要导入的资源的路径。导入目标路径：一般像预制资源这样的东西，我们应该导入到assets根目录下。我遇到的

2018-01-15 11:34:25 5142

免责申明（必读！）：本博客提供的所有教程的翻译原稿均来自于互联网，仅供学习交流之用，切勿进行商业传播。同时，转载时不要移除本申明。如产生任何纠纷，均与本博客所有人、发表该翻译稿之人无任何关系。谢谢合作！前言：这篇文章是我翻译的第一篇关于cocos2d的文章，我在翻译的时候尽量按原文意思来，但难免会加入自己一些理解进去。还有这篇文章所采用的xcode版本是3.2.5，用xcode4.0的朋友可能实现

2017-11-29 12:03:58 5229

原创 Cocos脚本开发

创建和使用组件脚本在Cocos Creator中，脚本也是资源的一部分。在资源管理器中创建选择Javascript来创建一份组件脚本添加脚本在节点的属性检查器中，点击“添加组件”按钮，选择添加用户脚本然后喧杂需要的脚本组件添加就可以了。使用cc.Class声明类型cc.Class是一个很常用的API，用于声明Cocos Creator中的类定义CCClass调用cc.Class()，传入一个原型

2017-11-28 13:04:21 958

原创 cocos创建Scene后一定要双击

今天遇到了一个问题，找了半天原因，问题是这样的：在写摘星星这个游戏时，写到最后需要失败重启的时候，每次都会黑屏，我总以为是cc.director.loadScene()方法写错了，也就只找到了这里，其他都没有任何问题，大概花去了大半个小时吧。后来发现，在编辑器最上方位置，本来是需要显示.fire文件的，但是我的一直显示untitled,而且每次ctrl+s保存编辑器的时候，都

2017-11-27 20:47:13 312

原创 Cocos Creator基本结构

Cocos Creator 的工作流程是以数据驱动和场景为核心的，初次打开一个项目时，默认不会打开任何场景，需要先打开场景资源文件项目分解场景中的内容会按照工作流分别呈现在资源管理器，层级管理器，场景管理器，属性检查器四个核心面板中。资源管理器资源管理器中显示的是项目中的所有资源树状结构。项目资源的根目录名叫assets,对应我们解压之后初始项目中的assets目录，只有这个目录下的资源才会被Coc

2017-11-27 20:39:30 3204

原创 Vue-cli项目获取本地json文件数据

在自己做的vue demo项目中，我想通过在本地添加一些json数据，写到json文件中，并且通过异步请求获取到，然后加载数据。 axios.get('http://localhost:8080/datas/json')然而在这一过程中，我的访问总是404.通过查阅，我发现，在vue-cli基础上构建的项目中，只有static目录才是vue-cli向外暴露的静态数据文件夹，我放在static下

2017-11-14 14:50:27 7551

原创 Vue为<img />绑定动态url

在为img元素设置动态的url时，遇到了问题： <img v-for="item in 10 " :key="item" src="item.png"/>原本意思是，根据item 然后通过字符串拼接，形成一个地址，但是我试了很多方法都不得行： <img :src={{item + '.png'}}/> <imt :src="${

2017-11-10 22:18:44 15965

原创 vue与style绑定

在vue中，我们通常使用动态值来设置style,比如：动态设置background-image.我们需要修改url的值，我试过不少办法 <p style="background:{{color}}"></p> <p style="background"></p> computed:{ background () { return "bac

2017-11-10 20:51:15 3749 1

转载 Vuex的自我理解

单一状态树Vuex使用单一状态树，用一个对象包含了全部的应用级状态。作为一个唯一数据源SSOT而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接的定位任一特定的状态片段，在调试的过程中也能轻易的取得整个当前应用状态的快照。 new Vuex.store({ state:{ } })单一状态树和模块化并不冲突获

2017-11-09 03:38:45 323

原创 Vue Router知识点

使用router-link来导航，通过to属性指定连接 router-link会默认被渲染成一个a标签 <router-link to="/somepath"></router-link> //渲染后 <a href="#/somepath"></a>路由出口router-view 路由匹配到的组件将会渲染在router-view这里 <router-view></r

2017-08-11 14:22:42 317

原创 Vue.js 知识点2

Vue组件要确保在初始化根实例之前注册了组件！！！也可以局部注册，通过使用组件实例选项注册，可以使组件仅在另一个实例/组件作用域中可用在自定义组件中使用受限制元素时，组件会被认为说无效的内容方法说使用特殊的is属性,内联模板字符串不会被受限制因此，有必要的话，请尽量使用字符串模板。在组件中，data必须是一个函数！！组件

2017-08-09 19:05:10 229

原创 Vue.js 知识点

计算属性computed计算属性computed,其实是该属性的getter函数，计算属性只有在它的相关依赖改变的时候才会重新计算，否则就会缓存起来，避免了重复使用的时候函数执行，优化性能。同样，计算属性也有setter函数，我们可以在计算属性重新赋值的时候通过setter函数执行一些语句。与watcher比较：watcher通过对所有的依赖都需要写watcher函数，进行监听，如果某一个

2017-08-09 11:37:33 427

原创 angularjs-$destroy

在Angularjs开发中，经常需要用到刷新页面内容，自己的技术不高，就想到了使用$interval的方法，定时调用API, let timer = $interval(()=> { //Do something... },1000)但是在使用过程中，发现了一个问题，当切换路由后，发现这个$interval下的api仍然在调用，即到了其他页面这个页面的api还在调用，这

2017-07-12 13:08:57 3743

原创 [$injector:unpr] Unknown provider:--angular.module()函数解答

在使用angularjs开发项目过程中，无疑遇到这个问题是最棘手的问题：ionic.bundle.js:26799 Error: [$injector:unpr] Unknown provider: fifoServiceProvider <- fifoService <- FifoControllerhttp://errors.angularjs.org/1.5.3/$injector/unpr

2017-06-19 14:43:47 9192 1

原创 Vue.js之life cycle我的理解

学了一阵子Vue,感觉初步了解了一些，但是还是比价少，如何使用Vue还需要很长时间的学习。今天想看一看Vue的生命周期，我想通过我自己的理解将其记录下来。从网上搜到了各种关于Vue生命周期的博客，都写的大致相同。我的理解看，主要分为四个阶段：create,mount,update,destroy。create在create阶段，通过new Vue()方法获取到Vue实例，在这一阶段我们可以获取到d

2017-06-15 14:42:02 946

原创 CSS控制table中的文字垂直居中

在使用table过程中，我们总是碰到在不同列中可能文字内容量不同，在同一行中，有的列文字可能比较多，导致其他列文字较少的列内容只能呈现在左上角，这时候我们需要将内容都垂直居中。只需要在td上添加一个CSS即可： td{ vertical-align:middle; }添加这个CSS样式之后，我们可以再打开table看看，文字是不是已经垂直居中了呢？

2017-05-16 09:46:49 12559 3

转载弹性布局flex

布局的传统解决方案，都是基于盒状模型。它依靠display,poristion,float来实现。对于有一些布局想实现就特别不方便，如：垂直居中Flex,即flaxible box,弹性布局的意思，用来为盒状模型提供最大的灵活性。任何一个容器都可以执行为Flex布局，只需要改变容器的display属性为flex. 行内元素也可以实现弹性布局，将display属性改为inline-flex即可。

2017-03-29 23:55:45 676

转载 HTML5 面试题总结

1 行内元素，块级元素，空元素？行内： a b span img input select strong 块级： div ul li h1 h12 h3 p…. 空元素：br hr link meta等 HTML5移除了一些元素如：big,center,font,frame,frameset等处理HTML5标签兼容性的问题方式： 1. IE6-IE8支持document.create

2017-03-29 00:07:53 327

原创 Javascript中this的认真理解

Javascript中的this,是每个FE都需要花费一段时间要去认真理解的的东西。this具体指的是什么？ this 在javascript语言中，凡是发生函数调用的地方，都会产生this。像在Java中，如果有this,那么它一定是代表其所在的对象。但是Javascript中函数调用多种多样，不同的调用方法，this也将会指代不同的东西。我们先来分析一下函数的调用方式，据我使用过的有这么四种

2017-03-26 20:33:01 245

原创关于call(),apply(),bind()函数的理解

在Javascript中，我们比较难以理解的东西就是this，它表示在当前作用域中的上下文。有时候我们需要在使用过程中改变this的指向，那么就需要通过这三种方法：call(),apply(),bind()。具体什么意思呢？说的太官方可能还是不懂，大致意思就是，有两个对象，其中一个对象想要使用另一个对象中的方法，这个时候就要用到这个三个方法。举个例子：有两个人张三和李四，张三会说话并说的很好，李四是

2017-03-17 14:35:48 270

转载箭头函数中的this

ES6中为我们提供了箭头函数，使用起来非常方便： const sum = (a,b) => a+b; sum(2,3);//5在箭头函数使用中，this和其他地方的使用是不同的。箭头函数中的this对象是定义所在时的对象，而不是使用时所在的对象。一般情况下，this是可变的，但是在箭头函数中this是固定的。 //普通函数 function foo(){

2017-03-16 16:49:05 1932

原创清除浮动几种方法

清除浮动是CSS中常见的问题，下面就来总结下平时遇到的浮动问题。 <div style="background:yellow;border:1px solid red;width:320px;"> <div style="background:greenyellow;width:100px;height:100px;float:left;"></div> <di

2017-03-02 16:51:27 232

原创 jQuery事件绑定与事件委托

在jQuery类库中，事件绑定与事件委托的用法受到了广泛的关注。不仅如此，这还成了当今前端攻城狮的热门面试题目。十次面试有七八次会问到这个问题，因此，了解掌握事件的绑定和委托，还是比较重要的。冒泡众所周知，HTML的DOM结构自外而内，层层包裹。如：DIV>P>SPAN>A，这样式的，当我们的事件定义到最里面的a标签上时，由于冒泡的特定，如果在外层如div,p,span上也定义了相同事件

2017-03-02 15:15:29 497

原创 jquery扩展：$.extend()和$.fn.extend()

通过jquery的扩展，我们可以灵活的使用jquery,来写一些自定义插件，丰富自己代码的功能。 jquery的扩展可以分为两个部分：类的扩展和对象的扩展。jquery类的扩展：$.extend()使用jQuery.extend()可以对jQuery类添加静态属性和方法，这些添加的属性和方法，都是通过类来进行访问的。例如：$.ajax()，这个就是一个静态的方法。写法1： jQuery

2017-03-01 16:40:11 1112

原创关于IE8浏览器下，split()和replace()函数的不兼容问题

在我们常用的jquery函数中，有两个经常使用的函数，split()和replace函数。我在使用的时候，需要将一个含有开始和结束日期的字符串转化为两个新格式的字符串传给后台。这个字符串格式是这样：YYYY.mm.dd-YYYY.mm.dd 我的做法是这样：var timeArr = time.split('-');var startTime = timeArr[0].replace(/

2016-07-04 10:43:41 7460

原创 window.onresize获取窗口的变化

获取浏览器窗口的变化事件有时候我们的组件要求根据窗口的变化进行相应，但是我貌似没有见过可以监听浏览器窗口变化的事件。通过这几天百度搜索，发现window.onresize函数可以监听到窗口的变化：window.onresize = function(){ console.log('222');};

2016-06-29 11:19:02 1800

原创 chorme浏览器最新版本跨域设置

当我们在测试时，一般都是使用chorme浏览器，如果需要跨域访问的话我们需要对浏览器进行一些设置。我们右击chorme浏览器图标，找到属性，然后看到目标。目标有一串字符串。我们需要在这段字符串的末尾加一句话：--disable-web-security如果这段字符串有双引号，那我们加的这个要放到双引号外面，与原字符串必须保持一个空格的距离。但是，在最新的chorme浏览器中，只加这一句话已经不足

2016-04-11 17:04:33 432

原创使用CORS进行跨域访问

CORS(Cross-Origin Resource Sharing),叫做**跨域资源共享**，他跨过**Javascript同源策略**的限制，允许访问不同的域并且能够访问其资源，这是一种网络浏览器的技术规范。他通过浏览器与服务器的交互来实现跨域访问。使用CORS跨域访问，我们需要后台服务器的配合，不过形式特别简单，而且格式统一，对前端没有任何影响，所以这个一种比较理想的跨域方式。

2016-04-06 16:12:54 628

原创关于javascript跨域的解决方法

关于javascript跨域的解决方法由于在自己这么多年项目开发中对跨域这方面应用的很少，近几次面试都涉及到了这个跨域的问题。因此，这几天对跨域深深的研究了一下，希望以后如果能应用到的话可以作为自己的参考。什么是跨域？在javascript开发中，出于安全性的考虑，javacript禁止对不同域名，端口服务器进行访问，也就是说只能访问同一个域名，而且也是同一个端口号上的数据才能进行自由访问，其他的

2016-03-24 17:09:14 360

原创关于AngularJS的ng-class

当通过点击改变标签元素的样式时，ng-class就派上了用场。我用的时候，是因为需要在一个A元素数组中查找被选中的A元素数组中的元素，不知道你们明白吗，就是在一个大数组里面查找小数组中的元素，如果存在样式就改变。刚开始的时候特别头疼，后来看到了ng-class,就变得简单起来。简单来说ng-class可以根据数据的变化进行双向绑定。比如：当我们这样简单绑定的时候： <div ng-clas

2015-09-06 15:41:24 605

原创关于package.json的去向

在nodejs的初学者看来，在安装完一系列的文件后，仍然根据教程在查找package.json的去向，因为package.json的不存在而略显头疼。其实，package.json是可以通过npm init命令来进行创建的。当我们切到项目目录下时，在命令行运行:npm init如图：接下来，根据描述一直点击enter.到最后出现： cmd中会将你package.json文件

2015-09-06 13:42:15 328

tpf1220的关于前端的技术的比较浅显的健谈