import、require、export、module.exports 混合使用详解 本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅! 前言自从使用了 es6 的模块系统后,各种地方愉快地使用 import export default,但也会在老项目中看到使用commonjs规范的 require module.exports。甚至有时候也会常常看到两者互用的场景。使用没有问题,但其中的关联与区别不得其解,使用起来也糊里糊涂。比如: 为何有的地方使用 require 去引用一个模块时需要加上 default? require('xx').default 经常在各大UI组件引用的文档上会看到说明 import { button } from 'x ...
閱讀全文 »

尚妆达人店 UI 组件化 工程实践(weex vue) 本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅! 前言尚妆大前端团队使用 weex 进行三端统一开发有一段时间了,截止本文发表「达人店」APP大部分页面都已经用 weex 进行了重构,在此期间也积累了一些基础组件和业务组件。 之前维护组件的方式是在达人店项目的工程内维护一个 components 文件夹,随日常开发迭代,并行需求与开发人员的增多,这种维护方式也暴露出一些问题。 1、开发人员可以随意跟随需求开发修改 components 内的组件,破坏约定好的规范,或埋入 bug。 2、定义组件缺少规范,比如在某个需求开发中, A 开发人员觉得这个功能可以抽离成组件,就直接在 components 内定义并使用,但实际却 ...
閱讀全文 »

javascript设计模式与开发实践第一章鸭子类型,无需关注对象本身,关注对象的行为。 在动态类型语言的面向对象设计中,鸭子类型的概念至关重要。 多态:多态最根本的作用就是通过吧把过程化的条件分支语句转化为对象的多态性,从而消除这些条件分支语句。 this总是指向一个对象,但是具体指向哪个对象是在运行时基于函数的执行环境动态绑定的。 call和apply的用途: 改变this的指向,也可以理解成在函数调用的时候,把某个对象取代掉函数体内的this。 123456789var obj = { name: 'sven',}function getName() { console.log(this.name)}getName.ap ...
閱讀全文 »

weex 页面间传参前言我司在weex上的应用是保证三端统一,为了延续web开发体验,统一在三端的跳转都采用url的形式,即采用\组件,或者自定义的openUrl方法进行跳转。 假如现在点击B按钮跳转到/b.html页面,在vue文件中统一书写openUrl('/b.html')。H5中就是简单的调用window.location.href = /b.html,在native中会打开一个视图,然后去下载跟/b.html对应的b.min.jsjs文件,进行原生视图渲染。页面与js文件的映射关系以及如何维护可以翻阅之前的文章查看App的跳转规则的weex支持方案设计。 统一采用url跳转的方式进行页面跳转,为了传参方便,我们也统一采用在url后拼接参数的形式进行页面间传参。 正向 ...
閱讀全文 »

注:本文查看的源码是webpack1.x版本,2.x版本已经不存在这个问题,查看描述。 webpack1.x时代讨论地比较热烈的一个话题,就是UglifyJsPlugin插件为什么会对其他loader造成影响。我这里有个曾经遇到的问题,可以查看我为此编写的一个demo,有兴趣可以clone试验一下这个问题。 由postcss-loader、autoprefixer处理后的css如下,在开发环境一切ok: 1234567891011121314151617p { display: flex; justify-content: center;}===》》p { display: -webkit-box; display: -webkit-flex; dis ...
閱讀全文 »

javascript作为一门动态类型语言,具有很高的动态灵活性,当定义函数时,传入的参数可以是任意类型。但我们在实际编写函数逻辑时默认是对参数有一定要求的。这也容易导致预期参数与实际参数不符的情况,从而导致bug的出现。本文在这个层面探讨javascript检查参数的必要性。 为什么要进行类型检查?从两点常见的场景来看这个问题: 程序中期望得到的值与实际得到的值类型不相符,在对值进行操作的时候程序报错,导致程序中断。 举个我们最常见的调用服务端ajax请求取到返回值进行操作的例子: 123456ajax('/getContent', function (json) { // json的返回数据形式 // {data: 18} ...
閱讀全文 »

[译]HTML attribute与DOM property之间的区别? 原文:http://joji.me/en-us/blog/html-attribute-vs-dom-property 当我们通过js处理DOM对象时非常容易将attribute(特性)和property(属性)混淆。document.getElementById('test').getAttribute('id'),$('#test').attr('id'), document.getElementById('test').id还有$('#test').prop('id')三者都返回相同的id:“test ...
閱讀全文 »

js数值精度 近期在项目中有出现大数值的订单号9148368244236619在调用接口时自动变成9148368244236620的情况,导致请求失误。本文特意总结了出现这种情况的原因,以及js精度相关的情况。 jquery[.data()]方法在本次案例中,订单号是后端同步渲染到页面上的, 1<div class="j_OrderNumber" data-ordernumber="9148368244236619"></div> 呈现在页面上的订单号数值没有问题9148368244236619,前端此时想获取到这个订单号: 123var orderNumber = $('.j_OrderNumber).data(& ...
閱讀全文 »

基于vue2.0的weex实践(前端视角) 前提:这段时间将公司的几个用we写的weex页面用vue2.0进行了重构,客户端的weexsdk也更新到了0.10.0版本。这篇文章将会在前端视角写到一些新老版本之间有差异的地方。we老版本的实践文章 weex-vue-render v 0.10.0 ios weexSDK 0.10.0 android weexSDK 0.10.0 编译vue文件在we时代,对于业务代码text.we文件我们借助weex-loader以及webpack可以轻易的进行编译,得到最后需要的js。但是在vue时代,我们需要两个loader,weex-loader和vue-loader,对于公司接入来说我们不太会使用官方提供的脚手架工具,一般都是自己实现。这里容易产生混 ...
閱讀全文 »

分割webpack配置文件的多种方法(一) 将你的配置信息写到多个分散的文件中去,然后在执行webpack的时候利用--config参数指定要加载的配置文件,配置文件利用moduleimports导出。你可以在webpack/react-starter 看到是使用这种发方法的。 123456// webpack 配置文件|-- webpack-dev-server.config.js|-- webpack-hot-dev-server.config.js|-- webpack-production.config.js|-- webpack.config.js 12345678// npm 命令"scripts": { "test": & ...
閱讀全文 »