关注IMWeb前端社区公众号

  • 第一时间获得最新、最火的技术干货
  • 定期推送您所关注的专题文章
  • 和大牛们一起讨论前端技术
  • 获取IMWeb社区、前端相关的最新活动
热文 更多

  • React form 表单组件的解决方案

    一直以来,表单对于前端来说都是一个不得不面对的坑。而对于设计一个表单组件来说,主要需要考虑以下两点: * 各个元素如何排版布局 * 表单验证 各个元素如何排版布局 首先,整个表单可以分为多个表单项。而一个表单项从结构上可能会涉及到 6 个部分:label、前缀、表单元素(或自定义的表单元素)、后缀、说明文字,校验态。大概如下图: [http://imweb-io-1251594266.cos.ap-guangzhou.myqcloud.com/63b062e24631686548a11e16503fc40c.png] 大体 HTML 结构可以设计如下: div.f-item label.f-label // 如果需要标注required,子元素还要加个required判断 div.f-field div.f-element-wrap // 如果没有前后缀,可以不需要该层 span.f-prefix // 前缀 input.f-element // 输入框等表单元素

  • 使用 Python 爬取网页数据

    在需要过去一些网页上的信息的时候,使用 Python 写爬虫来爬取十分方便。 1. 使用 URLLIB.REQUEST 获取网页 urllib 是 Python 內建的 HTTP 库, 使用 urllib 可以只需要很简单的步骤就能高效采集数据; 配合 Beautiful 等 HTML 解析库, 可以编写出用于采集网络数据的大型爬虫; 注: 示例代码使用Python3编写; urllib 是 Python2 中 urllib 和 urllib2 两个库合并而来, Python2 中的 urllib2 对应 Python3中的 urllib.request 简单的示例: import urllib.request # 引入urllib.request response = urllib.request.urlopen('http://www.zhihu.com') # 打开URL html = response.read() # 读取内容

  • css菜鸡的自我救赎

    0. 前言 作为一个不喜欢写样式的前端,遇到了直接对外的活动页面的需求,一下炸出一堆问题: * 单位乱用,rem、vh、vw、px乱用甚至混在一起用 * html冗余,有时候一个div只是为了取margin * 一个页面用多种布局方案,flex、float、relative+top、absolute+top、margin,自己坑自己 * 各种随意,不严格按照视觉稿 理论倒是熟悉,但用起来还是一塌糊涂。于是,回头自我救赎一波,好好复习基础。flex、grid后面不多作研究,尤其是grid这种一两行就可以搞定很多复杂样式。如果我们不知道新技术是为了什么而来的,解决什么痛点,没有体验一下刀耕火种的时代,又没有一个良好的团队合作能力,做起项目来还真的不一定是“写页面太简单了”这种事情。 1. 一些实践方案深入浅出 1.1 PADDING 看到百度的顶部,你会想到什么方案呢?[https://user-gold-cdn.xitu.io/2018/10/14/16672b154f947885?w=2034&h=208&f=png&s=46954]

  • 移动端项目快速升级 react 16 指南

    背景 考虑到移动端性能,腾讯企鹅辅导移动端项目使用了更为轻量的 preact(7KB) 及其对应配套 preact-router 等, 考虑到 preact 对 react 的兼容不全、生态远不如 react 等问题,且 react 16 相当吸引人的特性包括: 1. 体积减少 * react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped). * react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped). * react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped). 2. 错误处理, 可通过定义一个组件专门捕获错误,当页面部分组件报错时兼容,更友好的用户体验 3. lazy 提供动态 import 组件,Suspense 实现代码分割 4. hook 的出现

  • 元编程之symbol

    元编程的概念有很多文章,通过操作更加底层的api做更多个性化的功能。一句话概括,就是 用代码来写代码 一些时候,写各种下划线、前后缀,为了实现一个唯一值或者秘密的特殊辅助值,用来辅助业务逻辑或者说作为一个私有的东西: const onlyone = 'im-only@@我就不信会重复'; const obj = {}; obj[onlyone] = 'xxx'; angular1暴露出来的对象里面,经常看见 $ 开头或者 $$ 开头的变量。 $ 开头是比较底层的变量了, $$ 开头的是更加底层的,而且我们是基本不会用上的。还有redux源码,首次初始化的action.type是 var type = '@@redux/PROBE_UNKNOWN_ACTION_' + Math.random().toString(36).substring(7).split('').join('.'); 种种例子,都可以看见,搞个花哨的名字,作为内部运行的辅助变量或者唯一变量使用。花时间想key名字,而且名字越写越长,是不是总感觉是一种麻烦?

热问 更多