<![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> http://www.contactu.cn/ zh-cn PBlog2 v2.4 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> http://www.contactu.cn/images/logos.gif http://www.contactu.cn/ 湖南长沙前端开发与培训-通途工作室 http://www.contactu.cn/article.asp?id=263 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> dudu@258754.cn(admin) Thu,28 Feb 2019 09:45:56 +0800 http://www.contactu.cn/default.asp?id=263
这就是个最简演示,其它常用技术就不解释了。

演示地址 :
http://www.contactu.cn/2016/svg/qg.html]]>
http://www.contactu.cn/article.asp?id=262 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> dudu@258754.cn(admin) Mon,18 Feb 2019 16:19:16 +0800 http://www.contactu.cn/default.asp?id=262 那种工厂中很多个管道、流水线、控制阀门的控制体系,如果用软件来控制的话,会要操作很多的动画。用普通的HTML+IMAGE方式,很难表现一些复杂的控制。早几年的FLASH,是这方面的强手,但现在适用的方案,应该只好用SVG了。

我一直想了解一下SVG的组织结构及动画控制,这次终于实践了一个小demo。

这个演示用到了SVG的symbol/pattern。动画控制用的tweenmax,状态控制用了vue.js。
绘制方面,用了一个ps插件,我用自己熟悉的ps直接导出了svg矢量图形。
 
演示地址 :
http://www.contactu.cn/2016/svg/test_svg_2019.html
]]>
http://www.contactu.cn/article.asp?id=261 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> dudu@258754.cn(admin) Sat,27 Oct 2018 11:43:20 +0800 http://www.contactu.cn/default.asp?id=261  使用了https://www.npmjs.com/package/gulp-px2rem-plugin

使用这个gulp插件,可以在Scss中直接使用px单位,然后通过gulp的转换,自动转为rem单位,与我常用的ydui.flexible.js配合,最终完成px2rem的转换。
gulp语法如下:
.pipe(sass().on('error', sass.logError))
            .pipe(px2rem({'width_design':640,'pieces':6.4,'ignore_px':[1,2]}))
            .pipe(gulp.dest(dir+"/css"));

注意width_design与pieces都要与ydui.flexible.js中的设定配合。

]]>
http://www.contactu.cn/article.asp?id=260 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> dudu@258754.cn(admin) Sat,20 Oct 2018 17:38:07 +0800 http://www.contactu.cn/default.asp?id=260 我的试验: 258754.cn/2018/tyfp/test.html

模仿对象是:http://www.101.com

]]>
http://www.contactu.cn/article.asp?id=259 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> dudu@258754.cn(admin) Sun,23 Sep 2018 20:58:01 +0800 http://www.contactu.cn/default.asp?id=259 早就有朋友跟我建议:“你应该开始写小程序,很简单,跟VUE的路子很象”。九月份,有一段时间手头没有新单子,于是开始学习。机会不错,从我一个业务关系那里买到了一个慕课的视频,《纯正商业级应用-微信小程序开发实战》。课程不错,我想听的都讲了。我不想听的,基本都没有。
 
花二天时间听完课程,自己写代码实战了一下---果然跟VUE类似。第一感觉就是文件体系拆得太散了。虽然大家都是HTML/CSS/JS/JOSN这几样,但是小程序4个文件分开写,几个页面一起弄的话,感觉我的sublime的标签都不够用了。VUE的单页面组件多么的紧凑。
 
另外,组件的写法跟页面文件,两者有点不一样。比如小程序组件调用的开关还要在josn中定义、小程序的响应函数居然要放在methods:{}中,而页面又不需要。感觉小程序好粗糙。
 
第三方库,我找了有赞出品的vant-weapp,跟vant for vue一脉相承。
js工具库,小程序
 
SCSS写习惯了。可是小程序没有提供支持。在网上找到个由gulp驱动的workflow,还真好用。
 
编辑器这块儿,在Sublime中直接找了个小程序语法插件,配合原来使用的emmet,还挺好用。
 
总体来说,确实难度不大。熟悉VUE体系的不妨多学这一项技能。
]]>
http://www.contactu.cn/article.asp?id=255 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> dudu@258754.cn(admin) Thu,01 Feb 2018 09:00:34 +0800 http://www.contactu.cn/default.asp?id=255 在进行post跨域数据请求时(所有请求均header中带token),碰到一个奇怪的现象,postman测试可以通过,但是用页面进行调用时,总是报错。前后端忙活了大半天时间,最后找出问题。以下是程序员 “灰色头像”写的总结:

总结下今天出现的问题,主要是在跨域CORS的时候出现这个问题
 
首先需要知道一些容易忽略的知识点,浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
具体看
 
http://www.ruanyifeng.com/blog/2016/04/cors.html
 
还有一点需要注意,头部字段只支持
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
对于自定义的,比如我们头部传的token这个自定义头部会出现下面2种情况
 
1、axios对于跨域CORS正常会发送2次请求,第一次“预检”,我们这边有token自定义头部字段,虽然我们服务器设置了<add name="Access-Control-Allow-Headers" value="*" />但这个*虽然指所有,但只限制于上面所说的支持的,自定义的不会支持,所以就导致预检就失败,不会发送第二次请求
 
2、普通的ajax却可以支持,应该是没有做预检处理(这个还没详细了解)
 
所以主要还是服务器设置<add name="Access-Control-Allow-Headers" value="*" />要改为<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" />,增加自定义的token,不能使用*这样的配置。这样对于做预检的,有什么自定义头部字段,这里就要额外增加。
 

 

]]>
http://www.contactu.cn/article.asp?id=240 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> dudu@258754.cn(admin) Mon,15 May 2017 17:36:42 +0800 http://www.contactu.cn/default.asp?id=240 我自己的gulpfile.js代码: 

这样运行:

gulp --u DIRNAME

--u是自定义参数,这样可以快速建立DIRNAME目录的虚拟站点,并启动所有监听服务。当你有很多不同的目录时,这样做很方便。

Javascript代码
  1. var gulp = require('gulp'),  
  2.     // concat = require('gulp-concat'),  
  3.     // uglify = require('gulp-uglify'),  
  4.     // mock = require('n-mock'),  
  5.     browserSync = require('browser-sync').create(),  
  6.     // fileinclude = require('gulp-file-include'),  
  7.     // minifyCss = require('gulp-minify-css'),  
  8.     sass = require('gulp-sass')  
  9.     autoprefixer = require('gulp-autoprefixer')  
  10.     // directoryMap = require("gulp-directory-map")  
  11. ;  
  12.   
  13.   
  14. gulp.task('default'function() {  
  15.     var dir = gulp.env.u;  
  16.     console.log( "----------------当前处理目录为:/"+ dir +"----------------" );  
  17.     browserSync.init({  
  18.         server: {  
  19.             baseDir: dir,  
  20.             index: "index.html"  
  21.         }  
  22.     });  
  23.   
  24.     // 自动刷新  
  25.     gulp.watch(dir+'/*.html'function() {browserSync.reload(); });  
  26.     gulp.watch(dir+'/scss/*.scss'function () {  
  27.         return gulp.src(dir+'/scss/*.scss')  
  28.             .pipe(autoprefixer({  
  29.                     browsers: [  
  30.                     "last 10 versions",  
  31.                     "last 12 Chrome versions",  
  32.                     "Firefox > 20",  
  33.                     "ie 6-8"],  
  34.                     cascade: true  
  35.                 }))  
  36.             .pipe(sass().on('error', sass.logError))  
  37.             .pipe(gulp.dest(dir+"/css"));  
  38.   
  39.     });  
  40.     gulp.watch(dir+'/css/*.css'function() {browserSync.reload(); });  
  41.     gulp.watch(dir+'/js/common.js'function() {browserSync.reload(); });  
  42.   
  43. });  

我常用的sublime插件:

ColorPicker--色彩选择器

cssrem-master -------rem

Emmet ------------都知道

SFTP -------------ftp工具

Terminal ----------在sublime内打开终端窗口,很方便!

 
]]>
http://www.contactu.cn/article.asp?id=228 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> dudu@258754.cn(admin) Thu,29 Dec 2016 18:12:48 +0800 http://www.contactu.cn/default.asp?id=228 不知道咋的备案就失效了。好容易恢复了。备案号不在的这段半个月,学到了不少的新知识:

  • * 完整的学习了git命令行,用命令行管理自己的仓库https://github.com/csdudu,并上传了几个小片段。建立gh-pages分支。以后需要演示的片段,全部都使用这个方法进行演示了。
  • * 完整的了解了npm包管理的机制,编辑package.json,更多的npm语法。并且通过实战,了解到npm的一些坑:比如node版本的影响、cnpm的优缺点。
  • * 基本搞懂了Webpack的运行机制,编辑webpack.config.js,常用loader。日常使用webpack-dev-server --inline --content-base .方式进行热更新。
  • * 基于Webpack搞清了es6的import/require语法,投入使用。用loader方式打包vue工程。
  • * 基本搞懂vue-router路由系统,开始制作一个SPA的demo,以用于以后PC端的仿FLASH类网站。
  • * 恶补了许多vue组件的知识。
  • * vue自定义指令的写法。
  • * 了解了前端AJAX模拟的一些知识,比如mock server的工具、搭建方式。顺便学习了LeanCloud这种把数据库抽象为API的工具的基本用法。
  •  
    接下来,要向VUE组件化开发、ES6语法,甚至React native的方向进军。微信小程序有时间也想试试。
    ]]>
    http://www.contactu.cn/article.asp?id=214 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> dudu@258754.cn(admin) Sat,16 Jul 2016 08:29:34 +0800 http://www.contactu.cn/default.asp?id=214  具体使用场景是:

    1、移动端希望对body使用左右切换手势,
    2、内部的某个子div,也要使用左右切换,
    3、当对子切换时,希望body 对象不响应。
     
    解决方法:
    根据 event.target 不同写不同逻辑,根据这个前提,对父对象的响应代码如下:
     
    Javascript代码
    1. var $t = $(evt.target);     //当前点击的target  
    2. if ($t.parents(".cols").length == 0) {       //上溯查询所有“.cols" 父对象,如果存在 ,则length>0  
    3.     .....  
    4. }  
     
    在github中发issue,是一个解决疑难的途径,虽然官方指南不推荐这么做。但是这种小众插件没提供别的提问途径,只能这么干了。
     
    ]]>
    http://www.contactu.cn/article.asp?id=213 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 前端研究]]> dudu@258754.cn(admin) Wed,13 Jul 2016 09:06:14 +0800 http://www.contactu.cn/default.asp?id=213 昨晚给一个朋友的项目做的前端选型分析,主要就是在项目启动时,给技术老大们选择一下,前端要选用哪些技术,这样方便招聘人手,搭建前端团队(其实在长沙一般也就是1-2个人)。

    点击查看脑图

     

    ...废话,写的当然都是我自己熟悉的技术。我只会这么多啦,大牛们请无视。

    ]]>