Skip to main content

Home/ Larvata/ Group items tagged jquery

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
張 旭

javascript - How do I "think in AngularJS" if I have a jQuery background? - Stack Overflow - 0 views

stackoverflow.com/...-if-i-have-a-jquery-background

jquery javascript angular programming architecture development google angularjs web

shared by 張 旭 on 02 Oct 13 - No Cached
  • in AngularJS, we have a separate model layer that we can manage in any way we want, completely independently from the view.
  • keep your concerns separate
  • do DOM manipulation and augment your view with directives
  • ...34 more annotations...
  • DI means that you can declare components very freely and then from any other component, just ask for an instance of it and it will be granted
  • do test-driven development iteratively in AngularJS!
  • only do DOM manipulation in a directive
  • with ngClass we can dynamically update the class;
  • ngBind allows two-way data binding;
  • ngShow and ngHide programmatically show or hide an element;
  • The less DOM manipulation, the easier directives are to test, the easier they are to style, the easier they are to change in the future, and the more re-usable and distributable they are.
  • still wrong.
  • Before doing DOM manipulation anywhere in your application, ask yourself if you really need to.
  • a few things wrong with this
  • jQuery was never necessary
  • use angular.element and our component will still work when dropped into a project that doesn't have jQuery.
  • just use angular.element
  • the element that is passed to the link function would already be a jQuery element!
  • directives aren't just collections of jQuery-like functions
  • Directives are actually extensions of HTML
  • If HTML doesn't do something you need it to do, you write a directive to do it for you, and then use it just as if it was part of HTML.
  • think how the team would accomplish it to fit right in with ngClick, ngClass, et al.
  • Don't even use jQuery. Don't even include it.
  • ry to think about how to do it within the confines the AngularJS.
  • In jQuery, selectors are used to find DOM elements and then bind/register event handlers to them.
  • Views are (declarative) HTML that contain AngularJS directives
  • Directives set up the event handlers behind the scenes for us and give us dynamic databinding.
  • Views are tied to models (via scopes). Views are a projection of the model
  • In AngularJS, think about models, rather than jQuery-selected DOM elements that hold your data.
  • AngularJS uses controllers and directives (each of which can have their own controller, and/or compile and linking functions) to remove behavior from the view/structure (HTML). Angular also has services and filters to help separate/organize your application.
  • Think about your models
  • Think about how you want to present your models -- your views.
  • using the necessary directives to get dynamic databinding.
  • Attach a controller to each view (using ng-view and routing, or ng-controller)
  • Make controllers as thin as possible.
  • You can do a lot with jQuery without knowing about how JavaScript prototypal inheritance works.
  • jQuery is a library
  • AngularJS is a beautiful client-side framework
張 旭

A Tour of Rails' jQuery UJS - 0 views

robots.thoughtbot.com/a-tour-of-rails-jquery-ujs

rails jquery javascript frontend helper

shared by 張 旭 on 03 Oct 16 - No Cached
  • “I should really figure out what that does someday.”
  • today is that day
  • jquery-ujs wires event handlers to eligible DOM elements to provide enhanced functionality.
  • ...11 more annotations...
  • In most cases, the eligible DOM elements are identified by HTML5 data attributes.
  • using JavaScript to progressively enhance the user experience for capable browsers without negatively impacting clients that do not support or do not enable JavaScript.
    • 張 旭
      張 旭 on 03 Oct 16
       
      讓 user 有更好體驗，但是也不影響到那些沒有 JS 支援的 user
  • jquery-ujs attaches a handler to links with the data-method attribute
  • When the link is clicked, the handler constructs an HTML form along with a hidden input that sets the _method parameter to the requested HTTP verb
  • jquery-ujs attaches a handler to links or forms with the data-confirm attribute that displays a JavaScript confirmation dialog
  • Users double click links and buttons all the time.
  • Links and buttons that have a data-disable-with attribute get a click handler that disables the element and updates the text of the button to that which was provided in the data attribute and disables the button.
    • 張 旭
      張 旭 on 03 Oct 16
       
      優雅地處理了使用者重複點擊傳送按鈕的問題。
  • If the action is performed via AJAX, the handler will re-enable the button and reset the text when the request completes.
  • Thanks to jquery-ujs and Rails’ respond_with, setting remote: true is likely the quickest way to get your Rails application making AJAX requests.
  • support both AJAX and standard requests at the same time.
  • Cross-Site Request Forgery (CSRF) is an attack wherein the attacker tricks the user into submitting a request to an application the user is likely already authenticated to.
張 旭

AngularJS for jQuery Developers | Art & Logic Blog - 0 views

blog.artlogic.com/...ngularjs-for-jquery-developers

jquery angularjs javascript development programming

shared by 張 旭 on 06 Oct 13 - No Cached
  • Angular does not treat HTML or JavaScript as a bug that needs to be fixed
  • JavaScript code treats DOM in an imperative manner: take this node and that attribute, look at its value, do this or that.
  • Direct manipulation of the DOM is not only unnecessary, it is discouraged in the Angular approach.
  • ...11 more annotations...
  • DOM should be specified in views
  • data in scopes
  • functionality in controller
  • non-trivial transformations in custom filters and directives.
  • Binding a DOM value to a model in a controller scope
  • Any controller that needs to use this JSON data, can do so by including DataSource as one of the controller parameters
  • Include $http in the parameters.
  • Include $log as your controller function argument.
  • What happens internally is this: Angular analyzes your function’s source code, finds the arguments, and infers from them the services your code requires.
    • 張 旭
      張 旭 on 06 Oct 13
       
      這段好像就是在講丟參數進去時，AngularJS 會判斷。 不管順序，但是名稱好像需要固定，而且要有 $ 號。
  • Angular predefines reasonable defaults for getting, setting, deleting, and querying records.
crazylion lee

Cytoscape.js - 0 views

cytoscape.github.io/cytoscape.js

javascript visualization

shared by crazylion lee on 22 Feb 14 - No Cached
  • crazylion lee on 22 Feb 14
     
    A JavaScript graph library for analysis and visualisation (compatible with CommonJS/Node.js, jQuery 1.4+, and plain JavaScript)
張 旭

Asset Pipeline - Ruby on Rails 指南 - 0 views

guides.ruby-china.org/asset_pipeline.html

shared by 張 旭 on 30 Jan 15 - No Cached
  • 清单文件或帮助方法
    • 張 旭
      張 旭 on 30 Jan 15
       
      清單文件是指：application.css 跟 application.js
  • Sprockets 会按照搜索路径中各路径出现的顺序进行搜索。默认情况下，这意味着 app/assets 文件夹中的静态资源优先级较高，会遮盖 lib 和 vendor 文件夹中的相应文件
  • 如果静态资源不会在清单文件中引入，就要添加到预编译的文件列表中，否则在生产环境中就无法访问文件。
  • ...36 more annotations...
  • 程序中使用了 jQuery 代码库和许多模块，都保存在 lib/assets/javascripts/library_name 文件夹中，那么 lib/assets/javascripts/library_name/index.js 文件的作用就是这个代码库的清单。清单文件中可以按顺序列出所需的文件，或者干脆使用 require_tree 指令。
  • 如果使用 Turbolinks（Rails 4 默认启用），加上 data-turbolinks-track 选项后，Turbolinks 会检查静态资源是否有更新，如果更新了就会将其载入页面
  • config.assets.paths 包含标准路径和其他 Rails 引擎添加的路径。
  • 链接不存在的资源（也包括链接到空字符串的情况）会在调用页面抛出异常。
  • 关闭标签不能使用 -%> 形式
  • Sprockets 通过清单文件决定要引入和伺服哪些静态资源
  • 在 JavaScript 文件中，Sprockets 的指令以 //= 开头。在上面的文件中，用到了 require 和 the require_tree 指令。
  • app/assets/javascripts/application.js
  • require_tree 指令告知 Sprockets 递归引入指定文件夹中的所有 JavaScript 文件。文件夹的路径必须相对于清单文件。也可使用 require_directory 指令加载指定文件夹中的所有 JavaScript 文件，但不会递归。
  • Sprockets 会按照从上至下的顺序处理指令，但 require_tree 引入的文件顺序是不可预期的，不要设想能得到一个期望的顺序。
  • app/assets/stylesheets/application.css
  • 不管创建新程序时有没有指定 --skip-sprockets 选项，Rails 4 都会生成 app/assets/javascripts/application.js 和 app/assets/stylesheets/application.css
  • 如果多次调用 require_self，只有最后一次调用有效
  • 如果想使用多个 Sass 文件，应该使用 Sass 中的 @import 规则，不要使用 Sprockets 指令。
  • 清单文件可以有多个。
  • 如果使用默认的 gem，生成控制器或脚手架时，会生成 CoffeeScript 和 SCSS 文件，而不是普通的 JavaScript 和 CSS 文件。
  • 在开发环境中，或者禁用 Asset Pipeline 时，这些文件会使用 coffee-script 和 sass 提供的预处理器处理，然后再发给浏览器
  • 启用 Asset Pipeline 时，这些文件会先使用预处理器处理，然后保存到 public/assets 文件夹中，再由 Rails 程序或网页服务器伺服
  • 添加额外的扩展名可以增加预处理次数，预处理程序会按照扩展名从右至左的顺序处理文件内容。所以，扩展名的顺序要和处理的顺序一致
  • 预处理器的执行顺序很重要
  • 在开发环境中也可启用压缩功能，检查是否能正常运行。需要调试时再禁用压缩即可。
  • 默认情况下，Rails 认为静态资源已经事先编译好了，直接由网页服务器伺服。
  • 般情况下，请勿修改 config.assets.digest 的默认值
  • 可在部署时编译静态资源
  • 在多次部署之间共用这个文件夹是十分重要的，这样只要缓存的页面可用，其中引用的编译后的静态资源就能正常使用。
  • 默认编译的文件包括 application.js、application.css 以及 gem 中 app/assets 文件夹中的所有非 JS/CSS 文件（会自动加载所有图片）
  • 如果想编译其他清单，或者单独的样式表和 JavaScript，可以添加到 config/application.rb 文件中的 precompile 选项
  • 设置编译所有静态资源
  • manifest-md5hash.json 的文件，列出所有静态资源和对应的指纹
  • 把 Expires 报头设置为很久以后
  • 在本地预编译后，可以把编译好的文件纳入版本控制系统，再按照常规的方式部署
  • 实时编译消耗的内存更多，比默认的编译方式性能更低，因此不推荐使用
  • 如果用 CDN 分发静态资源，要确保文件不会被缓存，因为缓存会导致问题。如果设置了 config.action_controller.perform_caching = true，Rack::Cache 会使用 Rails.cache 存储静态文件，很快缓存空间就会用完。
  • Sprockets 默认使用的公开路径是 /assets
  • X-Sendfile 报头的作用是让服务器忽略程序的响应，直接从硬盘上伺服指定的文件
  • 为 Rails 提供标准 JavaScript 代码库的 jquery-rails gem 是个很好的例子。这个 gem 中有个引擎类，继承自 Rails::Engine。添加这层继承关系后，Rails 就知道这个 gem 中可能包含静态资源文件，会把这个引擎中的 app/assets、lib/assets 和 vendor/assets 三个文件夹加入 Sprockets 的搜索路径中。
張 旭

bbatsov/rails-style-guide: A community-driven Ruby on Rails 4 style guide - 0 views

github.com/...rails-style-guide

rails programming code style

shared by 張 旭 on 07 May 17 - No Cached
  • custom initialization code in config/initializers. The code in initializers executes on application startup
  • Keep initialization code for each gem in a separate file with the same name as the gem
  • Mark additional assets for precompilation
  • ...90 more annotations...
  • config/environments/production.rb
  • Create an additional staging environment that closely resembles the production one
  • Keep any additional configuration in YAML files under the config/ directory
  • Rails::Application.config_for(:yaml_file)
  • Use nested routes to express better the relationship between ActiveRecord models
  • nest routes more than 1 level deep then use the shallow: true option
  • namespaced routes to group related actions
  • Don't use match to define any routes unless there is need to map multiple request types among [:get, :post, :patch, :put, :delete] to a single action using :via option.
  • Keep the controllers skinny
  • all the business logic should naturally reside in the model
  • Share no more than two instance variables between a controller and a view.
  • using a template
  • Prefer render plain: over render text
  • Prefer corresponding symbols to numeric HTTP status codes
  • without abbreviations
  • Keep your models for business logic and data-persistence only
  • Avoid altering ActiveRecord defaults (table names, primary key, etc)
  • Group macro-style methods (has_many, validates, etc) in the beginning of the class definition
  • Prefer has_many :through to has_and_belongs_to_many
  • self[:attribute]
  • self[:attribute] = value
  • validates
  • Keep custom validators under app/validators
  • Consider extracting custom validators to a shared gem
  • preferable to make a class method instead which serves the same purpose of the named scope
  • returns an ActiveRecord::Relation object
  • .update_attributes
  • Override the to_param method of the model
  • Use the friendly_id gem. It allows creation of human-readable URLs by using some descriptive attribute of the model instead of its id
  • find_each to iterate over a collection of AR objects
  • .find_each
  • .find_each
  • Looping through a collection of records from the database (using the all method, for example) is very inefficient since it will try to instantiate all the objects at once
  • always call before_destroy callbacks that perform validation with prepend: true
  • Define the dependent option to the has_many and has_one associations
  • always use the exception raising bang! method or handle the method return value.
  • When persisting AR objects
  • Avoid string interpolation in queries
  • param will be properly escaped
  • Consider using named placeholders instead of positional placeholders
  • use of find over where when you need to retrieve a single record by id
  • use of find_by over where and find_by_attribute
  • use of where.not over SQL
  • use heredocs with squish
  • Keep the schema.rb (or structure.sql) under version control.
  • Use rake db:schema:load instead of rake db:migrate to initialize an empty database
  • Enforce default values in the migrations themselves instead of in the application layer
  • change_column_default
  • imposing data integrity from the Rails app is impossible
  • use the change method instead of up and down methods.
  • constructive migrations
  • use models in migrations, make sure you define them so that you don't end up with broken migrations in the future
  • Don't use non-reversible migration commands in the change method.
  • In this case, block will be used by create_table in rollback
  • Never call the model layer directly from a view
  • Never make complex formatting in the views, export the formatting to a method in the view helper or the model.
  • When the labels of an ActiveRecord model need to be translated, use the activerecord scope
  • Separate the texts used in the views from translations of ActiveRecord attributes
  • Place the locale files for the models in a folder locales/models
  • the texts used in the views in folder locales/views
  • config/application.rb config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}')]
  • I18n.t
  • I18n.l
  • Use "lazy" lookup for the texts used in views.
  • Use the dot-separated keys in the controllers and models
  • Reserve app/assets for custom stylesheets, javascripts, or images
  • Third party code such as jQuery or bootstrap should be placed in vendor/assets
  • Provide both HTML and plain-text view templates
  • config.action_mailer.raise_delivery_errors = true
  • Use a local SMTP server like Mailcatcher in the development environment
  • Provide default settings for the host name
  • The _url methods include the host name and the _path methods don't
  • _url
  • Format the from and to addresses properly
  • default from:
  • sending html emails all styles should be inline
  • Sending emails while generating page response should be avoided. It causes delays in loading of the page and request can timeout if multiple email are sent.
  • .start_with?
  • .end_with?
  • &.
  • Config your timezone accordingly in application.rb
  • config.active_record.default_timezone = :local
  • it can be only :utc or :local
  • Don't use Time.parse
  • Time.zone.parse
  • Don't use Time.now
  • Time.zone.now
  • Put gems used only for development or testing in the appropriate group in the Gemfile
  • Add all OS X specific gems to a darwin group in the Gemfile, and all Linux specific gems to a linux group
  • Do not remove the Gemfile.lock from version control.
crazylion lee

slick - the last carousel you'll ever need - 1 views

kenwheeler.github.io/slick

slider carousel jquery plugin javascript

shared by crazylion lee on 21 Oct 16 - No Cached
  • crazylion lee on 21 Oct 16
     
    "the last carousel you'll ever need"
張 旭

Handlebars.js: Minimal Templating on Steroids - 0 views

handlebarsjs.com

javascript mustache jquery template library

shared by 張 旭 on 26 Sep 16 - No Cached
  • Handlebars templates look like regular HTML, with embedded handlebars expressions.
  • don't want Handlebars to escape a value, use the "triple-stash", {{{.
  • Handlebars will not escape a Handlebars.SafeString
  • ...13 more annotations...
  • block helpers are identified by a # preceeding the helper name and require a matching closing mustache, /, of the same name.
  • use Handlebars templates with more raw JSON objects.
  • Nested handlebars paths can also include ../ segments, which evaluate their paths against a parent context.
  • The exact value that ../ will resolve to varies based on the helper that is calling the block.
  • reference the same permalink value even though they are located within different blocks.
  • name conflict resolution between helpers and data fields via a this reference
  • comments will not be in the resulting output.
  • register a helper with the Handlebars.registerHelper method.
  • Helpers receive the current context as the this context of the function.
  • returns HTML that you do not want escaped, make sure to return a new Handlebars.SafeString
  • literal values passed to them either as parameter arguments or hash arguments
  • Handlebars partials allow for code reuse by creating shared templates
  • Handlebars.registerPartial
crazylion lee

LeadDyno/intercooler-js: Making AJAX as easy as anchor tags - 0 views

github.com/...intercooler-js

ajax anchor jquery

shared by crazylion lee on 11 Nov 16 - No Cached
  • crazylion lee on 11 Nov 16
     
    "Making AJAX as easy as anchor tags"
張 旭

SweetAlert - 0 views

t4t5.github.io/sweetalert

alert javascript modal jquery

shared by 張 旭 on 24 Nov 16 - No Cached
  • 張 旭 on 24 Nov 16
     
    "Delete"
crazylion lee

Cleave.js - Format input text content when you are typing - 0 views

nosir.github.io/cleave.js

jquery plugin input

shared by crazylion lee on 18 Jul 16 - No Cached
  • crazylion lee on 18 Jul 16
     
    "Format your content when you are typing"
crazylion lee

Dropzone.js - 0 views

www.dropzonejs.com

javascript upload jquery fileupload drag drop file

shared by crazylion lee on 01 Apr 16 - No Cached
  • crazylion lee on 01 Apr 16
     
    "DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews."
張 旭

从达标到卓越 -- API 设计之道 | Taobao FED | 淘宝前端团队 - 0 views

taobaofed.org/...index.html

api system development programming taobao

shared by 張 旭 on 21 Feb 17 - No Cached
  • 高级语言和自然语言（英语）其实相差无几，因此正确地使用（英语的）词法和语法是程序员最基本的素养。
  • 只要能够足够接近人类的日常语言和思维，并且不需要引发额外的大脑思考，那就是易用
  • 词法和语法
  • ...53 more annotations...
  • 语义
  • 版本控制
  • 正确地拼写一个单词是底线
  • 认真地注意 IDE 的 typo 提示（单词拼写错误提示）
  • state 是整个 Component 状态机中的某一个特定状态，既然描述为了状态机，那么状态和状态之间是互相切换的关系。所以对于初始状态，用 initial 来修饰。
  • props 是指 Element 的属性，要么是不存在某个属性值后来为它赋值，要么是存在属性的默认值后来将其覆盖。所以这种行为，default 是合理的修饰词。
  • 成对出现的词应该是：show & hide、open & close。
  • 成对出现的正反义词不可混用
  • 在复数的风格上保持一致，要么所有都是 -s，要么所有都是 -list。
  • 涉及到诸如字典（Dictionary）、表（Map）的时候，不要使用复数！
  • 「map」本身已经包含了这层意思，不需要再用复数去修饰它
  • 最好遵从惯例，使用名词组合 success 和 failure
  • 方法命名用动词
  • 属性命名用名词
  • 布尔值类型用形容词
  • 首字母缩写词的所有字母均大写。（如果某个语言环境有明确的业界惯例，则遵循惯例。）
  • 如果什么都没定，也没业界惯例，那么把单词写全了总是不会错的。
  • React 采用了 componentDidMount 这种过去时风格，而没有使用 componentMounted，从而跟 componentWillMount 形成对照组，方便记忆。
  • 尽量避免使用被动语态。因为被动语态看起来会比较绕，不够直观，因此我们要将被动语态的 API 转换为主动语态。
  • 无论是友好的参数设置，还是让人甜蜜蜜的语法糖，都体现了程序员的人文关怀。
  • 在文件（file）层面同样如此，一个文件只编写一个类，保证文件的职责单一（当然这对很多语言来说是天然的规则）。
  • 将混杂在一个大坨函数中的两件独立事情拆分出去，保证函数（function）级别的职责单一。
  • 现实中的 OOP 编程场景难免触及副作用。
  • 函数本身的运行稳定可预期
  • 函数的运行不对外部环境造成意料外的污染
  • SPM 是阿里通用的埋点统计方案
  • 对外部造成污染一般是两种途径：一是在函数体内部直接修改外部作用域的变量，甚至全局变量；二是通过修改实参间接影响到外部环境，如果实参是引用类型的数据结构。
  • 控制读写权限
  • 优化参数顺序。相关性越高的参数越要前置
  • 可省略的参数后置，以及 为可省略的参数设定缺省值
  • 将可省参数后置同样是最佳实践。
  • 重载（overload）
  • 如果入口参数无法进行有效区分，不要选择重载
  • 根本不明白某个 Boolean 标记位是用来干嘛的，这大大降低了用户的开发体验，以及代码可读性。
    • 張 旭
      張 旭 on 21 Feb 17
       
      我在 ADATA 的 message saver 犯了一樣的錯誤。
  • 同时支持单个和批量的处理，可以降低用户的认知负担。
  • 让 setter 型 API 始终返回 this。这是 jQuery 为我们带来的经典启示 —— 通过返回 this，来产生一种「链式调用（chaining）」的风格
  • 对异步操作都返回一个 Promise
  • 对于一些创造出来的、业务特色的词汇，如果不能用英语简明地翻译，就直接用拼音
  • 一致性可以最大程度降低信息熵
  • 打 log 要么都用中文，要么都用英文。
  • 所有的 setter 操作必须返回 this
  • 「大版本号」即「语义化版本命名」<major>.<minor>.<patch> 中的第一位 <major> 位
  • 接口的扩展方式有很多，比如：继承（extend）、组合（mixin）、装饰（decorate）
  • 在逻辑上确实存在派生关系，并且需要沿用基类行为同时自定义行为的，采用重量级的继承
  • 仅仅是扩充一些行为功能，但是逻辑上压根不存在父子关系的，使用组合
  • 装饰手法更多应用于给定一个接口，将其包装成多种适用于不同场景新接口的情况
  • $.fn.customMethod = function() {};
  • 合理的做法是新增一个 subType 字段
  • 抽象级别一般来说越高越好，将 API 设计成业务无关的，更通用，而且方便扩展
  • 利用多态性（Polymorphism）构建 Consistent APIs。
  • 作为 API 的开发者，一定要提供足够场景适用的 API，来引导我们的用户，不要让他们做出一些出人意料的「妙用」之举
  • 写代码，就像写作，而设计 API 好比列提纲。
  • Think about future, design with flexibility, but only implement for production.
1 - 20 of 23 Next ›
Showing 20▼ items per page