前言 import router from './router'; import router from '../../router'; import router from './../../../router'; 如上,或许我们在项目中经常需要引入一些文件夹,入后在路径上就会出现好多的 ../../,并且一旦换个文件夹,都得重新检出 import 是否正确 一劳永逸 目录机构 ├── component ├── .... └── router └── index.js 黑魔法 在 route

最近在看Nuxt开发vue项目的视频,视频中讲到Nuxt项目不支持es6的import写法.并提供了解决方案: 1.在package.json中添加我标红的部分: "scripts": { "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node", "build": "nuxt bu

模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样: //ES5 var React = require("react"); var { Component, PropTypes } = React; //引用React抽象组件 var ReactNative = require("react-native"); var { Image, Text, } = ReactNative; //引用具体的Reac

//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做.今天在此整理了一些ES5和ES6的写法对照表,希望大家以后读到ES5的代码,也能通过对照,在ES6下实现相同的功能. 1.在ES5里,如果使用CommonJS标准,引入React包基本通过require

很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做.今天在此整理了一些ES5和ES6的写法对照表,希望大家以后读到ES5的代码,也能通过对照,在ES6下实现相同的功能. 模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这

一.import与export的用法 1.import的几种用法 import defautName from 'modules.js'; import { export } from 'modules.js'; import { export as ex1 } from 'modules.js'; import { export1, export2 } from 'modules.js'; import { export1 as ex1, export2 as ex2 } from 'modu

很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做.今天在此整理了一些ES5和ES6的写法对照表,希望大家以后读到ES5的代码,也能通过对照,在ES6下实现相同的功能. 模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样: //E

vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加载较慢,而用require会将component分别打包成不同的js,按需加载,访问此路由时才会加载这个js,所以就避免进入首页时加载内容过多. require: 运行时调用,理论上可以运用在代码的任何地方,import:编译时调用,必须放在文件开头 示例: import写法: import use

页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import.外部引用CSS两种方式link和@import的方式分别是: link写法: <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> @impo

这次的优化我公司项目主包只减小了32kb,但是减小的不仅仅是主包,所有分包均在没有改动任何业务代码的情况下完成了压缩空间的优化. 主包分包压缩空间的优化都要视项目而定,32kb只是我公司的小程序项目. 还有一点需要提前说明,此优化我公司项目因为主包够用了就还没有正式使用,不保证完全没有问题,所以要辛苦测试了. 插件 uni-optimize 是我看了uni源码之后发现的所有可安全优化的地方,包括压缩空间和提升打包速度2个方面 uni-optimize中的fix-ensure-import-plu

layout: post title: "WWDC 2013 Session笔记 - Xcode5和ObjC新特性" date: 2013-06-13 10:05 comments: true categories: 能工巧匠集 published: false 这是我的WWDC2013系列笔记中的一篇,完整的笔记列表请参看这篇总览.本文仅作为个人记录使用,不公开发布,请不要转载和随意发布,谢谢您的理解合作. 本文涉及到的WWDC2013 Session有 Session 400 Wh

异步脚本加载 阻塞性脚本 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕 浏览器是按照从上到下的顺序解析页面,因此正常情况下,JavaScript脚本的执行顺序也是从上到下的,即页面上先出现的代码或先被引入的代码总是被先执行,即使是允许并行下载JavaScript文件时也是如此.注意我们这里标红了"正常情况下",原因是什么呢?我们知道,在HTML中加入JavaScrip

我们都知道css有3种基本设置方式即 1.行内也叫嵌入式 例如: <div style='background:red'></div> 2.内联式,在html文件中用style标签包裹着的 例如: <html> <style type='text/css'> div{ background:red; } </style> </html> 3.链接式,在html文件中用link标签引用进来着的 例如: <html> <

一.了解index.ios.js React-Native就是在开发效率和用户体验间做的一种权衡.React-native是使用JS开发,开发效率高.发布能力强,不仅拥有hybrid的开发效率,同时拥有native app相媲美的用户体验.让我们使用以下react native命令生成一个项目. react-native init demo --verbose 现在让我们用编辑器打开index.ios.js文件,分析代码结构: import React, { Component } from '

Welcome to Xcode 5 这是我的WWDC2013系列笔记中的一篇,完整的笔记列表请参看这篇总览.本文仅作为个人记录使用,也欢迎在许可协议范围内转载或使用,但是还烦请保留原文链接,谢谢您的理解合作.如果您觉得本站对您能有帮助,您可以使用RSS或邮件方式订阅本站,这样您将能在第一时间获取本站信息. 本文涉及到的WWDC2013 Session有 Session 400 What's New in Xcode 5 Session 401 Xcode Core Concepts Sessi

前言: 这是阮一峰老师的ECMA6入门module一章的缩减,只抽取了我在项目中有用到的内容.带着问题去看老师的教程.感觉吸收更快,也明白了偶尔遇到的export不出来的问题. es6模块设计思想: ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量.CommonJS 和 AMD 模块,都只能在运行时确定这些东西.比如,CommonJS 模块就是对象,输入时必须查找对象属性. es6模块不是对象: // CommonJS模块 let { stat, e

Modules和Autolinking OC自从Apple接手后,一直在不断改进.随着移动开发带来的OC开发者井喷式增加,客观上也要求Apple需要提供各种良好特性来支持这样一个庞大的开发者社区.iOS4时代的GCD,iOS5时代的ARC,iOS6时代的各种简化,每年我们都能看到OC在成为一种先进语言上的努力.基于SmallTalk和runtime,本身是C的超集,如此"根正苗红"的一门语言,在今年也迎来的新的变化. 今年OC的最大变化就是加入了Modules和Autolinking.

https://robertknight.github.io/posts/webpack-dll-plugins/ webpack一般会把一个文件里import/require的文件都会打包在一起,最近就在做这方面的工作,文件全部打包在一起了 对服务器的请求确实减少了,可是对于jquery和jquery的插件如果在每个文件重复打包,文件大了加载会很慢,而且也没法给jquery和插件做缓存,因为像jquery这样的库 一般是可以放在CDN缓存的,如果如果每个人文件重复打包是完全没法做缓存处理的.

前端的dva项目开发时,遇到个很郁闷的问题,用es6的语法简单的export一个变量出来,在其他js中import使用,结果就报错了.   export写法如下: const enUS = { account: "account:", password: "password:", userLogin: "User Login" }; export default enUS; 看起来没什么问题,对吧?   import写法如下: import en

mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写数据来调用,第二种是编写 服务+数据模拟真实接口(可在network查看) Mock对象API用例查看(推荐只看这个就可以) 官方mock定义api查询 第一种方式,编写mock 可以写完整action url:http://localhost/login 同一域下,也可以只写api形式:/logi

变量 1. let 和 const 声明的变量不在window上了 2. es6中对于块级作用域里的函数声明实现不统一,要避免在大括号里声明函数,尽量用函数表达式来替代. 3. let和const声明的变量有暂时性死区 解构赋值 1. 解构赋值的本质是模式匹配,冒号左侧是模式,冒号右侧才是要赋值的变量.没有冒号的写法是冒号左右相同时的简写版本. 2. 解构赋值可以有默认值 3. 想跳过可以用逗号[, b, c] = [1, 2, 3] 4. 函数的传参括号其实就相当于一个隐形的数组解构赋值,va