wslicknet

wslicknet 查看完整档案

深圳编辑中南大学  |  计算机科学与技术 编辑美的电商  |  前端工程师 编辑 wslicknet.github.io/ 编辑
编辑

web前端工程师
个人博客地址:https://wslicknet.github.io/

个人动态

wslicknet 关注了用户 · 2017-03-01

phodal @phodal

待我代码编成,娶你为妻可好 @花仲马

关注 1788

wslicknet 关注了问题 · 2017-02-15

解决在javascript中,不同的设计模式到底应对什么场景?

最近再看javascript高级设计模式,里面的模式很多,少说十几种吧。
但是目前感觉下来,
单例+工厂可以写出所有的需求,其他设计模式出场的机会似乎很少。

书里面举得一些运用设计模式的场景都很抽象,看了例子之后就像之前说的,用单例+工厂也可以解决。

很难理解什么场景用什么模式,现在就像填鸭一样把很多模式塞进脑子里,效率很低!

有没有什么文章简要的写出各种设计模式都有什么特点,适合什么场景呀?

关注 6 回答 2

wslicknet 关注了用户 · 2017-02-14

yuanzm @yuanzm

Github,欢迎Follow~
https://github.com/yuanzm

关注 980

wslicknet 发布了文章 · 2017-02-07

javascript性能优化技巧

春节在家,把《高性能的JavaScript》刷了一遍,受益匪浅。本着每看完一本书都要做读书笔记的习惯,将书中的知识点总结一下。

由于不同浏览器使用的JavaScript引擎不同,因此对JavaScript的优化也不尽相同。也因此,有些方法在IE上可能性能相差很大,但在chrome上相差无几,也甚至某些方法在IE上最快,但在chrome上却并不是最优的方案,所以,对性能有极致要求的应用,应考虑你的产品使用者最常用的浏览器。当然,下面提到的优化方法都是通用法则或者对大多数浏览器都友好的方法。

JavaScript加载和执行

JavaScript的下载和执行会阻塞用户界面的绘制和其他资源的下载

优化方法:

1.阻塞式脚本:合并文件(减少http请求),将script标签放在body尾部(减少页面css,html的下载阻塞,减少界面的空白时间(浏览器在解析到script标签之前,不会渲染页面的任何部分))

目前流行的构建工具,如webpack,gulp,都有打包、合并文件的功能。

2.无阻塞式脚本:延迟脚本和动态脚本均不阻塞,即下载过程不阻塞其他进程

延迟脚本:
defer和async属性:都是并行下载,下载过程不阻塞,区别在于执行时机,async是下载完成后立即执行;defer是等页面加载完成后再执行。defer仅当src属性声明时才生效(HTML5的规范)

动态脚本:
动态添加script标签,返回的代码通常会立刻执行,所以,为了确保脚本下载完成且准备就绪后才执行,须侦听load事件。将script添加到head中比添加到body中更保险。

//动态添加脚本,当脚本下载完成且准备就绪后执行回调函数。(这也是推荐的无阻塞的方法)
function loadScript(url,callback){
    var script=document.creatElement('script');
    script.type='text/javascript';
    if(script.readyState){ //IE
        script.onreadystatechange=function(){
            if(script.readyState == 'loaded' || script.readyState == 'complete'){
                script.onreadystatechange=null;
                callback();
            }
        }
    }else{  //非IE
        script.onload=function(){
            callback();
        }
    }

    script.data-original=url;
    document.getElementsByTagName('head')[0].appendChild(script);

}

数据存取

将全局变量存储到局部变量中:因为全局变量总是存在于执行环境作用域链的最末端,所以,访问全局变量是最慢的,访问局部变量是最快的。尤其是对于未优化过的JavaScript引擎。

在JavaScript中,只有2个语句可以在执行时临时改变作用域链:with语句和try-catch的catch子句。with语句会使得局部变量位于作用域第二层,会使性能下降,所以应避免使用。try-catch权衡使用(因为可预测的错误说明代码有问题,应及早修复)。

尽量避免使用with,try-catch,eval等动态作用域语句,因为JavaScript引擎无法通过静态分析的方法进行优化。

闭包会影响性能(作用域链加深)和可能导致内存泄漏(IE中)

总结:

  1. 使用对象字面量代替对象

  2. 使用局部变量存储全局变量和对象成员

  3. 尽量不用with,eval语句,try-catch的catch子句要谨慎使用

  4. 嵌套越深,性能越差,尽量少用。

DOM编程

DOM和JavaScript是2个独立的功能,只通过API连接,用JavaScript操作DOM天生就慢,所以应尽量减少用JavaScript操作DOM。

原则:

1.减少访问DOM的次数,把运算尽量留在ECMAScript这一端处理。
2.innerHTML在绝大多数浏览器中比原生DOM方法要快(最新版的chrome除外),推荐使用。
3.用element.cloneNode()代替document.createElement(),稍快一些。
4.缓存HTML集合的length.

//这会是一个死循环,因为取HTML集合的length会重复执行查询的过程。
    var addDivs=document.getElementsByTagName('div');
    for(var i=0,len=addDivs.length;i<len;i++){
        document.body.appendChild(document.createElement('div'));
    }

5.使用children代替childNodes,因为childNodes会包含文本节点(空格)和注释节点,还需要自己额外过滤这些节点,children已经帮我们过滤掉这些节点了,而且使用的过滤方法效率很高。
6.原生选择器API:querySelectorAll()和querySelector() ,IE8及以上支持
querySelectorAll()返回的是个nodelist(也是类数组),不是HTML集合(与getElenmentsByTagName等不同)。
7.减少重绘和重排:
在修改样式的过程中,最好避免使用下面的属性,因为它们会刷新渲染队列,尽量少查询下列属性,可以用局部变量缓存结果。

offsetTop,offsetLeft,offsetWidth,offsetHeight,
scrollTop,scrollLeft,scrollWidth,scrollHeight
clientTop,clientLeft,clientWidth,clientHeight
getComputedStyle()  (currentStyle in IE)

8.合并多次对DOM和样式的修改:

el.style.cssText+=';border-left:2px;';
JavaScript改变class

9.批量修改DOM时,使用document fragment:文档片段是一个轻量级的document对象,它本身就是为了更新和移动节点设计的。

var fragement=document.createDocumentFragment();
var li=document.createElement('li');
fragement.appendChild(li);
document.body.appendChild(fragement);

10.动画中使用绝对定位,使用拖放代理。
11.使用事件委托来减少事件处理器的数量。

ps:个人觉得,原生方法和库封装的方法并不冲突,应根据实际情况和个人的技能掌握情况选择最合适的方法。

算法和流程控制

  1. for...in的循环性能最差(因为它需要搜索实例和原型上的所有属性),除非,你需要遍历一个属性数量未知的对象,否则不要使用它。
    更不要用它遍历数组成员。其余的循环性能都差不多。

  2. 倒序循环,把减法操作放到控制条件中,例如:k--,这样只是比较“它是true吗?”速度更快。

  3. forEach()比数组循环慢,如果对性能有极致要求,还是用数组循环好。

  4. 当判断值多于2个时,使用switch,否则用if-else (数量少时,性能差别不大,可根据个人喜好使用)。若判断值很多,且没有什么复杂的操作,可以用数组代替switch。
    在JavaScript中,switch使用全等操作符,不会发生类型转换的损耗。

  5. 把最可能出现的条件放在首位。

  6. 调用栈溢出错误基本都是由递归导致的:不正确的终止条件;包含了太多递归,超过了浏览器的调用栈限制。把递归算法改用迭代算法实现是避免调用栈溢出错误的解决方法之一。

  7. 缓存:避免重复性工作,手动实现缓存(Vue源码中就有很多缓存)

function memfactorial(n){
    if(!memfactorial.cache){
        memfactorial.cache={
            '0':1,
            '1':1
        }
    }

    if(!memfactorial.cache.hasOwnProperty(n)){
        memfactorial.cache[n]=n* memfactorial(n-1);
    }

    return memfactorial.cache[n];
  }

字符串和正则表达式

字符串拼接推荐用+ +=,推荐写法:str=str+'one'+"two";(将str写在左侧)

书上说:在大多数浏览器中,Array.prototype.join()比其他字符串连接方法更慢,但在IE7及早期的浏览器中,在合并大量字符串时是最高效的途径。

每个浏览器都有它自己的正则表达式引擎,它们有着各自的优势。

提高正则表达式效率的方法

  1. 关注如何让匹配更快失败

  2. 正则表达式以简单,必需的字元开始:例如:起始标记是^,特定字符串,[a-z]或者d等,避免以分组或选择字元开头,避免/one|two/顶层分支。

  3. 减少分支数量,缩小分支范围:例如:将cat|bat 替换为:[cb]at ;将red|read 替换为:rea?d 将red|raw 替换为:r(?:ed|aw) 将(.|r|n)替换为:[sS]。

  4. 当分支必不可少时,将常用分支放到前面。

  5. 使用非捕获组

  6. 合理使用捕获:如果需要引用匹配的一部分,应用捕获,然后引用那部分

  7. 暴露必须的字元:用/^(ab|cd)/代替/(^ab|^cd)/

  8. 使用合适的量词:贪婪和惰性量词的匹配过程不一样,视情况选择使用。

  9. 将正则表达式赋值给变量(以避免对正则重新编译)并重用它们。

  10. 将复杂的正则拆分为简单的片段:如果太复杂,可以先用条件判断分割

//去除字符串首尾空格的方法,推荐写法
if(!String.prototype.trim){    //防止覆盖原生方法
        String.prototype.trim=function(){
            return this.replace(/^\s+/,'').replace(/\s+$/,'');
        }
   }

尽管正则很强大,但也不是任何时候都要用正则。对于字面量字符串的操作,字符串原生的方法就很快,例如:indexOf,slice,substring等。

其他

  1. 建议定时器最小延迟时间是25ms.小于10ms时,各浏览器表现不一致。

  2. 多个定时器时,用setInterval()代替多个setTimeout()

  3. 使用动态脚本注入(json-p),要小心第三方域代码的安全性。不要把敏感信息编码在json-p中。即便是带有随机URL或做了cookie判断。

  4. 图片信标:只是用来发送简单数据

      //只是创建一个Image对象,并不把img插入DOM中。
    (new Image()).data-original=url+params.join('&');
    
  5. 尽可能使用JOSN.parse()解析json字符串,该方法可以捕获json字符串中的词法错误,并允许传入一个函数用来过滤或转换解析结果。

  6. ajax类库的局限:ajax类库为了兼容浏览器,所以不能访问XMLHttpRequests的完整功能。例如不能直接访问readystatechange事件,所以要了解原生的写法。
    所以,要知道何时使用成熟的类库,何时编写自己的底层代码。

  7. 缩短页面的加载时间,页面主要内容加载完成后,再用ajax获取那些次要的文件。(首页优化)

  8. 通过正确设置响应头来缓存JavaScript文件。

  9. 使用位操作,速度快。

    i%2   
    //可以改写成位运算 &1 :
    if(i&1){ 
        //奇数
    }else{ 
        //偶数
    }
    //位掩码:后台常用的按位打标,
    var ops=op_a | op_b | op_c;  
    if(ops & op_a){ 
        //op_a存在
    }

个人感想

性能提升有多方面:客户端性能,网络情况,服务器性能,在具体解决及分析问题时,要从各个方面考虑,JavaScript代码质量,http请求数也只是其中一部分而已,要全面考虑。在进行优化时,要弄清楚性能瓶颈,然后对症优化。

新看到一篇很棒的文章:
前端性能优化备忘录:https://www.w3ctech.com/topic...

ps:如有不对,欢迎指正。

查看原文

赞 10 收藏 23 评论 5

wslicknet 发布了文章 · 2017-01-13

javascript编程小技巧

其实主要是性能小技巧。

循环优化

循环体是执行最多的,所以要确保其被最大限度的优化.

//提前计算好终止条件,存到局部变量中
for(var i=0, j = document.getElementsByTagName('a').length; i<l; i++){
    // maybe faster
}

//推荐 while循环的效率要优于for(;;)
var i=document.getElementsByTagName('a').length;
while(i--){
   
}

// 据说是最快的  后测试循环
do{
   // maybe fastest
}while(i--)

避免 for-in 循环

for(in)的效率极差,因为它需要查询散列键,只要可以,就应该尽量少用

//要遍历一个集合内的元素,用for,while,do..while代替
//这是vue源码中的一段,作者用for(;;)循环代替了for...in
var keys = Object.keys(obj);
  for (var i = 0, l = keys.length; i < l; i++) {
    this.convert(keys[i], obj[keys[i]]);
  }

多个类型一起声明


var option='option';
var event='event';
var method='method';

//可替换为 
var option='option',
    event='event',
    method='method';
    

类型转换

+'010' === 10; //+可以把字符串变成整数
Number('010') === 10;
parseInt('010', 10) === 10;
10 + '' === '10';//也可以把整数变成字符串

+new Date() // timestamp
+new Date;

使用三目运算符替代条件分支

//将条件从最可能到最不可能进行排列,减少探测次数
 if (a > b) {
    num = a;
} else {
    num = b;
}
//可以替换为:
num = a > b ? a : b;

巧用||和&&布尔运算符

//源码中这种运算符操作很多,尤其是jQuery源码
item && item.$value || item;
var id = typeof asset === 'function' ? asset.options && asset.options.name || asset.id : asset.name || asset.id;

用局部变量代替全局变量

无论是DOM节点,普通变量,还是对象属性,若需重复使用,通通存成局部变量,避免多次取值的调用开销

 //vue源码
var p = Cache.prototype;
p.put = function (key, value) {}

//jquery源码
var deletedIds = [];
var slice = deletedIds.slice;
var concat = deletedIds.concat;
var push = deletedIds.push;
var indexOf = deletedIds.indexOf;

DOM节点链式操作

//链式操作会自动缓存
$('.test').find('.btn').css('backgroundColor','#f30').click();

修改CSS类,而不是样式

尤其是在修改多个样式时,修改css类只会引起一次回流,而修改样式会引起多次回流。

插入迭代器

var name=values[i]; 
i++;

//替换为
var name=values[i++]

使用字面量

var aTest = new Array(); 
var aTest = new Object; 
var reg = new RegExp(); 
var oFruit = new O;
oFruit.color = "red";
oFruit.name = "apple";

//分别替换为
var aTest = []; 
var aTest = {}; 
var reg = /\d/i; //只在有变量时才用new RegExp()
var oFruit = { color: "red", name: "apple" };

使用一次innerHTML赋值代替构建dom元素

var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);
//可以替换为:
var html = [];
for (var i = 0; i < 1000; i++) {
    html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');

尽量使用原生方法

var container = document.createElement('div');
container.appendChild(el.cloneNode(true));

避免with语句

with语句会创建自己的作用域,因此会增加其中执行的代码的作用域链的长度,所以能不用的时候就不要用。

with (a.b.c.d) {
    property1 = 1;
    property2 = 2;
}
//可以替换为:
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;

ps:有些代码性能虽高,但是可能会降低阅读性与可维护性,或者与团队的规范冲突,所以这个需要自己在可读性,团队规范性与代码性能之间权衡。

感言

上面罗列的都是我觉得经常会用到的,看一遍,用心记一下,很easy~~可能以后会不定时更新,看自己get到的情况~~

我也是最近才注意到这些“潜规则”,正巧最近也在看vue的源码,然后就发现:基本上网上能查到的性能优化的方面,或者编程的技巧都能在vue源码中找到佐证。vue源码的代码质量很高,非常值得我等小辈学习。

上面的技巧,若有任何不对,欢迎指正,也欢迎补充~~

过段时间一定要写源码阅读笔记(好怕打脸~~逃)

查看原文

赞 3 收藏 4 评论 0

wslicknet 赞了文章 · 2017-01-04

2016年总结--成长

如果想看技术相关的,下拉到后面的重头戏就是了。

一个活动页面

在15年末的时候,加入到罗辑思维,刚过来就接手了一个微信朋友圈要传播的活动页面,效果页面大概和当时锤子手机的活动页面漂亮的不像实力派类似,不过不同的是,采用了Vuejs来写,单页面,也踩了不少的坑。填坑日记在此html5 上传本地图片处理各种问题

临时上传了一份代码在github上,地址如下:http://leslieyq.github.io/204...

和朋友搭伙创建了一个网站

15年末到16年初,在我大学好基友@叶孤城__的提议下,我们做了一个专门搞Code Review的网站,网站地址。做这个的原因就是觉得Code Review很重要,但是重视的公司很少,大家觉得很多时候,没有bug就行,不会去管这些东西。而我们觉得Code Review 是一种最快捷有效的方式让你清楚地知道“好的代码是怎样写出的”。所以几个趣味相投的人搞出来这个网站,虽然现在已经没有维护和运营了,但当时还是非常有激情和想法的。

从这个网站,脱胎出的一个变种想法,已经被我们当时合伙人之一的李智维做了一个新的网站,叫做趣直播技术直播网站,很有意思,大家感兴趣可以去看看。我还在里面直播了一期前端的技术,虽然听的人很多都是IOS开发,直播地址:1024号的碰巧

再次马尔代夫之行

过春节的时候,没有回老家,和老婆以及好基友去了一趟马尔代夫,这是我第二次去马尔代夫了,上次是15年8月度蜜月的时候,说说我为什么又去一次,很简单就是觉得值的再去一次。

我不太喜欢,那种去到处赶景点的旅游,真的是到此一游的感觉,反而比较喜欢慢节奏的旅行,可能是平时节奏就比较快吧,出去玩就想单纯的放松下,不去什么太多的景点,体验各种人文风情之类的,找个景色好,环境好,能让人感觉到舒适的地方,躺下,每天吃喝玩休息对于我而言就是最好的放松了。

这次旅游,好基友有个文章专门记录了下,也是他的第一次出国之旅。马尔代夫之行

重头戏---这一年的工作情况

这一年,个人感觉还是做了不少事情,主要集中在我们公司的前端领域,同时也给整个技术团队不少的建议,引入了不少新的东西和方式,总结起来比较重要的在下面五个方面。

1.推动了整个WEB前端技术架构体系的演进

目前我司的前端技术架构体系

前端技术架构

首先说明下我们目前基本上所有项目(几个特殊的除外)都是用Nodejs作为一个比较轻薄的中间层来启动。这是一个基本情况,这样有利于理解我接下来说的东西。

各个不同的层级都做了什么,做决定时怎么想的:

  • 访问层,分为2个部分(静态和服务端),静态资源的CDN,因为我们是部署在阿里云上面的,所以直接使用的是阿里云的CDN服务,不得不吐槽下,阿里云的CDN服务不是很稳定,不如他们自家淘宝用的CDN给力啊。服务端用Nginx在外层提供HTTPS服务,反向代理我们自己启动的Nodejs服务,同时使用了阿里提供的多机器的负载均衡服务,来保证了项目的稳定性。

  • 代码层,浏览器端代码,基于Vuejs编写,同时使用我们自己开发的Radon-UI组件库,拼接页面元素,开发效率急速提升。服务端Express核心框架,结合Thenjs解决异步问题,Request代理API服务,Render页面给浏览器。根据页面的业务要求,会有两种情况,一种Render头尾部,然后JS异步获取数据,渲染页面,第二种Render整个首屏页面,部分弹出层或者DOM使用js来管理。几个特殊的系统和页面,Nodejs担任的任务就变多了,比如我们给运营开发的活动页面生成系统,使用mongoDB来存储运营填写的文案和上传到阿里云OSS图片地址之类。还有我们得到APP订阅文章的红包分享项目,里面为了存储用户信息,使用Redis来存储Session信息。

  • 工具层,这里我们有一个Yeoman的generator,可以直接生成新项目的各种配置和基础代码文件,使用webpack来开发和打包构建,添加Md5戳到我们的静态资源上,增量部署到CDN上。同时用到Gulp的原因是有很多老项目还在使用,没有完全的切换过来,但现在也正在一步一步切换。使用Sass和Babel,提供了css的模块化和提高了css的可维护性。Babel让我们有了开发环境下直接使用ES6的可行性。NPM作为项目的包管理,同时我们搭建私有的NPM源,来保证更新包时候的速度和稳定性(还记得 Azer Koçulu 删除了自己的所有 npm 库的事件么)。

  • 部署层,这里主要是运维的场地,对于我们前端而言,主要是静态资源的部署和Nodejs代码的上线。我们使用自己内容搭建的部署系统搞定这个事情,添加上权限管理和回滚机制,静态资源使用增量部署,保存无缝切换,先行部署静态。服务端采用替换部署机制,就是说,在负载均衡上,踢掉一台,部署一台,再上线到负载上,重复到所有机器完成为止。保证服务稳定,不间断。

  • 监控层,这里就有很多包含很多东西了,有第三方的,我们自己开发的,还是开源的。关于服务端报警我们采用了Sentry来监控错误,一旦发生错误,我们就用Sentry发送邮件给相关人。可以立刻知道错误的地方和原因。同时,在性能方面,我们使用第三方的One APM来监控性能指标,这样就能知道哪些页面加载比较慢,需要优化,优化的点在哪里。对于Nodejs有一个问题,就是进程监听方面,这里我们选用了PM2来做进程监听,保存线上的进程一单出错奔溃,就能自动拉起服务,不会因此僵死在那里。加上使用Log4js来输出日志到知道文件,接着使用阿里云的日志服务,监听日志文件,输出到日志服务系统,就可以直接在外网环境中看到日志的详情以及上下文情况,非常有用。最后我们自己搭建了一个Foundation前端系统,专门留给前端自己使用的,主要目的是提供一些自身部门需要的服务,包括收集操作日志和文件上传功能等,后续可能还会提供更多功能。

以上的架构是根据团队的人员配比,技术水平,以及业务需求来搭建的,并不一定要追求所谓的高大上,所谓的完美,很多时候要综合考虑。

这个架构和美团酒旅的前端技术很像,但是有略有不同,比他们少了不少东西。大家看的时候可以互相参考,结合自己当前的业务形态以及团队技术水平来搭建公司的技术架构体系。

2.主导了我们公司自己的组件库

在一个合适的时机,我主导开发了一个基于Vuejs的公司用到的组件库,并且最后开源出来了。起名为 Radon-ui

开发这个库的主旨是: 帮助你快速开发产品的Vue组件库,简洁好用,效率高,让你摆脱各种定制化的烦恼。

这个库具体的一些前因后果可以看我这篇文章,简单一点就是在满足自己公司的需求情况下,开发了一个开源的组件库回馈社区,而且当时vue的组件库确实空白,当然后面就出现了好多类似的各种组件库。

3.开发了定制化的文章编辑器

我司在16年开始,有2条不太相同的业务线,一条是原来的微信公众号,罗辑思维,另外一个是得到App,主打知识分享,提供省时间的高效知识服务。

使用过我们得到App的人,应该是知道的,我们有一个订阅专栏,里面有订阅文章可以观看,这个文章的技术栈都是Web前端的,包括编辑器,展示,以及里面的各种操作。最初使用的是百度编辑器,后面遇到了好多问题,主要是定制化,样式,字体问题。所以后面为了提供更好的阅读体验,我们重新开发了一个属于我们自己的定制化编辑器,融合了特殊字体切割技术,整体大幅提升了阅读时的体验和效果。为此我写了两篇文章:

4.鼓动前端所有人参加了D2技术分享

在一个明媚的午后,我们前端组开着周会,讨论着本周的事情和技术问题,我收到了D2技术论坛开始报名的消息,于是趁热打铁在会上就鼓动了大家去参加这个分享,风风火火一行人7个,直接就报名参加了,然后就是订机票和酒店。

初心-我是不会说我是哪一个的

具体讨论大家可以去知乎上看:参加第11届D2前端技术论坛,你有什么收获

对于这一届的D2,说实话我是失望的,感觉比不上上一届,各种大厂的广告横飞,都是比较浅显的东西,深入的很少。但是还是有引起我对于前端的一些思考,比如说是否应该更多的和Native的人一起考虑App的各种技术融合方案,跨界的Weex技术,以及Uc浏览器里面UC头条的性能优化。

例如美团的人的思考:统一的前端

5.保持了一定频率和质量的技术文章

算算自己的15年,产出了12篇文章,基本上算是1个月一篇,其中有一个系列叫《如何打造一个令人愉悦的前端开发环境》,这个系列还蛮多人看的,也有不少公众号转载了的,在segmentfault还因此获得了第三季度的Top Writer,算是意外收获吧(嘚瑟脸:)!

这养成了我一个习惯,觉得有意思有意义的技术点,就记录下来和大家分享,也算是一种梳理,这种梳理对于我而言,很有作用,每隔一段时间就会思考业内前端的各种发展,以及我自身的优缺点,我需要提高的地方。这种梳理,诞生了16年最后一篇技术文章---割裂的前端工程师,这篇文章也被百度FEX周刊收录进去,还有不少前端相关的公众号收录(前端早读课,前端之巅--infoq的,野狗等),非常欣慰,对我是很大的鼓励和认同。

17年前端

连续的产出一定质量的文章,也带来了另外的一个意外收获,就是有出版社约我出书,2个不同的人,虽然还没有写,主要是不知道写什么,又害怕写的不好,耽误了有志青年。

同时还在给慕课网录制一些教学视频,希望能早日上线(说的不好,不要打我)!!!

结尾

互联网这条路,没有终点,只会不停地奔跑下去。

不忘初心,不惧未来!

查看原文

赞 13 收藏 23 评论 19

wslicknet 发布了文章 · 2016-12-16

npm install 国内镜像

前言

经常听别人抱怨说npm install的速度慢,还经常安装失败,但在我这里,还算幸运,它虽然慢了点,倒也没出过错,所以也一直没有去折腾。直到今天,可能姿势不太对,安装报错了,才换成了国内镜像,感觉国内镜像确实快了好多。

npm install报错提示

图片描述

报错:校验和失败,网上说这种校验和失败,大多数原因是网络不好。

国内镜像

cnpm镜像地址:http://registry.cnpmjs.org
淘宝镜像地址:https://registry.npm.taobao.org

使用国内镜像有2种方法:

一、直接修改镜像地址;
二、用封装好的cnpm命令

直接设置镜像有3种方法:

1.npm config set key value 命令,设置指定的镜像地址

npm config set registry https://registry.npm.taobao.org 
npm info underscore (这个只是为了检验上面的设置命令是否成功,若成功,会返回[指定包]的信息)

2.npm --registry命令

 npm --registry https://registry.npm.taobao.org info underscore (npm info underscore依然是为了检验是否设置成功)

3.修改配置文件~/.npmrc (win系统在C:\Users\用户名.npmrc) 加入下面内容

registry = https://registry.npm.taobao.org

其实1,2,3都是修改npm的配置文件.npmrc .

cnpm

如果觉得直接修改比较麻烦的话,就用cnpm命令吧,先用

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装cnpm包,然后就可以敲cnpm install [name]命令了,很方便~~

如果网络状况不好,或者觉得npm install慢的可以换成国内的镜像试下~~~

查看原文

赞 8 收藏 9 评论 0

wslicknet 发布了文章 · 2016-12-04

vue.js轻松搞定后台管理项目

前言

Vue.js的数据驱动视图,双向绑定的机制,对于需要频繁操作DOM的后台管理项目而言,真的是极大的提高了生产力。自己第一次把Vue用到后台项目上时,感觉非常爽。现在来简单记录下,建议大家也可以去尝试下。

目录结构

vue是一种mvvm结构,所以,对于之前的MVC结构而言,它主要是改变了view层的处理方式。所以,PHP的controller基本不变,view用自定义vue组件写即可,不一定是全部view页面都用vue写,可以只在你想用vue的地方使用vue组件,别的地方依然可以用原来的代码结构。
view文件部分代码:

<div id="app">
    <my-component></my-component>    //注意,这里  'my-component'要写成短横线-连接的形式,因为HTML不识别大小写,驼峰和Pascal case会不识别
 </div>

<!--在view里引入你用Vue写的js代码即可,例如<script data-original=""></script>-->

项目js入口文件:

import 'babel-polyfill'
import Vue from 'vue' // 1.0.24
import MyComponent from '../components/my_component'  //这里是你自己的单文件组件的真正代码,../是相对路径

Vue.config.devtools = true  //开启devtool调试,否则无法使用vue-devtools工具调试

new Vue({
    el: "#app",
    components: {
        'my-component': MyComponent   
    }
})

my_component.vue文件就是一个自己写的单文件组件,也就是大家常见的包含<style> <template> <script>的文件。webpack中需加入对.vue文件的模块处理配置

<style lang="sass">
//这里是当前template的样式,lang="sass"是指定sass预编译器
</style>
<template>
<!--这里放组件的HTML模板,最好是有一个顶级的div包着,防止片段实例-->
<div>
.......
</div>
</template>
<script>
import Vue from 'vue'
import Vue_Resource from 'vue-resource'
import Pagination from '../pagination'
import Modal from '../modal'

Vue.use(Vue_Resource)
export default {
    ready() {
        this.getBillList()
    },
    data() {
        return {}
    }
    components: {  //所有的组件要先注册再使用
        Pagination,
        Notify,
        Modal,
    },
    methods: {

    }

}

</script>

ps:CGI是PHP,前端构建工具是webpack+gulp

感想

  1. Vue可以直接嵌入任何一个页面:我们不用改变原来的工作方式,我们可以用Vue实现任何一个部分,一个页面,甚至是一个模块。
    例如:新项目中的侧边栏,公共头尾都可以是原来的,只在业务部分嵌入用Vue写的组件,可以很容易与现有项目结合。

  2. 数据驱动视图更新,双向数据绑定,我们只需要关心数据的变化,不用管数据变了之后,页面上怎么显示,特别爽。对于后台项目的增删改查操作特别方便。少了DOM操作,bug也会少些。

  3. 后台项目没有很复杂的状态管理,不像单页面应用,所以不需要使用vuex和router这种较复杂的东西,是很好的入门项目。

  4. vue 2.0也已经出来一段时间了,再写项目,可以上2了

温馨提示

Vue不支持IE8,所以,用时要考虑项目对浏览器的要求哦(不过,天猫都即将不支持IE8了,相信大家很快就可以放心大胆的用这些新技术了)~~~

查看原文

赞 3 收藏 11 评论 2

认证与成就

  • 获得 43 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-03-11
个人主页被 423 人浏览