Web 开发技术分析，前端开发学习历程。
277 篇文章昨日和 @喻木大大聊面试的时候聊到了这个话题，其实这个问题挺常见的，不过自己面试到还没问过，问过自适应的等比正方形布局。不过聊到这个问题，下面就详细的说下解决思路和考察要点。希望下次不要被榆木童鞋刷掉了😂。 解决这个问题，先简单描述下具体的需求吧： 给出三列布局，左右两边宽度一定，比如120px啦，然后中间的自适应宽度，即浏览器随着窗口大小的变化而自动变化。 问题大致就是这些，其实思路很多，不过我们从css的发展说起吧。在不同的阶段给出不同的解决方法。 首先我们回到上个世纪，当css还没形成的时候，我们写页面，大家都知道依赖于table布局，所以我们可以用table去模拟这个情况，相信大家很快有思路咯。 <table> <tbody> <tr height="100%"> <td width="200" bgcolor="#1ba1e2"></td> <td> this 详情 »
如果不是和命令行工具打交道，可能我们很少有机会去用到process模块中的一些方法或者属性。不过如果你要做类似于webpack或者gulp等较为复杂的构建工具，由于bash界面就是和用户直接交流的工具，因此友好的输入输出，完整的提示都非常有必要了。 一张表格大概可以看到process有哪些属性 属性名称 用途 platform 判断当前系统平台 argv 当前进程的命令行参数数组 execPath 当前进程的可执行文件的绝对路径 stdout 指向标准输出 stdin 指向标准输入 stderr 指向标准错误 stderr 指向标准错误 我们可以直接在代码中这样使用 console.log(porcess.platform) // darwin 使用argv 会返回命令行的数组，我们可以通过数组来获取用户具体的命令 console.log(process.argv); // [ '/usr/local/bin/node', '/Users/ali-130257n/www/weex-jackzoo/projects/demo.js', '-p', '-v' ] 一般情况下，我们更想获取最后的一些参数，前面两个不需要，我们可以 let 详情 »
可能在我们默认安装node.js的使用，npm安装到的目录大多都在/usr/local/bin 下，我们有的时候全局安装某些模块的时候，会出现类似 EACCES 或者无法创建软链 link permission下面的一些提示 npm ERR! Error: EACCES, open '/Users/chietala/.npm/-/all/.cache.json' npm ERR! { [Error: EACCES, open '/Users/chietala/.npm/-/all/.cache.json'] npm ERR! errno: 3, npm ERR! code: 'EACCES', npm ERR! path: '/Users/chietala/.npm/-/all/ 详情 »
使用Node.js + mongodb已经成为很多公司的技术栈。ThinkJS其实也提供了对mongo的支持，虽然官方文档较少，但是保证了ORM的API的一致性，所以用起来需要查看基本的Model api 基本的模型文件放在common/model下 获取列表 getList(q, page) { return this.select(); } 分页加条件搜索 search(q, page) { if(q) { q = new RegExp(q,'i'); } return this.where({'name':{ $regex: q}}).page(page, 20).countSelect(); } 获取详情 getDetail(id) { return this.where({'_id':id}).select(); } 创建数据 addTag(tag) { return this.add(tag); } 更新数据 详情 »
原文地址 https://bocoup.com/weblog/javascript-developers-watch-your-language?utm_source=javascriptweekly&utm_medium=email @Mike Pennisi It is 9:18 AM on August 21, 2021. You have just finished eating your space-breakfast, and you’re ready to get back to work maintaining the web presence for Omni Consumer Products. After about an hour, you find your latest 详情 »
VUE2.0已经正式发布一段时间了，而且很多公司活着组织都开始迁移到VUE2.0中去了。相对VUE1.x这次升级和变化是巨大的，包括体积更小了，更好的性能表现，支持服务端渲染等。勾三股四放出了Github项目的源码分析导航，如果有兴趣研究的可以透过一张图去理解作者的思路. 点击查看大图 详情 »
最近项目开发时候遇到这样的情况就毫不客气的介入了加载条的开发计划中来。 Github 项目地址 演示效果 定义需求 加载条说简单的需求来说就是: 加载动画 + 文案 + 层级位置 如果理解需求了的话，开发就相对轻松了。自己能够用到的的场景大致有弹框提交，页面加载数据，按钮禁用提交这些。 自己设计的一般结构如下 <div className="react-loading-spinner" > <div className="loading-inner"> {loading} . // loading animation element <div className="alert-text">{this.props.text}</div> </div> </div> 由于JSX的方便性，我们可以定义行内的直接返回loading中的东西。同样也可以作为children存放自定义的元素放进去，比如你喜欢使用svg或者css动画等。 详情 »
其实官方粗暴的回答就是 jsx是JS而不是什么HTML。 当然react的核心团队回答了在quora上回答了这个问题。 直白翻译下： 其实我们对于这个问题也纠结过，我们这里需要有一个转换，把this.props.class 转换成this.props['class'] ,这样你就可以非常方便使用这些class名称。Babel可以完成。但是我们坚持使用className的是下面一些理由： 首先我们尽可能的使用html DOM对象的属性(就像el.className )， 与设置标签属性(attribute)相反。 标签属性始终都是字符串类型，而 对象属性可是任意数据类型，这样的话，算是一种弹性扩展。 其中一个例子就像，classList 属性，相对className而言其实它更适合于数据模型，React现在虽然不支持classList，但是将来计划这么做，采用className更多的是和html属性相仿，更能够说得通。 另外一个理由主要是对于未来的考虑，在未来，React或许会使用对象解构去进行属性的赋值，react-future 展示了一个例子。即使更加现代化的浏览器中，这个也对class并不会生效，也不会像标签中的属性名一样出现。 第三，我们认为 JSX主要的优势是通过匹配闭合标签来让代码更加易于阅读，而不是去替代 html或者xml.虽然非常容易粘贴／复制html代码，但是稍许不同的是（完整闭合的标签）让它稍逊一筹，所以我们有程序去进行html to jsx的转换。 详情 »
现在越来越多的开发者都已经大量接触ES6,而Facebook在React版本 v0.13.0支持了ES6 class写法。（所以这篇文章主要用于之前接触，然后断了一阵子，再接触的话，可以看下一些改变吧） 最早的时候我们使用React.createClass来进行组建的构建. import React from 'react'; const Contacts = React.createClass({ render() { return ( <div></div> ); } }); export default Contacts; 现在我们可以用ES6中的继承extend来写 import React from 'react'; class Contacts extends React.Component { constructor(props) { super(props); } render() { return ( <div></div> ); } } export default Contacts; 详情 »
原文地址： https://my.oschina.net/osccreate/blog/785004 微服务是当前软件架构领域非常热门的词汇，在社区中也有很多热烈的讨论。因此，在 OSC 第 130 期高手问答中，我们策划的主题是“究竟什么才是微服务”，并邀请了黄勇作为高手嘉宾。 黄勇，现任特赞公司 CTO，曾任阿里巴巴公司系统架构师。对微服务架构与大数据技术有深入研究，具有丰富的网站架构设计经验与项目管理经验，擅长敏捷开发模式。国内开源软件推动者之一，活跃于“开源中国”社区网站，Smart 开源框架创始人，图书《架构探险：从零开始写Java Web框架》作者。热爱技术交流，乐于分享自己的工作经验与生活感悟。 微服务是近年来备受关注的话题，它的出现让我们想起了十年前的 SOA（Service-Oriented Architecture，面向服务架构），但它比传统的 SOA 更容易理解，也更容易实践，它将“面向服务”的思想做得更加彻底。 尤其是当国外的一些知名技术公司成功实践了微服务以后，这股热潮就吹遍了国内的大街小巷，我们也看到很多的项目使用了微服务，但实际上依然有不少朋友对于微服务有着不少疑惑。 详情 »
