js

Page 1 of 5

Archives

文件夹

在Jquery里面offset()方法是返回或设置匹配元素相对于文档的偏移(位置)。 如果不用Jquery想取得某dom元素的文档偏移,理所当然想到了源生的offsetTop/offsetLeft。   然而~ 源生的offsetTop/offsetLeft返回的并不是相对于文档,而是相对于父级。   那么~ 获得相对于文档的偏移,我们就需要做一下处理。 首先我们要用到offsetParent这个属性。   jquery也有个同名方法,作用是返回最近的祖先定位元素。 注意哦,不是父级,是祖先定位元素。   所以思路就是,把自己包括所有祖先的offsetTop/offsetLeft相加,就得到了文档的相对偏移。 function getElementMouseCoords(ele){ var o = ele, t = 0, l = 0; while(o.tagName != ‘BODY’){ t += o.offsetTop; l += o.offsetLeft; o = o.offsetParent; } return { top:t, left:l }; };

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 地理位置搜索 在 Xcode 中,打开 Info.plist 添加一个新的 key,在编辑器内部单击鼠标右键并且选择 Add Row。使用NSLocationWhenInUseUsageDescription 作为 key 名并且使用下面的值: PropertyFinder would like to use your location to find nearby properties 下面是当你添加了新的 key 后,所得到的属性列表: 你将把这个关键的细节提示呈现给用户,方便他们请求访问当前位置。 打开 SearchPage.js,找到用于渲染 Location 按钮的TouchableHighlight,然后为其添加下面的属性值: onPress={this.onLocationPressed.bind(this)} […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 可点击样式 这些 React Native 的原生代码现在应该理解起来轻车熟路了,所以本教程将会加快速度。 在 SearchResults.js 中,destructuring 声明后面添加以下语句来定义样式: var styles = StyleSheet.create({ thumb: { width: 80, height: 80, marginRight: 10 }, textContainer: { flex: 1 }, separator: { height: 1, backgroundColor: […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 作者:kmokidd 链接:http://zhuanlan.zhihu.com/FrontendMagazine/19996445 来源:知乎 执行 API 请求 还是 SearchPage.js 文件中,更新构造器中的初始 state 添加一个message 变量: this.state = { searchString: ‘london’, isLoading: false, message: ” }; 在 render 内部,将下面的代码添加到 UI 的底部: <Text style={styles.description}>{this.state.message}</Text> 你需要使用这个为用户展示多种信息。 […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 添加组件状态 每个 React 组件都带有一个key-value存储的状态对象,你必须在组件渲染之前设置其初始状态。 在 SearchPage.js 中,我们对 SearchPage 类中,render方法前添加以下的代码。 constructor(props) { super(props); this.state = { searchString: ‘london’ }; } 现在你的组件拥有一个状态变量:searchString ,且初始值被设置为 london 。 这时候你需要利用起组件中的状态了。在render方法中,用以下的代码替换TextInput元素中的内容: <TextInput style={styles.searchInput} value={this.state.searchString} placeholder=’Search via name or postcode’/> […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 你好 JSX 的世界 你当前的应用程序会使用 React.createElement 来构建应用 UI ,React会将其转换到原生环境中。在当前情况下,你的JavaScript代码是完全可读的,但一个更复杂的 UI 与嵌套的元素将迅速使代码变成一大坨。 确保应用程序仍在运行,然后回到你的文本编辑器中,编辑 PropertyFinderApp.js 。修改组件 render 方法的返回语句如下: return <React.Text style={styles.text}>Hello World (Again)</React.Text>; 这是 JSX ,或 JavaScript 语法扩展,它直接在你的 JavaScript 代码中混合了类似 HTML 的语法;如果你是一个 web 开发人员,应该对此不陌生。在本篇文章中你将一直使用 JSX […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了!基于 PhoneGap 使用 JavaScript 和 HTML5 开发 iOS 应用已经有好几年了,那 React Native 有什么牛的?React Native 真的很牛,让大家兴奋异常的主要原因有两点: 可以基于 React Native使用 JavaScript 编写应用逻辑,UI 则可以保持全是原生的。这样的话就没有必要就 HTML5 的 UI […]

在mac全局上安装npm的插件会有权限问题,一般来说大家会在前面加sudo来解决。 可是有的插件在自行安装npm插件的时候不会加sudo,比如react在初始化项目的时候。 下面这个命令一劳永逸解决问题。 sudo chown -R ‘whoami’ /usr/local 详情可参阅github上的解决方案:https://github.com/npm/npm/issues/5922 当然也可以改的更彻底一些 sudo chown -R ‘whoami’:staff /usr/local sudo chown -R ‘whoami’:staff /Users/’whoami’/.npm 另外关于npm下载速度慢得问题可以使用淘宝的镜像库 npm install- g cnpm –registry=http://registry.npm.taobao.org

碰到以gbk做基础编码的项目,就可能避免不了编码混乱导致乱码的问题(水平问题和团队问题的产物)。 这里只说js的解决方案。   在script标签里面有charset这个参数,我们将该参数设置为你js文件的编码模式就可以解决文件中的乱码问题。 现在市面上的主流IDE都支持在下面状态栏显示编码模式的功能,没看到的话看下帮助。 比如你的文件是一个utf-8编码的文件,我们只要 <script src=”xxx.js” charset=”utf-8″></script> 就可以,不管你的页面是什么编码,都以将该js文件以utf-8的方式读取并执行。  

本文章所提到的书为《AngularJs权威教程》 Ari Lerner著   绑定策略涉及到4个方式,分别为:“@”,=”,“&” 书中对于绑定策略的描述:   本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域变量。 @(or @attr)   双向绑定:通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就想普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变。 =(or =attr)   父级作用域绑定:通过&符号可以对父级作用域进行绑定,以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。 要使调用带有一个参数的父方法,我们需要传递一个对象,这个对象的键是参数的名称,值是要传递给参数的内容。 &(or &attr)   因为书里面的描述比较简单,这里做一些补充说明: 从传递的内容来说 @ 传递过来的是一个字符串 = 传递过来的是一个字符串或对象 & 这里一定不要认为&传递的是一个函数,实际上父级作用域绑定传递的是一个函数的描述,通过该描述和父级作用域的函数建立联系然后执行。   简单的例子,一个有参函数的定义(无参函数比较容易理解这里就不做说明了): //指令HTML部分 <plug-in callback=”fun(value)”><plug-in> <script type=”text/javascript”> //对绑定的方法进行设计 app.run([‘$rootScope’,function($rootScope){ $rootScope.fun = function(value){ console.log(value); } }]); //指令的设计 app.directive(‘plugIn’,[function(){ return{ replace:true, scope:{callback:”&”}, template:'<div class=”demo”></div>’, restrict: “EA”, link:function($scope){ //执行绑定的方法 $scope.callback({value:1,data:2}); […]